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)5. Création d'un 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 29 3031 32 33 34 3536 37 38 39 4041 42 | <!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" /> <script type="text/javascript"> 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("exemple1.widget.Search"); dojo.addOnLoad(init); function init(){ var _search = new exemple1.widget.Search({ id:"search" }, dojo.byId("search")); _search.startup(); } </script> </head> <body> <div id="search"></div> </body> </html> |
lignes
8 : chargement du style du widget
12 à 15 : paramètres qui seront utilisés au chargement du framework
19 : chargement du framework Dojo
23 : importation du widget 'Search'
25 : chargement de la fonction init après la création de tous les noeuds DOM
29 à 31 : instanciation du widget 'Search'
30 : l'ajout d'un id n'est pas obligatoire car Dojo crée des identifiants uniques lors de l'exécution du code.
nous utilisons ici un id "fixe" que nous réutiliserons plus tard.
31 : une fois créé, le widget remplacera le div "search" dans la page HTML (ligne 40)
33 : exècution de la mèthode startup() de la classe 'Search'