Introduction / retour d'expérience : GWT

Transcription

1 Introduction / retour d'expérience : GWT Qu'est ce que le Google Web Toolkit? Framework Ajax accessible et productif Pour quels projets? Interface riche et ergonomique Visualisation d'un grand nombre de données Thomas Lacroix, MIG, 2012

2 Avantages applications web riches VS applications autonomes : Distribution de l'application web facile Processus d'installation inexistant Mise à jour automatique / transparent Communication serveur par défault Plus de contrôle sur architecture des données côté serveur

3 Ajax VS HTML classique : 3 caractéristiques Rafraîchissement partiel de la page (DOM) Dialogue avec le serveur de façon asynchrone Transfert charge processeur sur client

4 Points forts de GWT : Licence libre Apache Compilateur Java -> Javascript (voir après) Librairie Widgets et Layouts (voir après) Mode débogage (cycle change/test/debug) / mode production Mécanismes communication server (RPC, JSON,...) Integration avec autres technologies: Javascript natif, HTML5, server Java, PHP, Ruby...

5 Fiche technique GWT (suite) Majorité de navigateurs supportés Gestion historique navigation / bookmarks Support de l'internationalisation Ecosystème / Communauté Open Source: bibliothèques JAR mobile, tablette, graphique,... Fonctions avancées pour les pros (deferred binding, API DOM, Javascript Native Interface,...) Structuration du code libre: MVC, MVP, activité et places,...

6 Intérêt de compilation Java -> Javascript Outils de dévelopement autour de Java : IDE, javadoc, UnitTest, JAR réutilisable, Débuging, profiling... Mécanisme de permutation (voir après) Optimisation du javascript (vitesse éxécution et téléchargement initiale) : inligning, obfuscation,... Pas de compromis entre code source maintenable et application optimisée

7 Mécanisme de permutation de GWT

8 Quelles sont les différentes étapes pour construire une application GWT?

9 Etape 1 : Définir zones conteneurs Redimensionnement : %, PX, EM, ascenseur.. possiblilité de les imbriquer (qq bugs) Accordéon

10 Soit code java public class StackPanelExample implements EntryPoint { public void onmoduleload() { // Create a stack panel containing three labels. StackPanel panel = new StackPanel(); panel.add(new Label("Foo"), "foo"); panel.add(new Label("Bar"), "bar"); panel.add(new Label("Baz"), "baz"); // Add it to the root panel. RootPanel.get().add(panel); } }

11 Soit code xml (récupération variables coté java) <ui:style>.deco {border: 3px outset #838B8B;} </ui:style> <g:docklayoutpanel unit='em' ui:field='rootpanel'> <g:north size='5' stylename="deco"/> <g:button ui:field='hibutton' text="hi"> </g:north> <g:center> <g:verticalpanel spacing='5' height='100%'> <g:cell horizontalalignment='align_center'> <g:mycustomwidget/> </g:cell>...

12 Soit design by WYSIWYG :

13 Etape 2 : mettre des vrais widgets dedans Button et text de différentes sortes, menu, arbres, auto-completion, sliders, calendrier... Tree Suggestion Box Auto completion

14 Widgets grande quantité de données : CellTable

15 Widgets HTML5 Canvas Audio WebGL Video

16 Etape 3 : style, animation, transition effets avec CSS 3

17 Etape 4 : gestion evenements, algorithmiques et code glue Que ce passe-t-il quand on clique? Button b = new Button("Click Me"); b.addclickhandler(new ClickHandler() { public void onclick(clickevent event) { // handle the click event } }); Example de API HTML5 : webworker, offline, drag and drop, browser storage and database, geolocation, file,...

18 Etape 5 : communication serveur AsyncCallback<Gene> callback = new AsyncCallback<Gene>() { public void onfailure(throwable caught) { // do some UI stuff to show failure } public void onsuccess(gene genereturned) { // do some stuff with genereturned } }; callformyservice.getgenewithid(id, callback);

19 Etape 5 : communication serveur base de donnée (ie : table genes) GeneItem mapping objet > nom (String) > start (Integer) sérialisation serveur RPC, JSON,... client : compilation Java > Javascript GeneWidget > nom (Zone de Texte) > start (position absolue sur graphique) désérialisation GeneItem setresult() > nom (String) > start (integer)

20 Historique et futur de GWT Version 1 : 2006 Version 2.5 RC : été = dernière version développée/pilotée à 100% par Google -> création d'un commité de pilotage regroupant plusieurs compagnies et developpeurs

21 Formation GWT 2 19, 20 et 21 Novembre 2012 Salle de formation de la plateforme Migale (Bât. 233) Coût global : ~ 430 euros / Coût unité : ~ 140 euros (imputable sur le budget 2013) Programme Qu'est-ce qu'un projet GWT? Introduction à GWT 2 Composants graphiques de GWTCommunication Client/Serveur avec GWT JavaScript Native Interface JSNI GWT 2 Best practices GWT Ecosystème GWT HTML5 / CSS3 et GWT Lier GWT aux frameworks Java