Support d’introduction au Framework DWR (Direct Web Remoting)

Participez au vote ☆☆☆☆☆★★★★★

Introduction à DWR

DWR c'est quoi ?

• DWR (Direct Web Remoting) bibliothèque open-sourcedestinée à faciliter l'écriture d'applications AJAX

– pas vraiment un technologie client ni une technologie serveur mais le pont ("glue") entre les deux.

• masque les couches de "bas niveau" pour les échanges entre le client et le serveur via l'objet XMLHttpRequest

– prend en charge les communications entre javascript (client) et java

(serveur)

• le code javascript peut invoquer "directement" des méthodes java s'exécutant depuis le serveur

• reverse AJAX : code java s'exécutant sur le navigateur peut utiliser l'APIclient pour mettre à jour le contenu du navigateur

– quelques fonctions javascript utilitaires

(Direct Web Remoting)

Philippe Genoud - UJF (c) - Février 2009 22

DWR : principe de fonctionnement

• AJAX

les données Java sont converties (marshalling) et transmises en une forme accessible depuis java script

Philippe Genoud - UJF (c) - Février 2009 24

DWR : principe de fonctionnement

• DWR constitué de deux parties

Partie Client Partie Serveur

Code JavaScript s'exécutant dans le navigateur, il envoie les requêtes et met à jour dynamiquement la page web.

Construction d'une application basée sur DWR

• Les étapes pour la mise en œuvre d'une application basée sur DWR sont les suivantes :

1. Copier le fichier dans le répertoire WEB-INF/lib de l'application web

2. Editer le fichier de configuration

– spécification du servlet DWRServlet

3. Création d'un fichier dans le répertoire WEB-INF

– spécification des classes Java et des méthodes que l'on veut exposer (rendre accessibles) côté client

4. Ecriture du code JavaScript côté client invoquant le code Java distant (syntaxe proche de RCP/RMI)

5. Construction, déploiement, test de l'application

DWR génère automatiquement une classe JavaScript à partir de la classe Java côté serveur qui encapsule les appels aux méthodes de la classe Java

Philippe Genoud - UJF (c) - Février 2009

org.directwebremoting.servlet.DwrServlet

traite les requêtes DWR et envoie les réponses au navigateur

Le servlet délègue les requêtes à une classe Java spécifiée dans le fichier de configuration

DWR effectue la conversion des paramètres et des valeur de retour de JavaScript vers java et

inversement 26

• Etape 1 :Copie de dans WEB-INF/lib

•

Philippe Genoud - UJF (c) - Février 2009 28

• Etape 3 : créer le fichier dans WEB-INF

Construction d'une application basée sur DWR

• attributs de l'élément create

<createcreator="new"javascript="JSLoginManager">

<paramname="class"value="dwrdemo.services.LoginManager"/>

<include method="validateUserId"/> </create>

javascript : nom par lequel la classe java est accessible depuis le code JavaScript

creator : indique la manière dont DWR doit procéder pour obtenir une instance de la classe java new : appel du constructeur par défaut none : pas de création d'objet (ex classe qui n'a que des méthodes statiques) où quand on veut utiliser un objet déjà défini dans la portée spécifiée spring : accès à des Bean au travers du framework Srping

jsf: utilise un objet JSF (Java Server Faces) struts : utilise un FormBean de Struts scripted : utilise un langage de script (BeanShell, Groovy…) via BSF (Bean Scripting Framework) possibilité d'ajouter ses propres créateurs

scope : indique dans quelle portée l'objet Java est créé. Par défaut page, autres options : request, session, page. Le nom associé à l'objet est le nom spécifié par l'attribut javascript

si il n'existe pas déjà dans la portée spécifiée l'objet Java est instancié dès que le proxy JavaScript tente d'invoquer l'une de ces méthodes

le fichier définit pour quelles classes Java et quelles méthodes de ces classes DWR doit créer du code JavaScript qui permettra de les invoquer depuis le poste client

Dans le fichier on ne précise que le nom de la méthode exposée.

Si elle est surchargée, DWR publie la première méthode trouvée correspondant au nom indiqué.

Philippe Genoud - UJF (c) - Février 2009 30

• Etape 4a : écrire le code JavaScript qui côté client invoque les méthodes de la classe Java

inclure le code

Philippe Genoud - UJF (c) - Février 2009 32

• Etape 5 : construire, déployer, tester le code

DWR crée une page de test des différentes classes de l'application exposées coté client http://localhost:8084/<Your-Application-Context>/dwr

Philippe Genoud - UJF (c) - Février 2009 34

Gestion des appels asynchrones

• Un troisième syntaxe alternative est d'utiliser un objet méta-data

<<script type='text/javascript'script type='text/javascript'>> La fonction callback peut être écrite sous forme "in-line"

function validateUserId() {function validateUserId() {var userId = .getValue("userid");var userId = .getValue("userid");

JSLoginManager.validateUserId(userId,JSLoginManager.validateUserId(userId,function (data) {function (data) {if (! data) {if (! data) {.setValue("userIdMessage","Invalid User Id");.setValue("userIdMessage","Invalid User Id");

}}else else{{

.setValue("userIdMessage","Valid User Id");.setValue("userIdMessage","Valid User Id");<<script type='text/javascript'script type='text/javascript'>>

Convertisseurs

• Convertisseurs (converters) se chargent de la conversion (marshalling) des données entre le client (JavaScript) et le serveur (Java)

• DWR propose un certain de nombre de convertisseurs

– Basic Converters : int, char, float, double, boolean …,Integer, Float, Double, Boolean…, .String

– Date Converter : , , , .TimeStamp

– Array et Collection Converters : tableaux et Collections (Lists, Sets, Maps, Iterators, etc) des types précédents

– DOM Converter : objets DOM objects (par ex. Element and Document) des API DOM, XOM, JDOM and DOM4J

– Bean et Object Converter : objets Java Beans

• convertissent un POJO en un tableau associatif JavaScript et inversement

• Bean Converter : utilise getters et setters, Object Converter accède directement aux attributs

• Possibilité de créer ses propres convertisseurs.

– rarement nécessaire

}}

}} function validateUserId() {function validateUserId() {

));; var userId = .getValue("userid");var userId = .getValue("userid");

}}

<</script/script>> JSLoginManager.validateUserId(userId,JSLoginManager.validateUserId(userId,{^{ l'objet méta-data

spécifie une callback:callback:function(data){function(data){

if (! data) {^{if (! data) {} fonction callback

.setValue("userIdMessage","Invalid User Id");.setValue("userIdMessage","Invalid User Id");

avantage : permet de spécifier ^}}^else else^{{

des options supplémentaires .setValue("userIdMessage","Valid User Id");.setValue("userIdMessage","Valid User Id"); objet

lors de l'appel du callback ^}^} méta-data

timeout timeout:5000,

^gestionnaireerrorHandler:function(message) { alert("Oops: " + message); }

d'erreur

}}

));;

}}

<</script/script>>

Philippe Genoud - UJF (c) - Février 2009

Convertisseurs

• Activation des convertisseurs

– Activation implicite (activés par défaut, pas de déclaration à faire)

• Basic Converters

• Date Converter

• Array et Collection Converters

• DOM Converter

– Activation explicite

• Bean et Object Converter

• DWR vérifie qu'il a l'autorisation avant de toucher (et d'exposer) votre propre code

• élément <converter…> dans la section <allow></allow> du fichier

Philippe Genoud - UJF (c) - Février 2009 38

Fonctions utilitaires :

• : un ensemble de fonctions utilitaires JavaScript pour faciliter la mise à jour des pages

– peut être utilisé indépendamment de DWR

• liste des fonctions

– récupération d'un élément de la page : byId

– consultation/modification de la valeur d'un élément : getValue, getValues, setValue, setValues

– getText : donne le texte (et non la valeur) associé à un élément

– manipulation de tables : addRows and removeAllRows

– manipulation de listes : addOptions and removeAllOptions

– toDescriptiveString : une alternative à toString

– onReturn : permet de gérer la touche return supportée différemment selon les navigateurs

– selectRange : permet de gérer sélection d'une partie d'un text input supportée différemment selon les navigateurs

– useLoadingMessage

• toutes le fonctions sont préfixées par .

Philippe Genoud - UJF (c) - Février 2009 40

Exemple d'application AJAX-DWR

Philippe Genoud - UJF (c) - Février 2009 42