GWT - QuickStart

V 1.0 / 2008 - May

Mise en place de l’environnement

Java : Version 1.4 minimum IDE

Eclipse 3.3 Europa : lien (Eclipse J2EE recommandée) Plugins

Cypal Studio : lien (Alternative OpenSource à GWT Designer) GWT Designer : lien Choisir le .zip pour eclipse 3.3

GWT : lien Librairies

GWT-Ext : lien Ext-js : lien (lien « here » dans le paragraphe du bas)

Déploiement Apache Tomcat 6.0 : lien

Mise en place de l’environnement

Eclipse : Dézipper Eclipse GWT Designer

Dézipper dans le dossier d’eclipse GWT 1.4

Dézipper GWT 1.4 n’importe où Lancer Eclipse

New/Designer/GWT/GWT Java Project Activate Product

Selectionner GWT Designer Indiquer le Proxy si nécessaire puis valider Saisir les informations requises puis valider

Configurer Eclipse pour GWT 1.4 Window/Preference/Designer/GWT entrer l’url de GWT

1.4

Mise en place de l’environnement

Créer un nouveau Projet Créer un nouveau projet web classique

New/Web/Dynamique Web Project Convertir le projet

Click droit sur le projet /Google Web Toolkit/Convert Créer le module GWT qui représente l’application,

c’est ce dernier qui sera déployer sous forme de war

Click droit sur le projet /Google Web Toolkit/GWT Module Selectionner le dossier src, le nom du module et celui du

package puis valider

Ajouter Gwt-Ext au projet Dézipper GWT-Ext puis ajouter gwtext.jar à

WebContent/WebInf/lib aux librairies du projet.

Mise en place de l’environnement

Dézipper ext-js (ext-2.0.2.zip) puis créer dans le dossier src/…package…/public un dossier js/ext dans lequel copier :

Les dossiers adapter resources

Les fichiers Ext-all-debug.js Ext-all.js Ext-core-debug.js Ext-core.js

Dans le fichier src/…package…/nomModule.gwt.xml Insérer les lignes suivantes :

<inherits name='com.gwtext.Charts' /> <stylesheet src="js/ext/resources/css/ext-all.css" /> <script src="js/ext/adapter/ext/ext-base.js" /> <script src="js/ext/ext-all.js" />

Déploiement

Dézipper tomcat Sous eclipse Click droit sur l’EntryPoint du

module à déployer/GWT/deployModule Selectionner le répertoire webApp de tomcat puis

valider Lancer tomcat.

Exemple

Créer un nouveau projet GWT Hello Créer un module Hello Click droit sur le package client GWT/GWT

Remote Service. Appelons le HelloYou. GWT Designer créé 2 interfaces dans le

package client et une classe dans le package serveur.

Dans le fichier HelloYou décrivons une méthode helloMethod

public String helloMethod(String s); La méthode est générée dans HelloYouAsync

et dans HelloYouImpl. Dans ce dernier nous allons inséré le code suivant : return "Hello "+s;

Exemple Le service est mappé dans le fichier gwt.xml On va l’appeler dans l’EntryPoint qui représente la page principale de l’appli

Dans le fichier Hello.java, insérez le code suivant : package gwt.test.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.Window; import com.google.gwt.user.client.rpc.AsyncCallback; import com.google.gwt.user.client.ui.RootPanel; import com.gwtext.client.core.EventObject; import com.gwtext.client.widgets.Button; import com.gwtext.client.widgets.Panel; import com.gwtext.client.widgets.event.ButtonListenerAdapter; import com.gwtext.client.widgets.form.Label; import com.gwtext.client.widgets.form.TextField; import com.gwtext.client.widgets.layout.VerticalLayout;

/** * Entry point classes define <code>onModuleLoad()</code>. */ public class Hello implements EntryPoint { public void onModuleLoad() { //Element dans lequel sera inserer notre ui RootPanel rootPanel = RootPanel.get();

//Panel qui contiendra nos widgets Panel mainPanel = new Panel(); mainPanel.setSize(200, 100); mainPanel.setLayout(new VerticalLayout(10));

Exemple //bouton Button button = new Button("Bonjour"); //Champs final TextField textField = new TextField("Nom"); final Label label = new Label("Reponse");

//Ecouteur du bouton button.addListener(new ButtonListenerAdapter() { public void onClick(Button button, EventObject e) { //Appel asynchrone AsyncCallback cb = new AsyncCallback() {

public void onFailure(Throwable caught) { Window.alert("Echec"); }

public void onSuccess(Object result) { label.setText((String)result); }

}; gwt.test.client.HelloYou.Util.getInstance().helloMethod(textField.getText(), cb); } });

mainPanel.add(textField); mainPanel.add(button); mainPanel.add(label); rootPanel.add(mainPanel); } }