SpellCheck

Publié le 4 février 2009 par ben

Présentation

SpellCheck est une classe permettant d’intégrer un correcteur orthographique dans vos pages.
Il fonctionne aussi bien avec des inputs html standard (input, textarea) qu’avec des éditeurs basés sur des iframes (dijit.form.Textarea, dijit.Editor, etc…)

Instancier la classe

```
var spell=new dojox.widget.SpellCheck({
```
```
	editor:djEditor,
```
```
	innerDocument:djEditor.document,
```

	setContent:dojo.hitch(djEditor,djEditor.setValue),

	getContent:dojo.hitch(djEditor,djEditor.getValue),

```
	aspell:"spellcheck.php",
```
```
	textarea:dojo.byId("TextArea"),
```
```
	contextualMenuCoordsCorrection:{
```
```
		l:0,
```
```
		t:25//editor toolbar height
```
```
	}
```
```
});
```

la Propriété « editor » représente l’objet qui va recevoir le correcteur (objet uniquement de type iframe)
la Propriété « innerDocument » pointe vert l’objet document contenu par l’iframe de l’éditeur
la Propriété « setContent » est la méthode qui va être utilisée par le correcteur pour mettre à jour le contenu
la Propriété « getContent » est la méthode qui va être utilisée par le correcteur pour lire le contenu
la Propriété « aspell » est le chemin vers le fichier (php ou autre) qui va être utilisé comme passerelle vers le binaire d’aspell
la Propriété « textarea » permet de lier le correcteur à une textarea (ou à un input text)
la Propriété « contextualMenuCoordsCorrection » est un objet permettant de corrigé la position du menu contextuel. Par exemple, si votre éditeur à une toolbar de 20px de haut, il faudra mettre {t:20} afin que le menu contextuel ne soit pas éloigné de 20px de la position voulu.

Démarrer et arrêter le correcteur

La méthode start() permet de lancer le correcteur. Si elle contient « true » en paramètre, le correcteur sera dans le textarea, sinon il sera dans l’iframe.
La méthode stop() arrête celui-ci.
La propriété « isInProgress » de l’objet permet de savoir si le correcteur est actif ou inactif.

Passerelle de communication avec aspell

Pour communiquer avec aspell, vous pouvez utiliser tout type de langage serveur, à condition de respecter le format de sortie.
Dans l’exemple c’est php qui est utilisé.
Celui-ci appelle aspell et transforme le retour en json.
Si vous voulez créer votre propre passerelle, voici le format de sortie à respecter :

```
{response:[{ 
```
```
		mot :"tun", 
```
```
		offset:8, 
```
```
		length:3, 
```

		suggestion:["tune","tub","tu","un","tus","Sun","ton","tua","tue","tuf","tut","tué","tût","tan","d'un","t'en","l'un"]

```
	},{ 
```
```
		mot :"tesst", 
```
```
		offset:12, 
```
```
		length:5, 
```

		suggestion:["tests","test","t'est","testa","teste","testé","est","lests","d'est","lest","t'estu","t'eusse","t'eut","t'eût","c'est","l'est","m'est","n'est","s'est"]

```
	}
```
```
]}
```

Aspell vous retourne ceci :

```
ceci est tun tesst
```
```
*
```
```
*
```

& tun 15 9: tune, tub, tu, un, tus, Sun, ton, tua, tue, tuf, tut, tué, tût, d'un, l'un

& tesst 19 13: tests, test, t'est, testa, teste, testé, est, lests, d'est, lest, t'es-tu, t'eusse, t'eut, t'eût, c'est, l'est, m'est, n'est, s'est

Seule les lignes commençant par « & » doivent être traitées.
Dans le json:

la propriété « mot » est le mot entre « & » et le 1er chiffre.
la propriété « offset » est le 2eme nombre (le 1er est le nombre de suggestion mais il n’est pas utilisé).
la propriété « length » est la longueur du mot placé dans « mot ».
la propriété « suggestion » est la liste des suggestions convertie en tableau.

Exemple et téléchargement

Vous pouvez voir un exemple d’utilisation et télécharger le fichier ici :

http://ben.dojotoolkit-fr.org/test_SpellCheck.html

Dépendances

Attention, ce widget nécessite aussi la présence de MenuGenerator !
En plus de cela, vous devez disposé du binaire aspell sur le serveur qui va héberger la page.

Utiliser la classe

Pour que cela fonctionne:

Placez le fichier « SpellCheck.js » dans dojox/widget/
Placez le fichier bundle i18n « SpellCheck.js » dans dojox/widget/nls/

et n’oubliez pas le require :

dojo.require("dojox.widget.SpellCheck");

Le fichier php peut-être placé n’importe où. Vous pouvez configurer son emplacement via l’attribut « aspell » de l’objet SpellCheck

Track

Ce widget est disponible sur le track de dojo : http://bugs.dojotoolkit.org/ticket/7618

Laisser un commentaire

MenuGenerator

Publié le 4 février 2009 par ben

Présentation

MenuGenerator est une classe qui permet de générer un popup menu (pour bouton dropdown ou menu contextuel ou autre) à partir d’une représentation objet.
La structure de l’objet est utilisée pour gérer la création de menus simples ou arborescents.

Exemple d’objet

```
var menu=[
```

	{id:"foo", onClick:dojo.hitch(this,function(){alert("foo")}), label : "foo",hidden:true},

```
	{id:"separator1", label : "-"},
```

	{id:"submenu1", label : "sub menu 1", subMenuId:"submenu_Sub",

```
	subMenu : [
```

		{id:"foobar0", onClick:function() {alert("foobar 0")}, label : "foobar 0", disabled:true},

		{id:"foobaz0", onClick:function() {alert("foobaz 0")}, label : "foobaz 0"}

```
	]},
```

	{id:"bar", onClick:function() {alert("bar")}, label : "bar"},

```
	{id:"submenu2", label : "sub menu 2",
```
```
	subMenu : [
```

		{id:"foobar1", onClick:function() {alert("foobar1")}, label : "foobar1"},

		{id:"foobaz1", onClick:function() {alert("foobaz1")}, label : "foobaz1"}

```
	]},
```

	{id:"foobarbaz0", onChange:dojo.hitch(this,function(){alert("foobarbaz1")}), label : "foobarbaz1",checked:true},

	{id:"foobarbaz1", onChange:dojo.hitch(this,function(){alert("foobarbaz2")}), label : "foobarbaz2",checked:false}

```
];
```

Description de l’objet

Si la structure de l’objet est utilisée pour gérer l’arborescence du menu, les propriétés permettent de définir le type de menu à créer.
La liste des attributs est le même que pour un sous-objet de dijit.Menu , à savoir :

dijit.MenuItem pour les entrées « normale ».
exemple :

{id:"foo", onClick:dojo.hitch(this,function(){alert("foo")}), label : "foo",hidden:true}

dijit.PopupMenuItem pour les entrées de type « sous menu ».
exemple :

```
{id:"submenu2", label : "sub menu 2",
```
```
subMenu : [
```
```
	//autres menus de type "normaux"
```
```
]}
```

dijit.CheckedMenuItem pour les entrées avec case à cocher.
exemple :

{id:"foobarbaz0", onChange:dojo.hitch(this,function(){alert("foobarbaz1")}), label : "foobarbaz1",checked:true}

Différencier une entrée « sous menu » d’une entrée normale

Pour créer un sous menu, il suffit de préciser dans les attributs de l’objet la propriété subMenu.
Celle-ci est un tableau qui contient les items du sous menu.

Différencier une entrée « case à cocher » d’une entrée normale

Pour spécifier un menu case à coché, vous devez ajouter la propriété checked à votre objet.
A false, vous aurez une case a coché non sélectionnée, à true elle sera sélectionnée.

Propriété spéciale

« hidden ». Cette propriété, placé à true permet de cacher l’entrée
« id ». Cette propriété est optionnelle. Vous devez le spécifiez si vous avez besoin d’agir sur votre menu après sa création.

Instancier la classe.

sample = new dojox.widget.MenuGenerator({

```
	menuEntries:menu,
```
```
	targetNodeIds:["bind1", "bind2"],
```
```
	onOpen:function() {
```
```
		console.info("just open menu !");
```
```
	}
```
```
});
```

En dehors l’attribut menuEntries qui représente l’objet menu à créer, les autres paramètres sont ceux de dijit.Menu

Exemple et téléchargement

Vous pouvez voir un exemple d’utilisation et télécharger le fichier ici :

http://ben.dojotoolkit-fr.org/test_MenuGenerator.html

Utiliser la classe

Pour que cela fonctionne, placez le fichier téléchargé dans dojox/widget/ et n’oubliez pas le require :

dojo.require("dojox.widget.MenuGenerator");

Track

Ce widget est disponible sur le track de dojo : http://bugs.dojotoolkit.org/ticket/7382

Laisser un commentaire

Effacer des noeuds DOM

Publié le 4 février 2009 par ben

Adapté de : http://shaneosullivan.wordpress.com/2009/01/02/deleting-dom-nodes-with-dojo/

Voici une astuce rapide et simple pour effacer de noeuds DOM multiple avec Dojo Toolkit.

Une fonctionnalité peu aisée et commune à toutes les applications Ajax est le besoin d’effacer des noeuds qui ont ou n’ont pas été créé. Le code pour faire ceci sans Dojo (ou un bibliothèque similaire telle que jQuery) ressemble à ceci (en supposant que les noeuds sont définis par un ID) :

var nodeIDs = ["node1", "node2", "node3"];

for (var i = 0; i < nodeIDs.length; i++) {

 var node = document.getElementById(nodeIDs[i]);

 // Verifie que le noeud existe, afin d'éviter qu'une erreur soit levée

```
 if (node) {
```
```
  node.parentNode.removeChild(node);
```
```
 }
```
```
}
```

Bien sûr, c’est un peu « crade ». Ce serait infiniment plus propre si l’on pouvait repérer les noeuds non pas par des ID mais par une autre méthode telle que les classes CSS, la position relative à un parent ou en se positionnant sur le noeud, etc…

Pour obtenir le même résultat que précédemment mais avec Dojo, utilisez simplement ce code :

var nodeIDs = ["#node1", "#node2", "#node3"];

dojo.forEach(arr, "dojo.query(item).orphan();");

Bien plus simple, léger et propre que l’exemple précédent! Ceci permet aussi d’utiliser des sélecteurs CSS pour trouver les noeuds DOM.
Par exemple, pour effacer des noeuds en les choisissant par ID et par classe, utilisez le code suivant :

var nodeIDs = ["#node1", "#node2", ".className1", ".parentClass .childClass"];

dojo.forEach(arr, "dojo.query(item).orphan();");

Plus de détails sur dojo.query dans la doc : http://docs.dojocampus.org/dojo/query

Laisser un commentaire

DojoML : La meilleure chose depuis le pain en tranche

Publié le 4 février 2009 par ben

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 :

Fonctionnement équivalent à dijit.byId(‘myDialogPane’).setTitle = function(title) { this.titleNode.innerHTML = title; }
A cause du point 1), this.inherited(arguments) ne fonctionnera pas
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 :

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:

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");

Laisser un commentaire

Créer vos propre dojo.connect

Publié le 4 février 2009 par ben

Traduction de : http://dojocampus.org/content/2008/03/12/making-your-own-dojoconnects/

La première fois que j’ai lu le manuel de dojo.connect, je n’ai pas compris sa réelle puissance. Pendant longtemps, je l’ai utilisé de façon à se connecter à des clics de souris et d’autres événements mais il est possible d’aller beaucoup plus loin.

Vous êtes vous déjà demandé s’il était possible de connecter à un événement nommé « onComplete » une classe « uploader » que vous aurez crée.

Créons l’objet suivant:

```
dojo.declare("dojoc.uploader", null, {
```
```
 
```
```
});
```

Cela nous permet de créer une instance de dojoc.uploader :

```
var uploader = new dojoc.uploader ();
```

Créons une méthode de dojoc.uploader, nommée « upload », qui permettra d’uploader quelque chose et une méthode qui sera appelée lorsque l’upload sera terminé, appelée « onComplete »:

```
dojo.declare("dojoc.uploader", null, {
```
```
    upload: function(){
```
```
        // do upload here
```
```
        this.onComplete();
```
```
    },
```
```
 
```
```
    onComplete: function(){
```
```
        /**
```

         * leave it empty, it is just a placeholder so we can connect to it

         * of course you can execute standard code you always want to call

```
         */
```
```
    }
```
```
});
```

Désormais, tout ce qu’il reste à faire est de créer une nouvelle instance de dojoc.uploader, se connecter au onComplete et appeler la méthode d’upload:

```
var uploader = new dojoc.uploader();
```

dojo.connect(uploader, "onComplete", function(){

    // do whatever you want to do when complete

```
});
```
```
uploader.upload();
```

Ainsi, une fois l’upload terminé, la méthode « onComplete » sera appelé.

Pour résumer: Chaque fois que vous voulez connecter une méthode à un événement qui se produit à un certain point dans l’exécution d’une classe, il vous suffit de créer une méthode d’une classe comme « onComplete », « onDownload » ou quelque chose qui décrit cet événement. Vous pouvez ainsi vous connecter à cette méthode et à chaque fois qu’elle sera appelée vous pourrez exécuter du code reproduisant le comportement désiré.

Voici une petite astuce vous permettant de savoir à quel moment plusieurs fichiers ont été uploadés avec succès.
Comme ces fichiers pourraient avoir différentes tailles, un fichier peut être uploadé plus rapidement que les autres et la connexion à « onComplete » ne fonctionnerait pas.
Utilisez donc des compteurs:

```
dojo.declare("dojoc.uploader", null,{
```
```
    constructor: function(){
```
```
        this.files = [];
```
```
    },
```
```
 
```
```
    upload: function(){
```

        cnt = this.files.length // the files are stored in the files var

        dojo.forEach(files, function(file){

```
            // do upload here
```
```
            if (cnt == 1){
```

                this.onComplete(); // call the method we can connect to

```
            }
```
```
            cnt--;
```
```
        }, this);
```
```
    },
```
```
 
```
```
    onComplete: function(){
```
```
        /**
```

         * leave it empty, it is just a placeholder so we can connect to it

         * of course you can execute standard code you always want to call

```
         */
```
```
    }
```
```
});
```

Laisser un commentaire

Dojo non intrusif

Publié le 4 février 2009 par ben

Degradabilité de dojo

Traduit de : http://higginsforpresident.net/2008/08/dojo-degradability/
Voici un petit exemple de code dojo non intrusif et « dégradé ». Je vais écrire quelques ligne de javascript qui vont convertir une liste non ordonnée en un nouveau widget que j’ai créé (disponible dans dojo 1.2) :

La méthode embarqué « addOnLoad » rend les choses facile. Apres le chargement initial (le body onLoad) j’ajoute dynamiquement le code du Roller et toutes ces dépendances.
Ceci pourrait être évité si j’avais inclus la classe du Roller dans un build mais, je suis plus concerné par le rendu du contenu que par le nombre de requête XHR (elle sont exécutée après le onLoad donc le chargement de page n’est pas bloqué).
Si javascript n’est pas activé, une simple liste non ordonnée (ul) apparaîtra.
Ce code est dégradable, réutilisable et complètement XHTML valide.
Que pourriez-vous demander de plus ? Si vous n’êtes pas concerné par les problème de validation, vous pouvez simplement utiliser l’attributdojoType sur la liste (dojoType= »dojox.widget.Roller ») et laisser le parseur automatique faire le travail à votre place.
Avec dojo, chacun trouve la solution qui lui convient
Le fichier de test du Roller et du RollerSlider peut être vu ici : http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/widget/tests/test_Roller.html

Laisser un commentaire

Syntaxe Programmatique, points à retenir

Publié le 4 février 2009 par ben

La syntaxe programmatique est légèrement plus complexe que la syntaxe déclarative mais apporte une grande souplesse et un grand contrôle de ce qui est fait.

Principe

Comme dans tout langage objet, il faut commencer par créer une nouvelle instance d’un widget. On lui attribue ses propriétés puis on le place à l’endroit désiré du DOM.

Utilisation

La création d’un widget se fait via la commande « new » :

Attention, à chaque dojoType doit correspondre un dojo.require

Le constructeur d’un widget accepte 2 paramètres :

(facultatif) Les propriétés du widget (sous forme d’objet)
(facultatif) Le noeud DOM qui va être remplacé par le widget.

Les propriétés sont sous la forme d’objet :

Note : Les propriétés de l’objet sont les même que celles utilisées en syntaxe déclarative (pour le bouton : dijit.form.Button).

Ainsi pour créer un bouton qui aura le label « test » et qui sera placé dans le div « divtest » :

la méthode startup

Un grande majorité des widgets terminent leur initialisation par une méthode startup(). Cette méthode est appelée de manière invisible lorsque vous utilisez la syntaxe déclarative. En revanche en syntaxe programmatique, il faut le faire manuellement :

Il existe des cas ou vous ne devez pas utiliser le startup :

Dans le cas ou votre widget est ajouté à un widget de type layout (exemple : BorderContainer, StackContainer, etc…) en utilisant leur méthode addChild(). Celle-ci se charge d’exécuter le startup().
De même lorsque votre widget est ajouté à un contentPane via la méthode setContent(). Celle-ci se chargera aussi d’effectuer le startup() (Mais attention, uniquement si djConfig contient l’instruction « parseOnLoad:true » !)

D’une syntaxe à l’autre

Pour passer de la syntaxe déclarative à la syntaxe programmatique, il suffit donc de retranscrire les attributs en objet javascript et de bien penser au startup().
Exemple :

deviens :

Laisser un commentaire

Syntaxe Déclarative, points à retenir

Publié le 4 février 2009 par ben

La syntaxe déclarative est la plus simple des deux syntaxes disponible avec dojo (l’autre étant la syntaxe programmatique mais, du même coup, la moins flexible.

Le principe

Dojo va parser le contenu de l’arbre DOM et convertir certains noeud en widget.
Les noeuds sont identifiés grâce à des attributs spéciaux uniquement reconnus par dojo.
Utilisation
Pour faire en sorte que dojo parse le DOM, il faut :

soit mettre parseOnLoad=true dans l’attribut djConfig de la balise script principale,
soit utiliser le code suivant :

Les attributs génériques de dojo

dojoType

C’est cet attribut qui permet à dojo de savoir par quel widget il va devoir remplacer le noeud DOM.
Attention, à chaque dojoType doit correspondre un dojo.require

dojoAttachPoint

Utilisé dans le template d’un widget, l’attachPoint permet de garder une référence vers un noeuds DOM ou un widget.
Ici, on utiliserait this._button pour pointer directement sur le widget Button

jsId

Tout comme l’attachPoint, cet attribut va garder une référence vers le noeud DOM ou le widget mais ce coup ci en créant une variable globale.
Ici, _button pointera sur le widget.
Voir dojo .byId(), dijit .byId() et jsId pour plus d’informations

A cette liste d’attributs génériques s’ajoute des attributs spécifiques en fonction du widget à créer.
Ainsi, pour le bouton, on retrouvera (entre autres) l’attribut label qui permet de définir le texte à afficher dans le bouton
La liste des attributs disponible pour un objet se trouve dans la documentation officelle (pour le bouton : dijit.form.Button).

Laisser un commentaire

Envoyer le contenu de dijit.Editor dans un formulaire

Publié le 4 février 2009 par ben

Traduit de http://dojocampus.org/content/2008/07/16/submitting-dijiteditors-content-in-a-form/

Voici un petit HOW TO pour apprendre à envoyer le contenu du dijit.Editor avec une balise

.
Cette méthode n’est pas la seule possible.

S’assurer que le balise
possède bien l’attribut id (dans l’exemple, la valeur sera « my_form ») et
Créer un champ hidden et lui attribuer un name et un id (peut importe votre choix, le traitement sera côté serveur). Pour l’exemple, on va choisir « my_hidden_field » (pour le name et l’id)
Creer le dijit.Editor (note : si vous utilisez un textarea pour votre éditeur, vous n’aurez pas le contenu côté serveur car le parser dojo remplace le textarea par l’html qui construit l’éditeur.

Pour l’exemple, l’éditeur aura comme id « my_editor ».

Que ce passe-t-il ici ?
Dans un premier temps, on ajoute un évènement onLoad qui va lancer une fonction anonyme. Cette fonction va en connecter une autre sur le « onsubmit » du formulaire.
Cette seconde fonction anonyme (lancée au moment de l’envoi du formulaire) va prendre le contenu de l’éditeur et le placer dans le champ caché.
Le paramètre « false » dans la fonction getValue de l’éditeur n’est pas véritablement nécessaire. Il évite à l’éditeur d’effacer son contenu après l’appel à getValue.
Donc simplement, on attend la soumission du formulaire pour coller le contenu de l’éditeur dans un champ caché.

Si vous n’aimez pas les fonction anonyme, voici une autre façon de faire (avec quelques règles de validation en plus):

A noter : l’utilisation de dojo.byId et de dijit.byId. Utilisez dijit.byId quand vous avez besoin d’avoir l’instance d’un widget, et dojo.byId quand vous avez besoin d’un noeud DOM

Laisser un commentaire

dojo.declare, dojo.require, et dojo.provide

Publié le 4 février 2009 par ben

Afin d’utiliser pleinement dojo, il faut bien comprendre ce à quoi servent les méthodes dojo.declare, dojo.require et dojo.provide.
Le processus de création (comprendre : écriture puis utilisation) d’un objet est le suivant :

Création d’un fichier javascript (dit aussi ressource) qui va contenir l’objet
Déclaration de l’objet (écriture du code de l’objet)
Mise a disposition de l’objet dans votre application.

La 1ere étape consiste à créer un nouveau fichier javascript (exemple perso/foo.js) qui va contenir le code de votre objet. Afin que dojo puisse l’utiliser (le fichier), il faut y ajouter le dojo.provide.
S’en suit, l’écriture de l’objet à proprement parlé. Cette fois-ci, c’est dojo.declare qui est nécessaire pour bénéficier de la puissance des objets dojo (comme l’héritage, les contextes, les constructeurs, etc…)
Enfin, pour que votre objet soit « disponible » (que vous puissiez créer une instance) il faut utiliser dojo.require dans les fichiers qui vont avoir une instance de votre objet.

dojo.provide

Chaque fichier javascript est considéré comme une ressource. Lorsque la ressource est chargée (avec dojo.require), dojo.provide le mémorise.
C’est donc lui qui va permettre à dojo de savoir s’il doit ou non charger de nouvelles informations.
De plus, il s’assure que l’objet javascript qui va contenir la ressource existe.
Lors d’un dojo.provide(« perso.foo »), dojo.provide va créer l’objet javascript « perso » puis lui ajouter une propriété « foo » correspondant à la ressources.
De cette façon, perso.foo() existera, de même que perso.bar = function(){ } ne renverra pas une erreur.

Tous les fichiers javascript qui doivent être chargé via dojo.require doivent contenir au moins un dojo.provide en première ligne.
Sans cette ligne, il sera impossible d’utiliser dojo.require et donc votre objet ne sera pas utilisable
Le paramètre de dojo.provide doit correspondre au nom du fichier.
Exemple : pour le fichier perso/foo.js, vous devez faire dojo.provide(« perso.foo »).
On notera que, tout comme en java, les namespaces sont conçus en remplaçant les « / » du chemin par des « . ».

dojo.declare

dojo.declare est une méthode qui permet de créer un nouvel objet utilisable dans vos RIA.

dojo.declare accepte 3 paramètres.

le nom du nouvel objet (de type String)
le(s) ancêtre(s) (de type String ou Array)
Les propriétés et/ou les méthodes de l’objet (de type Object)

Un objet avec un constructeur

Lorsqu’un nouvel objet est déclaré, il dispose automatiquement d’une méthode « constructor ».
Celle-ci est appelée lorsque l’objet est instancié (via « new ») :

Cette méthode peut être utilisée pour initialiser certaines propriétés.
Si lors du « new » des paramètres sont spécifiés, ceux-ci sont automatiquement transmis à la méthode constructor :

L’héritage simple et multiple

Cette partie complexe et longue fera l’objet d’un prochain article.

dojo.require

Le but de dojo.require est de charger une ressource si celle-ci n’est pas encore en mémoire.
Cette méthode accepte comme paramètre le nom du module à charger (type String).
De ce fait, dojo.require(« perso.foo ») ira charger le fichier perso/foo.js s’il ne l’a pas déjà fait.
La vérification de la présence de la ressource est faite grâce au dojo.provide() placé en haut de chacune d’elle.
dojo.require ne fait rien d’autre que de charger la ressource en mémoire.

Laisser un commentaire

Présentation

Instancier la classe

Démarrer et arrêter le correcteur

Passerelle de communication avec aspell

Exemple et téléchargement

Dépendances

Utiliser la classe

Track

Présentation

Exemple d’objet

Description de l’objet

Différencier une entrée « sous menu » d’une entrée normale

Différencier une entrée « case à cocher » d’une entrée normale

Propriété spéciale

Instancier la classe.

Exemple et téléchargement

Utiliser la classe

Track

Voici un petit exemple de dojo/method :

Maintenant regardons dojo/connect

Degradabilité de dojo

Principe

Utilisation

la méthode startup

D’une syntaxe à l’autre

Le principe

Les attributs génériques de dojo

dojoType

dojoAttachPoint

jsId

dojo.provide

dojo.declare

Un objet avec un constructeur

L’héritage simple et multiple

dojo.require

Recherche

Articles récents

Activité du forum

Utilisateur