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

Slides:



Advertisements
Présentations similaires
« Les Mercredis du développement » Ajax / Client CallBack / Atlas
Advertisements

LES NOMBRES PREMIERS ET COMPOSÉS
Novembre 2005 – Michel Desconnets PHP : théorie Objectif : introduire les concepts globaux permettant d'aborder la programmation en PHP.
PHP5 its a kind of magic. Chargement automatique function __autoload( $nom_classe ) { require_once('obj/'.$nom_classe.'.class.php'); } si on exécute le.
JEE 5 - JSF F.Pfister 2 institut eerie Les technologies du web Servlets JSP MVC Model 1 : servlets + JSP MVC Model.
ASP.NET v2 + Ajax = Atlas Pierre Lagarde DevDays 2006 Equipé aujourdhui, prêt pour demain !
Création de pages Web dynamiques et sympathiques.
Cours MIAGE « Architectures Orientées Services » Henry Boccon-Gibod 1 Architectures Orientées Services Composants de Service Exemple pratique de développement.
Copyright France Télécom, tous droits réservés Paris Web Ateliers Les bibliothèques JS jQuery Orange Labs Julien Wajsberg, Recherche & Développement.
Exposé de Système - Informatique et Réseau
Les Bases de données et le Web
Toolkit Web Framework Java pour les IHMs Cédric Dumas mars 2008 contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage.
Dojo Carol McDonald, Java Architect, Updated and adapted by Michel Buffa.
PHP5 its a kind of magic. Chargement automatique function __autoload( $nom_classe ) { require_once('obj/'.$nom_classe.'.class.php'); } si on exécute le.
AJAX Internet.
JDBC: manipuler une base de données en Java IFT6800 – E 2007 Jian-Yun Nie.
Mettre en place une stratégie de veille numérique en adéquation avec un projet professionnel.
Connexion base de données
Injection de dépendances
Introduction aux Web Services Partie 1. Technologies HTML-XML
Mr: Lamloum Med LES NOMBRES PREMIERS ET COMPOSÉS Mr: Lamloum Med.
Oct.-2000DESS IIDEE © B. BAH 1 ASP Caractéristiques dun fichier ASP Son extension : « *.asp » La balise: Son indépendance vis à vis de toute plate–forme,
AJAX et les langages serveurs
Documents > J2SE APIs > J2EE APIs
Introduction à Node.JS Vincent Peybernes.
Ajax. Contexte Dabord, il y a eu les terminaux des ordinateurs centraux (environnements TSO, CICS, etc.) et les terminaux plein écran des environnements.
TortoiseSVN N°. Subversion : pour quoi faire ? Avoir un espace de stockage commun – Tous les étudiants du SIGLIS ont un espace svn commun Partager vos.
Projet poker 1/56. Introduction Présentation de léquipe Cadre du projet Enjeux Choix du sujet 2.
Architecture Logicielle Les supports d’applications
Pierre Lagarde Christophe Lauer
Introduction aux technologies AJAX Ajax François BONNEVILLE
SQL Injection Réalisée par: BEN NASR Houssem GMATI Idriss HADDAD Mohamed Aymen HAKIM Youssef.
ADOBE FLEX 4. © Logica All rights reservedNo. 2 Introduction Flex en action Autour de Flex Logica Le programme.
Jeudi 16 février I Le but du projet II Les choix effectués III Les premiers résultats.
Création d'un projet Web avec Netbeans
BBoard Fonctionne pas. BBoard Copier le répertoire dézippé dans le répertoire modules de post nuke Renommer ce répertoire en yabbse. Entrer le chemin.
1 CSI 2532 Lab5 Installation de JDBC Février 13, 2012.
Clients riches RIA (Rich Internet Application) / RDA
PHP GTK PHP…au delà du Web Paris, 28 novembre 2001 Armel FAUVEAU GLOBALIS media systems.
AJAX.
1 CSI 2532 Lab6 Application Web et DB Février 27, 2012.
JEE 5 F.Pfister 2 institut eerie JEE – Une plateforme serveur  Développement et exécution d'applications réparties.
Introduction aux technologies AJAX Ajax François BONNEVILLE
GWT - QuickStart V 1.0 / May. Mise en place de l’environnement Java : Version 1.4 minimum IDE Eclipse 3.3 Europa : lien (Eclipse J2EE recommandée)‏lien.
Première CTP le 4 décembre Nouvelle CTP depuis le 1 er février RTM milieu de cette année.
Applications web1 Cours Web Services ISIMA 3F3. Applications web2 JavaScript Inventé par Netscape... sans rapport avec Java. Standardisé par l’ECMA, spécification.
LES CLIENTS WEB RICHES Tuteur : Olivier CARON LEFEBVRE Benoit
Jquery.
Module I-C3 : Applications Web IUT R&T 2e année
PROGRAMMATION WEB FRONT-END.
JavaScript Nécessaire Web.
0 Objectifs de la session n°1  Revenir sur toutes les bases théoriques nécessaires pour devenir un développeur Web,  Découvrir l’ensemble des langages.
AngularJS.
Les balises HTML et les objets JavaScript correspondants Objet document L'objet document est important dans la mesure ou il contient tous les objets du.
S'initier au HTML et aux feuilles de style CSS Cours 5.
Présentation du framework JSF (Java Server Faces) dans le modèle événementiel MVCII
AJAX Open Source Etat de l’art Baris Ulucinar, Octobre 2006 University of Fribourg, Suisse Sous la direction de Prof. O. Abou Khaled.
Asynchronous JavaScript And XML AJAX C. Petitpierre
Cours MIAGE « Architectures Orientées Services »Henry Boccon-GibodCours MIAGE « Architectures Orientées Services »Henry Boccon-Gibod 1 Architectures Orientées.
AJAX Jérôme CUTRONA 06:28:58 Programmation Web
Initiation au JavaScript
M2202 – Algorithmique – T.BAUSER. Objectifs Utiliser Jquery pour : - modifier/ajouter/supprimer un élément/un attribut/une classe, - créer des animations,
APP-TSWD Apprentissage Par Problèmes Techniques des Sites Web Dynamiques Licence Professionnelle FNEPI Valérie Bellynck, Benjamin Brichet-Billet, Mazen.
DWR Jean-Jacques LE COZ. Introduction Projet DWR Framework AJAX Projet Open Source commencé en 2004 Licence GPL (Apache Software License v2) Sponsorisé.
Architecture J2EE Web Jean-Jacques LE COZ. J2EE Web Container JSP Page Servlet J ava 2 Standard Edition APIs EJB Container EJB JDBCJMS JNDI JTA JavaMail.
Framework EHop/Ecenvir
Asynchronous Javascript And Xml
JavaScript.
Clients riches RIA (Rich Internet Application) / RDA
Asynchronous Javascript And Xml
Transcription de la présentation:

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

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 Dojo Client Side JavaScript Library Dojo Client Side JavaScript Library

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 Indépendant de la techologie serveur et des langages utilisés (java, c#, python, ruby...) source: dojotoolkit.org

5 Les librairies du Toolkit Dojo

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 Intégrer dojo à une application Intégrer dojo à une application

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 2) Ajouter Dojo dans son application (il sera déployé avec l'application) Downloader depuis Unzipper le fichier à côté des pages web ou jsp du projet. Inclure dojo comme ceci dans les pages qui l'utilisent <script type="text/javascript" djConfig="parseOnLoad: true" src="dojo-release-1.3.2/dojo/dojo.js"> Pas de / ici ! Le système de chargement des packages chargera toutes les dépendances s'il y en a !

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 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 > C:\Program Files\Apache Software Foundation\Apache Tomcat \webapps\ROOT\dojo-release Et l'inclure dans l'application : <script type="text/javascript" djConfig="parseOnLoad: true" src=/dojo-release-1.3.2/dojo/dojo.js"> / obligatoire ici, linverse de ce quon a vu précédemment !

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

13 Exemples de widgets issus de dijit

14 Choses à faire dans une page pour utiliser "js/dojo/resources/dojo.css";"; <script type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad: true" isDebug: true > Cette ligne indique qu'on va activer le mode debug : cela va générer des messages en couleur pour firebug Mais si on est pas sous Firefox avec Firebug, Dijo inclut un mini debugger pour les autres browsers : firebug lite ! Charger la CSS Dojo

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 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 Dijit = dojo Widget Dijit = dojo Widget

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

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 Exemple déclaratif de "js/dojo/resources/dojo.css"; <script type="text/javascript" djConfig="parseOnLoad: true" src="js/dojo/dojo.js" > dojo.require("dijit.form.Button"); <button dojoType="dijit.form.Button" onclick="call_function"> Log Button Charger la CSS de Dijit Style/thème pour les widgets Charger le module Pour les widgets déclaratifs

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 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 Exemple dijit.form.DateTextBox dojo.require("dijit.form.DateTextBox"); <input type="text" name="date1" value=" " dojoType="dijit.form.DateTextBox" required="true" />

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

25 Exemple dijit.layout.AccordionContainer dojo.require("dojo.parser"); dojo.require("dijit.layout.AccordionContainer"); <div dojoType="dijit.layout.AccordionContainer" duration="200" style="margin-right: 30px; width: 400px; height: 300px; overflow: hidden"> some text... <div dojoType="dijit.layout.AccordionPane" title="Pane2" href="tab1.html" >

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

27 Exemple dijit.Menu dojo.require("dojo.parser"); dojo.require("dijit.Menu"); <div dojoType="dijit.Menu" id="submenu1" contextMenuForWindow="true" style="display: none;"> <div dojoType="dijit.MenuItem" iconClass="myIcon" onClick="alert('Hello world');"> Enabled Item Enabled Submenu <div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')"> Submenu Item One...

28 Fonctions dojo indispensables Fonctions dojo indispensables

29 Fonctions Dojo dojo.byId("id"); > Equivalent à : document.getElementById("someid"); dijit.byId("id"); > renvoie une instance de Dijit widget; dojo.addOnLoad("functionname"); > Appelle la fonction une fois que toute la page et tous ses scripts ont été chargés.

30 Dojo Query // Query par tag xhtml. Equivalent à // document.getElementsByTagName("IMG"); dojo.query("img"); // Query par classe. dojo.query(".progressIndicator"); // Query par id. Equivalent à // document.getElementById("widget123"); // ou dojo.byId("widget123") dojo.query("widget123");

31 Dojo For Each dojo.forEach(collection, function(item) { console.debug(item); } ); > Execute une fonction dans une boucle for dojo.query("select", document).forEach("item.disabled = true;"); > désactive tous les tags SELECT de la page

32 Dojo et les événements Dojo et les événements

33 dojo et la gestion des événements Dojo Simplifie le système de gestion des événements de JavaScript Permet de connecter une fonction que vous avez écrite à : > Un événement DOM, par exemple un click sur un lien. > un événement généré par un objet, par exemple une animation qui démarre > Un autre appel de function : permet de déclencher des réactions en chaine. > Un topic, dans lequel d'autres objets peuvent publier.

34 dojo.event.connect(srcObj,"srcFunc", targetFunc); function myFunction() { alert("dojo.connect handler"); } var link = dojo.byId("mylink"); dojo.event.connect(link, "onclick", myFunction); Click Me

35 Connecter des Objects et des Fonctions var someObject = { bar: function() { console.debug("Bar fired!"); return 14; } } var anotherObject = { anotherBar: function () { console.debug("anotherBar fired!"); } } dojo.connect(someObject, "bar", anotherObject, "anotherBar"); sourceObj, "sourceFunc", targetObj, targetFunc

36 Déconnecter des Fonctions objectConnections[1]= dojo.connect(someObject, "baz", anotherObject, "afterBaz"); dojo.disconnect(objectConnections[1]);

37 S'abonner et publier dans un Topic (équivalent de messages qui déclenchent des actions, cf JMS) var unObjet = { method1: (param1, param2) { console.debug("f1 appelée avec: "+ param1+" et : " + param2); return; }, } topics[1] = dojo.subscribe("MesMessages", "unObjet", method1); dojo.publish("MesMessages", ["Alex", "Russell"]); dojo.unsubscribe(topics[1]);

38 Appels Ajax : XMLHttpRequest (XHR): dojo.xhrDelete(), dojo.xhrGet(), dojo.xhrPost(), dojo.xhrPut()

39 Web traditionnel AJAX within a browser, there is AJAX engine

40 Envoie de requête, récupérer la réponse d'un serveur dojo.xhrGet({ url: 'sayHello', load: helloCallback, error: helloError, content: {name: dojo.byId('name').value } }); Appeler un url Fonction de callback Contenu à envoyer En cas d'erreur, on appelle cette fonction.

41 Dojo Hello World Dojo Hello World

42 Connecter un événement à un Widget (bouton ici)... dojo.require("dijit.form.Button");... Name: Hello World! makeAjaxCall(); On déclare un écouteur avec le type dojo/method

43 Suite... function makeAjaxCall(){ dojo.xhrGet({ url: 'sayHello.jsp', load: helloCallback, error: helloError, content: {name: dojo.byId('name').value } }); } function helloCallback(data,ioArgs) { dojo.byId("returnMsg").innerHTML = data; } Name: <button dojoType="dijit.form.Button" makeAjaxCall();... call url Callback function Content to send On error function

44 La page sayHello.jsp (attention, jdk 1.6 !) <% String returnString = request.getParameter("name"); if (returnString == null || returnString.isEmpty()) { // Return error message returnString = "Name is required."; out.print("Error: " + returnString); } else { // Return the name out.print("Hello: " + returnString); } %>

45 dojo.xhrPost pour envoyer un formulaire function makeAjaxCall(){ dojo.xhrPost({ url: 'sayHello', load: helloCallback, error: helloError, form: 'myForm' }); } function helloCallback(data,ioArgs) { dojo.byId("returnMsg").innerHTML = data; } Name: <button dojoType="dijit.form.Button" makeAjaxCall(); xhrPost Formulaire

46 Dojo MVC Dojo MVC

47 Echange de données JSON var cobblers = [ {"filling": "peach", "timeToBake": 30 }, {"filling": "cherry", "timeToBake": 35 }, {"filling": "blueberry", "timeToBake": 30} ]; { "cobblers": [ {"filling": "peach", "timeToBake": 30 }, {"filling": "cherry", "timeToBake": 35 }, {"filling": "blueberry", "timeToBake": 30} ] } Objets javascript Dans le code Ce qui est envoyé sur le réseau, Presque pareil !

48 Envoi de paramètre en JSON dojo.xhrGet( { // ici l'URL de ma servlet par exemple. url: "validateServlet", handleAs: "json", load: function(responseObject, ioArgs) { // Prints "peach" console.dir(responseObject.cobblers[0].filling); return responseObject; } // More properties for xhrGet... });

49 Exemple dijit.form.FilteringSelect Le fichier states.json contient : {identifier:"abbreviation", items: [ {name:"Alabama", label:"Alabama",abbreviation:"AL"}, {name:"Alaska", label:"Alaska",abbreviation:"AK"},... {name:"Wisconsin", label:"Wisconsin",abbreviation:"WI"}, {name:"Wyoming", label:"Wyoming",abbreviation:"WY"} ]}

50 Exemple dijit.form.FilteringSelect dojo.require("dojo.parser"); dojo.require("dijit.form.FilteringSelect"); dojo.require("dojo.data.ItemFileReadStore"); <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" url="states.json"> <input dojoType="dijit.form.FilteringSelect" store="stateStore" searchAttr="name" name="state1" autocomplete="true" /> Le menu select est la vue Lecture des donnés, c'est le modèle

51 Autre exemple de modèle: pantry_items.json { identifier: 'name', items: [ { name: 'Adobo', aisle: 'Mexican' }, { name: 'Balsamic vinegar', aisle: 'Condiments' }, { name: 'Basil', aisle: 'Spices' }, { name: 'Bay leaf', aisle: 'Spices' }, { name: 'Beef Bouillon Granules', aisle: 'Soup' }, { name: 'Vinegar', aisle: 'Condiments' }, { name: 'White cooking wine', aisle: 'Condiments' }, { name: 'Worcestershire Sauce', aisle: 'Condiments' } ]} Ce fichier est sur le serveur

52 Simple data source read store dojo.require("dojo.parser"); dojo.require("dijit.form.FilteringSelect"); dojo.require("dojo.data.ItemFileReadStore"); <div dojoType="dojo.data.ItemFileReadStore" jsId="pantryStore" url="pantry_items.json"> spices : <div name="pantry_item" dojoType="dijit.form.FilteringSelect" store="pantryStore" searchAttr="name" value="Vinegar" autoComplete="true"> On donne un URL ! Ici on définit une vue

Drag and Drop Drag and Drop

54 Drag and Drop dojo.require("dojo.dnd.source"); dojo.require("dojo.parser"); Source 1 Item Alpha Item Beta Item Gamma Item Delta Pure Target 2 One item source target

55 Conclusion Dojo = gros support, très puissant, Modulaire (on ne charge pas toute la librairie à chaque fois) Bon choix si besoin en GUI importants Nombreux modèles disponibles (stores pour flickr, google, youtube, etc.)

56 Ressources web intéressantes Le livre The Book of dojo sur le site officiel: > Cours et Tps sur : Très nombreux exemples à copier/coller sur En particulier suivre le lien dojo explorer