Vous êtes sur la page 1sur 49

Ajax

DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Ajax

Prsentation de la technologie et des solutions STEMPELL Mathieu WAUQUIER Franois Filire Ingnierie 11 septembre 2007

PAGE

2 I 30

Ajax
DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Asynchronous JavaScript And XML


La logique premire du concept AJAX, est de ne pas recharger lensemble dune page pour modifier une partie de son contenu. Et ce mme dans le cas de donnes ncessitant une communication avec le serveur, grce la fonction XMLHttpRequest.
On prsente bien souvent AJAX comme un sous-concept du Web 2.0.

PAGE

3 I 30

Ajax - Avantages
DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Avantages

PAGE

4 I 30

Ajax - Avantages
DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Gain de performance et de temps pour lutilisateur


Cela permet alors de rduire les donnes transitant entre le serveur et le client. Et ainsi pouvoir raliser des applications plus lgres niveau charge serveur et bande passante, et galement plus rapides niveau temps de rponse utilisateur.

PAGE

5 I 30

Ajax - Avantages
DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Meilleure utilisabilit des applications


Cela permet galement de proposer des interfaces plus cohrentes et agrables, car totalement flexibles niveau structuration de page et moins brutales niveau navigation. Les possibilits de structuration dune application base sur technologie AJAX se rapprochent ainsi de celles dune interface de type client lourd .

PAGE

6 I 30

Ajax - Avantages
DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Gain niveau dveloppement


Un mme cran peut afficher la fois les donnes saisies et gnres. Par ailleurs, le recourt des bibliothques JavaScript ou des frameworks implmentant la logique AJAX permet de leur dlguer la gestion des incompatibilits entre navigateurs, ceux-ci tant bien souvent tests sur un large panel.

PAGE

7 I 30

Ajax Inconvnients avancs


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Inconvnients avancs

PAGE

8 I 30

Ajax Inconvnients avancs


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Navigation Web dvie du standard


Les boutons retour/avance ne permettent plus de naviguer entre les diffrents contenus de pages. Nanmoins dans le cas dapplications se basant sur de la saisie dinformations multi-pages, leur utilisation tait dj bien souvent problmatique. Du fait quils permettaient lutilisateur de courtcircuiter la logique de navigation de lapplication, principalement au niveau de lordre des donnes traites par le serveur.

PAGE

9 I 30

Ajax Inconvnients avancs


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Indexation de contenu difficile


Les moteurs dindexation se basant sur une adresse de page pour correspondance avec un contenu, une application AJAX ne pourra tre indexe exhaustivement, lappel AJAX ne correspondant pas un changement dadresse de page. De plus, lutilisateur ne pourra pas forcment se crer un signet pour accder un contenu prcis du site. Ceci tait dj problmatique ds lors quune application faisait utilisation de contenu dynamique, aussi bien niveau serveur (PHP, Java, .NET, etc) que client (Flash).

PAGE 10 I 30

Ajax Inconvnients avancs


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Temps de rponses difficilement apprhendables niveau client

La transparence de la communication client/serveur ne permet pas forcment lutilisateur dapprhender une lenteur temporaire, voir une communication interrompue.
Pour remdier cela, des indicateurs visuels dtat de communication sont bien souvent mis en place.

PAGE 11 I 30

Ajax Inconvnients avancs


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Se base sur JavaScript

Dbogage difficile, incompatibilits entre navigateurs, libert pour lutilisateur de dsactiver son excution.
De nouveaux outils sintgrants aux navigateurs permettent dsormais de tracer lexcution du code JavaScript, de visualiser les donnes de larbre DOM de la page, voir de les modifier la vole (par exemple, FireBug pour Mozilla FireFox ou IE Developer Toolbar pour Microsoft Internet Explorer).

PAGE 12 I 30

Ajax Impacts architecture J2EE


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Impacts architecture J2EE

PAGE 13 I 30

Ajax Impacts architecture J2EE


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Internet Browser

XHTML

CSS

JavascriptAjax

FWK_MVC

JavaScriptUtils

Images

Service

DAO

PAGE 14 I 30

Ajax DRW
DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

FWK DWR Direct Web Remoting

PAGE 15 I 30

Ajax DWR
DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Avantages spcifiques: + Possibilit dutiliser le contexte spring IOC + Les conversions sont ralises par DWR, y compris pour les beans complexes. + Les exceptions sont rcupres, et indiques lutilisateur sous forme dalerte javascript. + Librairie DWRUtil contenant de nombreuses fonctions utilitaires + Une page de test est gnre afin de tester les appels Ajax

PAGE 16 I 30

Ajax DWR
DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Exemple

PAGE 17 I 30

Ajax DWR
DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Page de test DWR

PAGE 18 I 30

Ajax DWR
DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Exemples http://getahead.org/dwr/examples/address http://mcsolaris.canam.net/canam-adminannuaire/

PAGE 19 I 30

Ajax jQuery
DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

FWK jQuery

PAGE 20 I 30

Ajax jQuery - Prsentation


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Prsentation

PAGE 21 I 30

Ajax jQuery - Prsentation


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

jQuery est une bibliothque JavaScript proposant un ensemble de fonctions dans les domaines suivants : Communication AJAX. Navigation au sein des donnes de la page via arbre DOM et possibilit de modification. Gestion dvnements sur ces lments. Implmentation deffets visuels et animations. Simplification du code JavaScript en gnral.

De plus sa logique dimplmentation chaine lui permet une trs grande extensibilit. De nombreux plugins sont dailleurs disponibles.

PAGE 22 I 30

Ajax jQuery - Prsentation


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Elle permet alors de raliser des applications bases sur la logique de l unobtrusive JavaScript (JavaScript discret), qui correspond une d-corrlation entre le code de mise en page HTML et le code de traitement JavaScript. Ceci est rendu possible par la possibilit de manipulation de larbre DOM, regroupant lensemble de lments de la page exprims en HTML, et du placement dvnements sur ces derniers. Il nest ainsi pas ncessaire de placer du code JavaScript au sein du code HTML.

PAGE 23 I 30

Ajax jQuery - Prsentation


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Par ailleurs, son implmentation nintervenant quau niveau client, elle est ainsi totalement indpendante de la technologie employe niveau serveur. De plus, en temps que simple librairie JavaScript, elle permet limplmentation dlments riches au sein dapplications existantes, ainsi que la matrise dune structuration applicative classique. Ceci contrairement aux toolkits type Google Web Toolkit qui modifient totalement la logique dimplmentation de traitement mtier.

PAGE 24 I 30

Ajax jQuery Logique dimplmentation


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Logique dimplmentation

PAGE 25 I 30

Ajax jQuery Logique dimplmentation


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

jQuery propose donc un ensemble de fonctions JavaScript, mais plusieurs logiques cadrent leur implmentation pour profiter au maximum de sa flexibilit.

PAGE 26 I 30

Ajax jQuery Logique dimplmentation


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Laccesseur DOM $()


La logique de base de jQuery est laccs un lment de larbre DOM pour manipulation de ses valeurs ou placement dvnement(s) sur celui-ci. Cela est effectu via la fonction $() . Bon nombre de possibilits sont alors offertes via cette fonction pour accder aux lments de la page. Et il est ainsi possible daccder facilement aux lments structurants (HTML), ainsi qu leurs donnes ou leur style de mise en forme (CSS). Exemples $("a") fait rfrence lensemble des tags de lien de la page. $("td/a") fait rfrence lensemble des tags de lien tant encapsuls dans un tag de cellule. $("#adresse") fait rfrence au tag ayant lID adresse . $(".red-cell") fait rfrence aux tags sur lesquels la classe CSS .red-cell a t place. $("p:eq(0)") fait rfrence au premier au tag de paragraphe, tout comme $("p:first") . $(this) fait rfrence au dernier lment identifi. $(document) fait rfrence lensemble de la page. $("table#adresse/tbody/tr:odd/td") fait rfrence aux tags de cellules prsents dans les lignes paires de la table ayant lID adresse .
PAGE 27 I 30

Ajax jQuery Logique dimplmentation


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Principe de $(document).ready();
Pour pouvoir mettre en place une logique d unobtrusive JavaScript de qualit, la fonction $(document).ready(); permet deffectuer des traitements JavaScript sur la page lorsque lensemble de celle-ci est initialise. Ceci la diffrence du classique window.onload qui lui intervient directement au moment de linitialisation de la page, et peut ainsi omettre des lments qui ne seraient alors pas encore initialiss.

PAGE 28 I 30

Ajax jQuery Logique dimplmentation


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Placement dvnements
Par accs un lment, on peut placer une action sur un vnement de celui-ci. Exemples $("a").click([action]); place une action sur lvnement click des liens. $("a").hover([action en entre], [action en sortie]); place une action en positionnement du curseur sur un lien et en sortie de celui-ci.

PAGE 29 I 30

Ajax jQuery Logique dimplmentation


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Communication AJAX
Plusieurs mthodes pour consultation dinformations via une communication serveur sont disponibles. Exemples $.get("getUser.do", { id:"2"}) excute un appel en GET sur llment getUser.do du site avec le paramtre id ayant la valeur 2 . $(this).load("infos.html"); rcupre le contenu du fichier infos.html pour inclusion au sein de llment courant.

PAGE 30 I 30

Ajax jQuery Logique dimplmentation


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Accs aux attributs


Egalement lors de laccs un lment, il est possible de consulter / modifier ses attributs / donnes. Exemples $("a#file").attr("href") permet dobtenir la valeur de ladresse du lien ayant lID file pour consultation ou manipulation. $("input:hidden#id").val() permet dobtenir la valeur de llment de formulaire cach ayant lID id pour consultation ou manipulation. $(this).addClass(".light") ajoute le style CSS .light llment. $(this).html() permet de consulter le contenu HTML encapsul dans llment.

PAGE 31 I 30

Ajax jQuery Logique dimplmentation


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Effets visuels
Il est principalement possible dafficher ou de cacher certains lments de la page par de simple fonctions. Exemples $(this).show(); affiche llment. $(this).fadeOut("slow"); cache llment progressivement via un fondu jusqu transparence de celui-ci.

PAGE 32 I 30

Ajax jQuery Logique dimplmentation


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Principe de chainage
Le chainage est effectu grce la fonction function(){} qui constitue le paramtre principal de bon nombre dvnements et permet donc dy placer un nouvel ensemble dinstructions. De plus via la rfrence $(this) il est possible daccder llment cibl par lvnement sur lequel cette nouvelle fonction a t place. Exemples $("div#title").click(function(){$("this").addClass(".light");}); ajoute le style CSS .light llment div ayant lidentifiant title lors dun click sur celui-ci.

PAGE 33 I 30

Ajax jQuery Exemples


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Exemples http://jquery.developpeur-web2.com/demonstration.php

PAGE 34 I 30

Ajax jQuery Plugins


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Plugins

PAGE 35 I 30

Ajax jQuery Plugins Upload : MultiFile


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Upload : MultiFile

PAGE 36 I 30

Ajax jQuery Plugins Upload : MultiFile


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

MultiFile permet la slection successive de plusieurs fichiers au sein dun lment de slection de fichier dans un formulaire avant lenvoi de ce dernier.

http://www.fyneworks.com/jquery/multiple-file-upload/

PAGE 37 I 30

Ajax jQuery Plugins Upload : MultiFile


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Importer le fichier javascript de la librairie (en complment de celui de jQuery) : <script type="text/javascript" src="scripts/ jquery.MultiFile.js"></script> Crer un lment input ayant pour classe multi : <input name="file" class="multi" type="file">

PAGE 38 I 30

Ajax jQuery Plugins Fentres modales : ThickBox


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Fentres modales : ThickBox

PAGE 39 I 30

Ajax jQuery Plugins Fentres modales : ThickBox


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

ThickBox permet limplmentation de pseudo-fentres modales pour visualisation de diffrents types de contenu.

Le contenu peut tre exprim au sein de la page source elle-mme, dun fichier annexe ou encore dun appel distant.
http://jquery.com/demo/thickbox/

PAGE 40 I 30

Ajax jQuery Plugins Fentres modales : ThickBox


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Importer le fichier javascript de la librairie (en complment de celui de jQuery) : <script type="text/javascript" src="scripts/thickbox.js"></script> Importer le style CSS de la librairie : <link rel="stylesheet" href="styles/thickbox.css" type="text/css" /> Exemple avec contenu textuel exprim au sein de la page Placer le contenu afficher dans un lment div non visible avec un identifiant dfini : <div id="contenuCache" style="display: none"><p>Contenu de la fentre</p><p>Test</p></div> Crer ensuite un lien pour affichage de la fentre (la valeur de inlineId correspond lid du contenu cach) : <a href="#TB_inline?height=155&width=300&inlineId=contenuCache" class="thickbox">Afficher la fentre</a> Exemple avec image(s) Crer un lien pour affichage de la fentre (la valeur de href correspond au lien vers limage) : <a href="images/test.jpg" class="thickbox">Afficher la fentre</a>

PAGE 41 I 30

Ajax jQuery Plugins Tri et filtrage de tableau : Tablesorter


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Tri et filtrage de tableau : Tablesorter

PAGE 42 I 30

Ajax jQuery Plugins Tri et filtrage de tableau : Tablesorter


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Tablesorter permet le tri avanc de tableaux. http://tablesorter.com/docs/

PAGE 43 I 30

Ajax jQuery Plugins Tri et filtrage de tableau : Tablesorter


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Importer le fichier javascript de la librairie (en complment de celui de jQuery) : <script type="text/javascript" src="scripts/jquery.tablesorter.js"></script> Crer un tableau avec un identifiant dfini (celui-ci devant contenir les lments thead et tbody ) : <table id="testTable"> <thead><tr><th>Nom</th><th>Prnom</th></tr></thead> <tbody> <tr><td>Smith</td><td>John</td></tr> <tr><td>Bach</td><td>Frank</td></tr> </tbody> </table> Placer une fonction sur la fin dinitialisation de la page indiquant le tableau pouvoir trier : $(document).ready(function(){$("#testTable").tablesorter();});

PAGE 44 I 30

Ajax jQuery Plugins DragnDrop : jqDnR


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

DragnDrop : jqDnR

PAGE 45 I 30

Ajax jQuery Plugins DragnDrop : jqDnR


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

jqDnR permet la gestion simplifie du dragndrop. http://dev.iceburg.net/jquery/jqDnR/

PAGE 46 I 30

Ajax jQuery Plugins DragnDrop : jqDnR


DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Importer le fichier javascript de la librairie (en complment de celui de jQuery) : <script type="text/javascript" src="scripts/jqDnR.js"></script> Crer un lment div avec un identifiant dfini et une position relative : <div id="elementDnD" style="position: relative"> <p>Peut tre dplac</p> </div> Placer une fonction sur la fin dinitialisation de la page indiquant llment pouvoir dplacer : $(document).ready(function(){$("#elementDnD").jqDrag();});

PAGE 47 I 30

Introduction GWT
DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Comparatif GWT Ajax Intgration existant Modularit Courbe dapprentissage Gestion de la navigation prcdent / suivant Code Javascript brancher lajax Compatibilit web pour un site Ajax avec GWT

navigateur

PAGE 48 I 30

Ajax
DATE : le xx xxxxxx 2007 DE : DITEUR DE LA PRSENTATION : DESTINATAIRE DE LA PRSENTATION

Conclusion

PAGE 49 I 30