DojoML : La meilleure chose depuis le pain en tranche


Traduit de : http://dojocampus.org/content/2008/08/09/dojoml-the-best-thing-since-sliced-bread/
Avez-vous déjà trouvé un widget qui fait exactement tout ce que vous désirez, même si vous trouvez quelques petites choses que vous auriez fait différemment ? N’avez vous jamais renoncé a étendre un widget pour seulement 5/10 lignes de code ? Dans le passé, c’est ce que vous avez probablement fait… Sauf si vous êtes vraiment enthousiaste et que vous voulez écrire votre propre widget en partant de zéro.
Nous n’aimions pas cette idée et c’est pour ça que quelque chose nommé dojoML est né. Essentiellement, cela signifie « Dojo Markup Language » et à pour but de permettre de patcher du code javascript de manière très spécifique.

DojoML fournis actuellement deux fonctions principales – dojo/connect et dojo/method – qui font exactement ce à quoi elles ressemblent.
dojo/connect permet de faire des dojo.connect et dojo/method permet de définir des méthodes.

Voici un petit exemple de dojo/method :

Admettons que vous aillait une boite de dialogue modale :

<div dojotype="dijit.Dialog" id="myDialogPane" title="Initial Content">my dialog content
</div>

…et que vous vouliez une méthode facile de mettre à jour son titre…
Maintenant, vous pouvez utiliser la méthode complexe… et chaque fois que vous voulez mettre à jour le titre vous faites dijit.byId(‘myDialogPane’).titleNode.innerHTML = « my new title »;
Mais ça sent le vieux code et c’est vraiment pas très lisible.
Et maintenant un moyen beaucoup plus simple de faire ceci :

<div dojotype="dijit.Dialog" id="myDialogPane" title="Initial Title">
<script type="dojo/method" event="setTitle" args="title">
//this is ALWAYS the widget the dojoML is contained in
this.titleNode.innerHTML = title;
</script>
my titlepane content
</div>

Ceci signifie que vous pouvez faire dijit.byId(‘myDialogPane’).setTitle(‘my new title’); et que vous n’aurez plus besoin de jouer avec titleNode.innerHTML !
Quelques remarques à propos de cette méthode :

  1. Fonctionnement équivalent à dijit.byId(‘myDialogPane’).setTitle = function(title) { this.titleNode.innerHTML = title; }
  2. A cause du point 1), this.inherited(arguments) ne fonctionnera pas
  3. A cause du point 1), cela signifie aussi que toute déclaration précédente de la méthode « setTitle » sera perdu.

Maintenant regardons dojo/connect

Comme nous l’avons dit, cela fonctionne comme un dojo.connect. Trouvons une utilité…
Admettons que pour votre dijit.Dialog, vous voulliez toujours une certaine mise en page.
Par exemple, un icône qui apparaîtrait sur la gauche de votre boite de dialogue à chaque fois que vous y mettez du contenu.
On pourrait utiliser dojo/connect pour créer un wrapper à setContent qui fera le boulot…
dojo/connect accepte les mêmes paramètres que dojo/method, un évènement à ce connecter et les arguments.
Si vous ne spécifiez aucun évènement, alors le code sera exécuté lorsque le widget sera instancié, après le postCreate.
C’est ce que nous allons utiliser pour patcher notre dialogue.

<div dojotype="dijit.Dialog" id="dlg">
<script type="dojo/connect">
//fire once the dialog is created
//this is ALWAYS the widget the dojoML is contained in
this.realSetContent = this.setContent;
this.setContent = function(content){
this.realSetContent('<img style="float:left;" src="/images/dialogIcon.gif" />' + content);
}
</script>
Initial dialog content here!
</div>

Notes :

  1. fonctionnement équivalent à dojo.connect(myDialog, ‘postCreate’, function() { ….. });

Maintenant, une fois que le dialogue est instancié, nous avons une nouvelle méthode (« realSetContent ») et une fraîchement réécrite (setContent) qui ajoute un icône à chaque contenu que vous envoyez.
Et si voulez que quelque chose soit exécuté à chaque fois que setContent est appelé, vous pouvez utiliser dojoML comme ceci :

<script type="dojo/connect" event="setContent" args="content">
//note event: méthode sur laquelle il faut se connecter
//note args: liste des argument séparé par des virgule
console.debug(this, " just called setContent(", content, ")");
</script>

Notes:

  1. Fonctionnement équivalent à dojo.connect(myDIalog, ‘setContent’, function(content){ console.debug(this,  » just called setContent(« , content, « ) »);});

Ceci montre un exemple basique de comment utiliser les méthodes de DojoML… Gardez à l’esprit que ceci permet la « réécriture » de widget sans avoir à les étendre mais si vous vous retrouvez avec un paquet de blocdojoML dans un seul widget, vous feriez probablement mieux de créer une extension au widget dans votre propre namespace, ainsi votre widget pourrait hériter du parent et créer ses propres fonctionnalités sans gaspiller du temps CPU.

A noter : L’implémentation ainsi faite du setTitle est une solution de contournement. Dans dojo 1.2 chaque widget supportera une méthode .attr() qui mettrat les attributs pour vous. Dans le cas du setTitle sur la dialogue, vous ferez donc simplement:

 dijit.byId("myDialog").attr("title", "New Title");
A propos

Technophile passionné par le web, Je travaille actuellement en tant qu'Expert Dojo auprès de la banque ING aux Pays Bas. http://www.linkedin.com/in/santalucia

Publié dans actualités

Laisser un commentaire