Le document présente une introduction à GWT et Appcase SDK, développée par Jean-Marc Prevost. Il décrit les avantages et inconvénients de GWT, les étapes de création d'un projet, l'internationalisation, ainsi que les fonctionnalités de GXT et de l'Appcase SDK. Le contenu inclut également des détails sur la mise en œuvre de widgets et la communication entre l'interface utilisateur et le serveur.

1. Introduction à GWT
en utilisant AppCase SDK
Strasbourg, 8 octobre 2009
Jean-Marc Prevost, développeur java, jm.prevost@greenivory.com http://www.greenivory.com

2. Plan
• Présentation
• GWT
‣ Présentation
‣ Création d’un projet
‣ Internationalisation
• GXT
‣ Présentation
‣ Les widgets
‣ Passage du projet GWT en projet GXT (+ déploiment de l’application)
• AppCase SDK
‣ Présentation
‣ Passage du projet GXT en Greendget
‣ Communication entre UI et serveur
‣ Quelques widgets

3. Présentation
• Jean-Marc Prevost (28 ans)
‣ Développeur Java, chez GreenIvory depuis le début de l’année
‣ Développeur Web depuis 2002 (ASP - PHP)
• GreenIvory – Haguenau
‣ Présent en France et aux Etats-Unis
‣ Équipe de 12 personnes
‣ Domaine d’activité : e-marketing, mashup, e-réputation, réseaux sociaux, portails collaboratifs…
‣ Advanced Business Partner d’IBM, Jeune Entreprise Innovante

4. GWT – Présentation (1/2)
• Qu’est-ce que GWT ?
‣ Google Web Toolkit
‣ Compilateur JAVA => JS/HTML
‣ Apache License, v. 2.0
‣ http://code.google.com/intl/fr/webtoolkit

5. GWT – Présentation (2/2)
• Avantages
‣ 1 langage : Java (aucune connaissance en html, Ajax, Javascript)
‣ Développement d’une application Web riche en utilisant un environnement de développement solide.
‣ Pas de soucis de compatibilité entre navigateurs (GWT s’en occuppe)
• Inconvénient principal
‣ Prise en compte difficile par les moteurs de recherche (Ajax)

6. GWT – Création d’un projet
• Préparation de l’environnement
mkdir com.greenivorylabs.devforum.ui
cd com.greenivorylabs.devforum.ui
• Création du projet
C:UsersJean-Marcworkspacecom.google.gwtwebAppCreator com.greenivorylabs.devforum.ui.Demo

7. GWT – i18n (1/2)
‣ Créer le package “i18n” dans notre projet Eclipse
C:UsersJean-Marcworkspacecom.google.gwti18nCreator -eclipse com.greenivorylabs.devforum.ui -
createMessages com.greenivorylabs.devforum.ui.client.i18n.Messages
‣ Dans le fichier “Messages.properties”, insérez les différentes traductions
‣ Dans le projet GWT, ajouter cet objet :
private static Messages messages = GWT.create(Messages.class);
‣ Emploi d’une traduction :
messages.welcome("DeveloperForum")
‣ Il faut ensuite générer la classe, en lançant le fichier : “Messages-i18n.launch”

8. GWT – i18n (2/2)
‣ Ajout d’une nouvelle langue, ajouter un fichier “Messages_fr.properties” contenant les mêmes clés
et traduire les valeurs et les paramètres. Relancer le fichier launch (actualiser le fichier java ainsi
généré).
‣ Il faut ensuite ajouter la prise en charge des langue au projet GWT, dans le fichier
“Demo.gwt.xml”, ajouter les deux lignes suivantes :
<extend-property name="locale" values="fr" />
<extend-property name="locale" values="en" />
‣ Pour appeler une autre langue, il faut renseigner une variable dans le querystring :
http://localhost:8888/Demo.html?locale=fr

9. GXT - Présentation
• Qu’est-ce que GXT ?
‣ Ext GWT
‣ Commercial License ou Open Source License
‣ http://www.extjs.com/products/gxt/

10. GXT – Les Widgets (1/3)
• Quelques widgets
‣ http://www.extjs.com/examples/#overview
Tableau éditable paginé Graphiques
Boutons

11. GXT – Les Widgets (2/3)
• Quelques widgets
‣ http://www.extjs.com/examples/#overview
Menu en accordéon
Tableau lié à un formulaire

12. GXT – Les Widgets (3/3)
• Quelques widgets
‣ http://www.extjs.com/examples/#overview
Menu en onglets
Menu en arbre
Boîte de dialogue + menu contextuel

13. GXT – Un exemple (1/2)
‣ Ajouter le jar gxt dans le le buildpath du projet
‣ Copier les ressources gxt dans notre projet (feuille de style par défaut, boutons, …)
+ ajout de la feuille de style dans “Demo.html”
‣ Suppression des fichiers inutiles
‣ Modification des fichiers web.xml et Demo.gwt.xml
‣ Modification du fichier build.xml
‣ Code de l’application
‣ Lancement du projet

14. GXT – Un exemple (2/2)
‣ Traitement d’un événement : click sur un bouton
‣ Ajout d’un template sur une combobox
‣ Modification du css
‣ Compilation – fichier war
‣ Déploiement

15. AppCase - Présentation
• Qu’est-ce que AppCase ?
‣ Portail Greenivory
‣ Greendget
‣ AppCase SDK

16. AppCase – Premier Greendget
• Reprenons le formulaire pour en faire un greendget
‣ Ajout du package : “gi-pp-sdk-ui-2.0.0.jar” au buildpath
‣ Modification des fichiers suivants :
“Demo.gwt.xml” et “build.xml”
‣ Ajout de la frame permettant de gérer les boutons précédents et suivants du navigateur dans le fichier
Demo.html
‣ Modifications de “Demo.java”, et voilà, nous avons notre premier greendget !

17. AppCase – Communication Serveur
• Modification de l’environnement
‣ Création du package http
‣ Greendget ModelWritter
‣ Modification du formulaire :
- passage en ModelForm
- modifications des types des champs
‣ Simulation serveur - Flux Json

18. AppCase – Quelques widgets du SDK
• Wizard
‣ Widget permettant de créer rapidement un enchaînement de formulaires
• Master / detail
‣ Liaison entre une liste d’items et un formulaire d’édition
• Shopping
‣ Widget de gestion de panier

19. Merci
•Jean-Marc Prevost
•jm.prevost@greenivory.com