Une introduction à YUI

Ok, maintenant que vous avez un peu entendu parler de YUI, commençons par regarder du code!

Y compris la bibliothèque

YUI permet une grande flexibilité lors du chargement de la bibliothèque. regardons quelques façons que vous pouvez le faire.

Méthode 1: Fichier de départ YUI 3

Le fichier de départ est le moyen privilégié pour obtenir YUI sur votre page. Incluez simplement le fichier de départ YUI (seulement ~ 6 Ko), puis incluez les modules de votre choix via JavaScript. Regardons un exemple:

YUI.use () fera une demande pour obtenir les modules requis et vous transmettra une instance YUI dans le rappel comprenant tous les modules requis. Les composants YUI 2 peuvent également être inclus en indiquant le nom du module, précédé de yui2-. Si vous incluez un composant YUI 2, vous pouvez accéder à l'instance YUI 2 via Y.YUI2..

Méthode 2: Configurateur YUI 3

Cet outil Web vous permet de choisir les modules dont vous avez besoin et de télécharger ou de créer un lien vers un fichier simplifié contenant toutes ces dépendances (similaire à l'outil jQuery UI). Il fournit également des statistiques sur l'impact des fichiers sur le chargement des pages..

Méthode 3: SimpleYUI

SimpleYUI est un outil récemment publié qui simplifie l'inclusion YUI pour ceux qui ont l'habitude d'inclure simplement une bibliothèque JavaScript et d'avoir accès à tout. Incluez simplement le fichier SimpleYUI et vous obtiendrez une instance globale de YUI mappée à la variable Y avec les modules d'effets DOM, AJAX et d'interface utilisateur disponibles.

Avec SimpleYUI, vous pouvez toujours utiliser tous les autres modules YUI de manière dynamique en les chargeant avec la méthode YUI.use.

 Y.use ('dd-drag', function (Y) // configurer le glisser-déposer);

SimpleYUI a le potentiel d’aider réellement l’adoption de YUI car il est beaucoup plus accessible et familier aux programmeurs de bibliothèques telles que jQuery..

DOM Manipulation

La manipulation du DOM est très facile dans YUI 3 et la syntaxe devrait être assez familière si vous avez déjà utilisé jQuery.

YUI fournit deux méthodes pour obtenir des nœuds DOM, via son module Node.

1. Y.one ('sélecteur') - retourne un nœud YUI représentant un nœud DOM.
2. Y.all ('selecter') - retourne une liste de noeuds YUI de tous les matchs

Voici un exemple.

 // Y.one var noeud = Y.one ('# test-div'); // récupère le nœud avec l'id test-div var node2 = Y.one (document.body); // Y.one accepte également un élément DOM Y.one ('# ma liste'). Get ('id'); // ma-liste // Y.all tous les nœuds = Y.all ('# ma-liste li'); // tous les éléments de la liste de my-list // chaining var nodes2 = Y.one ('# my-list'). all ('li'); // tous les éléments de la liste de my-list var parent = Y.one ('# ma liste'). get ('parentNode'); // retourne le parent de my-list (en tant qu'objet Nœud YUI)

YUI fournit également un 'tester'méthode pour voir si un élément correspond à un sélecteur

 var node = Y.one ('# test-div'); // si le noeud a la classe primaire if (node.test ('. primaire')) doQuelque chose (); 

YUI fournit également obtenir et ensemble méthodes pour manipuler les attributs de nœud et fonctions pratiques comme addClass et removeClass.

 // récupère et définit Y.one ('# test-div'). get ('id'); Y.one ('# test-div'). Set ('innerHTML', 'Contenu du test'); // addClass, removeClass Y.one ('# test-div'). addClass ('en surbrillance'); // ajoute la classe à un div Y.all ('p'). removeClass ('en surbrillance'); // supprime la classe de tous les éléments p

Événements

Les événements sont attachés à l'aide de YUI sur méthode. Vous pouvez appeler cette méthode sur un nœud ou sur l'instance YUI. Par exemple:

 // appelé sur l'instance YUI // myevent | click espaces de noms ce gestionnaire onclick à myevent (utilisé pour la suppression ultérieure) Y.on ("myevent | click", function () // faire quelque chose, "#test p"); // appelé dans NodeList Y.all ("# test p"). on ("myevent | click", function () // faire quelque chose);

Une caractéristique intéressante de YUI est que si vous utilisez la méthode du premier exemple, il n’est pas nécessaire que le sélecteur ait immédiatement une correspondance. YUI continuera à rechercher une correspondance jusqu'à 15 secondes après le chargement de la page, ce qui signifie que vous n'avez pas à attendre que le document soit chargé pour l'utiliser (vous n'avez pas à emballer vos gestionnaires d'événements dans une fonction document.load).

Notez également que nous avons ajouté une chaîne facultative au type d’événement pour le type d’événement. Vous pouvez utiliser cela pour détacher ultérieurement l'événement si vous le souhaitez..

 Y.all ("# test p"). Detach ("myevent | click");

Vous pouvez également simuler des événements…

 Y.one ("# test"). Simuler ("cliquer");

… Et déclencher des événements personnalisés.

 Y.one ("# test"). Fire ("myevents: custom_event_one");

YUI 3 prend également en charge les événements tactiles, ce qui vous permet d'ajouter un support à votre application JavaScript pour les appareils mobiles. Un des problèmes potentiels est que vous devez inclure le module "event-touch" utilisant YUI.on pour que les événements tactiles fonctionnent..

 Y.one ("# test"). On ('touchstart', function () // un événement tactile a commencé);

AJAX

Les requêtes AJAX sont traitées via le module IO de YUI 3. Un appel AJAX est fait en utilisant le io fonction, comme démontré ci-dessous.

 Y.io ('/ url / to / call', // il s'agit d'une méthode de publication: 'POST', // sérialise le formulaire: id: "my_form", useDisabled: true, // événement ajax lifecycle gestionnaires sur: complete: function (id, response) var data = response.responseText; // Data response.);

le IO La méthode accepte une URL et un objet de configuration en tant que paramètres. L'objet de configuration est hautement configurable, mais j'ai inclus quelques-unes des options les plus courantes dans l'exemple ci-dessus..

1. méthode - quelle méthode HTTP utiliser
2. forme - si cette option est spécifiée, le formulaire avec l'identifiant donné sera sérialisé et transmis avec la requête.
3. sur - Cet objet configure des gestionnaires d'événements pour différentes étapes du cycle de vie de la demande..

YUI io Ce module vous permet également d’envoyer des requêtes entre domaines à l’aide d’un fichier Flash fourni par Yahoo. Il y a cependant des mises en garde. Tout d'abord, vous devez disposer d'une copie du fichier flash YUI sur votre serveur pour pouvoir effectuer la demande. Deuxièmement, le domaine auquel vous accédez doit disposer d'un fichier de stratégie inter-domaines qui vous en autorise l'accès..

 Y.io ('http: //www.somedomain/web/service/', méthode: 'POST', data: 'data = 123', // utilise flash xdr: use: 'flash', dataType: ' xml ' // Gestionnaires d'événements ajax Lifecycle sur: complete: function (id, response) var data = response.responseText; // data de réponse.);

JSONP est également pris en charge, mais à travers le YUI JSONP module, pas le IO module.

 Y.jsonp (someurl, function (response) // gérer la réponse jsonp);

Un module supplémentaire qui est très utile avec AJAX est le module JSON. Cela vous permet d'analyser facilement les requêtes AJAX qui renvoient du JSON. JSON peut être analysé à l'aide de la méthode JSON.parse

 var obj = Y.JSON.parse (response.responseText);

Animation

YUI 3 contient un module d'animation qui peut être utilisé pour réaliser à peu près n'importe quel type d'animation. La syntaxe est un peu différente de celle de jQuery, alors jetons un coup d'oeil.

Les animations se déroulent en quelques étapes dans YUI. Tout d'abord, vous configurez un nouvel objet d'animation décrivant votre animation, puis vous l'exécutez..

 // animer une div de taille nulle à une hauteur et une largeur de 100 var animation = new Y.Anim (node: '# my-div', // sélecteur du nœud que vous souhaitez animer. // valeurs à partir desquelles vous animez (facultatif) à partir de: hauteur: 0, largeur: 0, // valeurs à animer également: hauteur: 100, largeur: 100, durée: 0,5, // réglage de la durée: Y.Easing.easeOut // set assouplissement); animation.run ();

Toutes les propriétés peuvent être modifiées en utilisant .obtenir() et .ensemble() sur l'objet animation, vous permettant de modifier l'animation ou les éléments DOM à animer. Les animations déclenchent également des événements qui peuvent également être écoutés.

 // animation est un objet Y.Anim animation.on ('end', function () // déclenché à la fin de l'animation);

Pris ensemble, l'objet d'animation YUI peut être utilisé pour créer toutes sortes d'animations dans votre application..

Widgets

Une des plus belles fonctionnalités de YUI est ses widgets. YUI 3 a actuellement un ensemble limité de widgets (onglets, curseur et superposition pour en nommer quelques-uns), mais fournit un cadre puissant pour créer vos propres widgets YUI 3. YUI 2, en revanche, possède une énorme bibliothèque de widgets. Voici quelques-uns:

• DataTable - un widget de table de données complet avec chargement et pagination ajax, prise en charge des cellules modifiables, colonnes redimensionnables et amélioration progressive.
• ImageCropper - un widget qui aide à rogner une image.
• LayoutManager - widget pour faire des mises en page complexes via JavaScript.
• Calendrier - un widget de calendrier contextuel.

Il existe de nombreux autres widgets que vous pouvez utiliser et que vous pouvez tous trouver sur le site Web du développeur YUI 2.

.

Bibliothèques CSS

Le dernier composant que nous allons examiner rapidement concerne les bibliothèques CSS YUI. YUI 3 fournit quatre ressources CSS.

• Réinitialisation CSS - règles de base de réinitialisation CSS. Chacun a sa propre idée de ce que devrait faire un fichier de réinitialisation, vous pouvez donc ne pas aimer celui-ci..
• CSS Base - Ces styles s'appuient sur les styles de réinitialisation pour fournir un rendu cohérent sur tous les navigateurs pris en charge. Ce fichier contient des éléments tels que les styles de saisie, les tailles d’en-tête et les styles de tableau..
• Polices CSS - normalise la taille des polices dans tous les fichiers pris en charge. Une fois que cette feuille de style est appliquée, les tailles de police sont modifiées à l'aide de pourcentages en fonction d'un tableau fourni par YUI. La ressource YUI CSS Fonts est utilisée par le populaire HTML5Boilerplate.
• CSS Grids - un cadre de grille CSS pour aider à la mise en page. Je ne suis pas un fan des réseaux en général, mais si vous voulez en savoir plus, Andrew Burgess a un bon résumé de celui-ci sur les Nettuts.+.

Conclusion

Ce n’était qu’un rapide aperçu de quelques-uns des composants et modules proposés par YUI. Si cet article a suscité votre intérêt, je vous recommande de vous reporter à la documentation pour les développeurs YUI et de rechercher les autres offres de YUI. Quelles sont vos impressions? Si vous avez déjà utilisé YUI par le passé, qu'en pensez-vous??