20091006 Dev Forum Fr 001Introduction à GWT en utilisant AppCase SDK
- 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