TP 7 : Google Web Toolkit
Objectifs pédagogiques du TP
- Se familiariser avec la bibliothèque GWT
- Concevoir une application côté client
- Utiliser les mécanismes GWT d'appel asynchrone
au serveur
Outils
- Logiciels installés sur les machines de TP : Navigateurs Web, EDI NetBeans, serveur Tomcat
- Logiciels libres que vous pouvez installer chez vous : idem.
- Bibliothèque GWT ; accès direct au zip sur le site Google code ici ou en local là (à télécharger et décompacter dans un répertoire visible par NetBeans).
- Répertoire local contenant le plugin GWT4NB
Références
- Voir partie "Liens utiles" de la page d'accueil du cours et références dans les transparents du cours 6
- Tutoriels :
Préambule
Créez un projet sur la forge, dans lequel vous déposerez tous les fichiers à rendre dans ce TP. Merci de ne rendre que les fichiers demandés, les autres ne seront pas notés.
Première partie
Dans cette partie, vous allez réaliser une application GWT très simple, pour prendre en main la bibliothèque.
Premier projet GWT
Récupérez le code source du projet situé ici : http://forge.univ-lyon1.fr/projects/m1-mif13-tp-gwt-base-2014/. Compilez, déployez sur Tomcat et testez. Observez le source de la page principale.
Importez ensuite le projet dans votre IDE préféré. Observez les différents éléments suivants :
- Page Web
- TpGWT.html : page d'accueil de votre application (d'ailleurs référencée comme telle dans le fichier de configuration web.xml).
- Fichiers de configuration
- web.xml : fichier standard d'une application Web Tomcat. Cf. cours sur la programmation Web.
- TpGWT.gwt.xml (dans le package source Java) : fichier de configuration de votre projet GWT. Permet de définir les "modules" de votre application et de les paramétrer (voir plus loin).
- Packages Java
- fr.ucbl.mif13.client : partie du code déployée sur le client
- fr.ucbl.mif13.server : partie du code déployée côté serveur
- fr.ucbl.mif13.shared : partie du code commune
- TpGWT (EntryPoint) : comme son nom l'indique, c'est là que se situe l'implémentation du projet, et c'est la classe principale, qui sera compilée en JavaScript et déployée sur le client.
Remarque : Dans ses dernières lignes, le code fait appel à un objet RootPanel, qui représente la fenêtre de votre application et auquel il faut ajouter tous les composants de l'interface.
Pour comprendre comment fonctionne ce code, faites-le tourner, et analysez le comportement de la page visualisée en fonction du code de la classe EntryPoint. Aidez-vous de la Javadoc dont l'URL est sur la page d'accueil du module et de la console de développement de FireFox, qui vous permet de voir en temps réel le HTML correspondant au code affiché.
Premières modifications
GWT permet de construire son interface comme on le ferait avec Swing en utilisant un modèle de boîte simple qui abstrait le positionnement CSS. Nous allons enrichir le formulaire en rajoutant un champ email et en transformant le pop-up en une notification qui apparait disparait sous le formulaire.
Ajout de composants d'interface
- Rajouter un Panel global qui va contenir tout le formulaire, pour que les différents éléments ne soient pas directement rattaché au RootPanel.
- Rajouter un Horizontal Panel autour du nom.
- Rajouter un autre Horizontal Panel pour un champ email que vous aller créer.
- Déplacer le bouton Send en dessous de ces deux panneaux.
- Modifier le Dialogbox pour qu'il devienne un Panel de notification positionné sous le formulaire.
Modification du modèle événementiel
Peupler le panel de notification en fonction des réponses du serveur. Tenir compte pour cela des vérifications sur la validité des champs (voir ci-dessous).
Validation de formulaires
Côté shared
- Rajouter une vérification du champs email (présence du @ et d'un .), dans la classe FieldVerifier.
- Faire en sorte que cette vérification soit faite côté client et côté serveur.
Côté serveur
Vérifier que cet email fait partie d'une liste d'email connue (codée en dur), et renvoyer un message en fonction au client. Par exemple, "Content de vous revoir XXX" si l'email existe, et "Bienvenue XXX" sinon.
Ajout / utilisation d'une feuille de style
Ajout (alternativement) :
- En ajoutant le code suivant dans le fichier Main.gwt.xml (à la fin de l'élément "module") : <stylesheet src="URL de votre feuille de style CSS"/>
- En ajoutant une feuille de style directement dans le code de la page TpGWT.html
Utilisation :
- Pour mettre en oeuvre des styles spécifiés dans une feuille de style à l'aide de l'attribut "class", vous pouvez utiliser la méthode setStylePrimaryName() de Widget.
- Si le sélecteur est de type #id, vous devez spécifier un attribut id à vos éléments HTML. Pour cela, il faut utiliser la méthode setAttribute() de com.google.gwt.dom.client.Element. La récupération de l'élément correspondant à un élément d'interface se fait avec la méthode getElement() de Widget.
Modifiez la feuille de style et faites en sorte d'utiliser les styles CSS définis depuis voter code Java.
Deuxième partie
Création du projet
Vous devrez tout d'abord installer le plugin qui correspond à votre IDE. Pour NetBeans, il s'appelle GWT4NB, et pour Eclipse : Google Plugin for Eclipse (doc ici). Après avoir installé le plugin GWT, créez un nouveau projet de type "Java Web -> Web application", et suivez les différents menus jusqu'à celui qui vous permettra de choisir un "framework", et cochez "Google Web Toolkit".
Reprise de votre application Tortue
Reprenez le code de l'application Logo + design patterns que vous avez réalisée en MIF17 et portez-la côté client en utilisant GWT.
Rendu du TP
Ce TP est à rendre pour le lundi 1er décembre 2014.
Ne rendez que la dernière question (tortues).