20091006 dev forum fr 001introduction à gwt en utilisant appcase sdk

http://www.greenivory.comJean-Marc Prevost, développeur java, jm.prevost@greenivory.com

Introduction à GWT

en utilisant AppCase SDK

Strasbourg, 8 octobre 2009

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

• Création du projet

mkdir com.greenivorylabs.devforum.ui

cd com.greenivorylabs.devforum.ui

C:\Users\Jean-Marc\workspace\com.google.gwt\webAppCreator com.greenivorylabs.devforum.ui.Demo

GWT – i18n (1/2)

‣ Créer le package “i18n” dans notre projet Eclipse

‣ Dans le fichier “Messages.properties”, insérez les différentes traductions

‣ Dans le projet GWT, ajouter cet objet :

‣ Emploi d’une traduction :

‣ Il faut ensuite générer la classe, en lançant le fichier : “Messages-i18n.launch”

C:\Users\Jean-Marc\workspace\com.google.gwt\i18nCreator -eclipse com.greenivorylabs.devforum.ui -

createMessages com.greenivorylabs.devforum.ui.client.i18n.Messages

private static Messages messages = GWT.create(Messages.class);

messages.welcome("DeveloperForum")

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 :

‣ Pour appeler une autre langue, il faut renseigner une variable dans le querystring :

<extend-property name="locale" values="fr" />

<extend-property name="locale" values="en" />

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

Boutons

Tableau éditable paginé Graphiques

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

Boîte de dialogue

Menu en onglets

Menu en arbre

+ 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