La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa.

Copies: 1
Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa.

Présentations similaires


Présentation au sujet: "Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa."— Transcription de la présentation:

1 Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa

2 2 Problèmes avec Ajax JavaScript > Support inconsistant entre browsers > Nécessite des tests cross browsers > Le code peut devenir difficile à developper, debugger, et maintenir

3 3 Dojo Client Side JavaScript Library Dojo Client Side JavaScript Library

4 4 Qu'est-ce que le Dojo Toolkit? Ensemble Open Source de librairies JavaScript Simplifie le code javascript Appartient à Google aujourd'hui (qui a racheté Jot) Supporté par > IBM, Sun, JotSpot, SitePen, Renkoo, AOL TurboAjax, OpenLaszlo, Nexaweb, Bea Systems http://dojotoolkit.com/ Indépendant de la techologie serveur et des langages utilisés (java, c#, python, ruby...) source: dojotoolkit.org

5 5 Les librairies du Toolkit Dojo

6 6 Dojo 3 parties : Dojo > Support cross-browser, chargement des packages, accès et manipulation du DOM, debugger Firebug Lite, évènements, composants MVC, Drag and drop, appels Ajax asynchrones, encodage, décodage JSON dijit > Widgets, Contrôles avancés d'interface utilisateur,système de template dojoX > innovations: graphiquess, support du mode offline, widgets évolués comme les tableaux (grid), etc

7 7 Intégrer dojo à une application Intégrer dojo à une application

8 8 1) L'application télécharge des morceaux de Dojo depuis le net : Google: La balise script est utilisée pour charger le script dojo.js, toujours obligatoire.

9 9 2) Ajouter Dojo dans son application (il sera déployé avec l'application) Downloader depuis http://dojotoolkit.org/downloads http://dojotoolkit.org/downloads Unzipper le fichier à côté des pages web ou jsp du projet. Inclure dojo comme ceci dans les pages qui l'utilisent

10 10 Dojo dans son application Ici dojo a été mis sous le répertoire js (classique lorsque on utilise plusieurs frameworks), dans le répertoire qui contient les pages web ou jsp (le repertoire web du projet netbeans par exemple)

11 11 3) Installer une fois pour toute Dojo sur le serveur (recommandé) Que ce soit Tomcat ou Glassfish, dézipper Dojo dans le docroot du serveur, par exemple > C:\Sun\AppServer\domains\domain1\docroot\doj o-release-1.3.2 > C:\Program Files\Apache Software Foundation\Apache Tomcat 6.0.18\webapps\ROOT\dojo-release-1.3.2 Et l'inclure dans l'application :

12 12 Dojo contient plusieurs Démonstrations Par exemple : themeTester.html

13 13 Exemples de widgets issus de dijit

14 14 Choses à faire dans une page pour utiliser Dojo @import "js/dojo/resources/dojo.css";";

15 15 Exemple de traces dans le debugger : console.log("log button clicked"); console.debug("debug button clicked"); console.info("info button clicked"); console.warn("warn button clicked"); console.error("error button clicked");

16 16 Logging avec firebug lite dans IE console.log("log button clicked"); console.debug("debug button clicked"); console.info("info button clicked"); console.warn("warn button clicked"); console.error("error button clicked");

17 17 Dijit = dojo Widget Dijit = dojo Widget

18 18 dijit est une couche au-dessus de Dojo Les widgets Doko

19 19 Qu'est-ce qu'un widget Dojo ? Un élément de GUI comme un button, text box, scroll bar, calendar, tree etc > Facile à utiliser, déclaratif (comme xhtml) > On peut associer des événements (écouteurs) à des widgets > On ne se préoccupe plus de problèmes de compatibilité entre navigateurs HTML+CSS sont pris en compte par JavaScript via Dojo

20 20 Exemple déclaratif de button @import "js/dijit/themes/tundra/tundra.css"; @import "js/dojo/resources/dojo.css";

21 21 Même exemple mais par programmation... dojo.require("dijit.form.Button"); var myButton = new dijit.form.Button( {title:"Log Button"}, dojo.byId("someDiv"));...

22 22 Widgets pour formulaires CheckBox, RadioButton,ComboBox, CurrencyTextBox, DateTextBox, NumberTextBox, Slider, ValidationTextBox, Textarea Attributs: disabled: Boolean Methodes: > focus donne le focus focus à ce widget > getValue donne la valeur du widget. > setValue modifie la valeur du widget. > reset reset de la valeur du widget > Undo remet la dernière valeur Points d'extension: onChange: ce sont des écouteurs (callbacks)

23 23 Exemple dijit.form.DateTextBox dojo.require("dijit.form.DateTextBox");

24 24 Dijit, widgets de Layout Accordion Container,Content Pane, Layout Container, Split Container, Stack Container, Tab Container

25 25 Exemple dijit.layout.AccordionContainer dojo.require("dojo.parser"); dojo.require("dijit.layout.AccordionContainer");

some text...

26 26 Dijit menus et boutons Button, ComboButton, DropDownButton, Menu, Toolbar

27 27 Exemple dijit.Menu dojo.require("dojo.parser"); dojo.require("dijit.Menu");

Annonces Google