Nous parlerons dans un premier temps de GWT et GXT qui permettent de créer des interfaces web riches à partir de code Java, puis nous nous intéresserons plus précisément à un produit réalisé à partir de ces deux technologies : le portail AppCase de Greenivory et son SDK. Jean-Marc Prevost (GreenIvory)

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