Life behind the mirror

mercredi 08 septembre 2010

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)

14 : Affichage des erreurs

Création d'une popup pour l'affichage des erreurs.

14.1. Affichage de la popup si la recherche ne peut être exécutée

Search.js

  else {
                
    var dialogbox = dijit.byId("dialogbox");
                        
    var content = this._nls.ressources.popup;    dialogbox.attr("title",this._nls.locale.popup.title);
    dialogbox.attr("content",dojo.string.substitute(content,{
        message:this._nls.locale.popup.message,
        btnLabel:this._nls.locale.popup.btnLabel
    }));                        
    dialogbox.show();  
  }


      lignes
      144 : on stock le noeud DOM du sample sur lequel on affichera la boîte de dialogue
      146 : wording correspondant à la popup
      147 : titre de la popup
      148 à 151 : ajout du contenu sous forme d'un template
      153 : affichage de la boîte de dialogue

14.2. Ajout des propriétés de la popup dans le wording

nls/Locale.js

1
2
3
4
56
7
8
91011121314
1516
17
18
19

({
 
  "searchWidget" : {
    "engines" : [
        "Google",        "Yahoo",
        "Wikipedia"
    ],
    "popup": {        "btnLabel":"OK",        "message": "you must write more than one character",        "title": "Error"    },    "search": "search",
    "send": "go",    "text": "enter your keywords here..."
  }
 
})

nls/fr/Locale.js

1
2
3
4
56
7
8
91011121314
1516
17
18
19

({
 
  "searchWidget" : {
    "engines" : [
        "Google",        "Yahoo",
        "Wikipedia"
    ],
    "popup": {        "btnLabel":"OK",        "message": "Veuillez saisir au moins un caract\u00e8re",        "title": "Erreur"    },    "search": "rechercher",
    "send": "lancer la recherche",    "text": "saisir le texte ici..."
  }
 
})


      lignes
      10 : label du bouton de la boîte de dialogue
      11 : message d'erreur
      12 : titre de la popup

encodage des accents en unicode.

14.3. Création du template de la popup dans les ressources

nls/Ressources.js

1
2
3
4
56
7
8
9101112131415161718192021
22

({
 
  "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="
    },
    "popup" : "<table> \                 <tr> \                   <td>${message}</td> \                 </tr> \                 <tr> \                   <td align=\"center\"> \                   <button dojoType=\"dijit.form.Button\" type=\"submit\"> \                     ${btnLabel}\                   </button></td> \                 </tr> \              </table>"  } 
})

nls/fr/Ressources.js

1
2
3
4
56
7
8
9101112131415161718192021
22

({
 
  "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="
    },
    "popup" : "<table> \                 <tr> \                   <td>${message}</td> \                 </tr> \                 <tr> \                   <td align=\"center\"> \                   <button dojoType=\"dijit.form.Button\" type=\"submit\"> \                     ${btnLabel}\                   </button></td> \                 </tr> \              </table>"  } 
})


      lignes
      9 à 20 : template de la boîte de dialogue. Le message d'erreur et le label du bouton peuvent être modifiés dynamiquement.

par simplicité, nous avons basé notre template sur un tableau HTML. Afin de respecter les normes WAI (Web Accessibility Initiative) pour l'accessibilité, préférez des balises div pour vos templates.

14.4. Ajout de la boîte de dialogue au sample de test

searchWidget.html

1
2
3
4
56
7
8
9
1011
12
13
14
1516
17
18
19
2021
22
23
24
2526
27
28
293031
32
33
34
3536
37
38
39
4041
42
43
444546474849
5051
52
53
54
5556
57
58
59
6061
62
63
646566

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
                    <title>Search</title>
                
    <link rel="stylesheet" type="text/css" href="./css/search.css" />
        
    <style type="text/css" title="text/css">      @import "../dijit/themes/dijit.css";
      @import "../dijit/themes/nihilo/nihilo.css";
    </style>
                
    <script> 
      var djConfig = {
        parseOnLoad: false,
        isDebug: true
      }; 
    </script>
        
    <script type="text/javascript" src="../dojo/dojo.js" charset="utf-8"></script>
                    <script type="text/javascript" language="javascript">
 
      dojo.require("dojo.i18n");
      dojo.require("dijit.Dialog");       dojo.require("exemple1.widget.Search");
 
      dojo.addOnLoad(init);
        
      function init(){ 
        var _search = new exemple1.widget.Search({
          id:"search",
          text:"saisir votre texte ici..."
        }, dojo.byId("search"));                                
        _search.startup();
    
        var dialog = new dijit.Dialog({          title: "title"        }, dojo.byId("dialogbox"));         dialog.startup();                                        
      }    
    </script>
  </head>
  <body class="nihilo">
    <div id="search"></div>    <iframe id="viewer" 
            name="viewer" 
            src="./static/empty.html"
            scrolling="yes"
            height="400"            width="100%"
            frameborder="yes">
    </iframe>
    <div id="dialogbox"></div>  </body></html>


      lignes
       29 : importation de la classe Dialog de la librairie dijit. 
       44 à 46 : instanciation de la boîte de dialogue.
       48 : affichage de la boîte de dialogue.
       64 : div qui sera remplacé par le widget Dialog.

Figure 6. Résultat final.

voir le résultat