GWT - QuickStart V 1.0 / May

Mise en place de l’environnement Java : Version 1.4 minimum IDE Eclipse 3.3 Europa : lien (Eclipse J2EE recommandée)‏lien Plugins Cypal Studio : lien (Alternative OpenSource à GWT Designer)‏lien GWT Designer : lien Choisir le.zip pour eclipse 3.3lien GWT : lienlien Librairies GWT-Ext : lienlien Ext-js : lien (lien « here » dans le paragraphe du bas)‏lien Déploiement Apache Tomcat 6.0 : lienlien

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 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 :

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 onModuleLoad(). */ 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); }