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
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
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
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...
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,...
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
Mécanisme de permutation de GWT
Quelles sont les différentes étapes pour construire une application GWT?
Etape 1 : Définir zones conteneurs Redimensionnement : %, PX, EM, ascenseur.. possiblilité de les imbriquer (qq bugs) Accordéon
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); } }
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>...
Soit design by WYSIWYG :
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
Widgets grande quantité de données : CellTable
Widgets HTML5 Canvas Audio WebGL Video
Etape 3 : style, animation, transition effets avec CSS 3
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,...
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);
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)
Historique et futur de GWT Version 1 : 2006 Version 2.5 RC : été 2012 2.5 = dernière version développée/pilotée à 100% par Google -> création d'un commité de pilotage regroupant plusieurs compagnies et developpeurs
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