Tutoriel : Mon premier widget Dojo
Création d'un composant graphique Dojo pour interfacer l'accès à plusieurs moteurs de recherche (Compatible Dojo 1.2.3)7. Internationalisation
Gestion des langues pour le wording de notre widget.
7.1. Modification du template
Search.html
1 2 3 4567 89 101112 13 14 | <div class="search"> <input type="text" class="floatLeft greyBorder" name="${id}Field" value="" dojoAttachPoint="searchField" /> <div id="${id}Button" class="btn greyBorder floatLeft" label="${_nls.locale.send}" title="${_nls.locale.send}"> </div> </div> |
lignes
4 et 8 : création d'identifiants uniques pour les éléments du template à partir de l'id du widget fixé dans le sample
par exemple deviendra
6 : utilisation d'un pour accéder directement au noeud DOM dans la classe :
10 et 11 : utilisation d'un fichier de wording pour le label et le titre du bouton
nous traiterons uniquement la langue française dans ce tutoriel
7.2. Modification de la classe
Search.js
1 2 3 4 56 7 8 9 1011 12 1314 1516 17 18192021 22 23 24 2526 27 28 29 3031 32 3334353637383940414243444546474849 50 | /**********************************************/ /* */ /* Widget : Search */ /* Author : Berthenet Cyril */ /* *//**********************************************/ dojo.provide("exemple1.widget.Search"); dojo.require("dijit._Templated");dojo.require("dijit._Widget"); dojo.requireLocalization("exemple1", "Locale"); /* Class: Search */dojo.declare("exemple1.widget.Search", [dijit._Widget, dijit._Templated], { /* Object : _nls stockage du wording */ _nls:{locale:null}, /* String: templatePath chemin d'acces au template du widget */ templatePath: dojo.moduleUrl("exemple1.widget", "template/Search.html"), /* Function: constructor Constructeur */ constructor: function(){ console.log("exemple1.widget.Search::constructor"); this._nls.locale=dojo.i18n.getLocalization("exemple1","Locale").searchWidget; }, /* Function: destroy Destructeur */ destroy: function(){ console.log("exemple1.widget.Search::destroy"); this.inherited("destroy",arguments); delete this._nls; }, /* Function: startup Methode publique appelee apres l'instanciation du widget et la creation de tous ses noeuds DOM dans document.body */ startup: function(){ console.log("exemple1.widget.Search::startup"); this.inherited("startup",arguments); this.searchField.value = this._nls.locale.text; } }); |
lignes
13 : définit le dossier où se trouve le répertoire "nls" pour la gestion des langues (native language support).
20 : objet qui contiendra l'ensemble du wording de notre widget.
30 : chargement du wording correspondant à la langue du navigateur.
Nous avons choisi ici d'optimiser le code en ne chargeant que le wording de notre widget ().
35 : création d'un destructeur héritant des propriétés de _Widget.
38 : destruction de l'objet contenant le wording
44 à 48 : méthode startup() héritant des propriétés de _Widget. Elle est appelée après l'instanciation du widget dans le sample.
47 : remplissage du champ de saisie avec une chaîne de caractères définie dans les locales.
attention de bien ajouter une virgule entre chaque déclaration de fonctions (lignes 31 et 39).
7.3. Création des fichiers pour le wording
nls/Locale.js
Dans le cas où votre navigateur n'est pas en langue française, Dojo utilisera ce fichier de langue. Il s'agit donc de mettre ici la langue la plus internationale possible (à savoir, l'anglais) :
1
2
3
4
56
7
8
9
| ({ "searchWidget" : { "search": "search", "send": "go", "text": "enter your keywords here..." } }) |
nls/fr/Locale.js
Ce fichier sera utilisé par Dojo si la langue de votre navigateur est le français :
1
2
3
4
56
7
8
9
| ({ "searchWidget" : { "search": "rechercher", "send": "lancer la recherche", "text": "saisir le texte ici..." } }) |
les fichiers Locale.js doivent être complétés au format JSON.
7.4. Modification du sample
searchWidget.html
22
23
24
25
26 | <script type="text/javascript" language="javascript"> dojo.require("dojo.i18n"); dojo.require("exemple1.widget.Search"); |
ligne
24 : importation de la classe Dojo "i18n" pour l'internationalisation.
7.5. Test
Figure 5. Chargement des locales du widget.