Dojo partie 1 Widgets dojo.form Validation des formulaires Côté client Côté serveur Requêtes Ajax
1 Modules Dojo 3 espaces de noms principaux: dojo: bibliothèque de base dijit: bibliothèque de widgets Dojox: bibliothèque d extensions et de composants en phase de test.
Atelier 1 1 importer le framework Dojo dans la page form.html <script type="text/javascript" text/javascript language="javascript" src="dojo/dojo dojo/dojo.js js" djconfig="parseonload:true,isdebug:true"> </script> Remarque: dans cet exemple, la page form.html se trouve au même niveau que les dossiers dojo, dijit et dojox de la distribution Dojo +dojo +dijit +dojox form.html 3 lier la feuille de style form.css à la page html <link rel="stylesheet" href="form.css" /> 2 ajouter les styles dojo.css: définit it les styles tl des éléments html Les styles spécifiques au widgets dojo sont placés dans le dossier: dijit/themes/ <style type="text/css"> @import "dojo/resources/dojo.css"; @import "dijit/themes/tundra/tundra.css"; d d " </style>
Atelier 1: Validation côté client Le dossier themes contient les styles suivants: tundra, soria et nihilo. 4 appliquer le style tundra <body class= "tundra" > 5 Validation côté client: champ prénom Importer le widget ValidationTextBox : <script type="text/javascript"> dojo.require( require("dijit.form.validationtextbox"); </script> validation du champ prénom: associer le widget ValidationTextBox au champ prénom (dojotype="dijit dijit.form.validationtextbox ValidationTextBox" ) la saisie du prénom est obligatoire (required="true" ) traitements: la première lettre doit être en majuscule ( propercase="true" ) les espaces avant et après doivent être supprimés (trim="true" ) <input type="text" id="prenom" name="prenom" dojotype="dijit dijit.form.validationtextbox ValidationTextBox" required="true" propercase="true" trim="true" propercase="true" promptmessage="saisir votre prénom" invalidmessage="le prénom est obligatoire" />
Autres propriétés du widget ValidationTextBox lowercase: toutes les lettres en minuscules uppercase: toutes les lettres en majuscules regexp: une expression régulière pour valider le champ Ajouter des widgets de validation pour : nom: première lettre en majuscules username: toutes les lettres en minuscules email: Saisie obligatoire Expression régulière de validation: regexp= "\b[a-za-z0-9._%-]+@[a-za-z0-9.-]+\.[a-za-z]{2,4\b" adresse cp: Saisie obligatoire Nombre de caractères maximale: 10 Expression régulière: regexp= "\d{5([\-]\d{4)?$"
6 dijit.form.datetextbox Associer un widget de type DtT DateTextBoxtB au champ «dateachat» dojotype="dijit.form.datetextbox" j required="true" promptmessage="saisir la date d'achat" invalidmessage="date non valide. " constraints="{min:'10 12 2009'«<input type= "text" id= "dateachat" name="dateachat" size="10" dojotype= "dijit.form.datetextbox«required= "true«promptmessage= "Saisir la date d'achat" invalidmessage= "Date non valide." constraints= "{min:'10-12-2009'" />
7 Validation côté serveur Le nom d utilisateur doit être validé côté serveur pour vérifier qu il n est nest pas déjà utilisé Définir l événement onchange du champ username ( onchange= "usernameonchange" ), le nom de la fonction réponse de l événement doit être saisi sans les parenthèses pour que le traitement t de l événement é soit effectué par le framework dojo. Importer le fichier usernameonchange.js qui contient la définition de La fonction usernameonchage : <script type="text/javascript" src="usernamevalidation.js"> </script> Remarque: ce bloc de code doit saisi iidans la section head après le script d import des widgets. Requête Ajax dojo.xhrget: accepte un objet en paramètre contenant les données de la requête ajax de type Get { url: url + paramètres handleas: format d échange de données handle: gestionnaire de la réponse ajax qui peut avoir deux paramètres, le premier paramètre contient l objet réponse en cas de succès de la requête Ajax, sinon il contient l objet error, le deuxième paramètre contient le statut de la requête.
Requête xhrget Exemple: dojo.xhrget( { url : "envoyer.php?username=" + username, handleas : "json", handle : traiterreponse ); Autres propriétés handleas: valeurs possibles: text (par défault) json xml javascript. sync: false (par défaut) preventcache: false (par défaut) content: paramètres à envoyer dans la requête GET timeout : 0 (non défini par défaut) user: load: fonction qui sera invoquée par xhrget hg tlors de la réception de la réponse Ajax qui reçoit en paramètre l objet réponse. password: error: fonction à invoquer en cas d erreur, cette dernière reçoit un objet javascript de type Error contenant des informations sur l erreur.
dojo.xhrpost Possède les mêmes propriétés que dojo.xhrget Autres propriétés optionnelles: form: id ou nœud DOM du formulaire à envoyer, si l url n est pas définie, alors la valeur de la propriété ééaction du formulaire est utilisée. Fonction de traitement de la réponse Ajax: function traiterreponse(reponse) p ){ // Effacer les messages d'erreurs déjà affichés dijit.byid ("username").displaymessage(); if (!reponse.valide) { var message = "Nom utilisateur déjà existant"; // afficher le message d'erreur à côté du champ dijit.byid( byid("username") ).displaymessage(message);
Script PHP <?php include('json.php'); class Resultat { var $valide; $r=new Resultat(); t() $u=$_request["username"]; if( $u=="admin") $r->valide=false; else $r->valide=true; // instanciation du service JSON $json = new Services_JSON(); // Convertir la variable echo $json->encode($r);?> Exercice : Ajouter le code nécessaire pour vérifier la disponibilité de l adresse email.
8 le widget ComboBox Importer le widget ComboBox dojo.require("dijit.form.combobox"); Associer le champ pays à un widget ComboBox Ajouter les propriétés suivantes dans le champ pays dojotype= "dijit.form.combobox" autocomplete= "true" (créer une liste de suggestion) forcevalidoption= "true" (l utilisateur ne doit pas saisir un nom de pays qui n existe pas dans la liste).
8 le widget Editor Importer le widget dijit.editor dojo.require("dijit.editor"); Remplacer le champ textarea «comment» par: <div name=" comment " id=" comment " dojotype=" dijit.editor "></div>
9 afficher les villes du pays sélectionné Dans cette étape de l atelier li nous allons effectuer les tâches suivantes: Associer le champ ville à un widget ComboBox Lors de la sélection du pays, nous allons envoyer le nom du pays sélectionné vers le serveur dans une requête Ajax Traiter la réponse du serveur Ajouter les propriétés suivantes dans le champ ville dojotype= "dijit.form.combobox" autocomplete= t "true"" forcevalidoption= "false" (l utilisateur peut saisir une ville qui n est pas proposée dans la liste) Définir l événement onchange de la liste «pays» onchange="remplirville" (nom de la fonction qui sera invoquée lors de la survenance de l événement onchange par le framework DOJO)
9 afficher les villes du pays sélectionné function remplirville(){ //Obtenir le nom du pays sélectionné var pays=dijit.byid("pays").attr("value"); //URL de la requête Ajax var url="pays.php?pays=" + pays; //Obtenir une référence au widget ville var ville=dijit.byid("ville"); //Effacer le contenu de la liste ville.attr("displayedvalue"); //Créer une nouvelle source de données un DataStore var villestore=new dojo.data.itemfilereadstore({url:url); //associer le datastore à la liste des villes; ce qui déclenchera automatiquement une nouvelle requête XHR. ville.store=villestore;
9 Pays.php <?php include('json.php'); class v{ public $name; public $text; public function construct($n,$t) { $this->name=$n; $this->text=$t; $pays=array("maroc"=>array(new y( y( v("marrakech","marrakech"),new v("rabat","rabat"),new v("casa","casa"),new v("salé","salé")),"france"=>a rray("marseille","paris", "Lyon")); $p=$_request["pays"]; if ($p=="maroc") { $villes=$pays[$p]; $vi["items"]=$villes; items // instanciation du service JSON $json = new Services_JSON(); echo $json->encode($vi); else { echo <<<VILLES { items: [ {name:"des villes", l:"des villes"
Pays.php ] VILLES; /////////////////////////////// /* if ($p=="maroc") { echo <<<VILLES { items: [ {name:"casablanca", label:"casablanca", {name:"marrakech", label:"marrakech", {name:"rabat", label:"rabat", {name:"salé", label:"salé" ] VILLES; else { echo <<<VILLES { items: [ {name:"des villes", l:"des villes" ] VILLES; */?>
10 Traitement du formulaire Lorsde cette étape de l atelier nous allons effectuer les actions suivantes Intercepter l envoi du formulaire par un événement DOJO Revalider tous les champs du formulaire Si au moins un champ n est pas valide, mettre le focus sur le premier champ non valide et afficher le message d erreur correspondant Si tous les champs sont valides envoyer le formulaire. Convertir le formulaire en un widget Dojo Importer le widget form dojo.require("dijit.form.form"); Ajouter les attributs t suivants dans l élément form: dojotype= "dijit.form.form" execute= "validerformulaire" (l événement execute est déclenché au moment de l envoi du formulaire et il est intercepté par le framework dojo) Créer la fonction validerformulaire function validerformulaire() { var form =dijit.byid("fclient"); //La méthode validate() retourne true si tous les champs sont valides, sinon elle retourne false // et met le focus sur le premier champ non valide if(form.validate()); form.submit();
2 dijit.form 2 1 champ de texte 2 22 select 2 3 boutons 2 4 Autres contrôles
Widgets champ de texte dijit.form.currencytextbox tb dijit.form.datetextbox dijit.form.numberspinner dijit.form.numbertextbox dijit.form.simpletextarea dijit.form.textarea dijit.form.textbox dijit.form.timetextbox dijit.form.validationtextbox
widgets de type select dijit.form.combobox: avec autocompletion dijit.form.multiselect dijit.form.filteringselect
boutons dijit.form.button: un bouton de type submit/reset/button dijit.form.combobutton dijit.form.dropdownbutton: D un bouton qui affiche un menu ou une fenêtre popup si on clique dessus dijit.form.togglebutton
Autres contrôles dijit.form.checkbox dijit.form.form dijit.form.radiobutton dijit.form.slider
Pour aller plus loin Référence de l API lapi DOJO : http://api.dojotoolkit.org/ Manuel Dojo: http://docs.dojocampus.org/manual/index