Programmation JavaScript/Dojo/Hello World

Le présent livre a pour finalité de fournir un ensemble de connaissance de départ pour les nouveaux utilisateurs de Dojo.

Programmation JavaScript

Dojo

Dojo/Widgets

Notes

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/

Initialiser Dojo

Créer l'arborescence suivante :

- HelloWorldTutorial/
   |
   |---- js/
         |
         ---- dojo/

télécharger la derniè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/
                   |
                   -- ..

Pour commencer

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>

Créer un bouton gadget

Nous allons créer un bouton gadget (widget en anglais, c'est ce terme qui est utilisé par Dojo) avec le texte Hello 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 premier dojo.require instruit dojo d'inclure les fonctions widget (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 le dojoType. Le type est ici un bouton, mais nous pourrions mettre un input à la place.

Le widgetId identifie le bouton. Il peut être remplacé par simplement id .

Pour mettre plusieurs bouton avec la même phrase, il faut copier cette ligne et changer l'id.