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)12. Sélection du moteur de recherche
Sélection du moteur de recherche dans un bouton avec liste déroulante.
12.1. Modification du template
Search.html
1 23 4 56 7 8 9 1011 12 13 14 1516 | <div class="search"> <div id="${id}Selector"></div> <input type="text" class="floatLeft greyBorder" name="${id}Field" value="" dojoAttachPoint="searchField" dojoAttachEvent="onkeypress:_onKeyPress,onclick:_clear" /> <div id="${id}Button" class="btn greyBorder floatLeft" label="${_nls.locale.send}" title="${_nls.locale.send}" dojoAttachEvent="onclick:_search"> </div></div> |
ligne
2 : ajout d'un div qui sera remplacé par le widget drop-down button de Dojo
12.2. Modification du widget
Search.js
1 2 3 4 56 7 8 9 1011 12 13141516 1718 19 2021 22 23 242526 27 28 29 3031323334353637 38 39 4041 42 4344454647 48 49 5051 52 53 54555657 58 59 6061 62 63 64 6566 67 68 697071727374757677787980818283848586878889909192 93 | /**********************************************/ /* */ /* Widget : Search */ /* Author : Berthenet Cyril */ /* *//**********************************************/ dojo.provide("exemple1.widget.Search"); dojo.require("dijit._Templated");dojo.require("dijit._Widget"); dojo.require("dijit.form.Button");dojo.require("dijit.Menu"); dojo.requireLocalization("exemple1", "Locale"); dojo.requireLocalization("exemple1", "Ressources"); /* Class: Search */ dojo.declare("exemple1.widget.Search", [dijit._Widget,dijit._Templated], { /* Object: _nls stockage du wording et des ressources du widget */ _nls:{locale:null,ressources:null}, /* String: templatePath chemin d'acces vers le template du widget */ templatePath: dojo.moduleUrl("exemple1.widget", "template/Search.html"), /* Object: _dropdown bouton de selection du moteur de recherche */ _dropdown:null, /* Array: _engines liste des moteurs de recherche */ _engines:null, /* Function: constructor Constructeur */ constructor: function(){ console.log("exemple1.widget.Search::constructor"); this._nls.locale=dojo.i18n.getLocalization("exemple1","Locale").searchWidget; this._nls.ressources= dojo.i18n.getLocalization("exemple1","Ressources").searchWidget; this._engines=this._nls.locale.engines; this._dropdown={}; }, /* Function: destroy Destructeur */ destroy: function(){ console.log("exemple1.widget.Search::destroy"); this.inherited("destroy",arguments); if(this._dropdown){this._dropdown.destroy();} delete this._nls; delete this._engines; }, /* 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.text==null||this.text=="")? this._nls.locale.text:this.text; var menu = new dijit.Menu(); dojo.forEach(this._engines, function(engine){ var menuItem = new dijit.MenuItem({ label: engine, onClick: dojo.hitch(this, function(param) { this._dropdown.attr("label",param); this._dropdown.attr("engine",param); },engine) }); menu.addChild(menuItem); },this); this._dropdown = new dijit.form.DropDownButton({ label: this._engines[0], engine: this._engines[0], dropDown: menu }, dojo.byId(this.id+"Selector")); this._dropdown.startup(); }, |
lignes
13 : importation de la classe bouton de Dojo
14 : importation de la classe menu de Dojo pour la liste déroulante du bouton
17 : chargement des ressources
24 : ajout des ressources à l'objet _nls
32 : objet bouton
36 : liste des moteurs de recherche
43 : sélection des ressources en fonction de la langue du navigateur
45 : création du tableau avec la liste des moteurs de recherche
54 : destruction du bouton lors de la destruction de notre widget
56 : destruction du tableau
69 : instanciation d'un menu dojo
71 : pour chacun des moteurs de recherche on va créer un item dans le menu
75 à 78 : en cliquant sur un item du menu on va sélectionner un moteur et changer le label du bouton
81 : ajout des items au menu
85 à 89 : instanciation d'un bouton drop-down à partir du menu créé précédemment
89 : le bouton va remplacer div "searchSelector" dans le template
91 : affichage du bouton
Search.js
114 115 116 117 118119 120 121 122 123124125126127128129130131132133134135136137138139140 141 142 | /* Function: _search Methode privee executant la recherche */ _search: function() { console.log("exemple1.widget.Search::_search"); if( this.searchField.value!=this._nls.locale.text && this.searchField.value!=this.text && this.searchField.value != "") { var url = ""; var fieldValue = this.searchField.value; var engines = this._nls.ressources.engines; switch(this._dropdown.attr('engine')){ case this._engines[0]: url = engines.google; break; case this._engines[1]: url = engines.yahoo; break; case this._engines[2]: url = engines.wikipedia; break; } console.log("url pour la recherche : ", url+escape(fieldValue)); } else { |
lignes
123 : url utilisée pour lancer la recherche
124 : chaîne de caractère saisie dans le champ de recherche
125 : url des moteurs de recherche sans les paramètres
127 à 137 : construction de l'url en fonction du moteur sélectionné dans le bouton drop-down
139 : affichage de l'url complète avec la chaîne à rechercher au format http
12.3. Ajout des moteurs de recherche dans les locales
nls/Locale.js
1 2 3 456789 1011 12 13 14 | ({ "searchWidget" : { "engines" : [ "Google", "Yahoo", "Wikipedia" ], "search": "search", "send": "go", "text": "enter your keywords here..." } }) |
1 2 3 456789 1011 12 13 14 | ({ "searchWidget" : { "engines" : [ "Google", "Yahoo", "Wikipedia" ], "search": "rechercher", "send": "lancer la recherche", "text": "saisir le texte ici..." } }) |
lignes
4 à 8 : liste des moteurs de recherche disponibles dans notre tutoriel
12.4. Ajout des url de recherche dans les ressources
nls/Ressources.js
1 2 3 4 56 7 8 9 1011 | ({ "searchWidget" : { "engines" : { "google": "http://www.google.com/search?q=", "yahoo": "http://uk.search.yahoo.com/search?p=", "wikipedia": "http://en.wikipedia.org/wiki/Special:Recherche?search=" } } }) |
lignes
4 à 8 : url anglaises de recherche sur les moteurs google, yahoo et wikipédia sans la chaîne à rechercher
nls/fr/Ressources.js
1 2 3 4 56 7 8 9 1011 | ({ "searchWidget" : { "engines" : { "google": "http://www.google.fr/search?q=", "yahoo": "http://fr.search.yahoo.com/search?p=", "wikipedia": "http://fr.wikipedia.org/wiki/Special:Recherche?search=" } } }) |
lignes
4 à 8 : url françaises de recherche sur les moteurs google, yahoo et wikipédia sans la chaîne à rechercher
12.5. Ajout du style au sample de test
searchWidget.html
10 11 12 13 | <style type="text/css" title="text/css"> @import "../dijit/themes/dijit.css"; @import "../dijit/themes/nihilo/nihilo.css"; </style> |
ligne
10 : ajout des thèmes css "dijit" et "nihilo" du framework Dojo pour le design des boutons
5455
56
| <body class="nihilo"> <div id="search"></div> </body> |
ligne
54 : ajout de la class "nihilo" à la balise body du sample
12.6. Définition du style du bouton à liste déroulante
search.css
1 2 3 4 56 7891011 12 13 14 1516 17 18 19 20212223242526272829303132333435 | .floatLeft { float:left; } .greyBorder { border:1px solid #B0B0B0;} .search { height:30px;}.search .btn { background: url(../images/loupe.png) no-repeat; width:20px; height:19px; border-left:0px; cursor:pointer;} .search input{ height:21px; font:13px verdana, sans-serif; }.nihilo .dijitDropDownButton .dijitReset { height:16px;}.nihilo .dijitDropDownButton { float: left; margin:0 !important;}.nihilo .dijitDropDownButton span { font:10px verdana, sans-serif;}.nihilo .dijitButtonNode { width:80px; border:1px solid #B0B0B0 !important; border-right:0px !important;} |
lignes
8 : ajout d'un espace entre le widget de recherche et la zone d'affichage
21 à 35 : surcharge du style "nihilo" de Dojo