Discussion :

[vermine]

Salut à tous,

Je vous propose de recenser dans ce fil les sources, astuces et autres essais que vous avez découverts, essayés, voire créés et que vous jugez intéressant de partager. Dès que nous aurons atteint un nombre suffisant de contributions, nous pourrons certainement créer une FAQ Dojo.

Comment faire ?

Vous postez un message dans ce fil de discussion (une simple réponse) en inscrivant simplement votre code. Si ce code est décomposé en plusieurs fichiers, joignez un ZIP.

En aucune manière les codes postés ne doivent être commentés par les autres utilisateurs. Si quelqu'un souhaite faire une remarque, alors celle-ci a lieu dans le forum. En bref,
1 message du fil de la discussion = 1 exemple de code

Merci à tous !

[vermine]

Je ne sais pas si ils sont encore tous les trois d'actualités ou bien si il y a des nouveautés mais j'ai utilisé ces trois choses-ci, donc j'en touche un mot. Mot qui devra être corrigé, j'en suis certain, ne serait-ce que pour une question de vocabulaire. Je me suis inspiré d'article sur le net.


Récupérer un noeud

Je vais parler de trois méthodes: dojo.byId(), dijit.byId et jsId.


En guise d'exemple, voici un ContentPane:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div id="monIdDiv"
     dojoType="dijit.layout.ContentPane"
     jsId="monJSId">
     Hello World!
</div>

Il a un attribut HTML id (monIdDiv), ainsi qu'un attribut spécifique à Dojo jsId (monJSId).


dojo.byId
Là où nous avions document.getElementById(), nous avons dojo.byId() pour obtenir un noeud DOM selon son attribut id:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var monDiv = dojo.byId("monIdDiv");
monDiv.style.height = '100px';

dijit.byId
Dojo ajoute des attributs qui lui sont spécifiques. On parle ici d'un objet Dojo crée par le widget system lors de son initialisation en un dijit. Grâce à dijit.byId(), on peut accéder à ses attributs, ainsi qu'à ses méthodes. Ou bien accéder aux autres attributs comme précédemment. Cependant, selon l'héritage des classes Dojo, les dijit passe par la propriété domNode:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
var monDiv = dijit.byId("monIdDiv");
monDiv.setContent("Bonjour à tous!");
monDiv.domNode.style.height = '100px';

Notez que cela permet de sauvegarder dans une variable locale le résultat du dijit.byId().



jsId
Lors du parsing Dojo, le jsId va être automatiquement lié à la création d'une variable Javascript globale ayant pour nom le jsId. Cette variable contient le même objet que celui retourné par dijit.byId(). Comprenez-donc la nécessité d'avoir des jsId uniques. Cependant, jsId n'est pas un attribut obligatoire.
Donc, étant donné que ma variable globale existe automatiquement, je n'ai plus besoin de passer par dijit.byId():

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
monJSId.setContent("Bonjour à tous!"); 
monJSId.domNode.style.height = '100px';

[vermine]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
//Modifier la valeur d'un attribut
var monObjet = dijit.byId("monObjet"); //Par exemple une TextBox avec un attribut value
var maValeur = "Bonjour!";
 
monObjet.attr("value", "Hello");    //En dur
monObjet.attr("value", maValeur);   //Via une variable

[Daniel_Gibot]

Bonjour,

Utilisant les titlepane pour réaliser un menu, je me suis vite retrouvé confronté au fait que les titlepane restent ouverts. De ce fait, n'ayant pas envie de chercher une alternative sur le net, j'ai réalisé un petit script qui ferme tous les titlepane sauf celui sur lequel on clique.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
function ouvferm(nom,id, nb){
    var sub1 = dijit.byId(nom+id);
    var ouvferm = sub1.attr('open');
 
    for(i=1; i<=nb;i++){
        if(i != id){
	sub = dijit.byId(nom+i);
	sub.attr('open', false);
         }
     }
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<div id='menu1' class='menu' dojoType="dijit.TitlePane" title="Menu 1" open='true' onClick='ouvferm("menu","1","4");'>
	menu 1
</div>
<div id='menu2' class='menu' dojoType="dijit.TitlePane" title="Menu 2" open='false' onClick='ouvferm("menu","2","4");'>
	menu 2
</div>
<div id='menu3' class='menu' dojoType="dijit.TitlePane" title="Menu 3" open='false' onClick='ouvferm("menu","3","4");'>
	menu 3
	<div class='sousmenu' id='submenu1' dojoType="dijit.TitlePane" title="Sous menu 1" open='false' onClick='ouvferm("submenu","1","3");'>
		Sous menu 1
	</div>
	<div class='sousmenu' id='submenu2' dojoType="dijit.TitlePane" title="Sous menu 2" open='false' onClick='ouvferm("submenu","2","3");'>
		Sous menu 2
	</div>
	<div class='sousmenu' id='submenu3' dojoType="dijit.TitlePane" title="Sous menu 3" open='false' onClick='ouvferm("submenu","3","3");'>
		sous menu 3
	</div>
</div>
 
<div id='menu4' class='menu' dojoType="dijit.TitlePane" title="Menu 4" open='false' onClick='ouvferm("menu","4","4");'>
	menu 4
</div>

[hapalemur]

Hello,
Lors de la fourniture des pages, normalement, c'est le serveur qui rempli les champs de la page en allant chercher les valeurs dans la base de données. Ceci étant effectué à l'aide de scripts php, ou de jsp+servlet.
Celà à pour inconvénient d'alourdir le code de la page html, surtout si comme moi, on a une vingtaine de champs à initialiser. De plus, quand les pages servent à la fois à la création/modification d'entités dans la base, il est préférable de fournir une page vierge; et pour la modification, le serveur génère un fichier "tmp/datas.json" qui est récupéré par la page lors de l'instanciation d'un Store.
Celà me donne une succession de couples {"identifiantvariable":"xxx","valeur":"yyy"} pour la structure du fichier datas.json :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
{"items":[{"valeur":"true","idvar":"chkboxnom"},{"valeur":"8","idvar":"xposnom"},
{"valeur":"10","idvar":"yposnom"},{"valeur":"Feb 1, 2010","idvar":"datcre"},
{"valeur":"Feb 1, 2010","idvar":"datmod"},{"valeur":"5-antique.jpg","idvar":"nomfichier"}],
"identifier":"idvar"}

( idvar référencie presque toujours le nom donné à la variable lors de la création de l'objet Dojo ( TextBox, CheckBox, NumberSpinner, etc... )

Et pour l'initialisation des champs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// construction du store pour l'accès aux données
var jsonData = new dojo.data.ItemFileReadStore({url: 'tmp/datas.json'});
 
// fonction d'affectation des données
function initData(items, request){
   var item;
   for (i = 0; i < items.length; i++) {
   item = items[i];
   idvar =  jsonData.getValue(item,"idvar");
   switch(idvar){
	case 'xposnom': xposnom.attr('value',jsonData.getValue(item,"valeur"));
		break;
	case 'yposnom': yposnom.attr('value',jsonData.getValue(item,"valeur"));
		break;
	case 'nomfichier': image.attr({content: '<img src="tmp/' + jsonData.getValue(item,"valeur") + '"/>'}); // ici image est un ContentPane
		break;
	case 'datcre': datcre.attr('value',jsonData.getValue(item,"valeur"));
		break;
	case 'datmod': datmod.attr('value',jsonData.getValue(item,"valeur"));
		break;
	case 'chkboxnom': if (jsonData.getValue(item,"valeur") == 'true'){
			dijit.byId("caseNom").attr('value',true); // ici je ne suis pas parvenu à référencer la CheckBox directement.
		      }
		break;
	.........
   }
}
 
// fonction de callback en cas d'erreur
function fetchError(error, request){
   alert("Erreur sur la récupération des données : " + error);
}
 
// Initialisation des champs
jsonData.fetch(
   {query: {idvar: '*'},
   onComplete: initData,
   onError: fetchError,
   queryOptions: {deep: false}
   });

Il y a peut-être moyen de faire plus dense, mais bon, ... je débute

J'savais bien qu'il y avait possibilité de faire plus concis, comme la solution envoyée en MP par Daniel_Gibot, plus besoin de store et de fetch, et avec en prime un fichier JSON plus simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{"chkboxnom":"true","posnomx":"8","posnomy":"10","datcre":"Feb 1, 2010","datmod":"Feb 1, 2010","nomfichier":"5-antique.jpg"}

et pour initialiser les champs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
var monForm = dojo.fromJson(data);
for(elem in monForm){
    if(elem.substr(0,3 == 'chk']{ // cas particulier de la checkbox
        dijit.byId(elem).attr('checked',monForm[elem]);
    } else if ( .... ){ // autres cas particuliers
        ......
    } else { // cas général
        dijit.byId(elem).attr('value',monForm[elem]);
    }
}

Seul problème, celà diminue la taille de mon code ... et moi qui suis payé à la ligne

[vermine]

Comment vérifier les champs d'un formulaire ?

Pour ce faire, nous utilisons plusieurs classes:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<script type="text/javascript">
   dojo.require("dijit.form.Form");
   dojo.require("dijit.form.Button");
   dojo.require("dijit.form.ValidationTextBox");
   dojo.require("dojox.validate.regexp");
</script>

La première permet de transformer le formulaire en un widget dojo.
La seconde nous est utile pour obtenir un widget de type bouton, qui sera le bouton pour soumettre le formulaire.
La troisième, comme son nom l'indique, permet de valider la valeur encodée dans un champ de type text.
Et la quatrième fournit quelques expressions régulières toutes faites et bien utiles pour valider le format des valeurs encodées dans les champs d'un formulaire. La liste est bien entendu non exhaustive et vous pouvez l'agrandir selon vos exigences.

L'exemple tout fait le plus "international" est l'adresse e-mail. Lors de la création du champ e-mail, vous devez préciser plusieurs choses à Dojo:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<form action="page_suivante.php" method="post" id="id_formulaire" dojoType="dijit.form.Form">
e Mail:
<input 
   id          = "id_e_mail" 
   type        = "text" 
   name        = "mon_e_mail"
   value       = ""
   required    = "true"
   dojoType    = "dijit.form.ValidationTextBox"
   regExpGen   = "dojox.validate.regexp.emailAddress"
   invalidMessage = "Erreur de format dans l'e Mail." 
/>
</form>

Tout d'abord, je donne un id à mon formulaire car je m'en servirai plus tard.
Mon champ e Mail a pour dojoType ValidationTextBox qui est très explicite. Il a aussi une regExpGen et dans notre cas, elle s'appelle emailAddress. Finalement, je précise le message d'erreur via l'invalidMessage.
Notez l'attribut required qui indique que le champ est obligatoire ou non.

Vous créez alors votre formulaire entier de cette manière en appelant les diverses regExpGen que vous désirez et pour finir, vous ajoutez le bouton qui soumettra le formulaire en testant les champs recensés:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<input 
   type     = "submit" 
   label    = "Soumettre" 
   dojoType = "dijit.form.Button" 
   onClick  = "dijit.byId('id_formulaire').validate();"
/>

Ce bouton, de type submit mais de dojoType dijit.form.Button, lance l'évènement onClick. On récupère le formulaire qui a pour id "id_formulaire" et la fonction validate() va vérifier tous les champs de ce formulaire.