Accentsconagua

Slik programmerer du med Yii2 Arbeid med aktivkomponenter

Kode
Share
Hva du skal skape

Hvis du spør, "Hva er Yii?" sjekk ut min tidligere opplæring: Introduksjon til Yii Framework, som vurderer fordelene med Yii og inneholder en oversikt over hva som er nytt i Yii 2.0, utgitt i oktober 2014.

I denne programmeringen med Yii2-serien, er jeg veiledende lesere i bruk av den nylig oppgraderte Yii2 Framework for PHP. I denne veiledningen vil jeg vise deg hvordan du legger til tilpassede JavaScript- og CSS-skript og biblioteker i Yii-programmet. Yii bruker et konsept som kalles Asset Bundles for å gjøre det enklere å administrere disse ressursene.  

For disse eksemplene fortsetter vi å bygge videre på det enkle statusprogrammet fra tidligere opplæringsprogrammer.

Bare en påminnelse, jeg deltar i kommentar tråder nedenfor. Jeg er spesielt interessert hvis du har forskjellige tilnærminger, flere ideer, eller ønsker å foreslå emner for fremtidige opplæringsprogrammer.

Hva er en aktivitetspakke?

Yii Asset Bundles representerer grupper av JavaScript og CSS-filer som må inkluderes sammen på bestemte sider eller over hele nettstedet. Asset Bundles gjør det enkelt å gruppere konkrete grupper av skript og stiler for bestemte områder av nettstedet ditt. For eksempel, i programmet Møteplanlegger kan jeg enkelt inkludere Google Places APIer bare på sidene der de trengs.

Her er et raskt eksempel på det. Vi lager en \ frontend \ eiendeler \ LocateAsset.php fil:

Da laster vi det i vår visningsfil - det er ganske enkelt, egentlig:
Når du ser kilden til vår side, ser du skriptene generert sammen med andre Yii2 standardverdier for skjemaer, Bootstrap, etc .:
       
I denne veiledningen skal jeg veilede deg gjennom å bruke Asset Bundles for å integrere karakter telling i vårt Status skjema. Vi bruker dette til å håndheve en tegngrense som ligner Twitters 140 tegn maksimum. 
Hvis du er interessert i å se dette i aksjon i Yii1.x, implementerte jeg denne funksjonen i Building With Twitter API: OAuth, Reading og Posting (Tuts +).
Bygg en Asset Bundle
Opprett Asset Bundle
I \eiendeler katalog, oppretter vi StatusAsset.php:
 * @since 2.0 * / class StatusAsset utvider AssetBundle public $ basePath = '@webroot'; offentlig $ baseUrl = '@web'; offentlig $ css = []; offentlig $ js = ['/js/jquery.simplyCountable.js', '/js/twitter-text.js', '/js/twitter_count.js', '/js/status-counter.js',]; offentlig $ avhenger = ['yii \ web \ YiiAsset', 'yii \ bootstrap \ BootstrapAsset',]; 
Jeg brukte en kombinasjon av jQuery simplyCountable plugin, twitter-text.js (et JavaScript-basert Twitter tekstbehandlingsskript) og et skript som gjorde det store løftet av URL-justeringer: twitter_count.js; I Twitter teller nettadresser som 20 tegn. Disse filene er alle inne \ Web \ js.
Jeg har også opprettet en dokument klar funksjon for å ringe dem inn \ web \ JS \ status-counter.js. Gjelder også Yii \ web \ YiiAsset i vår $ avhenger array vil sørge for at JQuery er lastet når vi instantierer denne aktiva.
$ (dokument) .ready (funksjon () $ ('# status-melding'). simplyCountable (counter: '# counter2', maxCount: 140, countDirection: 'down';);
Laster inn ressurspakken
Instantiating Asset Bundle er enkelt, som vist i \ Utsikt \ status \ _form.php under:
 
  
 
 felt ($ modell, melding) -> textarea (['rows' => 6])?> 
 
 
Gjenstående: 0
 
 
Det er alt som trengs for å aktivere vår Twitter-stil karakterteller:
Jeg har funnet Yii Asset Bundles å være enkel og enkel å administrere. De hjelper meg å bruke deler av JavaScript og CSS på bare enkelte områder av søknaden min på en organisert måte. 
Hva blir det neste?
Den Definitive Guide to Yii2 beskriver en rekke avanserte funksjoner i Asset Bundles. Du kan kontrollere plasseringen av skriptet lastes for hvert bunt, f.eks. POS_HEAD, POS_END. Du kan angi Asset Maps for å laste inn spesifikke kompatible versjoner av biblioteker. Du kan angi JavaScript og CSS-alternativer for ytterligere betinget lasting av bunter. Du kan også bruke Asset Converters til å kompilere LESS kode i CSS eller TypeScript til JavaScript.
Se etter kommende opplæringsprogrammer i min programmering med Yii2-serien når vi fortsetter å dykke inn i ulike aspekter av rammen. Du vil kanskje også sjekke ut Bygg opp din oppstart med PHP-serien, som bruker Yii2s avanserte mal, da jeg bygger en ekte verdensapplikasjon.
Jeg aksepterer funksjon og emneforespørsler. Du kan legge inn dem i kommentarene under eller sende meg en e-post på Lookahead Consulting.
Hvis du vil vite når neste Yii2 opplæring kommer, følg meg @ reifman på Twitter eller sjekk min instruktørside. Min instruktørside vil inkludere alle artiklene fra denne serien så snart de er publisert. 
Relaterte linker
     
  • Den Definitive Guide på Yii2: Eiendeler
    •  
  •  Yii2 AssetBundle Class Documentation 
    •  
  •  Yii2 Developer Exchange, forfatterens Yii2 ressursområde
    •  





	
	
			
	   
	







Kode
×