20091006 Dev Forum Fr 001Introduction à GWT en utilisant AppCase SDK

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

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

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

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

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)

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

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”

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

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

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

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

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

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

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

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

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 !

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

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

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

20091006 Dev Forum Fr 001Introduction à GWT en utilisant AppCase SDK

by GreenIvory on Nov 03, 2009

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 5

Statistics

20091006 Dev Forum Fr 001Introduction à GWT en utilisant AppCase SDK — Presentation Transcript