Comment programmer avec Yii2 Travailler avec des ensembles d'actifs

Ce que vous allez créer

Si vous demandez, "Qu'est-ce que Yii?" Découvrez mon tutoriel précédent: Introduction au framework Yii, qui passe en revue les avantages de Yii et inclut un aperçu des nouveautés de Yii 2.0, publiées en octobre 2014.

Dans cette série de programmation avec Yii2, je guide les lecteurs dans l'utilisation du framework Yii2 pour PHP récemment mis à jour. Dans ce tutoriel, je vais vous montrer comment ajouter des scripts et des bibliothèques JavaScript et CSS personnalisés à votre application Yii. Yii utilise un concept appelé Asset Bundles pour faciliter la gestion de ces ressources..

Pour ces exemples, nous continuerons à nous appuyer sur l’application de statut simple des didacticiels précédents..

Juste un rappel, je participe aux commentaires ci-dessous. Je suis particulièrement intéressé si vous avez des approches différentes, des idées supplémentaires ou si vous souhaitez suggérer des sujets pour de futurs tutoriels..

Qu'est-ce qu'un ensemble d'actifs??

Les ensembles d'actifs de Yii représentent des groupes de fichiers JavaScript et CSS qui doivent être inclus ensemble sur des pages spécifiques ou sur le site. Les ensembles d'actifs facilitent le regroupement de groupes de scripts et de styles spécifiques pour des zones spécifiques de votre site. Par exemple, dans mon application Meeting Planner, je peux facilement inclure les API Google Adresses uniquement sur les pages où elles sont nécessaires..

Voici un exemple rapide de cela. Nous créons un \ frontend \ assets \ LocateAsset.php fichier:

Ensuite, nous le chargeons dans notre fichier d’affichage. C’est assez simple, vraiment:
Lorsque vous affichez la source de notre page, vous verrez les scripts générés avec d'autres ressources standard Yii2 pour les formulaires, Bootstrap, etc.:
       
Dans ce didacticiel, je vais vous expliquer comment utiliser le regroupement d’actifs pour intégrer le décompte des personnages dans notre formulaire Statut. Nous allons l'utiliser pour imposer une limite de caractères similaire au maximum de 140 caractères de Twitter.. 
Si cela vous intéresse de voir cela en action dans Yii1.x, j'ai implémenté cette fonctionnalité dans Construire avec l'API de Twitter: OAuth, Lecture et Publication (Tuts +)..
Construire un ensemble d'actifs
Créer le groupe d'actifs
dans le \les atouts répertoire, nous créons StatusAsset.php:
 * @since 2.0 * / class StatusAsset étend AssetBundle public $ basePath = '@webroot'; public $ baseUrl = '@web'; public $ css = []; public $ js = ['/js/jquery.simplyCountable.js', '/js/twitter-text.js', '/js/twitter_count.js', '/js/status-counter.js',]; public $ depend = ['yii \ web \ YiiAsset', 'yii \ bootstrap \ BootstrapAsset',]; 
J'ai utilisé une combinaison du plugin jQuery simplyCountable, de twitter-text.js (un script de traitement de texte Twitter basé sur JavaScript) et d'un script qui a considérablement allégé les ajustements d'URL: twitter_count.js; sur Twitter, les URL comptent pour 20 caractères. Ces fichiers sont tous dans \ web \ js.
J'ai également créé une fonction de préparation de documents pour les appeler \ web \ js \ status-counter.js. Comprenant yii \ web \ yiisset dans notre $ dépend array garantira que JQuery est chargé à chaque instanciation de cet actif.
$ (document) .ready (function () $ ('# status-message'). simplyCountable (counter: '# counter2', maxCount: 140, countDirection: 'down');
Chargement de l'ensemble d'actifs
L’instanciation de l’ensemble d’actifs est facile, comme indiqué dans \ views \ status \ _form.php au dessous de:
     champ ($ modèle, 'message') -> textarea (['rows' = = 6])?> 
  Restant: 0
 
 
C'est tout ce qu'il faut pour activer notre compteur de caractères de style Twitter:
J'ai trouvé que les ensembles d'actifs Yii étaient simples et faciles à gérer. Ils m'aident à réutiliser des parties de JavaScript et de CSS dans certains domaines de mon application de manière organisée.. 
Et après?
Le Guide définitif de Yii2 décrit un certain nombre de fonctionnalités avancées des ensembles d’actifs. Vous pouvez contrôler le positionnement du chargement de script pour chaque lot, par exemple. POS_HEAD, POS_END. Vous pouvez configurer les cartes d'actifs pour charger des versions spécifiques compatibles de bibliothèques. Vous pouvez définir des options JavaScript et CSS pour un chargement conditionnel ultérieur de vos ensembles. Vous pouvez également utiliser Asset Converters pour compiler du code LESS en CSS ou TypeScript en JavaScript..
Surveillez les prochains tutoriels de ma série Programming With Yii2 pendant que nous continuons à plonger dans différents aspects du cadre. Vous pouvez également consulter ma série Construire votre démarrage avec PHP, qui utilise le modèle avancé de Yii2 pour créer une application du monde réel..
Je me félicite des demandes de fonctionnalités et de sujets. Vous pouvez les poster dans les commentaires ci-dessous ou m'envoyer un email sur mon site Lookahead Consulting.
Si vous souhaitez savoir quand le prochain tutoriel Yii2 arrive, suivez-moi @reifman sur Twitter ou consultez ma page d'instructeur. Ma page d’instructeur comprendra tous les articles de cette série dès leur publication.. 
Liens connexes
 Le guide définitif sur Yii2: Actifs
  Documentation de classe Yii2 AssetBundle 
  Yii2 Developer Exchange, le site de ressources Yii2 de l'auteur
 



		
			
	   
	




Code