Creusez dans Dojo DojoX

Peut-être avez-vous vu ce tweet: ”jQuery est un médicament d'initiation. Cela mène à une utilisation complète de JavaScript. »Une partie de cette dépendance, affirme-t-il, consiste à apprendre d'autres frameworks JavaScript. Et voilà en quoi consiste cette série en quatre parties sur l'incroyable Dojo Toolkit: vous faire passer au niveau suivant de votre dépendance à JavaScript.

Dans cet épisode final de notre session, nous allons regarder le dernier membre de la Trinité Dojo: DojoX.

Qu'est-ce que DojoX??

DojoX est un endroit où les modules peuvent évoluer et se développer à n'importe quelle vitesse. Mais n'allez pas croire que DojoX est un code gratuit pour tous. À peine.

Vous pouvez penser à DojoX (Dojo Extensions) comme un bac à sable, un endroit où les modules peuvent évoluer et se développer à la vitesse qui leur convient. Les modules DojoX ne sont pas nécessairement aussi matures que les modules Dojo et Dijit. Et bien qu’il existe un leader DojoX, comme il en existe pour Dojo et Dijit, chacun des sous-projets (comme on les appelle) est géré individuellement..

Mais n'allez pas croire que DojoX est un code gratuit pour tous. À peine. En fait, il existe quelques règles strictes. Chaque sous-projet doit avoir un fichier README, que vous trouverez dans son répertoire principal, sous le répertoire dojox dossier. Ensuite, chaque sous-projet a aussi un statut (trouvé dans le fichier README). Le statut d'un sous-projet peut être l'un des suivants, en fonction du niveau d'engagement et du nombre de tests et de documentation disponibles:

expérimental
alpha
bêta
production

Fait intéressant, si un sous-projet veut changer son statut, le responsable DojoX (appelé BDFL) doit l'approuver..

Alors, quel genre de choses trouverez-vous dans DojoX? Il y a beaucoup d'extensions aux fonctionnalités Dojo et Dijit (pensez, beaucoup de widgets d'interface utilisateur); puis, il y a des projets pour créer des graphiques, travailler avec des flux, construire des tableaux de données, etc..

Eh bien, il n’ya pas grand chose à dire de plus sur DojoX en général. Utilisons donc un sous-projet DojoX et beaucoup d'autres côtelettes Dojo que nous avons apprises et terminons notre session «Dig into Dojo» avec un petit projet de démonstration..

Voici ce que nous allons construire: c’est une table interactive (un projet DojoX appelé Grille de données) avec une liste des tutoriels récents des sites Web Tuts +. Nous serons en mesure de filtrer les tutoriels en tapant dans une zone de saisie de texte.

N'oubliez pas que si vous êtes membre Premium de Tuts +, vous obtiendrez le screencast d'accompagnement, dans lequel je vous guiderai pas à pas pour construire ce projet, étape par étape. En tant que membre premium, vous pourrez également télécharger le code de ce mini-projet. C'est toujours le bon moment pour vous inscrire!

Frame It: le HTML

Commençons par du HTML, en index.html, bien sûr.

    Creusez dans le Dojo | Épisode 4

Joli coursier, sans doute. Nous chargeons Dojo depuis un CDN et mettons parseOnLoad: true. Ajoutons quelques éléments supplémentaires. Notez que nous avons un paramètres div #; remplissons quelques paramètres ici; nous voulons pouvoir choisir les sites Tuts + à partir desquels nous voyons des tutoriels. Nous aurons une liste de cases à cocher qui nous permet de faire exactement cela:

  Choisissez les sites que vous souhaitez inclure:
   Aetuts+
  Cgtuts+
  Wptuts+
  Nettuts+
  Psdtuts+
  Phototuts+
  Audiotuts+
  Vectortuts+
  Activetuts+
  Mobiletuts+
  Webdesigntuts+

Notez que nous créons de manière déclarative un bouton Dijit. Nous activerons nos cases à cocher en cases à cocher Dijit par programme plus tard.

Que dire de cela contenu div #?

   Tutoriel récent du réseau Tuts +

Une autre création déclarative; cette fois, une zone de texte. Assurez-vous de définir la propriété intermediaryChanges à vrai; Cela garantit que le sur le changement se déclenche après chaque frappe dans la zone de texte, et pas seulement lorsque la zone de texte perd le focus. Nous voudrons ce comportement lorsque nous relierons notre filtrage de table plus tard.

En parlant de tables, vous pouvez probablement deviner que notre table apparaîtra dans div # table plus tard.

Encore une chose ici: nous devons relier quelques feuilles de style. dans le :

Le premier est un thème standard de Dijit. Les deux prochaines sont nécessaires pour la Grille de données nous allons utiliser. Enfin, nous ajouterons du style à notre façon. Regardons la prochaine!

Style It: le CSS

Il n'y a rien de trop révolutionnaire ici. Nous centrons notre contenu et déplaçons notre petit panneau de paramètres vers la droite. Lorsque nous survolons les paramètres, ils apparaissent en douceur, avec une simple transition CSS3..

Le point très important est que nous mettons une hauteur sur #table. Ceci est requis par le Grille de données classe nous allons utiliser. L'autre chose à noter est que nous mettons en .dijitTextBox avoir une largeur de 100%.

Bien sûr, cela va dans ce style.css fichier que nous avons lié:

 corps marge: 40px 0; rembourrage: 0; police: 14px / 1.5 sans-serif; débordement caché; arrière-plan: #ccc;  #main border: 1px solid # 474747; largeur: 940px; marge: auto; rembourrage: 10px; background: #fff; -webket-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;  #settings padding: 20px 30px; largeur: 240px; arrière-plan: #ecec; z-index: 10; bordure: solide 1px # 474747; -webkit-border-radius: 7px 0 0 7px; -moz-border-radius: 7px 0 0 7px; border-radius: 7px 0 0 7px; -webkit-transition: droite 0.3s facilité; -moz-transition: droite 0.3s facilité; -o-transition: droite 0.3s facilité; -ms-transition: droite 0.3s facilité; transition: droite 0.3s facilité; position: absolue; à droite: -270px;  #settings: hover right: -1px;  .dijitTextBox width: 100%;  #table margin-top: 20px; hauteur: 600px;

Power It: le JavaScript

Maintenant, ouvrez ça script.js fichier que nous avons lié à notre HTML. Nous allons commencer par exiger-les fonctionnalités dont nous avons besoin:

 dojo.require ('dijit.form.Button'); dojo.require ('dijit.form.TextBox'); dojo.require ('dijit.form.CheckBox'); dojo.require ('dojo.io.script'); dojo.require ('dojox.grid.DataGrid'); dojo.require ('dojo.data.ItemFileReadStore');

Vous n'êtes probablement pas familier avec les deux dernières «classes» que nous attirons. dojox.data.DataGrid est la table interactive que nous allons utiliser. Le dernier, dojo.data.ItemFileReadStore, est l'un des nombreux magasins de données de Dojo. En réalité, il faudrait tout un tutoriel pour expliquer correctement les magasins de données, mais nous en couvrirons assez pour les utiliser dans notre projet aujourd'hui. Pour le moment, sachez simplement que notre Grille de données prend un magasin de données - dans notre cas, un ItemFileReadStore-comme source de données, et c'est pourquoi nous les utilisons.

Bien sûr, nous voudrons commencer à effectuer quelques actions une fois ces modules chargés. Par conséquent, enveloppons la majeure partie de notre code avec ceci:

 dojo.ready (function () );

À part deux fonctions en dehors de cela, tout notre code sera ici. Commençons avec quelques variables.

 var checks = dojo.query ('input [type = case à cocher]'). map (fonction (el) retourne un nouveau dijit.form.CheckBox (vérifié: vrai, valeur: el.value, el);),

À première vue, vous pourriez penser que chèques va etre un NodeList des cases à cocher. Cependant, notez que nous utilisons le carte méthode pour transformer chaque ancienne zone de texte normale dans la case à cocher un Dijit. Alors, chèques sera un tableau de widgets de case à cocher. Dans notre hachage d'options, nous vérifions les cases à cocher et définissons la valeur sur l'attribut value de l'élément; pour une raison quelconque, la classe de widgets ne prend pas cela par défaut. Bien sûr, nous sauvegardons les références à ces widgets dans un tableau, car nous devrons y accéder plus tard pour voir quelles cases sont cochées.

 structure = [champ: 'titre', nom: 'titre', largeur: '650px', champ: 'créateur', nom: 'auteur', largeur: 'auto', champ: 'pubDate', nom: 'Date', largeur: 'auto'],

La prochaine étape est un structure. C’est la structure de notre Grille de données table: chaque objet du tableau sera une colonne de notre table. le champ cartes de propriété aux données que nous aurons, de sorte que le Grille de données saura quoi mettre où. le prénom est l'en-tête de colonne convivial. le largeur est la largeur de la colonne.

Maintenant, nous arrivons à la grille elle-même:

 grid = new dojox.grid.DataGrid (sortInfo: '-3', structure: structure, requête: title: '*', 'table'); grid.queryOptions = ignoreCase: true;

Nous définissons trois propriétés sur Grille de données exemple. La première, sortInfo, dit que nous voulons trier les lignes par la troisième colonne; la - signifie que l'ordre doit être descendant. Rappel de notre structure variable que la troisième colonne est la date à laquelle le didacticiel a été publié: ainsi, la table out sera triée avec le didacticiel le plus récent en haut. Bien sûr, le la grille ne sait pas encore sur cette structure, donc nous l'informons avec le structure propriété. Enfin, nous définissons la question. Ceci est important: il limite les lignes de notre magasin de données qui apparaissent dans la table. Par exemple, si notre objet de requête était créateur: 'J *', seules les lignes dont créateur le champ commence par «J» apparaîtrait. Dans notre cas, nous utilisons par défaut toutes les lignes. nous verrons comment changer cela plus tard.

Enfin, nous passons la identifiant de l'élément qui devrait abriter le Grille de données comme second paramètre de notre constructeur. Après cela, nous mettons la queryOptions objet; nous ne voulons pas que les requêtes soient sensibles à la casse, nous allons donc dire à notre widget ignorer cas.

Excellent! Maintenant, préparons-nous pour certaines actions. Lorsque nous tapons dans la zone de texte, nous souhaitons que la liste des tutoriels affichés soit filtrée (oui, je sais que nous n’avons pas encore de tutoriels à afficher, mais nous y arriverons).

 filterBox.set ('onChange', function () grid.filter (title: '*' + filterBox.get ('value') + '*'););

Si vous vous en souvenez, nous mettons data-dojo-id = 'filterBox' lors de la création déclarative de notre zone de texte Dijit, c’est pourquoi nous pouvons l’utiliser ici dans notre code JavaScript. Nous mettons en place sur le changement gestionnaire, c’est un changement super simple: nous appelons simplement le grille.filtre méthode, en lui passant un objet de requête. Si, par exemple, nous tapons «Scr» dans la zone de texte, seuls les tutoriels dont les titres correspondent * scr * sera affiché. La bonne chose ici est que lorsque nous effacer la zone de texte, les titres seront filtrés par **, qui leur correspond tous.

Il nous reste deux tâches:

Remplissez initialement le tableau avec des données (au chargement de la page).
Ne chargez que des tutoriels pour les sites sélectionnés lorsque vous cliquez sur le bouton "Mettre à jour".

Pour ce faire, nous allons résumer certaines fonctionnalités en deux fonctions d'assistance. Tout d'abord, nous avons le getSites une fonction; Comme vous l'avez peut-être deviné, nous utiliserons YQL pour obtenir les flux des sites Tuts +. Nous devrons donc créer une requête en fonction des sites dont les cases sont cochées. Voici le format de la requête:

 sélectionnez creator, pubDate, title from rss où url in (URL1, URL2,…)

Alors, voici notre fonction:

 fonction getSites (vérifie) var urls = []; dojo.forEach (vérifie, fonction (vérifie) if (vérifie.get ('vérifié') === true) urls.push ('' http://feeds.feedburner.com/ '+ vérifie.get (' valeur ') +' '');); return 'select creator, pubDate, title from rss où url dans (' + urls.join (',') + ')';

C'est assez simple, et je pense que vous pouvez voir ce qui se passe: nous passons dans le tableau des widgets de cases à cocher, qui sont ensuite bouclés. Si la case est cochée, nous allons créer une URL et la placer dans un tableau. Nous créons la requête YQL finale en concaténant quelques chaînes et en utilisant le tableau joindre méthode.

C'était assez facile, mais cette méthode suivante est un peu plus complexe.

 fonction getTuts (requête) return dojo.io.script.get (url: 'http://query.yahooapis.com/v1/public/yql', contenu: q: requête, format: 'json', callbackParamName: 'callback'). then (function (data) );

Nous commençons par accepter un paramètre: le question. Donc, d’abord, nous établissons notre appel YQL via dojo.io.script.get, comme vous l'avez vu auparavant (nous ne faisons aucune mise en cache de ces requêtes, juste pour simplifier les choses). Nous utilisons le dojo.Deferred méthode puis pour enregistrer notre propre rappel ici. Mais remarquez autre chose, tout en haut: revenir. Cela va effectivement retourner un nouveau dojo.Deferred objet, que nous pouvons appeler un puis méthode sur. C'est une alternative à l'acceptation d'une fonction de rappel.

Mais avant d'arriver à tout cela, nous devons gérer notre propre rappel différé. Voici comment cela commence:

 var items = data.query.results.item, typemap = 'Date': deserialize: function (value) var date = new Date (value), month = date.getMonth (), day = date.getDate () ; mois = mois < 10 ? '0' + month : month; day = day < 10 ? '0' + day : day; return date.getFullYear() + '-' + month + '-' + day;   ;

Hé, reviens: ce n'est pas si grave. Vous êtes cool de ramener ce long chemin d'objet YQL à juste articles, mais ne laissez pas le typemap t'effrayer. Ceci est simplement un objet de types spéciaux que nous utilisons dans notre Grille de données. Dans ce cas, nous créons un Rendez-vous amoureux tapez afin que nous puissions formater nos dates de manière appropriée. Bien qu'il puisse y avoir d'autres propriétés, nous n'utilisons que le désérialiser l'un, qui est une fonction, reçoit la valeur brute du magasin (dans notre cas, une chaîne de date) et génère le format qui sera affiché dans notre tableau. Dans notre cas, nous formatons simplement la date comme AAAA-MM-JJ.

Ensuite, nous devons apporter quelques modifications simples aux données que nous avons obtenues de YQL:

 for (var i = 0; éléments [i]; i ++) éléments [i] .creator = (type d'éléments [i] .creator === 'chaîne')? items [i] .creator: éléments [i] .creator.content; items [i] .pubDate = _value: items [i] .pubDate, _type: 'Date';

le créateur la valeur est généralement le nom de l'auteur; cependant, pour certains des flux, nous voulons réellement créateur.content. Notre première ligne s'occupe de ça.

La deuxième ligne est importante: rappelez-vous que typemap nous avons créé? Nous pouvons dire notre la grille d'utiliser un type spécifique de cette façon: nous changeons notre pubDate propriété de la chaîne de date à un objet: cet objet a deux propriétés: _valeur est la valeur du champ, alors que _type est le type de données à utiliser.

Enfin, créons notre magasin de données:

 retourne le nouveau fichier dojo.data.ItemFileReadStore (data: items: items, typeMap: typemap);

C'est assez simple, dans notre cas: le Les données la propriété prend un objet, où articles sont nos données; alors, nous lui donnons aussi notre typemap. Vous pensez peut-être que revenir est inutile, car c’est un dojo.DeferredLa fonction de rappel, et nous ne l'affectons à rien. Mais rappelez-vous, nous retournons une nouvelle dojo.Deferred objet, et ce magasin de données sera passé à une fonction de rappel utilisée sur cet objet.

Si vous êtes confus, un exemple simple éclaircira cela. Sauvegarder dans notre dojo.ready appel, commençons par ce qui se passe lorsque vous cliquez sur le bouton «Mettre à jour»:

 update.set ('onClick', function () getTuts (getSites (checks)). .then (fonction (données) grid.setStore (données);););

Nous mettons la sur clic attribuer à notre mettre à jour Bouton Dijit. Nous d'abord getSites, et passez cette requête à getTuts. Depuis que retourne un dojo.Deferred objet, nous passons notre fonction de rappel à sa puis méthode. On peut utiliser grid.setStore pour rafraîchir le Grille de données avec de nouvelles données.

Enfin, lorsque la page sera chargée, nous ferons très:

 // remplit initialement la table getTuts (getSites (checks)) .then (function (tutsdata) grid.set ('store', tutsdata); grid.startup (););

Notez que nous appelons grid.startup (); cela est nécessaire pour configurer l'interface utilisateur; sans cela, rien ne serait affiché sur notre page.

Admire It: le produit fini

Bon travail! Voici notre projet fini:

Conclusion

Eh bien, cela nous amène à la fin de notre session «Dig into Dojo»; J'espère que cela vous a inspiré de vraiment entrer dans cette incroyable bibliothèque.

Mais ce n'est pas la fin des didacticiels Dojo ici sur Nettuts +; loin de là, si j'ai quelque chose à voir avec ça! Vous avez tous eu d'excellentes suggestions dans les commentaires des autres articles. continuez et merci beaucoup d'avoir lu!

Code