Tutoriel GWT N°3 : projet GWT et plugin Eclipse Google

////Tutoriel GWT N°3 : projet GWT et plugin Eclipse Google

Maîtrisez la création d’une application GWT à partir du plugin eclipse Google GWT. Bénéficiez du mode hébergé de GWT pour augmenter votre productivité. Déployez cette application le serveur d’application JBoss.

Ce tutoriel est un extrait de séances pratiques de la formation GWT dispensée par Objis.

Liens utiles

 Tutoriel et formation GWT Objis

Prérequis

 Tutoriel GWT N°1 : Installation GWT

 Tutoriel GWT N°2 : Installation du plugin Eclipse GWT

Objectifs

 Utiliser le plugin Eclipse de Google pour créer un squelette d’application GWT

Partie 1 : Création du projet

Dans cette partie, à l’aide du plugin Google Eclipse, vous allez créer le squelette d’une application GWT.

Menu du plugin, lancer l’assistant de création d’un squelette de projet GWT :

installation-google-plugin-eclipse-luna-6

L’écran suivant apparaît.

tutoriel-gwt-creation-projet-1

 Remplissez le champ ‘Project name’ du projet. Ici ObjisDemoProjetGwt.

 Décochez ‘Use Google App Engine’. Nous n’avons en effet pas besoin pour ce tutoriel de déployer l’application sur le serveur de Google.

 Choisissez votre SDK. Par défaut le SDK 2.6.1 a été paramétré dans Eclipse (Voir tutoriel ‘Installation Plugin Eclipse Gwt’) .

 Laissez la caser à cocher permettant la création d’un squelette de projet

tutoriel-gwt-creation-projet-2

 Cliquez sur FINISH

Google crée l’arborescence suivante :

tutoriel-gwt-creation-projet-3

ça y est ! Le projet est créé. Reste à déployer…

REMARQUES : notez les points suivants :

— l’arborescence du répertoire ‘war’

— le fichier XML du module GWT : ObjisDemoProjetGwt.gwt.xml

— le fichier de la classe d’entrée (Entrypoint) : ObjisDemoProjetGwt.java

— le fichier html de l’écran (vue client): ObjisDemoProjetGwt.html

— la feuille de style css de l’écran : ObjisDemoProjetGwt.css

QUESTION : A quoi servent les fichiers GreetingService, GreetingServiceAsync, GreetingServiceImpl ?

Partie 2 : déploiement

Dans un premier temps, déployez en mode hébergé.

 Cliquez droit sur le projet puis Run–>Web Application (icône google)

tutoriel-gwt-creation-projet-4

Le mode ‘développement’ se lance :

 

tutoriel-gwt-creation-projet-5

 

tutoriel-gwt-creation-projet-6

Après un échec de l’installation du plugin sous chrome, nous avons pu l’installer pour la version firefox 24.

tutoriel-gwt-creation-projet-8

Notez que la vue Eclipse du DevMode indique le ‘Module’ est chargé.

tutoriel-gwt-creation-projet-9

Vous avez déployé le projet Eclipse.

Partie 3 : modifications et redéploiement

Modification du code Java de l’EntryPoint

Dans la méthode onLoadModule du point d’entrée de l’application (ObjisGwtDemoProject.java) :

 Changez le texte sur le bouton : ‘Envoyer’ au lieu de ‘Send’

 Modifier le texte dans le champ texte : ‘votre nom SVP‘ au lieu de ‘GWT user’

tutoriel-gwt-creation-projet-10

 

Rafraichissement

 Cliquez sur le bouton ‘Refresh‘ de la console du mode développement. GWT tient alors compte à chaud (sans recompiler le code java !) de vos modifications.

tutoriel-gwt-creation-projet-11

 

tutoriel-gwt-creation-projet-12

Notez les logs du DevMode

tutoriel-gwt-creation-projet-13

 Expliquez.

A VOUS DE JOUER !!!

Modification de la page HTML

 Modifiez le titre de la page en ‘Démarrage de projet GWT’

 Changez le texte sur le label : ‘Projet de démarrage GWT‘ au lieu de ‘web Application Starter Project’

Conclusion

Dans ce tutoriel, vous mis en oeuvre le plugin Eclipse de Google pour créer le squelette de votre application GWT.

Vous avez également effectué un cycle modif/tests et mis en évidence une des valeurs ajoutées du mode hébergé.

PUBLICITE : votre formation ‘Intégration continue’ avec Objis

formation-integration-continue-usine-logicielle-objis-maillons

2018-01-27T16:01:34+01:00

Contactez nous

241 rue DUGUESCLIN, 69003 Lyon

Web : Objis : spécialiste formation Java