Introduction à GWT
                               en utilisant AppCase SDK
                                               ...
Plan
•   Présentation
•   GWT
    ‣   Présentation
    ‣   Création d’un projet
    ‣   Internationalisation

•   GXT
    ...
Présentation

•   Jean-Marc Prevost (28 ans)
    ‣ Développeur Java, chez GreenIvory depuis le début de l’année

    ‣ Dév...
GWT – Présentation (1/2)




•   Qu’est-ce que GWT ?
    ‣ Google Web Toolkit

    ‣ Compilateur JAVA => JS/HTML

    ‣ Ap...
GWT – Présentation (2/2)


•   Avantages
    ‣ 1 langage : Java (aucune connaissance en html, Ajax, Javascript)

    ‣ Dév...
GWT – Création d’un projet




•   Préparation de l’environnement
    mkdir com.greenivorylabs.devforum.ui
    cd com.gree...
GWT – i18n (1/2)

‣ Créer le package “i18n” dans notre projet Eclipse
   C:UsersJean-Marcworkspacecom.google.gwti18nCreato...
GWT – i18n (2/2)

‣ Ajout d’une nouvelle langue, ajouter un fichier “Messages_fr.properties” contenant les mêmes clés
  et...
GXT - Présentation




•   Qu’est-ce que GXT ?
    ‣ Ext GWT

    ‣ Commercial License ou Open Source License

    ‣ http:...
GXT – Les Widgets (1/3)


•   Quelques widgets
    ‣ http://www.extjs.com/examples/#overview




                         ...
GXT – Les Widgets (2/3)


•   Quelques widgets
    ‣ http://www.extjs.com/examples/#overview




      Menu en accordéon
 ...
GXT – Les Widgets (3/3)


•    Quelques widgets
    ‣ http://www.extjs.com/examples/#overview




                        ...
GXT – Un exemple (1/2)



‣ Ajouter le jar gxt dans le le buildpath du projet

‣ Copier les ressources gxt dans notre proj...
GXT – Un exemple (2/2)



‣ Traitement d’un événement : click sur un bouton

‣ Ajout d’un template sur une combobox

‣ Mod...
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-u...
AppCase – Communication Serveur




                     •   Modification de l’environnement
                         ‣ Cr...
AppCase – Quelques widgets du SDK




•   Wizard
    ‣ Widget permettant de créer rapidement un enchaînement de formulaire...
Merci




•Jean-Marc Prevost
•jm.prevost@greenivory.com
Upcoming SlideShare
Loading in...5
×

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

2,096

Published on

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)

Published in: Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,096
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 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. 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. 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. 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. 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. 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. 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. 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. 9. GXT - Présentation • Qu’est-ce que GXT ? ‣ Ext GWT ‣ Commercial License ou Open Source License ‣ http://www.extjs.com/products/gxt/
  10. 10. GXT – Les Widgets (1/3) • Quelques widgets ‣ http://www.extjs.com/examples/#overview Tableau éditable paginé Graphiques Boutons
  11. 11. GXT – Les Widgets (2/3) • Quelques widgets ‣ http://www.extjs.com/examples/#overview Menu en accordéon Tableau lié à un formulaire
  12. 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. 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. 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. 15. AppCase - Présentation • Qu’est-ce que AppCase ? ‣ Portail Greenivory ‣ Greendget ‣ AppCase SDK
  16. 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. 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. 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. 19. Merci •Jean-Marc Prevost •jm.prevost@greenivory.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×