P. 1
ajaxXml

ajaxXml

|Views: 0|Likes:
Published by Zan Layle

More info:

Published by: Zan Layle on Jul 27, 2013
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

09/14/2014

pdf

text

original

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

AJAX Asynchronous Javascript And XML
GUINKO Tonguim Ferdinand

9 novembre 2011

1/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Sommaire

1

Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

2

3

4

2/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Pr´ esentation : AJAX ensemble de techniques ou architecture ? Avantages et inconv´ enients L’objet XMLHttpRequest

1

Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

2

3

4

3/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Pr´ esentation : AJAX ensemble de techniques ou architecture ? Avantages et inconv´ enients L’objet XMLHttpRequest

Qu’est ce que AJAX ?
Technique ´ etablissant un canal de communication bi-directionnel entre les navigateurs web et les serveurs via le protocole HTTP ; Technique combinant les langages XML et JavaScript pour faire des appels asynchrones au code se trouvant sur le serveur ; Pas une technologie, mais une m´ ethode de d´ eveloppement web :
pour accroˆ ıtre l’interactivit´ e d’un site web ; une page web peut interagir avec un serveur sans que la page enti` ere ne soit recharg´ ee.

3/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Pr´ esentation : AJAX ensemble de techniques ou architecture ? Avantages et inconv´ enients L’objet XMLHttpRequest

AJAX : appels asynchrones au serveur
Dans un ´ echange synchrone entre un client et le serveur, lorsque le client (le navigateur web) effectue une requˆ ete, il attend ensuite la ”r´ eponse” du serveur avant de faire quoi que ce soit d’autre (ce qui peut donner l’impression que le navigateur est ”bloqu´ e”). Dans un ´ echange asynchrone, le client n’attend pas la r´ eponse du serveur pour poursuivre les tˆ aches en cours, ce qui ´ evite donc le blocage du processus (si la r´ eponse n’arrive jamais !). En AJAX, tous les ´ echanges sont asynchrones, d’o` u la pr´ esence du terme Asynchronous dans l’accronyme AJAX.

4/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Pr´ esentation : AJAX ensemble de techniques ou architecture ? Avantages et inconv´ enients L’objet XMLHttpRequest

Qu’est ce que AJAX : exemple
Exemple : Consid´ erons une certaine page web. Un ´ ev` enement quelconque (pression d’un bouton, click, ..., ou un ´ ev` enement programm´ e` a l’avance) survient et d´ eclenche un code JavaScript qui demande au serveur de raffraˆ ıchir une information (par exemple le cours du dollars canadien ` a la bourse de Torronto). Un programme au niveau du serveur collectera l’information demand´ ee et la renverra au navigateur web. Attention ! ! ! ceci est diff´ erent du rˆ ole traditionnel de serveur de pages web du serveur.
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

5/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Pr´ esentation : AJAX ensemble de techniques ou architecture ? Avantages et inconv´ enients L’objet XMLHttpRequest

Qu’est ce que AJAX : suite de l’exemple
Suite de l’exemple : Pour r´ epondre et communiquer l’information qui lui est demand´ ee, le serveur appelle la fonction d’appel avec laquelle il doit communiquer et lui transmet l’information. Le code JavaScript utilise l’information qui lui a ´ et´ e communiqu´ ee pour mettre ` a jour par exemple le tableau des cours de bourse du continent am´ ericain ` a 15h00 GMT. Notez bien que dans cet exemple, le serveur met ` a jour un ´ el´ ement de la page web et non la page tout enti` ere !
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

6/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Pr´ esentation : AJAX ensemble de techniques ou architecture ? Avantages et inconv´ enients L’objet XMLHttpRequest

Pr´ esentation : AJAX : ensemble de techniques ou architecture ?

AJAX peut ˆ etre consid´ er´ e comme : un ensemble de techniques, ou une architecture.

7/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Pr´ esentation : AJAX ensemble de techniques ou architecture ? Avantages et inconv´ enients L’objet XMLHttpRequest

Pr´ esentation : AJAX un ensemble de techniques

AJAX : un ensemble de techniques Combinaison des standards des langages XHTML et CSS ; Affichage et interaction dynamiques utilisant les DOM ; Manipulation des donn´ ees grˆ ace au XML et au XSLT ; Recherche asynchrone d’information grˆ ace ` a
XMLHTTP (pour Microsoft) ; XMLHttpRequest

ou

Le tout li´ e par le langage JavaScript.

8/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Pr´ esentation : AJAX ensemble de techniques ou architecture ? Avantages et inconv´ enients L’objet XMLHttpRequest

Pr´ esentation : AJAX une architecture : rappels
L’architecture classique d’un site web est ainsi d´ efinie : D´ efinition d’une page pour chaque ´ ev` enement g´ er´ e par l’application web : affichage de liste (de livres, d’articles, ...), achat d’article, etc. Chaque ´ ev` enement retourne une page au navigateur web ; Ce type d’architecture nous paraˆ ıt naturel. Au d´ ebut du web (voir d´ efinition du cours introductif), le web : ressemblait ` a un vaste repertoire de documents consistait simplement en un r´ eseau de liens hypertextes entre documents ; signifiait partage de documents. AJAX d´ ecrit une nouvelle architecture dans lequel le mode interactif fait son apparition.
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

9/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Pr´ esentation : AJAX ensemble de techniques ou architecture ? Avantages et inconv´ enients L’objet XMLHttpRequest

Pr´ esentation : AJAX une architecture !
1

2

3

10/97

Ev` enements survenant sur le serveur : les composants d’une application web peuvent faire de petites requˆ etes au serveur, obtenir l’information d´ esir´ ee et mettre ` a jour la page en cours de consulation ; il s’agit ici de mettre ` a jour seulement le DOM concern´ e au niveau de la page consult´ ee, et non la page toute enti` ere. Asynchronisation : les requˆ etes adress´ ees au serveur n’empˆ echent pas la continuit´ e du fonctionnement du navigateur. L’utilisateur peut poursuivre sa navigation sur la page pendant que le navigateur adresse une requˆ ete au serveur ; Tous les ´ ev` enements (mouseOver, mouseClick, keyPress, etc.) initi´ es par l’utilisateur peuvent g´ en´ erer des requˆ etes asynchrones. GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Pr´ esentation : AJAX ensemble de techniques ou architecture ? Avantages et inconv´ enients L’objet XMLHttpRequest

Pr´ esentation : requˆ ete AJAX et requˆ ete non AJAX

Figure: Une requˆ ete g´ en´ er´ ee par une page contenant de l’AJAX et une requˆ ete g´ en´ er´ ee par une page web ne contenant pas de l’AJAX
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

11/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Pr´ esentation : AJAX ensemble de techniques ou architecture ? Avantages et inconv´ enients L’objet XMLHttpRequest

Pr´ esentation : page AJAX et page non AJAX
Laquelle de ces pages est une page AJAX ?

12/97

Figure: Une page contenant de l’AJAX et une page web ne contenant
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Pr´ esentation : AJAX ensemble de techniques ou architecture ? Avantages et inconv´ enients L’objet XMLHttpRequest

Pr´ esentation : AJAX : Avantages
Une partie des pages est mise ` a jour de mani` ere asynchrone (donc non bloquante), ce qui donne plus de fluidit´ e` a l’affichage des pages et provoque moins de temps d’attente ; Le trafic sur le r´ eseau est donc diminu´ e : il suffit d’envoyer les donn´ ees, de r´ ecup´ erer les ´ el´ ements de la r´ eponse et de les positionner ` a l’endroit voulu sur la page au lieu de recharger une page enti` ere ; La gestion de la page peut ˆ etre facilit´ ee, car il suffit de mettre ` a jour sur le serveur des fichiers de taille r´ eduite, parfois mˆ eme seulement au format texte.

13/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Pr´ esentation : AJAX ensemble de techniques ou architecture ? Avantages et inconv´ enients L’objet XMLHttpRequest

Pr´ esentation : AJAX : Inconv´ enients
Code tr` es d´ elicat ` a mettre en œuvre, d’o` u risque d’augmentation du temps de d´ eveloppement et des coˆ uts. Une bonne connaissance des diff´ erentes technologies est indispensable ; AJAX est bas´ e sur l’existence d’un objet javascript appel´ e XMLHttpRequest qui ne fonctionne pas avec les anciennes versions des navigateurs ou si l’interpr´ eteur javaScript est d´ esactiv´ e; L’historique et les retours ` a la page pr´ ec´ edente ne permettent plus de faire marche arri` ere, des parties de page ayant ´ et´ e modifi´ ees depuis le chargement initial ; Le r´ ef´ erencement des pages Web est plus difficile ` a r´ ealiser, une mˆ eme page pouvant avoir au fil du temps des contenus tr` es diff´ erents. GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

14/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Pr´ esentation : AJAX ensemble de techniques ou architecture ? Avantages et inconv´ enients L’objet XMLHttpRequest

XMLHttpRequest
AJAX est con¸ cu autour d’un objet, l’objet XMLHttpRequest . Cet objet permet d’encapsuler les requˆ etes et les r´ eponses ´ echang´ ees entre le client et le serveur. XMLHttpRequest peut g´ erer les requˆ etes de fa¸ con : synchronis´ ee : dans ce cas, le navigateur client se bloque et attend la r´ eponse du serveur ; ou asynchronis´ ee : dans ce cas, le navigateur client ne se bloque pas ; il laisse le gestionnaire de r´ eponses de l’objet XMLHttpRequest ex´ ecuter les instructions d´ eclench´ ees par une r´ eponse du serveur.

15/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Pr´ esentation : AJAX ensemble de techniques ou architecture ? Avantages et inconv´ enients L’objet XMLHttpRequest

XMLHttpRequest : m´ ethodes
1 2

3

4

5

6

: abandonne la requˆ ete courante ; : renvoie l’ensemble de l’entˆ ete de la r´ eponse sous forme de chaˆ ıne de caract` eres ; getResponseHeader(¡champEntete¿) : renvoie la valeur d’un champ d’entˆ ete HTTP ; open(“GET”/“POST”, “URL” [, true/false[, ¡username¿,¡password¿]]) : pr´ epare une requˆ ete en indiquant la m´ ethode, l’URL, la drapeau de synchronisation, le nom d’utilisateur et le mot de passe ; send(contenu) : effectue la requˆ ete, ´ eventuellement en envoyant les donn´ ees ; setRequestHeader(¡name¿, ¡value¿) : assigne une valeur ` a un champ d’entˆ ete HTTP qui sera envoy´ e lors de la requˆ ete.
abort() getAllResponseHeaders()
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

16/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Pr´ esentation : AJAX ensemble de techniques ou architecture ? Avantages et inconv´ enients L’objet XMLHttpRequest

XMLHttpRequest : propri´ et´ es
1

2

: gestionnaire d’´ ev´ enements pour les changements d’´ etat ; readyState : statut de l’objet ;
onreadystatechange

0 = non initialis´ e; 1 = ouverture ; la m´ ethode open() a ´ et´ e appel´ ee avec succ` es ; 2 = envoy´ e ; la m´ ethode send() a ´ et´ e appel´ ee avec succ` es ; 3 = en train de recevoir ; des donn´ ees sont en train d’ˆ etre transf´ er´ ees, mais le transfert n’est pas termin´ e; 4 = termin´ e ; les donn´ ees sont charg´ ees.
3 4 5

6

: r´ eponse sous forme de chaˆ ıne de caract` eres ; responseXML : r´ eponse sous forme d’objet DOM ; status : code num´ erique de r´ eponse du serveur HTTP (c’est ` a dire : 200, 404, 500, etc.) ; statusText : message accompagnant le code de r´ eponse.
responseText
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

17/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Pr´ esentation : AJAX ensemble de techniques ou architecture ? Avantages et inconv´ enients L’objet XMLHttpRequest

XMLHttpRequest : inconv´ enients d’une gestion manuelle de cet objet
L’objet XMLHttpRequest n’est pas standardis´ e, son impl´ ementation varie l´ eg` erement selon les navigateurs. Par exemple, Microsoft dispose des fonctions ActiveXObject(”Msxml2.XMLHTTP”) et ActiveXObject(”Microsoft.XMLHTTP”) , selon le moteur XML utilis´ e, alors que les autres navigateurs utilisent simplement la fonction XMLHttpRequest() ; Il faut ´ ecrire manuellement une page XMLHttpRequest pour chaque type de navigateurs existants ; Il n’est pas possible de cliquer sur le bouton pr´ ec´ edent du navigateur.
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

18/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

1

Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

2

3

4

19/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Qu’est ce que Google Web Toolkit ?
Google a mis ` a la disposition des d´ eveloppeurs web un framework, c’est ` a dire un ensemble de librairies, sous le nom Google Web Toolkit (GWT) qui permet de cr´ eer : des applications AJAX et des applications internet riches, des applications web multi-navigateurs, sans avoir ` a´ ecrire des centaines de lignes de JavaScript. GWT est en r´ ealit´ e un compilateur ´ ecrit enti` erement en Java, et qui g´ en` ere ` a partir du code source Java des fichiers JavaScript, XML et HTML. Application internet riche : application Web qui offre des caract´ eristiques similaires aux logiciels traditionnels install´ es sur un ordinateur.
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

19/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Grands principes
GWT : Une interface utilisateur GWT = Widget(s) + Panel(s) + Ev` enement(s) ...comme dans SWING ; GWT g` ere l’internationalisation ` a travers des interfaces ` a cr´ eer ; GWT permet des communications avec le serveur via RPC (Module GWT-RPC) ? GWT peut utiliser JSON pour donn´ ees client/serveur ; GWT fournit l’API pour manipuler du XML ; GWT g` ere le probl` eme de l’historique navigateur d’applications AJAX ; GWT permet d’automatiser le cr´ eation de tests unitaires.
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

20/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Grands principes (... suite)
Deux modes d’ex´ ecution d’une application GWT 1 Hosted mode :
L’application est ex´ ecut´ ee sur la machine locale au sein d’une machine virtuelle Java fournie par GWT ; ceci ´ evite la compilation de l’application et le d´ eploiement sur le serveur ; Un navigateur sp´ ecial fourni par GWT abrite une machine virtuelle Java capable d’afficher et manipuler les objets graphiques composant l’interface ; Utilis´ e en phase de d´ eveloppement : permet le d´ ebogage en Java.
2

Web mode :
L’application est ex´ ecut´ ee ` a partir d’un navigateur web du march´ e; La partie cliente doit ˆ etre compil´ ee au pr´ ealable en javascript ; Utilis´ e en production.
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

21/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Installation

Eclipse → Help → Install new software
1

Copiez et collez l’adresse suivante, dans la zone de saisie nomm´ ee work with de la fenˆ etre qui s’ouvre :
http ://dl.google.com/eclipse/plugin/3.7

2 3 4

Cliquez sur le bouton S´ electionnez Cliquez sur
Next

Add

Google plugin for EclipseGWT Designer for GPE

et

SDKs

et terminez l’installation.

22/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

El´ ements de GWT
GWT se compose de plusieurs ´ el´ ements : Le compilateur qui compile du code Java en code Javascript ; JSNI qui permet l’utilisation de code Javascript dans le code Java ; JRE Emulation Library qui est un sous ensemble des classes de base de Java ; Une API qui fournit de nombreuses fonctionnalit´ es : composants graphiques pour IHM, appels RPC vers un serveur, gestion de l’historique de navigation, parser de document XML, tests unitaires avec JUnit, ...

23/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Packages GWT
Package com.google.gwt.animation.client com.google.gwt.benchmarks.client com.google.gwt.core.client com.google.gwt.core.ext com.google.gwt.core.ext.linker com.google.gwt.core.ext.typeinfo com.google.gwt.dom.client com.google.gwt.http.client com.google.gwt.i18n.client com.google.gwt.i18n.rebind.format com.google.gwt.json.client com.google.gwt.junit.client com.google.gwt.junit.tools com.google.gwt.user.client com.google.gwt.user.client.rpc com.google.gwt.user.client.ui com.google.gwt.user.server.rpc com.google.gwt.xml.client Description Pour les animations% % Classes fondamentales pour les applications GWT client-serveur% Classes pour h´ eriter du compilateur GWT% Classes pour ´ ecrire des linkers% % Classes pour programmer des DOM de bas niveau% Classes pour ´ ecrire et traiter des requˆ etes HTTP% Classes pour l’internationalisation des applications GWT% % % % % % % % % %

24/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

El´ ements de GWT : JavaScript Native Interface (JSNI)
JSNI permet d’inclure du code Javascript dans le code Java. Cette API a plusieurs utilit´ es : appel ` a du code Javascript non g´ en´ er´ e par GWT ; utiliser des biblioth` eques de code Javascript existantes. JSNI est utilis´ e par le compilateur pour fusionner le code Javascript qu’il contient avec le code Javascript g´ en´ er´ e` a la compilation : Le code Javascript est inclus dans une m´ ethode qualifi´ ee avec le modificateur natif ; Le code Javascript lui-mˆ eme est inclus entre les caract` eres /*et -*/ ; (il s’agit en fait d’un bloc de commentaires) ; Cette s´ equence de caract` eres ` a l’avantage est ignor´ ee par le compilateur Java et exploit´ ee par le compilateur de GWT.
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

25/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

El´ ements de GWT : JSNI : ` a quoi sert-il ? Exemple 1
La syntaxe JSNI est une directive pour le compilateur Java-To-JavaScript afin qu’il accepte tout le code du bloc de commentaire comme du code JavaScript valide et qu’il l’injecte directement dans les fichiers g´ en´ er´ es par GWT. Exemple :
//Cette m´ ethode ci-dessous affiche une fen^ etre d’alerte JavaScript public static native void alert(String msg) /*{ $wnd.alert(msg); } -*/;

Mais cet exemple ne montre pas avec pertinence l’utilit´ e de JSNI. Allons donc ` a l’exemple 2 :
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

26/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

El´ ements de GWT : JSNI : ` a quoi sert-il ? Exemple 2

Il peut arriver de vouloir obtenir des informations (par exemple le num´ ero de la semaine) sur une date cˆ ot´ e client. Or GWT ne permet d’utiliser que la classe java.Util.Date , ce qui n’offre que des traitements tr` es limit´ es. Il est vrai que GWT fournit quelques fonctions de traitement, situ´ ees dans la classe CalendarUtil , mais nous cherchons la mani` ere la plus simple d’extraire l’information qui nous int´ eresse. Nous utilisons pour cela JSNI avec un algorithme JavaScript : Voir l’exemple 2.

27/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

El´ ements de GWT : JSNI : ` a quoi sert-il ? Exemple 2
Exemple 2 :
//Le programme suivant retourne le num´ ero de la semaine si l’ann´ ee, le mois, et le jour sont pass´ es en param` etres ` a la fonction JSNI private native int getNativeWeekNumber(int annee, int mois, int jour) /*-{ //getWeek() develop´ ee par Nick Baicoianu ` a MeanFreePath: http://www.meanfreepath.com //Retourne le num´ ero de la semaine pour une date donn´ ee. dowOffset est le jour de la semaine. //Les jours sont num´ erot´ es de 0 ` a 6. Si dowOffset = 1 (Lundi), alors le num´ ero de semaine //retourn´ e est le num´ ero de semaine ISO 8601. //@param int dowOffset //@return int Date.prototype.getWeek = function (dowOffset) { dowOffset = typeof(dowOffset) == ’int’ ? dowOffset : 1; //Par d´ efaut, dowOffset = 1 var nouvelleAnnee = new Date(this.getFullYear(),0,1); var jour = nouvelleAnnee.getDay() - dowOffset; //Jour de la semaine par lequel d´ ebute l’ann´ ee jour = (jour >= 0 ? day : day + 7); var numJour = Math.floor((this.getTime() - nouvelleAnnee.getTime() (this.getTimezoneOffset()-newYear.getTimezoneOffset())*60000)/86400000) + 1; var numSemaine;

28/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

El´ ements de GWT : JSNI : ` a quoi sert-il ? (... suite exemple 2)
//Si l’ann´ ee commence avant le milieu de la semaine if(jour < 4) { numSemaine = Math.floor((numJour+jour-1)/7) + 1; if(numSemaine > 52) { nYear = new Date(this.getFullYear() + 1,0,1); nday = nAnnee.getDay() - dowOffset; nday = nJour >= 0 ? nJour : nJour + 7; //Si l’ann´ ee suivante commence avant le milieu de la semaine //alors il s’agit de la premi` ere semaine de l’ann´ ee numSemaine = nday < 4 ? 1 : 53; } } else { numSemaine = Math.floor((numJour+jour-1)/7); } return numSemaine; };

29/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

El´ ements de GWT : JSNI : ` a quoi sert-il ? (... suite exemple 3)

//On instancie une date JavaScript var myDate=new Date(); //On set notre date ` a la date voulue myDate.setFullYear(year,month,day); //On retourne le resultat de l’algorithme return myDate.getWeek(); }-*/;

30/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Echanges d’objets entre Java et javaScript

Les param` etres et les retours des m´ ethodes JSNI sont des objets de type Java ; Le code ex´ ecut´ e dans ces m´ ethodes est du code JavaScript ; Ces param` etres et retours sont donc soumis ` a plusieurs restrictions. Si l’une de ces restrictions n’est pas respect´ ee, une exception de type com.google.gwt.dev.shell.HostedModeException sera lev´ ee si l’application est lanc´ ee depuis l’environnement de d´ eveloppement. Si l’application est lanc´ ee en mode production, aucune exception ne sera lev´ ee.

31/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Echanges d’objets entre Java et javaScript (... suite)

Passer des variables de Java ` a JavaScript
Le type Java String Boolean Long Autres types num´ eriques primitifs JavaScriptObject Comment cela apparaˆ ıt en JavaScript Comme une String JavaScript, comme pour var s = ma chaine de caract` eres ;% Comme un bool´ een JavaScript, comme pour var b = true ;% Non autoris´ e (voir les pr´ ecisions un peu plus loin).% Comme une valeur num´ erique JavaScript, comme pour var x = 42 ;% Comme un objet JavaScript. c’est un objet qui ne peut ˆ etre g´ en´ er´ e en Java et qui est en g´ en´ eral un objet retourn´ e par une autre m´ ethode JSNI (voir les pr´ ecisions un peu plus loin)% Une valeur opaque non traitable en JavaScript, mais qui peut ˆ etre quand mˆ eme renvoy´ ees par une m´ ethode JSNI.% Une valeur opaque seulement accessible grˆ ace ` a une syntaxe sp´ ecifique.%

Tableaux Java

N’importe quels autres Objet Java

32/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Echanges d’objets entre Java et javaScript (... suite)

Passer des variables de JavaScript ` a Java
Le type Java ` a r´ ecup´ erer String Boolean Long Autres types num´ eriques primitifs JavaScriptObject Ce qui est retourn´ e Une String JavaScript, comme dans return chaine de caract` ere ;% Un bool´ een JavaScript, comme dans return true ;% Non autoris´ e (voir les pr´ ecisions un peu plus loin).% Comme une valeur num´ erique JavaScript, comme pour return 19 ;% Un objet JavaScript natif, comme dans return document.createElement( div ) ; (voir les pr´ ecisions un peu plus loin)% Un Objet Java qui doit provenir de code Java. Les objets java ne peuvent ˆ etre construits en JavaScript %

N’importe quels autres Objet Java

33/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Chargement des param` etres du navigateur
Remarques :
1

Pour avoir une application compatible avec plusieurs navigateurs, GWT va g´ en´ erer ` a la compilation un fichier JavaScript par type de navigateur support´ e et par langue de l’application ; Le compilateur va aussi g´ en´ erer un fichier JavaScript pour chaque langue mise en oeuvre pour internationaliser l’application ; Lorsqu’un utilisateur acc` ede ` a la page d’accueil de l’application GWT va charger le fichier JavaScript correspondant ` a la configuration de l’utilisateur.
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

2

3

34/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Interface graphique des applications GWT
Pour la conception des intefaces graphiques, GWT propose un ensemble de composants de deux types : widgets : contrˆ oles utilisateurs de base (boutons, zone de texte, case ` a cocher, bouton radio, ...) ou plus riches en fonctionnalit´ es (barre de menu, onglet, treeview, ...) ; panels : composants charg´ es d’assurer la disposition des composants qui leur sont rattach´ es ` a l’image des layouts manager de Swing. Certains panels proposent aussi de l’interactivit´ e avec l’utilisateur. Il est aussi possible de d´ evelopper ses propres composants (calendrier, grille, ...) grˆ ace ` a des projets open source ou de cr´ eer des composants qui encapsulent des biblioth` eques Javascript existantes (Scriptaculous, Google Search et Map, ...).
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

35/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Composants (widgets)

GWT propose un ensemble complet de composants graphiques de base pour le d´ eveloppement de l’interface graphique d’une application. Tous les composants h´ eritent de la classe
com.google.gwt.user.client.ui.UIObject.

La classe UIObject est la super classe des classes Widget, MenuItem et TreeItem. La classe Widget est la super classe de la quasi totalit´ e des composants graphiques de GWT.

36/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Composants (Widgets) : arborescence

Figure: Arborescence des composants
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

37/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Widget : Label : Description

HorizontalPanel horizontalPanel = new HorizontalPanel(); //On instancie le Label avec un texte Label monLabel = new Label("Mon Texte"); //On ajoute un ClickHandler monLabel.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { Window.alert("ClickEvent d´ eclench´ e"); } }); horizontalPanel.add(monLabel);

38/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Widget : PushButton : Description
HorizontalPanel horizontalPanel = new HorizontalPanel(); //Instanciation du bouton Activ´ e PushButton normalButton = new PushButton(); normalButton.setWidth("120px"); //On set le texte du bouton enfonc´ e en html normalButton.getDownFace().setHTML(" <div style="color: red; text-align: center;">Down</div> "); //On set le texte du bouton en mode hovering (lorsque la souris passe par dessus) en html normalButton.getUpHoveringFace().setHTML(" <div style="color: green; text-align: center;">Hovering</div> "); //On set le texte du bouton relev´ e en html normalButton.getUpFace().setHTML(" <div style="color: blue; text-align: center;">Up</div> ");

39/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Widget : PushButton : Description (... suite)

//Instanciation du bouton d´ esactiv´ e PushButton disabledButton = new PushButton("Bouton D´ esactiv´ e"); disabledButton.setWidth("120px"); //On set le texte du bouton relev´ e et d´ esactiv´ e en html disabledButton.getUpDisabledFace().setHTML(" <div style="color: blue; text-align: center;">Bouton D´ esactiv´ e</div> "); //On d´ esactive le bouton disabledButton.setEnabled(false); horizontalPanel.setSpacing(2); horizontalPanel.add(normalButton); horizontalPanel.add(disabledButton);

40/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Widget : Button : Description
HorizontalPanel horizontalPanel = new HorizontalPanel(); //Instanciation du bouton Activ´ e Button normalButton = new Button("Normal Button"); //Ajout d’un Handler pour les click normalButton.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { //Affichage de la fenetre Window.alert("ClickEvent fired"); } }); //Instanciation du bouton d´ esactiv´ e Button disabledButton = new Button("Disabled Button"); //On d´ esactive le bouton disabledButton.setEnabled(false); horizontalPanel.setSpacing(2); horizontalPanel.add(normalButton); horizontalPanel.add(disabledButton);

41/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Cr´ eation d’un nouveau projet

Pour cr´ eer un nouveau projet :
projet

New → Other→Google→Web application

Attention : v´ erifiez que l’option

Use Google App Engine

est d´ ecoch´ ee.

42/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Structure du repertoire du projet
A l’int´ erieur du repertoire
src

se trouve :

le paquetage ca.uqar qui vient d’ˆ etre cr´ e´ e; 3 repertoires cr´ e´ es automatiquement par GWT : client : ce repertoire contient le fichier nomm´ e PremiereApplicationGwt.java ; c’est le fichier principal de notre application. Ce fichier contient la classe du mˆ eme nom qui ne contient pas de m´ ethode main() , mais contient en lieu et place une m´ ethode onModuleLoad() . La m´ ethode onModuleLoad() peut-ˆ etre consid´ er´ ee comme ´ etant l’´ equivalent de la m´ ethode main() , pour GWT.
shared (public) ; server.
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

43/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Structure du repertoire du projet (... suite)
Les autres repertoires cr´ e´ es automatiquement sont : A l’int´ erieur du repertoire war se trouve le repertoire WEB-INF qui contient les fichiers .css et les fichiers .html . Dans le fichier PremiereApplicationGwt.html , la ligne de code qui d´ ebute par script et se termine par /script v´ erifie la valeur de User-Agent pour d´ eterminer le type du navigateur du client afin de rechercher le fichier de configuration JavaScript qui lui convient ; le repertoire war contient les ressources statiques devant ˆ etre publiques tel que les fichiers images, les feuilles de style, les fichiers .html, etc. Le repertoire
WEB-INF

44/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple : exercice d’application

Cet exemple est bas´ e sur l’exemple propos´ e par
http ://code.google.com/intl/fr/webtoolkit/doc/latest/tutorial/gettingstarted.html.

Il s’agit de d´ evelopper une application web qui permettra de connaˆ ıtre en temps r´ eel le cours des indices boursiers de la bourse de Torronto Cr´ eez un nouveau projet. Donnez lui le nom paquetage associ´ e porte le nom ca.uqar
PremiereApplicationGwt

Le

45/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :

Figure: Page d’acccueil de l’application en cours de cr´ eation
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

46/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
La page a cr´ eer contient plusieurs objets dont : des widgets, des labels, des zones de texte, des boutons, etc. Pour connaˆ ıtre la liste des objets graphiques (widgets, tables, etc.) disponibles et que l’on peut utiliser :
C :\Program Files \Eclipse \eclipse \plugins \com.google.gwt.eclipse.sdkbundle \ 2.4.0.relr37v201110112027 \gwt-2.4.0\samples\Showcase \war \Showcase.html

ou

http ://gwt.google.com/samples/Showcase/Showcase.html# !CwCheckBox
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

47/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :

Figure: Structure graphique de la page d’accueil

.
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

48/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Ouvrir le fichier /war/PremiereApplicationGwt.html Remplacez son contenu par le code suivant :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="PremiereApplicationGwt.css"> <title>Premi` ere application GWT</title> <script type="text/javascript" language="javascript" src="PremiereApplicationGwt/PremiereApplicationGwt.nocache.js"></script> </head> <body> <h1>Premi` ere application GWT</h1> <div id="stockList"></div> <iframe src="javascript:’’" id="__gwt\_historyFrame" tabIndex=’-1’ style= "position:absolute;width:0;height:0;border:0"></iframe> <noscript> <div style="width: 22em; position: absolute; left: 50\%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif"> Votre navigateur doit tol´ erer le JavaScript pour que cette page s’affiche correctement. </div> </noscript> </body> </html> GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

49/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Instantiation de chaque widget et des panels
package ca.uqar; public class StockWatcher implements EntryPoint { private private private private private private VerticalPanel mainPanel = new VerticalPanel(); FlexTable stocksFlexTable = new FlexTable(); HorizontalPanel addPanel = new HorizontalPanel(); TextBox newSymbolTextBox = new TextBox(); Button addStockButton = new Button("Add"); Label lastUpdatedLabel = new Label();

/** * Entry point method. */ public void onModuleLoad() { //A_FAIRE Cr´ eer ici le tableau pour saisir et afficher les cours boursiers //A_FAIRE Assembler ici le panel Ajout cours boursier //A_FAIRE Assembler ici le panel principal //A_FAIRE Associer ici le panel principal et la page HTML //A_FAIRE La zone de saisie de texte re¸ coit le focus du curseur } }

50/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :

V´ erifiez que la liste des librairies import´ ees correspond bien ` a celle-ci :
package ca.uqar; import import import import import import import com.google.gwt.core.client.EntryPoint; com.google.gwt.user.client.ui.Button; com.google.gwt.user.client.ui.FlexTable; com.google.gwt.user.client.ui.HorizontalPanel; com.google.gwt.user.client.ui.Label; com.google.gwt.user.client.ui.TextBox; com.google.gwt.user.client.ui.VerticalPanel;

51/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Cr´ eation du tableau pour saisir et afficher les cours boursiers Dans la m´ ethode suivant :
//Cr´ eation d’un tableau d’affichage des cours boursiers stocksFlexTable.setText(0, 0, "Symbole"); stocksFlexTable.setText(0, 1, "Prix"); stocksFlexTable.setText(0, 2, "Conversion"); stocksFlexTable.setText(0, 3, "Supprimer");

onModuleLoad , remplacez le commentaire A FAIRE Cr´ eer ici le tableau pour saisir et afficher les cours boursiers par le code

Remarque : le premier param` etre indique la ligne ; le second param` etre indique la colonne ; le troisi` eme param` etre repr´ esente le texte ` a afficher dans la cellule (ligne, colonne).
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

52/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Cr´ eation des widgets Ainsi qu’illustr´ e` a la figure 5 pr´ ec´ edente, 2 panels seront nec´ essaires : le panel horizontal Ajout cours boursier : il contient une zone de saisie de texte et un bouton Ajouter ; le panel vertical qui est le panel principal : il contiendra la liste des cours boursiers, le panel Ajout cours boursier et l’affichage de la date.

53/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Dans la m´ ethode suivants :
onModuleLoad

, remplacez les commentaires
Ajout cours boursier

A FAIRE Assembler ici le panel

et

A FAIRE Assembler ici le panel principal

par le code suivant :
//A_FAIRE Assembler ici le panel addPanel.add(newSymbolTextBox); addPanel.add(addStockButton); Ajout cours boursier

//A_FAIRE Assembler ici le panel principal mainPanel.add(stocksFlexTable); mainPanel.add(addPanel); mainPanel.add(lastUpdatedLabel);

54/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Associer le panel principal ` a la page HTML : embarquer les widgets GWT dans une page HTML Dans la m´ ethode
onModuleLoad , remplacez le commentaire suivant A FAIRE Associer ici le panel principal et la page HTML par le code suivant

:

// Associate the Main panel with the HTML host page. RootPanel.get("stockList").add(mainPanel);

Remarque : incluez la librairie suivante dans le code :
com.google.gwt.user.client.ui.RootPanel ;

import

55/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Fixer le focus du curseur ` a la zone de saisie de texte Dans la m´ ethode suivant :
// Move cursor focus to the input box. newSymbolTextBox.setFocus(true);

onModuleLoad , remplacez le commentaire suivant coit le focus du curseur par le code A FAIRE La zone de saisie de texte re¸

Testez maintenant votre application
Clique droit sur le nom du projet → Run As → Web application

56/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Attribuer un premier ´ ev` enement au bouton Ajouter
1

Attribuez un premier gestionnaire d’´ ev` enement au bouton Ajouter pour qu’il r´ eagisse aux cliques de souris : Dans la m´ ethode onModuleLoad , apr` es le code fixant le focus du curseur ` a la zone de saisie de texte, ajoutez le code suivant :
// Listen for mouse events on the Add button. addStockButton.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { addStock(); } });

2

incluez les librairies suivantes dans le code :
import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.client.ClickHandler;

57/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :

Dans la m´ ethode onModuleLoad , ajoutez aussi le code suivant, apr` es le code pr´ ec´ edent :
/** * Ajouter un cours boursier ` a FlexTable. Execut´ e lorsque l’utilisateur clique * sur le bouton Ajouter ou presse la touche Entr´ ee du clavier lorsque * newSymbolTextBox a le focus */ private void addStock() { //A_REMPLIR }

58/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Attribuer un deuxi` eme ´ ev` enement au bouton Ajouter 1 Attribuez un deuxi` eme gestionnaire d’´ ev` enement au bouton Ajouter pour qu’il empˆ eche l’utilisation simultan´ ee du bouton Ajouter et du clavier : Dans la m´ ethode onModuleLoad , apr` es le code attribuant un premier gestionnaire d’´ evenement au bouton Ajouter , ajoutez le code suivant :
// Listen for keyboard events in the input box. newSymbolTextBox.addKeyPressHandler(new KeyPressHandler() { public void onKeyPress(KeyPressEvent event) { if (event.getCharCode() == KeyCodes.KEY_ENTER) { addStock(); } } }); 2

incluez les librairies suivantes dans le code :
import com.google.gwt.event.dom.client.KeyCodes; import com.google.gwt.event.dom.client.KeyPressEvent; import com.google.gwt.event.dom.client.KeyPressHandler; GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

59/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Validation du texte entr´ e dans la zone de saisie de texte Dans la m´ ethode
addStock

, ajoutez le code suivant :

private void addStock() { final String symbol = newSymbolTextBox.getText().toUpperCase().trim(); newSymbolTextBox.setFocus(true); // Stock code must be between 1 and 10 chars that are numbers, letters, or dots. if (!symbol.matches("^[0-9A-Z\\.]{1,10}$")) { Window.alert("’" + symbol + "’ is not a valid symbol."); newSymbolTextBox.selectAll(); return; } newSymbolTextBox.setText(""); //A_FAIRE //A_FAIRE //A_FAIRE //A_FAIRE } Ne pas ajouter le cours boursier s’il a d´ ej` a ´ et´ e saisi Ajouter le cours boursier au tableau Ajouter un bouton Supprimer pour supprimer du tableau un cours boursier Obtenir le prix d’achat d’un cours boursier

Incluez la librairie suivante dans le code, puis testez votre code :
import com.google.gwt.user.client.Window; GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

60/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Ajouter et supprimer des cours boursiers du tableau Cr´ eez une structure de donn´ ees pour stocker les valeurs entr´ ees par l’utilisateur. Dans la classe
PremiereApplicationGwt

ajoutez l’instruction suivante :

private ArrayList<String> stocks = new ArrayList<String>();

A la suite de celles-ci :
private private private private private private VerticalPanel mainPanel = new VerticalPanel(); FlexTable stocksFlexTable = new FlexTable(); HorizontalPanel addPanel = new HorizontalPanel(); TextBox newSymbolTextBox = new TextBox(); Button addStockButton = new Button("Add"); Label lastUpdatedLabel = new Label();

Incluez la librairie suivante dans le code, puis testez votre code :
import java.util.ArrayList; GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

61/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Ajouter des lignes de fa¸ con dynamique au tableau La valeur du cours boursier entr´ ee par l’utilisateur est ´ evalu´ ee ; si cette valeur existe d´ ej` a, alors elle n’est pas ajout´ ee : Dans la m´ ethode suivant :
// Don’t add the stock if it’s already in the table. if (stocks.contains(symbol)) return;

addStock remplacez le commentaire suivant ej` a´ et´ e saisi par le code A FAIRE Ne pas ajouter le cours boursier s’il a d´

62/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :

Si le cours boursier n’existe pas, alors il est ajout´ e: Dans la m´ ethode
addStock remplacez le A FAIRE Ajouter le cours boursier au tableau

commentaire suivant par le code suivant :

// Add the stock to the table. int row = stocksFlexTable.getRowCount(); stocks.add(symbol); stocksFlexTable.setText(row, 0, symbol);

L’appel de la m´ ethode cellules au tableau.

setText

ajoute automatiquement de nouvelles

63/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Ajouter des boutons pour supprimer des cours boursiers Dans la m´ ethode
addStock remplacez le commentaire suivant A FAIRE Ajouter un bouton Supprimer pour supprimer du tableau un cours boursier par le code suivant :

// Add a button to remove this stock from the table. Button removeStockButton = new Button("x"); removeStockButton.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { int removedIndex = stocks.indexOf(symbol); stocks.remove(removedIndex); stocksFlexTable.removeRow(removedIndex + 1); } }); stocksFlexTable.setWidget(row, 3, removeStockButton);

Testez l’application
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

64/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Mise ` a jour ou raffraˆ ıchissement des valeurs affich´ ees dans le tableau : impl´ ementation d’un chronom` etre Dans la m´ ethode onModuleLoad cr´ eez une nouvelle instance pour l’impl´ ementation du chronom` etre :
public void onModuleLoad() { ... // Move cursor focus to the text box. newSymbolTextBox.setFocus(true); // Setup timer to refresh list automatically. Timer refreshTimer = new Timer() { @Override public void run() { refreshWatchList(); } }; refreshTimer.scheduleRepeating(REFRESH_INTERVAL); ... }

65/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Incluez la librairie suivante dans le code :
import com.google.gwt.user.client.Timer;

Sp´ ecifiez le taux de rafraˆ ıchissement Dans la classe
PremiereApplicationGwt

ajoutez l’instruction suivante :

private static final int REFRESH_INTERVAL = 5000; // ms

Avant celles-ci :
private private private private private private VerticalPanel mainPanel = new VerticalPanel(); FlexTable stocksFlexTable = new FlexTable(); HorizontalPanel addPanel = new HorizontalPanel(); TextBox newSymbolTextBox = new TextBox(); Button addStockButton = new Button("Add"); Label lastUpdatedLabel = new Label();

66/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Mettre ` a jour ou raffraˆ ıchir le tableau aussitˆ ot qu’une nouvelle valeur est ajout´ ee : Dans la m´ ethode
un cours boursier
//Get the stock price. refreshWatchList();

addStock

remplacez le commentaire suivant
pour supprimer du tableau

A FAIRE Obtenir le prix d’achat d’un cours boursier

par le code suivant :

Dans la classe

PremiereApplicationGwt

cr´ eez la m´ ethode suivante :

private void refreshWatchList() { //A_REMPLIR }

67/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Encapsulation des cours boursiers : Cr´ eez une nouvelle classe
StockPrice :

File → New → Class.
client

Cette classe doit se trouver dans le repertoire Voici ce que doit ˆ etre le contenu de la classe
package ca.uqar.PremiereApplicationGwt.client; public class StockPrice { }

du projet.

StockPrice :

68/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Contenu de la classe
StockPrice :

package ca.uqar.PremiereApplicationGwt.client; public class StockPrice { private String symbol; private double price; private double change; public StockPrice() { } public StockPrice(String symbol, double price, double change) { this.symbol = symbol; this.price = price; this.change = change; } public String getSymbol() { return this.symbol; } public double getPrice() { return this.price; } GUINKO Tonguim Ferdinand

69/97

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Contenu de la classe
public double getChange() { return this.change; } public double getChangePercent() { return 100.0 * this.change / this.price; } public void setSymbol(String symbol) { this.symbol = symbol; } public void setPrice(double price) { this.price = price; } public void setChange(double change) { this.change = change; } } GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

StockPrice :

70/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
G´ en´ erer les cours boursiers de fa¸ con al´ eatoire Dans la classe PremiereApplicationGwt, remplacer le contenu de la m´ ethode refreshWatchList() par le code suivant :
/** * Generate random stock prices. */ private void refreshWatchList() { final double MAX_PRICE = 100.0; // $100.00 final double MAX_PRICE_CHANGE = 0.02; // +/- 2% StockPrice[] prices = new StockPrice[stocks.size()]; for (int i = 0; i < stocks.size(); i++) { double price = Random.nextDouble() * MAX_PRICE; double change = price * MAX_PRICE_CHANGE * (Random.nextDouble() * 2.0 - 1.0); prices[i] = new StockPrice(stocks.get(i), price, change); } updateTable(prices); } GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

71/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :

Incluez la librairie suivante dans le code :
import com.google.gwt.user.client.Random;

D´ efinissez la m´ ethode

updateTable(StockPrice[])

ainsi qu’il suit :

private void updateTable(StockPrice[] prices) { //A_REMPLIR }

72/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
M´ ethode de mise ` a jour du tableau, et formatage des valeurs du tableau permettre l’affichage d’une valeur avec 2 d´ ecimales ; dans la colonne conversion, pr´ efixer les valeurs d’un signe + ou -. Pour cela, il faut impl´ ementer la m´ ethode updateTable(StockPrice[]) avec le code suivant :
/** * Update the Price and Change fields all the rows in the stock table. * * @param prices Stock data for all rows. */ private void updateTable(StockPrice[] prices) { for (int i = 0; i < prices.length; i++) { updateTable(prices[i]); } } GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

73/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Puis impl´ ementer la m´ ethode suivant :
updateTable(StockPrice)

avec le code

/** * Update a single row in the stock table. * @param price Stock data for a single row. */ private void updateTable(StockPrice price) { // Make sure the stock is still in the stock table. if (!stocks.contains(price.getSymbol())) { return; } int row = stocks.indexOf(price.getSymbol()) + 1; // Format the data in the Price and Change fields. String priceText = NumberFormat.getFormat("#,##0.00").format( price.getPrice()); NumberFormat changeFormat = NumberFormat.getFormat("+#,##0.00;-#,##0.00"); String changeText = changeFormat.format(price.getChange()); String changePercentText = changeFormat.format(price.getChangePercent()); // Populate the Price and Change fields with new data. stocksFlexTable.setText(row, 1, priceText); stocksFlexTable.setText(row, 2, changeText + " (" + changePercentText + "%)"); } GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

74/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :

Incluez la librairie suivante dans le code, puis testez l’application :
import com.google.gwt.i18n.client.NumberFormat;

75/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Introduction Installation et d´ emarrage El´ ements de GWT Echanges d’objets entre Java et javaScript Interface graphique Composants Cr´ eation d’une application web AJAX

Exemple :
Affichez l’horodatage Dans la m´ ethode suivant :
updateTable(StockPrice[])

ajoutez ` a la fin le code

// Display timestamp showing last refresh. lastUpdatedLabel.setText("Last update : " + DateTimeFormat.getMediumDateTimeFormat().format(new Date()));

Incluez les librairies suivantes dans le code, puis testez l’application :
import com.google.gwt.i18n.client.DateTimeFormat; import java.util.Date;

76/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Configuration de l’environnement Configuration de l’interface MySQL-GWT Cr´ eation de la servlet Pr´ eparation du RPC Cr´ eation de l’interface utilisateur

Logiciels n´ ec´ ecessaires
1

Cr´ eez un nouveau projet GWT que vous nommerez DeuxiemeApplicationGWT ; nommez le package devant contenir toutes les classes du projet ainsi qu’il suit : ca.uqar T´ el´ echargez et placez le pilote JDBC dans le repertoire
./WEB-INF/lib du projet ;

2

3 4

Ajoutez le pilote JDBC dans le path du projet ; V´ erifiez que le fichier .jar ajout´ e au path du projet, est le mˆ eme que celui du repertoire ./WEB-INF/lib ; V´ erifiez que les librairies suivantes figurent bien aussi dans le path de votre projet : gwt-servlet.jar et gwt-user.jar ; sinon, t´ el´ echargez et ajoutez les au path du projet ;
GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

5

77/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Configuration de l’environnement Configuration de l’interface MySQL-GWT Cr´ eation de la servlet Pr´ eparation du RPC Cr´ eation de l’interface utilisateur

Logiciels n´ ec´ ecessaires (... suite)

Remarque : Toutes les requˆ etes ` a l’intention de la BD seront g´ er´ ees par une servlet, d’o` u l’importance des 2 librairies gwt-servlet.jar et gwt-user.jar qui assurent l’interface entre le package GWT et le SGBD.

78/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Configuration de l’environnement Configuration de l’interface MySQL-GWT Cr´ eation de la servlet Pr´ eparation du RPC Cr´ eation de l’interface utilisateur

Configuration de l’interface MySQL-GWT
Dans le repertoire
1

src/ca.uqar/ :

2

Ouvrez le fichier de configuration de l’application ; ce fichier se nomme DeuxiemeApplicationGWT.gwt.xml Puis ajoutez y, au niveau du noeud entry-point → class la ligne suivante :
<servlet class="ca.uqar.DeuxiemeApplicationGWT.server.ConnexionMySQL" path="/ConnexionMySQL" />

3

V´ erifiez le code source du fichier DeuxiemeApplicationGWT.gwt.xml pour vous assurer de la prise en compte effective de la modification apport´ ee au point pr´ ec´ edent.

79/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Configuration de l’environnement Configuration de l’interface MySQL-GWT Cr´ eation de la servlet Pr´ eparation du RPC Cr´ eation de l’interface utilisateur

Nettoyez le projet pour ˆ etre sˆ ur que les nouvelles modifications ont ´ et´ e appliqu´ ees comme il le faut. Pour cela :
1 2 3

Project → Clean

s´ electionnez l’option

Clean projects selected below ;

s´ electionnez le projet qui doit ˆ etre nettoy´ e, c’est ` a dire DeuxiemeApplicationGWT.gwt.xml ; cochez l’option puis Next.
Start a build immediately

4

et

Build only the selected projetc

80/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Configuration de l’environnement Configuration de l’interface MySQL-GWT Cr´ eation de la servlet Pr´ eparation du RPC Cr´ eation de l’interface utilisateur

Configurations au niveau du client

Il s’agit ici de cr´ eer 2 interfaces :
1 2

l’une g` erera les appels synchrones tandis que l’autre g` erera les appels asynchrones ;
ca.uqar.client.

Les 2 fichiers doivent se trouver dans le repertoire

81/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Configuration de l’environnement Configuration de l’interface MySQL-GWT Cr´ eation de la servlet Pr´ eparation du RPC Cr´ eation de l’interface utilisateur

Cr´ eation du fichier des appels synchrones
1

Cr´ eez une classe simple et nommez la ConnexionBD. Cette classe devra h´ eriter de la classe com.google.gwt.user.client.rpc.RemoteService. La classe ConnexionBD contiendra toutes les m´ ethodes indispensables ` a la connexion ` a la BD. Le contenu de la classe ConnexionBD doit ressembler ` a ceci :
package ca.uqar.client; import ca.uqar.gwt.user.client.rpc.RemoteService; import ca.uqar.client.User; import java.io.Serializable; public interface ConnexionBD extends RemoteService { public User authenticateUser(String user, String motDePasse); }

2

82/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Configuration de l’environnement Configuration de l’interface MySQL-GWT Cr´ eation de la servlet Pr´ eparation du RPC Cr´ eation de l’interface utilisateur

Cr´ eation du fichier des appels asynchrones
Cr´ eez une classe simple et nommez la ConnexionBDasync. Le contenu de la classe ConnexionBD doit ressembler ` a ceci :
package ca.uqar.client; import ca.uqar.client.User; import ca.uqar.gwt.user.client.rpc.AsyncCallback; public interface ConnexionBDAsync { public void authenticateUser(String User, String motDePasse, AsyncCallback<User> callback); }

83/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Configuration de l’environnement Configuration de l’interface MySQL-GWT Cr´ eation de la servlet Pr´ eparation du RPC Cr´ eation de l’interface utilisateur

Cr´ eation d’une classe pour les objets pass´ es en param` etres dans les m´ ethodes pr´ ec´ edemment cr´ e´ ees
Cr´ eez, dans le repertoire client une classe simple et nommez la User. Le contenu de la classe Utilisateur doit ressembler ` a ceci :
package ca.uqar.client; import ca.uqar.gwt.user.client.rpc.IsSerializable; //import java.io.Serializable; public class User implements IsSerializable { private String nomUtilisateur; private String motDePasse; @SuppressWarnings("unused") private User() {} public User(String user, String motDePasse) { this.nomUtilisateur = user; this.motDePasse = motDePasse; } } GUINKO Tonguim Ferdinand

84/97

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Configuration de l’environnement Configuration de l’interface MySQL-GWT Cr´ eation de la servlet Pr´ eparation du RPC Cr´ eation de l’interface utilisateur

Cr´ eation de la servlet
La servlet g` ere toutes les requˆ etes adress´ ees ` a la BD. Dans le package ca.uqar.server : cr´ eez une servlet nomm´ ee ConnexionMySQL. Attention ! Le nom de la servlet, ainsi que le nom du package auquel elle appartient, doit ˆ etre le mˆ eme que celui sp´ ecifi´ e dans le fichier ca.uqar.DeuxiemeApplicationGWT.gwt.xmlau niveau de l’attribut class.Cette servlet doit :
1 2

h´ eriter de la classe

com.google.gwt.user.server.rpc.RemoteServiceServlet connexionBD

impl´ ementer la classe des appels synchrones repertoire client.
GUINKO Tonguim Ferdinand

du

85/97

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Configuration de l’environnement Configuration de l’interface MySQL-GWT Cr´ eation de la servlet Pr´ eparation du RPC Cr´ eation de l’interface utilisateur

Exemple d’impl´ ementation de la servlet

package ca.uqar.server; import import import import import import java.sql.Connection; java.sql.DriverManager; java.sql.PreparedStatement; java.sql.ResultSet; java.sql.SQLException; java.util.Vector;

import com.google.gwt.user.server.rpc.RemoteServiceServlet; import ca.uqar.client.User; import ca.uqar.client.ConnexionBD;

86/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Configuration de l’environnement Configuration de l’interface MySQL-GWT Cr´ eation de la servlet Pr´ eparation du RPC Cr´ eation de l’interface utilisateur

Exemple d’impl´ ementation de la servlet (... suite)
public class ConnexionMySQL extends RemoteServiceServlet implements ConnexionBD { private Connection conn = null; private String status; private String url = "jdbc:mysql://localhost/gestionpatients"; private String utilisateurBD = "root"; private String motDePasseBD = ""; public ConnexionMySQL() { try { Class.forName("com.mysql.jdbc.Driver").newInstance(); conn = DriverManager.getConnection(url, utilisateurBD, motDePasseBD); } catch (Exception e) { } }

87/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Configuration de l’environnement Configuration de l’interface MySQL-GWT Cr´ eation de la servlet Pr´ eparation du RPC Cr´ eation de l’interface utilisateur

Exemple d’impl´ ementation de la servlet (... suite)

public User authenticateUser(String user, String motDePasse) { User utilisateur = null; try { PreparedStatement ps = conn.prepareStatement( "select readonly * from docteurs where Noms = \"\" + user + \"\" AND " + "ID = \"\" + pass + \"\"" ); ResultSet result = ps.executeQuery(); while (result.next()) { utilisateur = new User(result.getString(1), result.getString(2)); } result.close(); ps.close(); } catch (SQLException sqle) { //Comportement en cas d’erreur } return utilisateur; } }

88/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Configuration de l’environnement Configuration de l’interface MySQL-GWT Cr´ eation de la servlet Pr´ eparation du RPC Cr´ eation de l’interface utilisateur

Procedure RPC

RPC (Remote Procedure Calls) est une technique permettant ` a une proc´ edure locale (dans notre cas l’interface utilisateur) de dialoguer de dialoguer avec un serveur distant. Dans le fichier ca.uqar.client\DeuxiemeApplicationGWT ajoutez une variable de type connexionBDasync.(en rappel, connexionBDasync.est une interface cr´ e´ ee pr´ ec´ edemment). Puisque connexionBDasync.est une interface, il n’est pas possible de l’instantier directement. Votre code doit ressembler ` a ceci :

89/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Configuration de l’environnement Configuration de l’interface MySQL-GWT Cr´ eation de la servlet Pr´ eparation du RPC Cr´ eation de l’interface utilisateur

Procedure RPC
package ca.uqar.client; import import import import import com.google.gwt.core.client.EntryPoint; com.google.gwt.core.client.GWT; com.google.gwt.user.client.rpc.AsyncCallback; com.google.gwt.user.client.rpc.ServiceDefTarget; com.google.gwt.user.client.ui.RootPanel;

public class DeuxiemeApplicationGWT implements EntryPoint { private ConnexionBDAsync rpc; public DeuxiemeApplicationGWT() { rpc = (ConnexionBDAsync) GWT.create(ConnexionBD.class); ServiceDefTarget target = (ServiceDefTarget) rpc; //Le chemin ’MySQLConnection’ est d´ etermin´ e dans //le fichier ./public/DeuxiemeApplicationGWT.gwt.xml //Ce chemin redirige Tomcat pour qu’il ´ ecoute ce contexte du c^ ot´ e du serveur, //et intercepte les requ^ etes RPC String moduleRelativeURL = GWT.getModuleBaseURL() + "MySQLConnection"; target.setServiceEntryPoint(moduleRelativeURL);

90/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Configuration de l’environnement Configuration de l’interface MySQL-GWT Cr´ eation de la servlet Pr´ eparation du RPC Cr´ eation de l’interface utilisateur

Cr´ eation de l’interface utilisateur
} public void onModuleLoad() { RootPanel.get().add(this); } } }

Cr´ eez la classe suivante.
private class AuthenticationHandler<T> implements AsyncCallback<User> { public void onFailure(Throwable ex) { RootPanel.get().add(new HTML("RPC call failed. :-("); } public void onSuccess(User result) { //En cas de succ` es ... par exemple d´ efinir une action pour l’´ el´ ement suivant de l’interface } }

91/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Configuration de l’environnement Configuration de l’interface MySQL-GWT Cr´ eation de la servlet Pr´ eparation du RPC Cr´ eation de l’interface utilisateur

Cr´ eation de l’interface utilisateur

//bouton Ok public void onClick(Widget sender) { if (sender.equals(OK)) { AsynchCallback<User> callback = new AuthenticationHandler<User>(); rpc.authenticateUser(username, password, callback); } }

92/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Configuration de l’environnement Configuration de l’interface MySQL-GWT Cr´ eation de la servlet Pr´ eparation du RPC Cr´ eation de l’interface utilisateur

Cr´ eation de l’interface utilisateur (... suite)
Contenu complet du fichier
package ca.uqar.client; import ca.uqar.client.User; import import import import import com.google.gwt.core.client.EntryPoint; com.google.gwt.core.client.GWT; com.google.gwt.user.client.rpc.AsyncCallback; com.google.gwt.user.client.rpc.ServiceDefTarget; com.google.gwt.user.client.ui.*;

DeuxiemeApplicationGWT.java

public class DeuxiemeApplicationGwt implements EntryPoint, ClickListener, IsWidget { private ConnexionBDAsync rpc; private TextBox usernameBox; private TextBox passwordBox; private Button OK; public DeuxiemeApplicationGwt() { rpc = (ConnexionBDAsync) GWT.create(ConnexionBD.class); ServiceDefTarget target = (ServiceDefTarget) rpc; //Le chemin ’MySQLConnection’ est d´ etermin´ e dans //le fichier ./public/DeuxiemeApplicationGWT.gwt.xml //Ce chemin redirige Tomcat pour qu’il ´ ecoute ce contexte du c^ ot´ e du serveur, //et intercepte les requ^ etes RPC GUINKO Tonguim Ferdinand AJAX Asynchronous Javascript And XML

93/97

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Configuration de l’environnement Configuration de l’interface MySQL-GWT Cr´ eation de la servlet Pr´ eparation du RPC Cr´ eation de l’interface utilisateur

Contenu complet du fichier

DeuxiemeApplicationGWT.java

(... suite)

String moduleRelativeURL = GWT.getModuleBaseURL() + "MySQLConnection"; target.setServiceEntryPoint(moduleRelativeURL); initGUI(); } public void onModuleLoad() { RootPanel.get().add(this); } private void initGUI() { Grid g = new Grid(3, 2); usernameBox = new TextBox(); passwordBox = new TextBox(); OK = new Button("OK"); g.setWidget(0, 0, new Label("Username: ")); g.setWidget(0, 1, usernameBox); g.setWidget(1, 0, new Label("Password: ")); g.setWidget(1, 1, passwordBox); g.setWidget(2, 1, OK); }

94/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Configuration de l’environnement Configuration de l’interface MySQL-GWT Cr´ eation de la servlet Pr´ eparation du RPC Cr´ eation de l’interface utilisateur

Contenu complet du fichier

DeuxiemeApplicationGWT.java

(... suite)

public void onClick(Widget sender) { if (sender.equals(OK)) { AsyncCallback<User> callback = new AuthenticationHandler<User>(); rpc.authenticateUser(usernameBox.getText(),passwordBox.getText(), callback); } } private class AuthenticationHandler<T> implements AsyncCallback<User> { public void onFailure(Throwable ex) { RootPanel.get().add(new HTML("RPC call failed. :-(")); } public void onSuccess(User result) { //En cas de succ` es ... par exemple d´ efinir une action pour l’´ el´ ement suivant de l’interface } }

95/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Configuration de l’environnement Configuration de l’interface MySQL-GWT Cr´ eation de la servlet Pr´ eparation du RPC Cr´ eation de l’interface utilisateur

Contenu complet du fichier

DeuxiemeApplicationGWT.java

(... suite)

@Override public Widget asWidget() { // TODO Auto-generated method stub return null; } }

96/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

Sommaire Asynchronous Javascript And XML (AJAX) Google Web Toolkit (GWT) GWT et MySQL Liens utiles

Sites web ayant servis ` a la r´ edaction de ce cours

http ://www.gwt-france.fr/ http ://code.google.com/ http ://code.google.com/edu/ajax/index.html http ://code.google.com/webtoolkit/gettingstarted.html http ://jmdoudoux.developpez.com/cours/developpons/java/chap-gwt.php http ://www.tenbergen.org/misc/tutorials.php#gwt1 Pour se tenir inform´ e de l’actualit´ e concernant GWT : http ://www.ongwt.com

97/97

GUINKO Tonguim Ferdinand

AJAX Asynchronous Javascript And XML

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->