Le présent livre a pour finalité de fournir un ensemble de connaissance de départ pour les nouveaux utilisateurs deDojo.
Il est important que la version 0.4.0 ou supérieure soit utilisée. Elle peut être trouvée à cette adresse :
http://download.dojotoolkit.org/release-0.4.0/
Créer l'arborescence suivante :
- HelloWorldTutorial/ | |---- js/ | ---- dojo/
télécharger ladernière version de dojo et la décompresser dans le répertoire HelloWorld/js/dojo/
Vous devriez alors avoir la structure suivante : ('..' indique qu'il y a plus de répertoire)
- HelloWorldTutorial/ | |-- js/ | -- dojo/ | -- build.txt -- CHANGELOG -- demos | -- .. -- dojo.js -- dojo.js.uncompressed.js -- iframe_history.html -- LICENSE -- README -- src/ | -- ..
Nous allons maintenant créer une page html de base qui servira à appeler toutes les fonctionnalités de Dojo que nous utiliserons par la suite.
<html> <head> <title>Dojo: Hello World!</title> <!-- SECTION 1 --> <script type="text/javascript" src="js/dojo/dojo.js"></script> </head> <body> </body></html>
Nous allons créer un bouton gadget (widget en anglais, c'est ce terme qui est utilisé par Dojo) avec le texteHello world. Dans ce cas ci, trois option sont disponible (mouseOut, mouseOver, et mouseDown), qui enrichissent considérablement l'expérience de l'utilisateur !
La première chose à faire est de demander à Dojo de charger le module correspondant.
Dans l'en-tête (<head> jusqu'à </head>), placer la section correspondante :
<!-- SECTION 2 --> <script type="text/javascript"> // Charge le code de Dojo relatif aux fonctions de chargement des widgets dojo.require("dojo.widget.*"); // Charge le code de Dojo relatif au bouton gadget dojo.require("dojo.widget.Button"); </script>Le premierdojo.require instruit dojo d'inclure les fonctionswidget (gadgets) (Attention cela ne charge pas tous les widgets!) ; ce sont les lignes d'instructions du second dojo.require qui charge le bouton. Si vous oubliez la deuxième ligne, vous aurez un bouton en HTML.
Après avoir fait ces changements, insérer ce code suivant à l'intérieur des balises <body> et </body>
<button dojoType="Button" widgetId="helloButton">Salut tout le monde!</button>
L'élément clé à percevoir ici est ledojoType. Le type est ici un bouton, mais nous pourrions mettre uninput à la place.
LewidgetId identifie le bouton. Il peut être remplacé par simplementid .
Pour mettre plusieurs boutons avec la même phrase, il faut copier cette ligne et changer l'id.