Vous êtes sur la page 1sur 16

Forums Tutoriels Magazine FAQs Blogs Projets Chat Newsletter Emploi Contacts

Accueil Conception Java .NET Dv. Web EDI Langages SGBD Office Solutions d'entreprise Applications Systmes
Java Spring Dv. Web Java
FAQs

Android

Eclipse
LIVRES

NetBeans

FORUMS

TUTORIELS

Mon premier projet GWT


Date de publication : 29/11/2006 Par Moritan

Cet article en plusieurs parties est une prsentation du framework "Google Web ToolKit". 1. Prsentation gnrale de la solution GWT 2. Mon premier projet GWT (cet article) 3. Comparaison avec SWING et JSP ( venir)

I. Introduction I-A. Remerciements I-B. Prsentation II. Mise en place de l'environnement II-A. Environnement de dveloppement II-B. Environnement de production III. Bonjour le monde IV. On complique un peu IV-A. Un peu de nettoyage IV-B. Entrypoint IV-C. Cration des lments graphiques IV-C-1. Les Panels IV-C-2. Les lments graphiques IV-D. Utilisation des styles css V. Activation du filtre VI. Dialogue avec le serveur VI-A. Mise en place d'un service VI-B. Exploitation du service VII. Dploiement sur Tomcat VIII. Conclusion IX. Sources

I. Introduction
I-A. Remerciements
Merci Ricky81 pour sa relecture attentive.

I-B. Prsentation
Au cours de cet article, nous verrons comment utiliser et intgrer le framework GWT avec Eclipse. La prsentation se fera par la ralisation d'une application permettant la consultation et le filtre d'une liste de contacts. Les exemples de cet article se feront sous Windows, mais devraient s'adapter un autre environnement sans trop de difficults.

II. Mise en place de l'environnement


II-A. Environnement de dveloppement
Pour commencer, il faut crer le rpertoire de base du projet. Cration du rpertoire
mkdir demoGWT

On se place dans ce rpertoire pour travailler.


cd demoGWT

Cration des fichiers projet Eclipse


projectCreator -eclipse demoGWT Created directory D:\gwt-windows-1.1.10\demoGWT\test Created file D:\gwt-windows-1.1.10\demoGWT\.project Created file D:\gwt-windows-1.1.10\demoGWT\.classpath

Cration de l'arborescence applicative


applicationCreator -eclipse demoGWT com.developpez.exemple.gwt.client.MonApplication Created Created Created Created Created Created Created Created Created Created directory D:\gwt-windows-1.1.10\demoGWT\src directory D:\gwt-windows-1.1.10\src\demoGWT\com\developpez\exemple\gwt directory D:\gwt-windows-1.1.10\src\demoGWT\src\com\developpez\exemple\gwt\client directory D:\gwt-windows-1.1.10\src\demoGWT\src\com\developpez\exemple\gwt\public file D:\gwt-windows-1.1.10\src\demoGWT\com\developpez\exemple\gwt\MonApplication.gwt.xml file D:\gwt-windows-1.1.10\src\demoGWT\com\developpez\exemple\gwt\public\MonApplication.html file D:\gwt-windows-1.1.10\src\demoGWT\com\developpez\exemple\gwt\client\MonApplication.java file D:\gwt-windows-1.1.10\demoGWT\MonApplication.launch file D:\gwt-windows-1.1.10\demoGWT\MonApplication-shell.cmd file D:\gwt-windows-1.1.10\demoGWT\MonApplication-compile.cmd

Maintenant que la structure applicative est cre, on pourrait simplement utiliser un diteur de texte. Mais utilisons Eclipse, pourquoi se priver de fonctionnalits avances? Pour cela, il suffit d'ouvrir Eclipse. Dans le menu file, choisir import Choisir Existing Projects into workspace Cibler le rpertoire demoGWT et importer. On obtient

II-B. Environnement de production


En production, on aura videmment besoin d'un serveur applicatif ou d conteneur web tel Tomcat. Pour l'installation et le fonctionnement de Tomcat, je vous laisse consulter ce tutoriel. Ensuite, il vous suffit de dployer votre application comme n'importe quelle autre application Java.

III. Bonjour le monde


Comme tout bon tutoriel, nous allons commencer par un "Hello World !". Pour cela, lancer le script MonApplication-shell.cmd. Un navigateur va se lancer. Il vous permettra de voir le rendu de votre application en cours de dveloppement. La page que vous voyez apparatre devrait ressembler celle-ci. Flicitation, vous venez de russir votre premier "HelloWorld" avec le framework GWT.

IV. On complique un peu


IV-A. Un peu de nettoyage
Le mnage commence par la page HTML qui sert de support notre application. On supprime le surplus du HelloWorld pour ne conserver que le titre de la page et les balises propres GWT. On obtient alors la page suivante : MonApplication.html
<head> <!-<!-- Ici on dfini le titre de notre fentre <!-<title>MonApplication GWT</title> --> --> -->

<!---> <!-- La balise suivante permet de faire le --> <!-- lien entre la page html et le code GWT --> <!---> <meta name='gwt:module' content='com.developpez.exemple.gwt.MonApplication'> </head> <body> <!-<!-- L'inclusion de gwt.js est obligatoire. <!-- Elle placer ici pour des raisons de <!-- preformances. <!---> --> --> --> -->

<script language="javascript" src="gwt.js"></script> <!-- La balise suivante est optionnelle, elle gre l'historique des pages --> <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe> </body> </html>

IV-B. Entrypoint
Lorsque l'on dveloppe une application AWT/SWING, on utilise une classe avec une mthode main pour lancer notre application. Etant donn que les classes Java que nous allons crire seront converties en code Javascript, l'utilisation d'une mthode main est impossible. Dans notre cas, notre classe de lancement sera la page html de notre application et notre mthode main la balise meta. Dclaration du module
<meta name='gwt:module' content='com.developpez.exemple.gwt.MonApplication'>

L'attribut content de la balise permet de faire le lien vers le fichier de configuration de notre module GWT. MonApplication.gwt.xml
<module> <!-- Inherit the core Web Toolkit stuff. <inherits name='com.google.gwt.user.User'/> -->

<!-- Specify the app entry point class. --> <entry-point class='com.developpez.exemple.gwt.client.MonApplication'/> </module>

La balise entry-point permet de spcifier quelle sera la classe principale de notre application. Cette classe doit implmenter l'interface Entrypoint.

Il est intressant aussi d'implmenter l'interface WindowResizeListener. Cette interface permet de recevoir les informations lies la taille de la fentre du navigateur et donc de redimensionner notre application proportionnellement celle-ci. Le code de la classe devrait ressembler a: MonApplication.java
package com.developpez.exemple.gwt.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.Window; import com.google.gwt.user.client.WindowResizeListener; /** * Entry point classes define <code>onModuleLoad()</code>. */ public class MonApplication implements EntryPoint , WindowResizeListener {

/** * This is the entry point method. */ public void onModuleLoad() { // Hook the window resize event, so that we can adjust the UI. Window.addWindowResizeListener(this); // Get rid of scrollbars, and clear out the window's built-in margin, // because we want to take advantage of the entire client area. Window.enableScrolling(false); Window.setMargin("10px"); } public void onWindowResized(int width, int height) { // TODO Auto-generated method stub } }

On obtient donc une application GWT pleinement fonctionnelle, mais qui ne fait rien.

IV-C. Cration des lments graphiques


Les classes des lments graphiques de GWT reprennent les noms et comportements que l'on a l'habitude de manipuler quand on ralise une application AWT/SWING. Avec GWT, nous manipulerons donc des Panels et autres Label et TextBox.

IV-C-1. Les Panels


Les panels se dclinent en plusieurs classes qui ont chacune un comportement spcifique.

Dans cette mise en application nous utiliserons les panels suivants : DockPanel HorizontalPanel VerticalPanel Le DockPanel servira de base d'accueil pour notre application. Il contiendra dans sa partie Nord un VerticalPanel et dans sa partie Centre un HorizontalPanel. Le verticalPanel contiendra les champs de recherche et le VerticalPanel prsentera les rsultats. On commence par ajouter le DockPanel l'application. Ce qui nous donne pour la classe MonApplication.java le code suivant : MonApplication.java
package com.developpez.exemple.gwt.client;

import import import import import

com.google.gwt.core.client.EntryPoint; com.google.gwt.user.client.Window; com.google.gwt.user.client.WindowResizeListener; com.google.gwt.user.client.ui.DockPanel; com.google.gwt.user.client.ui.RootPanel;

/** * Entry point classes define <code>onModuleLoad()</code>. */ public class MonApplication implements EntryPoint , WindowResizeListener { private DockPanel outer = new DockPanel();

/** * This is the entry point method. */ public void onModuleLoad() { outer.setWidth("100%"); outer.setHeight("100%"); // Hook the window resize event, so that we can adjust the UI. Window.addWindowResizeListener(this); // Get rid of scrollbars, and clear out the window's built-in margin, // because we want to take advantage of the entire client area. Window.enableScrolling(false); Window.setMargin("10px"); RootPanel.get().add(outer); } public void onWindowResized(int width, int height) { // TODO Auto-generated method stub } }

Nous allons crer deux panels, RechechePanel et ContactsPanel qui tendent respectivement HorizontalPanel et VerticalPanel. Le fait de ne pas utiliser directement les panels gnriques nous permet d'allger la classe MonApplication et surtout nous permettra d'avoir un code lisible.

Pour la classe ContactsPanel et pour la classe RecherchePanel Il ne nous reste plus qu' les insrer dans le DockPanel. MonApplication.java
package com.developpez.exemple.gwt.client; import import import import import import import import import com.developpez.exemple.gwt.client.panel.ContactsPanel; com.developpez.exemple.gwt.client.panel.RecherchePanel; com.google.gwt.core.client.EntryPoint; com.google.gwt.user.client.Window; com.google.gwt.user.client.WindowResizeListener; com.google.gwt.user.client.ui.DockPanel; com.google.gwt.user.client.ui.HorizontalPanel; com.google.gwt.user.client.ui.VerticalPanel; com.google.gwt.user.client.ui.RootPanel;

/** * Entry point classes define <code>onModuleLoad()</code>. */ public class MonApplication implements EntryPoint , WindowResizeListener { private DockPanel outer = new DockPanel();

/** * This is the entry point method. */ public void onModuleLoad() { HorizontalPanel recherchePanel =new RecherchePanel(); VerticalPanel contactsPanel =new ContactsPanel(); outer.setWidth("100%"); outer.setHeight("100%");

// Hook the window resize event, so that we can adjust the UI. Window.addWindowResizeListener(this); // Get rid of scrollbars, and clear out the window's built-in margin, // because we want to take advantage of the entire client area. Window.enableScrolling(false); Window.setMargin("10px"); outer.add(recherchePanel, DockPanel.NORTH); outer.add(contactsPanel, DockPanel.CENTER); RootPanel.get().add(outer); } public void onWindowResized(int width, int height) { // TODO Auto-generated method stub } }

IV-C-2. Les lments graphiques


Maintenant que la structure d'accueil de notre application est prte, nous allons pouvoir mettre un peu de contenu. En plus des composants graphiques de base, nous utiliserons aussi la classe Composite. La classe Composite permet d'envelopper un ou plusieurs autres lments graphiques. Ce groupe de composant agit alors comme un seul et mme lment. Nous allons commencer par crer une classe Texte que hritera de Composite. Cette classe nous permettra de grer les zones de saisie utilisateur. Elle grera le libell et la zone de saisie. on utilisera la classe Label pour le libl et la classe TextBox pour la zone de saisie.

Texte.java
package com.developpez.exemple.gwt.client.panel; import import import import com.google.gwt.user.client.ui.Composite; com.google.gwt.user.client.ui.HorizontalPanel; com.google.gwt.user.client.ui.Label; com.google.gwt.user.client.ui.TextBox;

public class Texte extends Composite { private Label label = new Label(); private TextBox textBox = new TextBox(); public Texte() { HorizontalPanel panel =new HorizontalPanel(); panel.add(label); panel.add(textBox); initWidget(panel); } public void setLabel(String texte){ label.setText(texte+" : "); } public void setTexte(String texte){ textBox.setText(texte); } public String getTexte(){ return textBox.getText();

} }

Ensuite, il suffit d'ajouter ce composant notre RecherchePanel, pour avoir nos zones de filtre. RecherchePanel.java
package com.developpez.exemple.gwt.client.panel; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.HorizontalPanel; public class RecherchePanel extends HorizontalPanel { public RecherchePanel(){ this.setTitle("Recherche"); this.setWidth("100%"); Texte tb = new Texte(); tb.setLabel("Nom"); add(tb); Texte tb2 = new Texte(); tb2.setLabel("Prnom"); add(tb2); } }

Avant de complter notre application, nous allons crer une classe utilitaire Contact. Ce sera la reprsentation objet des diffrentes personnes de notre application. Afin d'avoir quelques lments graphiques pour la dmonstration, on rajoute une mthode getAllContacts() sur la classe. Cette mthode va nous renvoyer un tableau de contacts afficher, le temps que l'on implmente le service d'accs une base de donnes. A terme cette mthode disparatra.

Les diffrents contacts connus seront affichs sous forme de tableau. Nous utiliserons pour cela la classe FlexTable. Le contenu d'un tableau se positionne par ses coordones. Nous utiliserons la premire ligne pour afficher les enttes de tableau. ContactsPanel.java
package com.developpez.exemple.gwt.client.panel; import com.developpez.exemple.gwt.client.util.Contact; import com.google.gwt.user.client.ui.FlexTable; import com.google.gwt.user.client.ui.VerticalPanel; public class ContactsPanel extends VerticalPanel {

private FlexTable t = new FlexTable(); public ContactsPanel() { t.setTitle("Contacts"); t.setText(0, 0,"Nom"); t.setText(0, 1,"Prnom"); t.setText(0, 2,"Email"); t.setText(0, 3,"Tel"); t.setWidth("100%"); t.setCellSpacing(2); for (int i = 0; i < Contact.getAllContacts().length; ++i) addContact(Contact.getAllContacts()[i],i+1); this.add(t); this.setWidth("100%"); } private void addContact(Contact contact,int i) { t.setText(i, 0,contact.getNom()); t.setText(i, 1,contact.getPrenom()); t.setText(i, 2,contact.getEmail()); t.setText(i, 3,contact.getTel()); } }

Une fois compile, notre application donne a.

IV-D. Utilisation des styles css


Maintenant que l'on a tous nos lments, on va leur donner un aspect un peu plus convivial. Pour cela, on va utiliser un fichier css. On ajoute donc un fichier MonApplication.css au rpertoire public de notre arborescence. Afin que ces styles soient disponibles dans les classes GWT, il faut diter le fichier MonApplication.gwt.xml, et dclarer le fichier css dans notre module. Pour cela il suffit d'ajouter la ligne suivante dans la dclaration du module. MonApplication.gwt.xml
<stylesheet src='MonApplication.css'/>

Les diffrentes classes graphiques du framework GWT hritent toutes de la classe UIObject.

Cette classe nous donne la mthode setStyleName sur tous nos composants et nous permet donc d'assigner un style prcis chacun de nos objets. Par exemple, pour changer le style du RecherchePanel, il nous suffit d'ajouter le code suivant son constructeur pour en modifier l'apparence.
this.setStyleName("gwt-RecherchePanel");

Bien videmment le style gwt-RecherchePanel a t dfini dans le fichier css. Par convention, les noms de style sont composs du nom du module tiret l'lment grahique auquel il s'applique. En appliquant nos styles nos diffrents lments, on obtient a. Mais bien sr, nous n'avons encore aucun composant actif dans notre page.

V. Activation du filtre
Nous allons commencer mettre un peu d'intelligence dans notre application. Pour cela, nous allons couter les vnements sur les zones de saisie et modifier le contenu du tableau en consquence. On va commencer par se donner des accesseurs nos Panels en leur appliquant le pattern Singleton. Puis on va rajouter les mthodes getNom et getPrenom sur le RecherchePanel et la mthode filtre sur le contactsPanel. Les mthodes getNom et getPrenom retourneront les valeurs saisies tandis que filtre modifiera le contenu du tableau de rsultats. Ensuite, on va couter les vnements clavier qui surviennent dans nos zones de saisie en ajoutant le code suivant notre classe Texte. Texte.java
textBox.addKeyboardListener(new KeyboardListener() { public void onKeyDown(Widget sender, char keyCode, int modifiers) {} public void onKeyPress(Widget sender, char keyCode, int modifiers) {} public void onKeyUp(Widget sender, char keyCode, int modifiers) { ContactsPanel.instance.filtre(); } });

On remplit la mthode filtre. ContactsPanel.java


public void filtre(){ String nom = RecherchePanel.instance.getNom(); String prenom = RecherchePanel.instance.getPrenom(); for (int i = t.getRowCount()-1; i >0 ; i--) { t.removeRow(1); } int next =1; for (int i = 0; i < Contact.getAllContacts().length; ++i){ Contact contact =Contact.getAllContacts()[i]; if (contact.getNom().toUpperCase().startsWith(nom.toUpperCase()) && contact.getPrenom().toUpperCase().startsWith(prenom.toUpperCase())) { addContact(contact,next); next++; } } }

Une fois nos classes modifies, on obtient a.

VI. Dialogue avec le serveur


L'application semble fonctionnelle, mais la liste des contacts reste encore contenue dans la classe Contact, ce qui est peu satisfaisant. Nous allons donc dans un premier temps crer un package server qui recevra les classes distantes et supprimer la mthode static getAllContact de la classe Contact.

VI-A. Mise en place d'un service


Le framework GWT dispose de sa propre solution de communication entre le client et le serveur, base sur le principe d'appel de procdure distante (RCP). Le serveur et le client dialogue dialoguent en Asynchrone (vous savez le premier A de AJAX ). Il faut donc deux flux de communication, le premier direct vers le serveur pour mettre les requtes, le second asynchrone pour recevoir les rponses du serveur. Le flux ascendant est modlis par une interface qui doit tendre l'interface RemoteService. On dfinit dessus les diffrentes mthodes que l'on souhaite obtenir du serveur. On va donc crer une interface ContactService.

Afin que le client puisse recevoir la rponse ContactServiceAsync. Cette interface doit rpondre plusieurs critres :

du

serveur,

on

va

crer

une

seconde

interface

Le nom de l'interface doit tre le mme que celui pour le flux ascendant avec la fin "Async". Toutes ses mthodes sont de type void. Le nombre et le nom de ses mthodes sont identiques ceux pour le flux ascendant. Chacune de ses mthodes doit prendre les mmes paramtres que pour le flux montant plus un paramtre supplmentaire de la classe AsyncCallback.

C'est au travers de l'objet AsyncCallback que le serveur retournera sa rponse au client.

Maintenant que nous avons nos flux de communication avec le serveur, il nous faut ensuite crer une servlet sur le serveur capable de recevoir notre demande et d'y rpondre. Pour cela dans le package server, on va crer une classe ContactServiceImpl qui tendra RemoteServiceServlet et impmentera notre interface ContactService. Hriter de la classe RemoteServiceServlet permet de faire abstraction de l'laboration de l'objet AsyncCallback. Le mcanisme RCP fonctionne comme un miroir, les mthodes appeles cot client seront excutes cot serveur sur notre servlet. C'est donc dans le corps des mthodes issues de l'implmentation de notre interface que l'on placera le code que l'on souhaite excuter sur le serveur. Notre classe servlet elle aussi doit rpondre plusieurs critres : Le nom de la servlet doit tre le mme que celui pour le flux ascendant avec la fin "Impl". La servlet doit implmenter RemoteServiceServlet. La servlet doit implmenter l'interface du service ascendant.

ContactServiceImpl.java
package com.developpez.exemple.gwt.server; import com.developpez.exemple.gwt.client.ContactService; import com.developpez.exemple.gwt.client.util.Contact; import com.google.gwt.user.server.rpc.RemoteServiceServlet; public class ContactServiceImpl extends RemoteServiceServlet implements ContactService { public Contact[] getAllContact() { return ContactData.getAllContacts(); } }

La classe ContactData est une classe utilitaire charge de fournir la liste des contacts. La mthode d'obtention des contacts importe peu, jdbc, Hibernate, fichier XML, LDAP, libre vous d'utiliser celle qu'il vous plait. Dernire action pour finaliser la cration de notre service, MonApplication.gwt.xml. Pour cela, il suffit d'ajouter la ligne suivante la dclaration du module. la dclaration dans le fichier

MonApplication.gwt.xml
<servlet path="/contactService" class="com.developpez.exemple.gwt.server.ContactServiceImpl"/>

VI-B. Exploitation du service


Maintenant que le service est cr, nous allons pouvoir l'utiliser. On va l'appeler directement dans notre classe ContactsPanel. On rajoute une mthode getAllContacts sur notre classe, qui aprs quelques modifications ressemble a : ContactsPanel.java
package com.developpez.exemple.gwt.client.panel; import import import import import import import import com.developpez.exemple.gwt.client.ContactService; com.developpez.exemple.gwt.client.ContactServiceAsync; com.developpez.exemple.gwt.client.util.Contact; 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.FlexTable; com.google.gwt.user.client.ui.VerticalPanel;

public class ContactsPanel extends VerticalPanel { private FlexTable t = new FlexTable(); private Contact[] contacts; public static ContactsPanel instance; public ContactsPanel() { getAllContacts(); t.setTitle("Contacts"); t.setText(0, 0,"Nom"); t.setText(0, 1,"Prnom"); t.setText(0, 2,"Email"); t.setText(0, 3,"Tel"); t.setWidth("100%"); t.setCellSpacing(2); for (int i = 0; i < 4; i++) { t.getCellFormatter().addStyleName(0, i, "contact-ContactPanel"); } this.add(t); this.setWidth("100%"); instance=this; } private void addContact(Contact contact,int i) { t.setText(i, 0,contact.getNom()); t.setText(i, 1,contact.getPrenom()); t.setText(i, 2,contact.getEmail()); t.setText(i, 3,contact.getTel()); for (int j = 0; j < 4; j++) { if(i%2==0) t.getCellFormatter().addStyleName(i, j, "contact-ContactPanel-line1"); else t.getCellFormatter().addStyleName(i, j, "contact-ContactPanel-line2"); } } public void filtre(){ String nom = RecherchePanel.instance.getNom(); String prenom = RecherchePanel.instance.getPrenom(); for (int i = t.getRowCount()-1; i >0 ; i--) { t.removeRow(1); } int next =1; for (int i = 0; i < contacts.length; ++i){ Contact contact =contacts[i]; if (contact.getNom().toUpperCase().startsWith(nom.toUpperCase()) && contact.getPrenom().toUpperCase().startsWith(prenom.toUpperCase())) addContact(contact,next); next++; } }

} private void getAllContacts(){ contacts = new Contact[0]; // define the service you want to call ContactServiceAsync svc = (ContactServiceAsync) GWT.create(ContactService.class); ServiceDefTarget endpoint = (ServiceDefTarget) svc; String moduleRelativeURL = GWT.getModuleBaseURL() + "contactService"; endpoint.setServiceEntryPoint(moduleRelativeURL); AsyncCallback callback = new AsyncCallback() { public void onSuccess (Object result) { contacts = (Contact[]) result; filtre(); } public void onFailure (Throwable ex) { contacts = new Contact[0]; filtre(); } }; // execute the service svc.getAllContact(callback); } }

Si on dtaille un peu la mthode getAllContacts() : Dclaration du service que l'on souhaite appeler
ContactServiceAsync svc = (ContactServiceAsync) GWT.create(ContactService.class);

On dfinit ou trouver le service, son url


ServiceDefTarget endpoint = (ServiceDefTarget) svc; String moduleRelativeURL = GWT.getModuleBaseURL() + "contactService"; endpoint.setServiceEntryPoint(moduleRelativeURL);

On dfinit le comportement de retour


AsyncCallback callback = new AsyncCallback() { public void onSuccess (Object result) { contacts = (Contact[]) result; filtre(); } public void onFailure (Throwable ex) { contacts = new Contact[0]; filtre(); } };

J'ai utilis une classe interne car le comportement voulu tait trs simple, mais dans un cadre plus complexe, il serait souhaitable d'utiliser une classe externe. on appelle le service
svc.getAllContact(callback);

Dans notre exemple la mise place et l'appel du service sont fait dans la mme mthode car l'appel du service n'est fait qu'une seule fois au chargement de la page. Nanmoins, on peut trs bien placer notre service sur un slot et y faire ensuite appel en diffrente occasion. Chaque appel un service gnre un aller retour serveur. Il faut donc prvoir les temps de latence possible. De plus il est intressant comme dans notre application, de stocker en cache ct client un certain nombre d'information, afin d'allger le nombre de requte au serveur. Typiquement dans notre exemple, il tait inutile de faire un aller/retour serveur pour le filtre ( la volumtrie prs). Notre application est maintenant termine et nous obtenons la liste des contacts d'un serveur distant.

VII. Dploiement sur Tomcat

La structure standard d'une application sous Tomcat est la suivante :

La structure de notre projet sous Eclipse est la suivante :

Pour dployer dans une arborescence tomcat il faut : Crer une webapp avec le nom de notre service. Copier le contenu du rpertoire bin dans le repertoire classes de notre webapps. Placer le jar gwt-servlet.jar dans le rpertoire lib de notre application ou dans le rpertoire common/lib la racine de tomcat. Copier le contenu du rpertoire www la racine de notre webapp.

Dans notre exemple le rpertoire www contient un sous rpertoire com.developpez.exemple.gwt.MonApplication. Lors d'un dploiement, il est possible de ne pas conserver ce sous rpertoire en ne copiant que son contenu la racine de la webapps. Cela permet de simplifier l'adresse de notre application. Enfin, il faut dclarer notre servlet. Il faut donc placer un fichier web.xml dans le rpertoire WEB-INF. web.xml
<?xml version="1.0" encoding="ISO-8859-1"?> <!-Copyright 2004 The Apache Software Foundation Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4"> <display-name>GWT</display-name> <description> GWT example </description> <servlet> <servlet-name>ContactService</servlet-name> <servlet-class>com.developpez.exemple.gwt.server.ContactServiceImpl</servlet-class> </servlet> <servlet-mapping> <servlet-name>ContactService</servlet-name> <url-pattern>/contactService</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>MonApplication.html</welcome-file> </welcome-file-list> </web-app>

VIII. Conclusion
Au cours de cet article, nous avons vu tout l'intrt du framework GWT. Nous avons ralis une application web interactive, dialoguant avec un serveur, en faisant abstraction de tout autre language part Java. De plus le code gnr est compatible avec la majorit des navigateurs. Le framework GWT apporte au dveloppement WEB tous les avantages du dveloppement d'un client lourd, en permettant notamment la modlisation des classes grant l'interface graphique.

IX. Sources
Fichiers sources de la premire partie du tutoriel Fichiers sources du chapitre VI ici ou ici. ici ou ici.

Liste de mes articles : Prsentation du framework Google Web ToolKit Mon premier projet GWT Cration d'une requte paramtre dans un rapport Birt

phpMyVisites | Open source web analytics

phpMyVisites

Ce document est issu de http://www.developpez.com et reste la proprit exclusive de son auteur. La copie, modification et/ou distribution par quelque moyen que ce soit est soumise l'obtention pralable de l'autorisation de l'auteur.

Responsables bnvoles de la rubrique Dv. Web Java : Eric Siber - Baptiste Wicht Vos questions techniques : forum d'entraide Dv. Web Java Mesure d'audience ROI frequentation par Publiez vos articles, tutoriels et cours et rejoignez-nous dans l'quipe de rdaction du club d'entraide des dveloppeurs francophones Nous contacter - Hbergement - Participez - Copyright 2000-2010 www.developpez.com - Legal informations.