Ajax DWR JQuery

Ajax Présentation de la technologie et des solutions STEMPELL Mathieu WAUQUIER François Filière Ingénierie 11 septembre 2007 Ajax

Ajax Asynchronous JavaScript And XML La logique première du concept AJAX, est de ne pas recharger l’ensemble d’une page pour modifier une partie de son contenu. Et ce même dans le cas de données nécessitant une communication avec le serveur, grâce à la fonction XMLHttpRequest. On présente bien souvent AJAX comme un sous-concept du Web 2.0.

Ajax - Avantages Avantages

Gain de performance et de temps pour l’utilisateur

Cela permet alors de réduire les données transitant entre le serveur et le client.

Et ainsi pouvoir réaliser des applications plus légères niveau charge serveur et bande passante, et également plus rapides niveau temps de réponse utilisateur.

Ajax - Avantages

Meilleure utilisabilité des applications

Cela permet également de proposer des interfaces plus cohérentes et agréables, car totalement flexibles niveau structuration de page et moins brutales niveau navigation.

Les possibilités de structuration d’une application basée sur technologie AJAX se rapprochent ainsi de celles d’une interface de type « client lourd ».

Ajax - Avantages

Gain niveau développement

Un même écran peut afficher à la fois les données saisies et générées.

Par ailleurs, le recourt à des bibliothèques JavaScript ou des frameworks implémentant la logique AJAX permet de leur déléguer la gestion des incompatibilités entre navigateurs, ceux-ci étant bien souvent testés sur un large panel.

Ajax - Avantages

Ajax – Inconvénients avancés Inconvénients avancés

Navigation Web déviée du standard

Les boutons retour/avance ne permettent plus de naviguer entre les différents contenus de pages.

Néanmoins dans le cas d’applications se basant sur de la saisie d’informations multi-pages, leur utilisation était déjà bien souvent problématique. Du fait qu’ils permettaient à l’utilisateur de court-circuiter la logique de navigation de l’application, principalement au niveau de l’ordre des données traitées par le serveur.

Ajax – Inconvénients avancés

Indexation de contenu difficile

Les moteurs d’indexation se basant sur une adresse de page pour correspondance avec un contenu, une application AJAX ne pourra être indexée exhaustivement, l’appel AJAX ne correspondant pas à un changement d’adresse de page.

De plus, l’utilisateur ne pourra pas forcément se créer un signet pour accéder à un contenu précis du site.

Ceci était déjà problématique dès lors qu’une application faisait utilisation de contenu dynamique, aussi bien niveau serveur (PHP, Java, .NET, etc…) que client (Flash).

Temps de réponses difficilement appréhendables niveau client

La transparence de la communication client/serveur ne permet pas forcément à l’utilisateur d’appréhender une lenteur temporaire, voir une communication interrompue.

Pour remédier à cela, des indicateurs visuels d’état de communication sont bien souvent mis en place.

Se base sur JavaScript

Débogage difficile, incompatibilités entre navigateurs, liberté pour l’utilisateur de désactiver son exécution.

De nouveaux outils s’intégrants aux navigateurs permettent désormais de tracer l’exécution du code JavaScript, de visualiser les données de l’arbre DOM de la page, voir de les modifier à la volée (par exemple, « FireBug » pour Mozilla FireFox ou « IE Developer Toolbar » pour Microsoft Internet Explorer).

Ajax – Impacts architecture J2EE Impacts architecture J2EE

Ajax – Impacts architecture J2EE Internet Browser XHTML CSS JavaScriptUtils JavascriptAjax Images FWK_MVC Service DAO

Ajax – DRW FWK DWR Direct Web Remoting

Avantages spécifiques:

+ Possibilité d’utiliser le contexte spring IOC

+ Les conversions sont réalisées par DWR, y compris pour les beans complexes.

+ Les exceptions sont récupérées, et indiquées à l’utilisateur sous forme d’alerte javascript.

+ Librairie DWRUtil contenant de nombreuses fonctions utilitaires

+ Une page de test est générée afin de tester les appels Ajax

Ajax – DWR

Exemple

Ajax – DWR

Page de test DWR

Ajax – DWR

Exemples

http://getahead.org/dwr/examples/address

http://mcsolaris.canam.net/canam-adminannuaire/

Ajax – DWR

Ajax – jQuery FWK jQuery

Ajax – jQuery - Présentation Présentation

jQuery est une bibliothèque JavaScript proposant un ensemble de fonctions dans les domaines suivants :

Communication AJAX.

Navigation au sein des données de la page via arbre DOM et possibilité de modification.

Gestion d’événements sur ces éléments.

Implémentation d’effets visuels et animations.

Simplification du code JavaScript en général.

De plus sa logique d’implémentation chainée lui permet une très grande extensibilité. De nombreux « plugins » sont d’ailleurs disponibles.

Ajax – jQuery - Présentation

Elle permet alors de réaliser des applications basées sur la logique de l’« unobtrusive JavaScript » (JavaScript discret), qui correspond à une dé-corrélation entre le code de mise en page HTML et le code de traitement JavaScript.

Ceci est rendu possible par la possibilité de manipulation de l’arbre DOM, regroupant l’ensemble de éléments de la page exprimés en HTML, et du placement d’évènements sur ces derniers. Il n’est ainsi pas nécessaire de placer du code JavaScript au sein du code HTML.

Par ailleurs, son implémentation n’intervenant qu’au niveau client, elle est ainsi totalement indépendante de la technologie employée niveau serveur.

De plus, en temps que simple librairie JavaScript, elle permet l’implémentation d’éléments riches au sein d’applications existantes, ainsi que la maîtrise d’une structuration applicative classique. Ceci contrairement aux toolkits type « Google Web Toolkit » qui modifient totalement la logique d’implémentation de traitement métier.

Ajax – jQuery – Logique d’implémentation Logique d’implémentation

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

Ajax – jQuery – Logique d’implémentation

L’accesseur DOM « $(…) »

La logique de base de jQuery est l’accès à un élément de l’arbre DOM pour manipulation de ses valeurs ou placement d’événement(s) sur celui-ci. Cela est effectué via la fonction « $(…) ».

Bon nombre de possibilités sont alors offertes via cette fonction pour accéder aux éléments de la page. Et il est ainsi possible d’accéder facilement aux éléments structurants (HTML), ainsi qu’à leurs données ou leur style de mise en forme (CSS).

Exemples

« $("a") » fait référence à l’ensemble des tags de lien de la page.

« $("td/a") » fait référence à l’ensemble des tags de lien étant encapsulés dans un tag de cellule.

« $("#adresse") » fait référence au tag ayant l’ID « adresse ».

« $(".red-cell") » fait référence aux tags sur lesquels la classe CSS « .red-cell » a été placée.

« $("p:eq(0)") » fait référence au premier au tag de paragraphe, tout comme « $("p:first") ».

« $(this) » fait référence au dernier élément identifié.

« $(document) » fait référence à l’ensemble de la page.

« $("table#adresse/tbody/tr:odd/td") » fait référence aux tags de cellules présents dans les lignes paires de la table ayant l’ID « adresse ».

Principe de « $(document).ready(…); »

Pour pouvoir mettre en place une logique d’« unobtrusive JavaScript » de qualité, la fonction « $(document).ready(…); » permet d’effectuer des traitements JavaScript sur la page lorsque l’ensemble de celle-ci est initialisée.

Ceci à la différence du classique « window.onload » qui lui intervient directement au moment de l’initialisation de la page, et peut ainsi omettre des éléments qui ne seraient alors pas encore initialisés.

Placement d’événements

Par accès à un élément, on peut placer une action sur un événement de celui-ci.

Exemples

« $("a").click([action]); » place une action sur l’événement click des liens.

« $("a").hover([action en entrée], [action en sortie]); » place une action en positionnement du curseur sur un lien et en sortie de celui-ci.

Communication AJAX

Plusieurs méthodes pour consultation d’informations via une communication serveur sont disponibles.

Exemples

« $.get("getUser.do", { id:"2"}) » exécute un appel en « GET » sur l’élément « getUser.do » du site avec le paramètre « id » ayant la valeur « 2 ».

« $(this).load("infos.html"); » récupère le contenu du fichier « infos.html » pour inclusion au sein de l’élément courant.

Accès aux attributs

Egalement lors de l’accès à un élément, il est possible de consulter / modifier ses attributs / données.

Exemples

« $("a#file").attr("href") » permet d’obtenir la valeur de l’adresse du lien ayant l’ID « file » pour consultation ou manipulation.

« $("input:hidden#id").val() » permet d’obtenir la valeur de l’élément de formulaire caché ayant l’ID « id » pour consultation ou manipulation.

« $(this).addClass(".light") » ajoute le style CSS « .light » à l’élément.

« $(this).html() » permet de consulter le contenu HTML encapsulé dans l’élément.

Effets visuels

Il est principalement possible d’afficher ou de cacher certains éléments de la page par de simple fonctions.

Exemples

« $(this).show(); » affiche l’élément.

« $(this).fadeOut("slow"); » cache l’élément progressivement via un fondu jusqu’à transparence de celui-ci.

Principe de chainage

Le chainage est effectué grâce à la fonction « function(){…} » qui constitue le paramètre principal de bon nombre d’événements et permet donc d’y placer un nouvel ensemble d’instructions.

De plus via la référence « $(this) » il est possible d’accéder à l’élément ciblé par l’événement sur lequel cette nouvelle fonction a été placée.

Exemples

« $("div#title").click(function(){$("this").addClass(".light");}); » ajoute le style CSS « .light » à l’élément « div » ayant l’identifiant « title » lors d’un click sur celui-ci.

Exemples

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

Ajax – jQuery – Exemples

Ajax – jQuery – Plugins Plugins

Ajax – jQuery – Plugins – Upload : MultiFile Upload : MultiFile

MultiFile permet la sélection successive de plusieurs fichiers au sein d’un élément de sélection de fichier dans un formulaire avant l’envoi de ce dernier.

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

Ajax – jQuery – Plugins – Upload : MultiFile

Importer le fichier javascript de la librairie (en complément de celui de jQuery) :

<script type="text/javascript" src=" scripts/ jquery.MultiFile.js "></script>

Créer un élément « input » ayant pour classe « multi » :

<input name="file" class =" multi " type="file">

Ajax – jQuery – Plugins – Upload : MultiFile

Ajax – jQuery – Plugins – Fenêtres modales : ThickBox Fenêtres modales : ThickBox

ThickBox permet l’implémentation de pseudo-fenêtres modales pour visualisation de différents types de contenu.

Le contenu peut être exprimé au sein de la page source elle-même, d’un fichier annexe ou encore d’un appel distant.

http://jquery.com/demo/thickbox/

Ajax – jQuery – Plugins – Fenêtres modales : ThickBox

<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 élément « div » non visible avec un identifiant défini :

<div id=" contenuCache " style="display: none" > <p>Contenu de la fenêtre</p><p>Test</p></div>

Créer ensuite un lien pour affichage de la fenêtre (la valeur de « inlineId » correspond à l’id du contenu caché) :

<a href="#TB_inline? height = 155 & width = 300 & inlineId = contenuCache " class="thickbox" >Afficher la fenêtre</a>

Exemple avec image(s)

Créer un lien pour affichage de la fenêtre (la valeur de « href » correspond au lien vers l’image) :

<a href=" images/test.jpg " class="thickbox" >Afficher la fenêtre</a>

Ajax – jQuery – Plugins – Fenêtres modales : ThickBox

Ajax – jQuery – Plugins – Tri et filtrage de tableau : Tablesorter Tri et filtrage de tableau : Tablesorter

Tablesorter permet le tri avancé de tableaux.

http://tablesorter.com/docs/

Ajax – jQuery – Plugins – Tri et filtrage de tableau : Tablesorter

<script type="text/javascript" src=" scripts/jquery.tablesorter.js "></script>

Créer un tableau avec un identifiant défini (celui-ci devant contenir les éléments « thead » et « tbody ») :

<table id=" testTable ">

<thead><tr><th>Nom</th><th>Prénom</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 d’initialisation de la page indiquant le tableau à pouvoir trier :

$(document).ready( function(){$("# testTable ").tablesorter();} );

Ajax – jQuery – Plugins – Tri et filtrage de tableau : Tablesorter

Ajax – jQuery – Plugins – Drag’n’Drop : jqDnR Drag’n’Drop : jqDnR

jqDnR permet la gestion simplifiée du drag’n’drop.

http://dev.iceburg.net/jquery/jqDnR/

Ajax – jQuery – Plugins – Drag’n’Drop : jqDnR

<script type="text/javascript" src=" scripts/jqDnR.js "></script>

Créer un élément « div » avec un identifiant défini et une position relative :

<div id=" elementDnD " style=" position: relative " >

<p>Peut être déplacé</p>

</div>

Placer une fonction sur la fin d’initialisation de la page indiquant l’élément à pouvoir déplacer :

$(document).ready( function(){$("# elementDnD ").jqDrag();} );

Ajax – jQuery – Plugins – Drag’n’Drop : jqDnR

Comparatif GWT

Introduction à GWT   Compatibilité navigateur web   Code Javascript pour « brancher » l’ajax   Gestion de la navigation précédent / suivant   Courbe d’apprentissage   Modularité   Intégration à un site existant Ajax avec GWT Ajax