Faire un Hello World avec le Dojo Toolkit


Le présent livre a pour finalité de fournir un ensemble de connaissance de départ pour les nouveaux utilisateurs de Dojo. Il se base sur http://dojo.jot.com/WikiHome/Tutorials/HelloWorld.

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 dns 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 toute les fonctionnalitées 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érence 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 tout les widgets!) ; c’est les lines d’instructions du second dojo.require qui charge le boutton. 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 pourrins mettre un input à la place.

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

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

Laisser un commentaire

Choisissez une méthode de connexion pour poster votre commentaire:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :