Upload
claude-coulombe
View
975
Download
7
Embed Size (px)
DESCRIPTION
Le Google Web Toolkit (GWT) combine les technologies Ajax et HTML5 avec les outils de génie logiciel de Java dans le but de réaliser des applications web riches monopages de grande envergure et des applications mobiles multiplateformes. Après une brève présentation de GWT, nous verrons les nouveautés de la version 2.5, ferons un retour sur la conférence Google I/O 2013 et discuterons du futur de GWT.
Citation preview
GWTGWT,, quoi de neuf? quoi de neuf?
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Présentation au GDG/GTUG Montréal
par Claude Coulombe
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
ButBut
Dans cette présentation vous verrez comment le Google Dans cette présentation vous verrez comment le Google Web Toolkit (GWT) permet le développement d'applications Web Toolkit (GWT) permet le développement d'applications Web Web riches (RIA) dotées d'interfaces riches (RIA) dotées d'interfaces complexes et complexes et d'applications mobiles multiplateformes performantes. d'applications mobiles multiplateformes performantes.
http://code.google.com/webtoolkit/http://www.gwtproject.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Web 1.0Web 1.0 – Cliquez & attendez! – Cliquez & attendez!
* Source Clipart : http://www.clipart.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Web 2.0 – Web 2.0 – « L'expérience-utilisateur »« L'expérience-utilisateur »
* Source Clipart : http://www.clipart.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
AjaxAjax – Une véritable percée! – Une véritable percée!
AJAXAJAX
Le premier à utiliser le terme AJAXfut Jesse James Garrett en février 2005
* Source Clipart : http://www.clipart.com
Echange asynchrone+
Modification de fragments de page
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Créer des applications Web richesCréer des applications Web riches
Applications Web semblables à des applications bureautiques en Applications Web semblables à des applications bureautiques en exécution locale (Desktop Like)exécution locale (Desktop Like)
Interfaces Web riches / RIA (Rich Internet Application)Interfaces Web riches / RIA (Rich Internet Application) Interfaces rapides et réactivesInterfaces rapides et réactives Ouverture de plusieurs fenêtres à la fois dans le navigateur (app. Ouverture de plusieurs fenêtres à la fois dans le navigateur (app.
multifenêtres)multifenêtres) Déplacement des fenêtres dans le navigateur, redimensionnement Déplacement des fenêtres dans le navigateur, redimensionnement
et défilement des fenêtreset défilement des fenêtres Glisser et déposer des contenusGlisser et déposer des contenus Passage d'applications centrées sur le serveur à des applications Passage d'applications centrées sur le serveur à des applications
centrées sur le clientcentrées sur le client Application avec état (statefull) => sans état (stateless)Application avec état (statefull) => sans état (stateless) Des applications monopages (SPI) qui manipulent le DOMDes applications monopages (SPI) qui manipulent le DOM Des applications mobiles multiplateformes performantesDes applications mobiles multiplateformes performantes
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Made in JavaScript
* Source Clipart : http://www.clipart.com
Pourquoi pas JavaScript ?Pourquoi pas JavaScript ?
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
JavaScript est eJavaScript est excellent pour l'écriture rapide de petites applicationsxcellent pour l'écriture rapide de petites applications
Le typage dynamique est une source importante d'erreurs qui passent Le typage dynamique est une source importante d'erreurs qui passent inaperçues jusqu'au moment de l'exécutioninaperçues jusqu'au moment de l'exécution
Pas d'espace de nommage (collision de variables), manque de modularité Pas d'espace de nommage (collision de variables), manque de modularité et de capacité à grandir, pas un véritable langage à objets et de capacité à grandir, pas un véritable langage à objets
Mise au point et réutilisation difficilesMise au point et réutilisation difficiles
Incompatibilité entre les fureteursIncompatibilité entre les fureteurs
Fuites de mémoireFuites de mémoire
NNormal, car JS n'a pas été conçu pour de gros logiciels, mais pour mettre ormal, car JS n'a pas été conçu pour de gros logiciels, mais pour mettre un peu d'interactivité dans une page webun peu d'interactivité dans une page web
On peut voir le JavaScript comme le langage d'assemblage (assembleur) On peut voir le JavaScript comme le langage d'assemblage (assembleur) du fureteurdu fureteur
Pourquoi pas JavaScript ?Pourquoi pas JavaScript ?
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT = Ajax + Génie Logiciel GWT = Ajax + Génie Logiciel
GWT =GWT =
* Source : http://www.google.com, http://www.sun.com, htttp://www.clipart.com
AJAXAJAX
++
Génie logicielGénie logiciel
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Support du cycle de vie complet du logicielSupport du cycle de vie complet du logiciel Outil interactif de construction d'IU (Outil interactif de construction d'IU (GWT DesignerGWT Designer)) Outil de construction d'IU déclaratif XML (Outil de construction d'IU déclaratif XML (UiBinderUiBinder)) Outil de mesure des performances (Outil de mesure des performances (Speed TracerSpeed Tracer)) Plugiciel pour Plugiciel pour EclipseEclipse
Support au débogageSupport au débogage
Mise au point & débogage en mode devMise au point & débogage en mode dev
Cycle : édition / test / débogage /Cycle : édition / test / débogage /
Restructuration / refactorisation (refactoring)Restructuration / refactorisation (refactoring)
Détection d'erreurs à la compilationDétection d'erreurs à la compilation
Journalisation (logging)Journalisation (logging)
Patrons de conception OO éprouvésPatrons de conception OO éprouvés
Composite / observateur / MVC / MVP / commande / bus d'événementsComposite / observateur / MVC / MVP / commande / bus d'événements Support de Support de JUnitJUnit Support de Support de AppEngineAppEngine et autres APIs de Google et autres APIs de Google
* Source Clipart : http://www.clipart.com
GWT = Ajax + Génie Logiciel GWT = Ajax + Génie Logiciel
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Comprendre GWTComprendre GWT
GWTGWT
* Source Clipart : http://www.clipart.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Application GWTApplication GWT – – Client & ServeurClient & Serveur
Le code-client en JavaScript est transmis sur le réseau vers un ordinateur-client, où il s'exécute dans un fureteur Web
Le code (en Java ou tout autre langage) qui s'exécute sur le serveur est responsable de la logique de l'application.
* Source Clipart : http://www.clipart.com
L'application Web utilise le serveur pour charger ou sauvegarder des données.
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Transcompilateur Java à JavaScript Transcompilateur Java à JavaScript
Java
JavaScript
Run Everywhere!
Write Once...
* Source Clipart : http://www.clipart.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Transcompilateur Java à JavaScript Transcompilateur Java à JavaScript Transcompilateur GWT prend du code-client en Java et Transcompilateur GWT prend du code-client en Java et produit du code JavaScript optimiséproduit du code JavaScript optimiséJavaScript devient le code assembleur du fureteurJavaScript devient le code assembleur du fureteurÉlimination du code non-utilisé dans les bibliothèques, Élimination du code non-utilisé dans les bibliothèques, inférence de type, retrait du polymorphisme, inférence de type, retrait du polymorphisme, compression “agressive” du code, « Obfuscation »compression “agressive” du code, « Obfuscation »Le JavaScript produit est généralement plus rapide que Le JavaScript produit est généralement plus rapide que du JavaScript écrit à la main* du JavaScript écrit à la main* Emploi de la liaison différée (“Deferred Binding”) pour Emploi de la liaison différée (“Deferred Binding”) pour produire du code JavaScript optimal pour chaque produire du code JavaScript optimal pour chaque fureteur (i.e. génère du code spécifique à chaque fureteur (i.e. génère du code spécifique à chaque fureteur)fureteur)« Ne payez que pour ce que vous utilisez »« Ne payez que pour ce que vous utilisez »
* Note : sauf si code < 100 lignes* Note : sauf si code < 100 lignes
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Transcompilateur- Transcompilateur- Liaison différéeLiaison différée
« Ne payez que pour ce que vous utilisez »
Copyright Google 2008
* Source : http://www.google.com
Générer du code optimal et spécifique à chaque fureteurGénérer du code optimal et spécifique à chaque fureteur
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Structure d'un projet GWTStructure d'un projet GWT
* Source Clipart : http://www.clipart.com
MaPremiereAppli/ src/ PaquetConfig/
MaPremiereAppli.gwt.xml PaquetClient MonPremierService.java MonPremierServiceAsync.java MaPremiereAppli.java PaquetServeur MaPremiereAppli.java META-INF/ jdoconfig.xml log4j.properties war/ mapremierappligwt/ … résultats compilation en JS ... WEB-INF/ lib/ ...App Engine JARs... appengine-web.xml logging.properties web.xml MaPremiereAppli.css MaPremiereAppli.html
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
« Ne payez que pour ce que vous utilisez »« Ne payez que pour ce que vous utilisez »
Copyright Google 2008Copyright Google 2008
* Source : http://www.google.com* Source : http://www.google.com
Transcompilateur – Code optimisé! Transcompilateur – Code optimisé!
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Intégration à Eclipse – débogueurIntégration à Eclipse – débogueur
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT en « mode dev »GWT en « mode dev » - - DéveloppementDéveloppement
* Source : http://www.google.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT en « mode dev »GWT en « mode dev » - - DéveloppementDéveloppement
Dans Eclipse, une application GWT peut Dans Eclipse, une application GWT peut s'exécuter en « mode dev » s'exécuter en « mode dev » (“Development Mode”)(“Development Mode”) En « mode dev », la JVM exécute le code GWT En « mode dev », la JVM exécute le code GWT comme du bytecode Java à l'intérieur d'une comme du bytecode Java à l'intérieur d'une fenêtre de navigateur Webfenêtre de navigateur Web Le « mode dev » facilite la mise-au-point :Le « mode dev » facilite la mise-au-point :
Éditer le code-sourceÉditer le code-sourceRafraîchirRafraîchirExaminer les résultatsExaminer les résultats
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT en « mode Web » - DéploiementGWT en « mode Web » - Déploiement Une fois testé en « mode dev », vous pouvez Une fois testé en « mode dev », vous pouvez compiler votre code source Java en JavaScript et compiler votre code source Java en JavaScript et déployer votre application Webdéployer votre application Web
Une application Web GWT qui a été déployée est Une application Web GWT qui a été déployée est dite en « mode Web »dite en « mode Web »
Une fois compilé le code-client est uniquement du Une fois compilé le code-client est uniquement du pur JavaScript et du HTMLpur JavaScript et du HTML
Afin de déployer votre application Web en Afin de déployer votre application Web en production, vous déplacez les fichiers du répertoire production, vous déplacez les fichiers du répertoire « war » sur le serveur Web, i.e. Tomcat « war » sur le serveur Web, i.e. Tomcat
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT DesignerGWT Designer
* Source : http://www.google.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Éditeur graphique interactif d'IUÉditeur graphique interactif d'IU Racheté par Google de la société Instantiations Racheté par Google de la société Instantiations Entièrement intégré à Eclipse via un plugicielEntièrement intégré à Eclipse via un plugiciel Génération de code bidirectionnelleGénération de code bidirectionnelle Alternance entre la vue Source et la vue DesignAlternance entre la vue Source et la vue Design Palette de composants avec glisser-déposerPalette de composants avec glisser-déposer Vue Structure avec l'arbre des composants et un panneau Vue Structure avec l'arbre des composants et un panneau
pour l'édition des propriétéspour l'édition des propriétés I18NI18N Création de composants réutilisables (Composite)Création de composants réutilisables (Composite)
GWT DesignerGWT Designer
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Outil de conception d'interface-utilisateur à partir d'une Outil de conception d'interface-utilisateur à partir d'une représentation XML, sans programmationreprésentation XML, sans programmation
Facilite le découplage entre la disposition du contenu Facilite le découplage entre la disposition du contenu en XML, le code du comportement en Java et en XML, le code du comportement en Java et l'apparence gouvernée par des feuilles de style CSSl'apparence gouvernée par des feuilles de style CSS
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel width="450px" height="300px">
<g:VerticalPanel width="450px" height="300px" horizontalAlignment="ALIGN_CENTER">
<g:Cell horizontalAlignment="ALIGN_CENTER">
<g:Label styleName="{style.titreJeu}" text="Jeux des trois portes (Monty Hall Problem)" width="450px" height="20px"
horizontalAlignment="ALIGN_CENTER"/>
</g:Cell>
<g:Cell horizontalAlignment="ALIGN_CENTER">
UiBinderUiBinder
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Speed TracerSpeed Tracer (extension dans Chrome)(extension dans Chrome)
* Source : http://www.google.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT GWT –– Structure bibliothèque & APIStructure bibliothèque & API
* Source Clipart : http://www.clipart.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
BibliothèqueBibliothèque
IUGIUG
Widgets &Widgets &
PanelsPanels
CommunicationCommunication
avec le serveuravec le serveur
RPC & AjaxRPC & Ajax
Analyseur Analyseur
XMLXML
Gestion deGestion de
l'historiquel'historique
Intégration Intégration
à JUnità JUnit
GWT APIGWT API
Trans Trans
compilateur compilateur
Java àJava à
JavaScriptJavaScript
Interface Interface
NativeNative
JavaScriptJavaScript
JSNIJSNI
BibliothèqueBibliothèque
d'émulationd'émulation
JREJRE
La structure du gwt-user.jarLa structure du gwt-user.jar GWT GWT –– Structure bibliothèque & APIStructure bibliothèque & API
Note : Transcompilateur GWT Note : Transcompilateur GWT
dans gwt-dev-windows.jardans gwt-dev-windows.jar
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Emulation – JRE Emulation – JRE (Java Runtime Environment)(Java Runtime Environment)
Le transcompilateur de GWT fournit l'émulation en Le transcompilateur de GWT fournit l'émulation en JavaScript d'un sous-ensemble du langage Java (JRE) JavaScript d'un sous-ensemble du langage Java (JRE) généralement utilisé pour la programmation de basegénéralement utilisé pour la programmation de base
java.lang, java.util, java.io, java.sqljava.lang, java.util, java.io, java.sqlRestriction pour le code client Restriction pour le code client
devant être traduit en JavaScript. devant être traduit en JavaScript. Aucune restriction n'est imposée Aucune restriction n'est imposée
du côté du code serveur : Java du côté du code serveur : Java (JSP/JSF/Servlet), PHP, (JSP/JSF/Servlet), PHP, ASP .NET, Perl, RoR, Python, Perl, ...ASP .NET, Perl, RoR, Python, Perl, ...
* Source image : http://www.sun.com* Source image : http://www.sun.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
JSNI : JavaScript Native InterfaceJSNI : JavaScript Native InterfaceIntégration facile avec des bibliothèques JavaScript Intégration facile avec des bibliothèques JavaScript externes grâce au JavaScript Native Interface (JSNI)externes grâce au JavaScript Native Interface (JSNI)Interagir directement avec JavaScript (accès natif) à partir Interagir directement avec JavaScript (accès natif) à partir de Java et vice-versa de Java et vice-versa Inclusion automatique des bibliothèques JavaScriptInclusion automatique des bibliothèques JavaScriptJavaScript Overlay pour simplifier l'intégration de JavaScript Overlay pour simplifier l'intégration de prototypes JavaScript dans GWTprototypes JavaScript dans GWT
// Déclaration d'une méthode JavaScript en Java...// Déclaration d'une méthode JavaScript en Java...
native String inverserNomPrenom(String nom) native String inverserNomPrenom(String nom)
/*-{/*-{
// Implémentation en JavaScript// Implémentation en JavaScript
var re = /(\w+)\s(\w+)/;var re = /(\w+)\s(\w+)/;
return name.replace(re, '$2, $1');return name.replace(re, '$2, $1');
}-*/;}-*/;
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
JSNI : JavaScript Type Overlay JSNI : JavaScript Type Overlay JavaScript Type Overlay pour simplifier l'intégration de prototypes JavaScript Type Overlay pour simplifier l'intégration de prototypes JavaScript dans GWTJavaScript dans GWTUne structure de données JSON (JavaScript Object Notation)Une structure de données JSON (JavaScript Object Notation)
var personnesJSON = [var personnesJSON = [
{ "Prenom" : "Nathalie", "NomFamille" : "Tremblay" }, { "Prenom" : "Jean", "NomFamille" : "Dupont" },{ "Prenom" : "Nathalie", "NomFamille" : "Tremblay" }, { "Prenom" : "Jean", "NomFamille" : "Dupont" },
{ "Prenom" : "Bill", "NomFamille" : "Gates" }, { "Prenom" : "Steve", "NomFamille" : "Jobs" }{ "Prenom" : "Bill", "NomFamille" : "Gates" }, { "Prenom" : "Steve", "NomFamille" : "Jobs" }
];];
// Un type Overlay JavaScript// Un type Overlay JavaScript
class Personne extends JavaScriptObject {class Personne extends JavaScriptObject {
// Un type Overlay JS a toujours un constructeur protected, à zéro argument// Un type Overlay JS a toujours un constructeur protected, à zéro argument
protected Personne() { } protected Personne() { }
// Les méthodes dans un Overlay JavaScript sont en JSNI// Les méthodes dans un Overlay JavaScript sont en JSNI
public final native String getPrenom() /*-{ return this.Prenom; }-*/;public final native String getPrenom() /*-{ return this.Prenom; }-*/;
public final native String getNomFamille() /*-{ return this.NomFamille; }-*/;public final native String getNomFamille() /*-{ return this.NomFamille; }-*/;
// Notez, toutefois, que toutes les méthodes ne sont pas obligatoirement en JSNI// Notez, toutefois, que toutes les méthodes ne sont pas obligatoirement en JSNI
public final String getNomComplet() {public final String getNomComplet() {
return getPrenom() + " " + getNomFamille(); return getPrenom() + " " + getNomFamille();
}}
}}
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
JSNI : Type Overlay JavaScript JSNI : Type Overlay JavaScript // Obtenir un prototype JavaScript pour l'Overlay// Obtenir un prototype JavaScript pour l'Overlay
class MonModuleEntryPoint implements EntryPoint {class MonModuleEntryPoint implements EntryPoint {
public void onModuleLoad() {public void onModuleLoad() {
Personne p = getPremierePersonne();Personne p = getPremierePersonne();
// Youppi! Maintenant j'ai un prototype JavaScript qui est aussi une Personne// Youppi! Maintenant j'ai un prototype JavaScript qui est aussi une Personne
Window.alert("Bonjour, " + p.getPrenom());Window.alert("Bonjour, " + p.getPrenom());
}}
// Utilisation de JSNI pour obtenir le prototype JSON que nous désirons// Utilisation de JSNI pour obtenir le prototype JSON que nous désirons
// Le prototype JSON object reçoit un type Java implicitement // Le prototype JSON object reçoit un type Java implicitement
// en se basant sur le type retourné par la méthode// en se basant sur le type retourné par la méthode
private native Personne getPremierePersonne() /*-{private native Personne getPremierePersonne() /*-{
// Obtenir une référence à la première Personne dans le tableau JSON// Obtenir une référence à la première Personne dans le tableau JSON
return $wnd.personnesJSON[0]; return $wnd.personnesJSON[0];
}-*/;}-*/;
}}
* Source : http://googlewebtoolkit.blogspot.com* Source : http://googlewebtoolkit.blogspot.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Bibliothèque de composants d'IUBibliothèque de composants d'IU
* Source Clipart : http://www.clipart.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU IU – Programmation par événements– Programmation par événementsEssentiellement de la programmation par événementsEssentiellement de la programmation par événementsUne méthode ou procédure s'exécute quand un Une méthode ou procédure s'exécute quand un événement est déclenchéévénement est déclenchéDans une IU, un événement est déclenché chaque fois Dans une IU, un événement est déclenché chaque fois que l'utilisateur clique sur la souris, appuie sur une que l'utilisateur clique sur la souris, appuie sur une touche du clavier, sélectionne un élément dans un touche du clavier, sélectionne un élément dans un menu, ouvre ou ferme une fenêtre, etc.menu, ouvre ou ferme une fenêtre, etc.À chaque composant de l'IU appelé aussi contrôle ou À chaque composant de l'IU appelé aussi contrôle ou widget (comme un bouton, un menu, etc.) est associé widget (comme un bouton, un menu, etc.) est associé un ou plusieurs gestionnaires d'événements (Handler) un ou plusieurs gestionnaires d'événements (Handler) qui peuvent comporter des paramètres qui peuvent comporter des paramètres
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU - Gestion des événementsIU - Gestion des événements GWT utilise le concept de gestionnaire d'événement GWT utilise le concept de gestionnaire d'événement
(handler interface) pour traiter les événements (handler interface) pour traiter les événements Semblable à d'autres bibliothèques Java pour la Semblable à d'autres bibliothèques Java pour la
programmation d'IU comme SWINGprogrammation d'IU comme SWING Le gestionnaire via l'interface “handler interface” Le gestionnaire via l'interface “handler interface”
définit une ou plusieurs méthodes que le widget définit une ou plusieurs méthodes que le widget appelle en réaction à un événementappelle en réaction à un événement
Button unBouton = new Button("Cliquez moi!");Button unBouton = new Button("Cliquez moi!"); unBouton.addClickHandler( new ClickHandler() {unBouton.addClickHandler( new ClickHandler() { public void onClick(ClickEvent event) {public void onClick(ClickEvent event) { Window.alert("Bouton cliqué!");Window.alert("Bouton cliqué!"); }} });});
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU – Bibliothèque de composantsIU – Bibliothèque de composantsÉléments statiques: étiquetteÉléments statiques: étiquette ( (LabelLabel), HTML, Image, hyperlien (), HTML, Image, hyperlien (HyperlinkHyperlink), champ ), champ caché (caché (HiddenHidden))Widgets (E/S) : bouton (Widgets (E/S) : bouton (ButtonButton), bouton poussoir (), bouton poussoir (PushButtonPushButton), bouton à bascule ), bouton à bascule ((ToggleButtonToggleButton), case à cocher (), case à cocher (CheckBoxCheckBox), bouton radio (), bouton radio (RadioButtonRadioButton), menu déroulant ), menu déroulant ((ListBoxListBox), zone de texte (), zone de texte (TextBoxTextBox), zone de texte avec suggestions (), zone de texte avec suggestions (SuggestBoxSuggestBox), zone ), zone d'entrée de mot de passe (d'entrée de mot de passe (PasswordTextBoxPasswordTextBox), zone de texte multiligne (), zone de texte multiligne (TextAreaTextArea), zone ), zone d'édition de texte enrichi (d'édition de texte enrichi (RichTextAreaRichTextArea))Widgets complexes : arbre (Widgets complexes : arbre (TreeTree), barre de menus (), barre de menus (MenuBarMenuBar), téléversement de ), téléversement de fichiers (fichiers (FileUploadFileUpload))Panneaux de disposition simple : panneau en file (Panneaux de disposition simple : panneau en file (FlowPanelFlowPanel), panneau horizontal ), panneau horizontal ((Horizontal PanelHorizontal Panel), panneau vertical (), panneau vertical (VerticalPanelVerticalPanel), panneau à coulisse (), panneau à coulisse (SplitPanelSplitPanel), ), panneau HTML (panneau HTML (HTMLPanelHTMLPanel), panneau superposé (), panneau superposé (TabLayoutPanelTabLayoutPanel))Panneaux de disposition complexe : table flexible* (Panneaux de disposition complexe : table flexible* (FlexTableFlexTable), grille (), grille (GridGrid), panneau ), panneau polyptyque* polyptyque* (DockLayoutPanel),(DockLayoutPanel), panneau à onglets ( panneau à onglets (TabLayoutPanelTabLayoutPanel), panneau en pile ), panneau en pile ((StackLayoutPanelStackLayoutPanel))Panneaux conteneurs simples : panneau composite ou composite (Panneaux conteneurs simples : panneau composite ou composite (CompositeComposite) panneau ) panneau simple (simple (SimplePanelSimplePanel), panneau à barre de défilement (), panneau à barre de défilement (ScrollPanelScrollPanel), panneau de focus ), panneau de focus ((FocusPanelFocusPanel))Panneaux conteneurs complexes : panneau de formulaire (Panneaux conteneurs complexes : panneau de formulaire (FormPanelFormPanel), panneau à ), panneau à dévoilement* (dévoilement* (DisclosurePanelDisclosurePanel), panneau surprise* (), panneau surprise* (PopupPanelPopupPanel), boîte de dialogue ), boîte de dialogue ((DialogBoxDialogBox))
http://gwt.google.com/samples/Showcase/Showcase.htmhttp://gwt.google.com/samples/Showcase/Showcase.htmll
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Interface Utilisateur - Interface Utilisateur - PanneauxPanneaux
http://gwt.google.com/samples/Showcase/Showcase.htmlhttp://gwt.google.com/samples/Showcase/Showcase.html
DockLayoutPanelDockLayoutPanel
TabLayoutPanelTabLayoutPanel
PopupPanelPopupPanel
HorizontalPanelHorizontalPanel
VerticalPanelVerticalPanel SplitLayoutPanelSplitLayoutPanel
SplitLayoutPanelSplitLayoutPanelFlowPanelFlowPanel
DisclosurePanelDisclosurePanel
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
La gestion de l'historique du navigateur s'occupe des boutons « La gestion de l'historique du navigateur s'occupe des boutons « avancer » et « reculer » et des hyperliensavancer » et « reculer » et des hyperliens
Une API simple de gestion de l'historique basée sur une pile de Une API simple de gestion de l'historique basée sur une pile de jetonsjetons
Lorsque l'application démarre, la pile est videLorsque l'application démarre, la pile est vide
Lorsque l'utilisateur clique sur quelque choseLorsque l'utilisateur clique sur quelque chose
Vous pouvez ajouter des jetons sur la pile Vous pouvez ajouter des jetons sur la pile
History.newItem(“nouveauJeton”)History.newItem(“nouveauJeton”) Classe Hyperlink ajoute des jetons automatiquementClasse Hyperlink ajoute des jetons automatiquement
Vous pouvez aussi réagir aux événements “History events” en Vous pouvez aussi réagir aux événements “History events” en utilisant un HistoryListenerutilisant un HistoryListener
History.addHistoryListener(controle)History.addHistoryListener(controle) Le mécanisme des Activities et Places (A&P) pour créer des URLs Le mécanisme des Activities et Places (A&P) pour créer des URLs
signables (bookmarkable)signables (bookmarkable)
Gestion de l'historique du navigateurGestion de l'historique du navigateur
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Support des CSSSupport des CSSSéparation du code et de la présentationSéparation du code et de la présentation Code Java :Code Java :public ListWidget(String Item) {public ListWidget(String Item) { ...... setStyleName(“gwt-ListWidget”);setStyleName(“gwt-ListWidget”);}}
Fichier CSS :Fichier CSS :.gwt-ListWidget {.gwt-ListWidget { background-color:black;background-color:black; color:lime;color:lime;}}
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Support des CSS - conseilsSupport des CSS - conseilsCode Java : (usage de CSS primaire et dépendant)MonPetitWidget monPW = new MonPetitWidget();MonPetitWidget monPW = new MonPetitWidget();monPW.setStylePrimaryName("monPetitWidget");monPW.setStylePrimaryName("monPetitWidget");monPW.addStyleDependentName("selected");monPW.addStyleDependentName("selected");
Fichier CSS :Fichier CSS :.monpetitWidget {.monpetitWidget { background-color:black;background-color:black; color:lime;color:lime;}}.monPetitWidget .monPetitWidget-selected {.monPetitWidget .monPetitWidget-selected { color:red;color:red;}}Permet de faire varier facilement l'apparence en fonction de l'étatPermet de faire varier facilement l'apparence en fonction de l'étatNote : Ne pas utiliser les CSS pour la disposition Note : Ne pas utiliser les CSS pour la disposition (ex. (ex. .monPetitWidget .monPetitWidget { position: absolute; }{ position: absolute; } ))
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
I18N – InternationalisationI18N – Internationalisation
* Source Clipart : http://www.clipart.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
I18NI18N Le transcompilateur GWT utilise la liaison différée (« Le transcompilateur GWT utilise la liaison différée («
Deferred Binding ») pour générer une version différente Deferred Binding ») pour générer une version différente de l'application Web pour chaque langue de l'application Web pour chaque langue
Par exemple, puisque GWT supporte 5 navigateurs Par exemple, puisque GWT supporte 5 navigateurs différents, si votre application doit fonctionner en 3 différents, si votre application doit fonctionner en 3 langues, le transcompilateur de GWT produira 15 langues, le transcompilateur de GWT produira 15 versions différentes de votre application au moment de versions différentes de votre application au moment de la compilation la compilation
À l'exécution, GWT choisira la bonne version de À l'exécution, GWT choisira la bonne version de l'application à montrer à l'utilisateurl'application à montrer à l'utilisateur
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
I18N – I18N – mécanismes de localisationmécanismes de localisation ““Constants” pour des chaînes constantes et des réglagesConstants” pour des chaînes constantes et des réglages
““Messages” pour les chaînes avec des argumentsMessages” pour les chaînes avec des arguments
““DateTimeFormat” pour les dates et l'heureDateTimeFormat” pour les dates et l'heure
““NumberFormat” pour les nombres et les unités de mesureNumberFormat” pour les nombres et les unités de mesure
Pas de processus dynamique (tout est statique et fait à la Pas de processus dynamique (tout est statique et fait à la compilation), sinon il faut développer son propre mécanismecompilation), sinon il faut développer son propre mécanisme
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Support de HTML5Support de HTML5 Stockage dans le fureteur (local storage)Stockage dans le fureteur (local storage) Canvas – graphisme et animationCanvas – graphisme et animation AudioAudio VideoVideo
Elemental LibraryElemental LibraryPermet de travailler directement avec l'API HTML5 du Permet de travailler directement avec l'API HTML5 du fureteurfureteur
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Autres évolutionsAutres évolutions Chargement de code à la demande (code splitting) – GWT.runAsync(...)Chargement de code à la demande (code splitting) – GWT.runAsync(...) Gestion asynchrone des ressources (ClientBundle)Gestion asynchrone des ressources (ClientBundle) RequestFactory (nouveau modèle RPC)RequestFactory (nouveau modèle RPC) Support du patron de conception MVP (Modèle Vue Présentateur)Support du patron de conception MVP (Modèle Vue Présentateur) Bus d'événements (eventBus)Bus d'événements (eventBus) CellWidgets (composants légers à base de cellules typées)CellWidgets (composants légers à base de cellules typées) Socle Activités et Places (Actvities & Places)Socle Activités et Places (Actvities & Places) GIN (GWT INjection) – injection de dépendances dans GWT basé sur GIN (GWT INjection) – injection de dépendances dans GWT basé sur
GuiceGuice Plugiciel Eclipse (Plugin)Plugiciel Eclipse (Plugin) Super DevMode de GWT 2.5 (avec SourceMaps pour établir la Super DevMode de GWT 2.5 (avec SourceMaps pour établir la
correspondance Java <=> JavaScript)correspondance Java <=> JavaScript) Passage d'un placement (layout) par tableaux à un placement CSSPassage d'un placement (layout) par tableaux à un placement CSS GXT (ExtJS), SmartGWT, GWT-DnD, GChart, Vaadin, GWTP (Arcbees QC!)GXT (ExtJS), SmartGWT, GWT-DnD, GChart, Vaadin, GWTP (Arcbees QC!)
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Communication client-serveur & AjaxCommunication client-serveur & Ajax
* Source Clipart : http://www.clipart.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Client léger HTML vs client riche AjaxClient léger HTML vs client riche Ajax
* Source : http://www.google.com* Source : http://www.google.com
Serveuravec état
(statefull)
Serveursans état
(stateless)
Pas d'état persistant entre les transactions qui sont
considérées comme indépendantes
Client HTML(fureteur) sans état(stateless)
Pas d'état persistant entre les transactions qui sont
considérées comme indépendantes
Client JavaScript
(fureteur) avec état(statefull)
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Communication avec le serveur & AjaxCommunication avec le serveur & AjaxRPC (« Remote Procedure Call »), appel de procédure à distanceRPC (« Remote Procedure Call »), appel de procédure à distance
RPC rend facile l'échange d'objets Java ou POJOS (sérialisés) RPC rend facile l'échange d'objets Java ou POJOS (sérialisés) entre le code-client et le code-serveurentre le code-client et le code-serveur
GWT RPC fournit une procédure automatique de sérialisation des GWT RPC fournit une procédure automatique de sérialisation des objetsobjets
Autres outils Ajax :Autres outils Ajax :
RequestBuilderRequestBuilder
RequestFactory RequestFactory
HTTPRequestHTTPRequest
FormPanelFormPanel
Support de : Support de : XMLXML
JSON (JavaScript Object Notation)JSON (JavaScript Object Notation)
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Appel de procédure à distanceAppel de procédure à distanceJ
* Source : http://www.google.com* Source : http://www.google.com
GWT offre le très utile mécanisme d'appel de procédure à distance ou RPCGWT offre le très utile mécanisme d'appel de procédure à distance ou RPC
(Remote Procedure Call), comme moyen de communiquer avec les services(Remote Procedure Call), comme moyen de communiquer avec les services
hébergés sur un serveur JEE. Client et serveur parlent alors le même langage, hébergés sur un serveur JEE. Client et serveur parlent alors le même langage, i.e. le Javai.e. le Java
Pratique! Le client et le serveur parlent le même langage (Java)Pratique! Le client et le serveur parlent le même langage (Java)
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
public class MonClientRPC implements EntryPoint {public class MonClientRPC implements EntryPoint {public void onModuleLoad() {public void onModuleLoad() {
final Button bouton = new Button("Appel RPC");final Button bouton = new Button("Appel RPC");final MonServiceAsync serviceProxy = final MonServiceAsync serviceProxy =
(MonServiceAsync)GWT.create(qc.ets.web2.gwt.client.MonService.class);(MonServiceAsync)GWT.create(qc.ets.web2.gwt.client.MonService.class); ServiceDefTarget pointService = (ServiceDefTarget) serviceProxy;ServiceDefTarget pointService = (ServiceDefTarget) serviceProxy; pointService.setServiceEntryPoint(GWT.getModuleBaseURL() + "/reponseService");pointService.setServiceEntryPoint(GWT.getModuleBaseURL() + "/reponseService");
bouton.addClickListener(new ClickListener( ) {bouton.addClickListener(new ClickListener( ) {public void onClick(Widget emetteur) {public void onClick(Widget emetteur) {
AsyncCallback maProcedureDeRappel = new AsyncCallback() { AsyncCallback maProcedureDeRappel = new AsyncCallback() { public void onSuccess(Object resultat) {public void onSuccess(Object resultat) {
MesDonneesDO resultatDO = (MesDonneesDO) resultat;MesDonneesDO resultatDO = (MesDonneesDO) resultat;System.out.println("*** SUCCES RPC ***\n" + resultatDO.getDonnees());System.out.println("*** SUCCES RPC ***\n" + resultatDO.getDonnees());
}}public void onFailure(Throwable erreur) {public void onFailure(Throwable erreur) {
System.out.println("*** ERREUR RPC ***" + erreur.getMessage());System.out.println("*** ERREUR RPC ***" + erreur.getMessage());}}
};};serviceProxy.getReponseMonService("Requete bidon", maProcedureDeRappel);serviceProxy.getReponseMonService("Requete bidon", maProcedureDeRappel);
}});}});RootPanel.get("emprise1").add(bouton);RootPanel.get("emprise1").add(bouton);
}}}}
RPC - Code-clientRPC - Code-client
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Services REST avec RequestBuilderServices REST avec RequestBuilder RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, URL.encode(url));
try {
builder.sendRequest(null, new RequestCallback() {
@Override
public void onError(Request request, Throwable exception) {
// Incapable de se connecter au serveur (Timeout, violation SOP, etc.)
}
public void onResponseReceived(Request request, Response response {
if (200 == response.getStatusCode()) {
// Traiter la réponse du serveur dans response.getText()
} else {
// Traiter une erreur de traitement du côté serveur
}
}
});
} catch (RequestException e) {
// Traiter une erreur de requête
}
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Intégration facile aux APIs GoogleIntégration facile aux APIs Google
* Source : http://www.google.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Intégration facile aux APIs GoogleIntégration facile aux APIs Google Google a un riche écosystème d'APIs en source libreGoogle a un riche écosystème d'APIs en source libre GWT-Google-APIsGWT-Google-APIs http://code.google.com/p/gwt-google-apishttp://code.google.com/p/gwt-google-apis
AppEngine: déploiement facile d'app. GWT dans le nuageAppEngine: déploiement facile d'app. GWT dans le nuage Androïd : réalisation d'applications mobiles avec GWTAndroïd : réalisation d'applications mobiles avec GWT OpenSocial : réalisation facile de gadgets avec GWTOpenSocial : réalisation facile de gadgets avec GWT Google Maps APIs : services de cartes et géolocationGoogle Maps APIs : services de cartes et géolocation Google Ajax Search APIs : le moteur Google SearchGoogle Ajax Search APIs : le moteur Google Search Google Language API : services de traductionGoogle Language API : services de traduction ......
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU – Patrons de conceptionIU – Patrons de conception
* Source Clipart : http://www.clipart.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU – Patron de conception - IU – Patron de conception - CompositeComposite
* Source : http://www.google.com* Source : http://www.google.com
Patron Composite (ou Object Composite)Patron Composite (ou Object Composite)
Facilite la création de WidgetsFacilite la création de Widgets
S'utilise chaque fois qu'on crée un nouveau widget à partir de widgets existantsS'utilise chaque fois qu'on crée un nouveau widget à partir de widgets existants
Offre un meilleur contrôle sur l'API exposéOffre un meilleur contrôle sur l'API exposé
Généralement préférable à l'utilisation de l'héritageGénéralement préférable à l'utilisation de l'héritage
* Source : http://fr.wikipedia.org/wiki/Objet_composite* Source : http://fr.wikipedia.org/wiki/Objet_composite
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU – Patron de conception - IU – Patron de conception - CompositeComposite
class MonPremierComposite extends Composite {
private VerticalPanel conteneur = new VerticalPanel();
private Label monTitre = new Label();
private TextBox maZoneTexte = new TextBox();
// Constructeur
public MonPremierComposite() {
conteneur.add(monTitre);
conteneur.add(maZoneTexte);
initWidget(conteneur);
}
}
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU – Patron de conception - IU – Patron de conception - CommandeCommandeLe patron de conception Commande (Command Pattern) encapsule dans un objet la notion d'invocation d'une Le patron de conception Commande (Command Pattern) encapsule dans un objet la notion d'invocation d'une action ou commande souvent à être invoquée à un moment ultérieur.action ou commande souvent à être invoquée à un moment ultérieur.
Le patron comporte trois parties : l'invocateur, la commande et le récepteur.Le patron comporte trois parties : l'invocateur, la commande et le récepteur.
Le patron « Commande » permet de découpler le code qui déclenche l'action (le code d'invocation) et le code Le patron « Commande » permet de découpler le code qui déclenche l'action (le code d'invocation) et le code de l'action elle-même. de l'action elle-même.
Par exemple, les différents items d'un menu sont associés chacun à une Commande et à ses arguments. Par exemple, les différents items d'un menu sont associés chacun à une Commande et à ses arguments. Ainsi, l'item de menu ignore les détails de l'action effectuée par la Commande. Aussi utilisé pour implémenter Ainsi, l'item de menu ignore les détails de l'action effectuée par la Commande. Aussi utilisé pour implémenter le « undo ».le « undo ».
<< Interface >> Commande
+ executer()
CommandeImpl
+ executer()
Invocateur
+ événement1(...)+ événement2(...)
Récepteur
+ action1(...)+ action2(...)
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU – Patron de conception - IU – Patron de conception - ObservateurObservateur
* Patron observateur relie MV et VC dans le patron MVC* Patron observateur relie MV et VC dans le patron MVC
Source figure : R. Dewsbury 2008 – Chap.2, p.96Source figure : R. Dewsbury 2008 – Chap.2, p.96
Le Modèle utilise le patron de conception Observateur (Observer Pattern) pour informer la Le Modèle utilise le patron de conception Observateur (Observer Pattern) pour informer la Vue/Contrôleur du changement des données et bien découpler la Vue du Modèle* Vue/Contrôleur du changement des données et bien découpler la Vue du Modèle*
Ainsi, différents éléments du Modèle servent de sujets ou données observables (Subjects) à Ainsi, différents éléments du Modèle servent de sujets ou données observables (Subjects) à un ensemble d'observateurs (Observers) contenus dans les Vues/Contrôleurs qui sont en un ensemble d'observateurs (Observers) contenus dans les Vues/Contrôleurs qui sont en quelque sorte abonnés aux modifications des données du modèle.quelque sorte abonnés aux modifications des données du modèle.
Programmation événementielle qui favorise un découplage des composants Programmation événementielle qui favorise un découplage des composants
Compromis entre un petit nombre d'événements généraux du genre « quelque chose » a Compromis entre un petit nombre d'événements généraux du genre « quelque chose » a changé dans le modèle (granularité grossière) et un grand nombre de petits événements changé dans le modèle (granularité grossière) et un grand nombre de petits événements reliés à des éléments très précis du modèle (granularité fine).reliés à des éléments très précis du modèle (granularité fine).
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU - Bus d'événementsIU - Bus d'événementsBus d'événements (Event Bus) : peut être vu comme Bus d'événements (Event Bus) : peut être vu comme un système téléphonique qui relie les composants de un système téléphonique qui relie les composants de l'applicationl'applicationLes composants émettent et reçoivent des Les composants émettent et reçoivent des événements (events). événements (events). Les composants peuvent réagir différemment selon le Les composants peuvent réagir différemment selon le type d'événement reçustype d'événement reçus
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU - Contrôleur de l'applicationIU - Contrôleur de l'applicationLe contrôleur de l'application (Application Controller) Le contrôleur de l'application (Application Controller) est en quelque sorte le chef d'orchestre de est en quelque sorte le chef d'orchestre de l'application.l'application.Le contrôleur de l'application contient la logique de Le contrôleur de l'application contient la logique de l'applicationl'application
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU - Patron de conception - MVPIU - Patron de conception - MVPPatron MVP : Modèle-Vue-Présentateur (Model-View-Patron MVP : Modèle-Vue-Présentateur (Model-View-Presenter) Presenter)
Modèle
Présentateur
Vue
VueVue: :
Affiche les Affiche les informations et informations et achemine les achemine les actions actions (événements) (événements) de l'usagerde l'usager
ModèleModèle: :
Données du Données du composant composant (POJOs). (POJOs).
PrésentateurPrésentateur::
Communique (reçoit / Communique (reçoit / émet) avec le reste de émet) avec le reste de l'application via le bus l'application via le bus d'événements.d'événements.
Reçoit des événements Reçoit des événements de la Vue de la Vue
Communique avec le Communique avec le serveur via des servicesserveur via des services
BusÉVÉNEMENTS
SERVICES
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU - Patron de conception - MVPIU - Patron de conception - MVPModèle-Vue-Présentation (Model-View-Presenter)Modèle-Vue-Présentation (Model-View-Presenter)Inventé par Martin Fowler et promu par GoogleInventé par Martin Fowler et promu par GoogleMeilleur « découplage »Meilleur « découplage »Plus facile de répartir le code entre développeursPlus facile de répartir le code entre développeursPlus facile à tester Plus facile à tester en remplaçant la vue par une vue en remplaçant la vue par une vue factice (MockView)factice (MockView)
Code davantage testable et maintenableCode davantage testable et maintenableLe modèle contient les données à afficherLe modèle contient les données à afficherLa vue correspond à une interface d'affichage. Les La vue correspond à une interface d'affichage. Les données envoyées à la vue sont des primitives.données envoyées à la vue sont des primitives.Certains composants sont reliés au bus d'événements Certains composants sont reliés au bus d'événements alors que d'autres sont reliés à la couche de servicesalors que d'autres sont reliés à la couche de services
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU - Patron de conception - MVPIU - Patron de conception - MVPLe présentateur travaille avec des interfaces pas des Le présentateur travaille avec des interfaces pas des implémentations (HasClickHandlers, HasValue, etc.)implémentations (HasClickHandlers, HasValue, etc.)Le présentateur contient la logique du composant d'IU. Le présentateur contient la logique du composant d'IU. Il envoie les données mise-à-jour à la vue et reçoit les Il envoie les données mise-à-jour à la vue et reçoit les valeurs modifiées par la vue. valeurs modifiées par la vue. Le présentateur reçoit également les événements Le présentateur reçoit également les événements envoyés par les autres composants de l'application et envoyés par les autres composants de l'application et il émet ses propres événements via le bus il émet ses propres événements via le bus d'événements.d'événements.Le présentateur reçoit des données du ModèleLe présentateur reçoit des données du ModèleLe présenteur et la vue associée sont couplés via une Le présenteur et la vue associée sont couplés via une Interface d'Affichage Interface d'Affichage
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU - Architecture Application MVPIU - Architecture Application MVP
Modèle
Présentateur
Vue
Modèle
Présentateur
Vue
Modèle
Présentateur
Vue
BUS D'ÉVÉNEMENTS
Contrôleur de l'Application
Service
Serveur
Service
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
DesDes applications GWT applications GWT
GWTGWTen Actionen Action
* Source Clipart : http://www.clipart.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
ZoneCours 2 / OpenSyllabus – Un exemple Québécois!ZoneCours 2 / OpenSyllabus – Un exemple Québécois!
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWTGWT – Applications mobiles multiplateformes – Applications mobiles multiplateformes
* Source : http://www.google.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWTGWT – Applications mobiles multiplateformes – Applications mobiles multiplateformes Développer pour chaque plateforme une application native ou Développer pour chaque plateforme une application native ou
développer une application multiplateforme?développer une application multiplateforme?
Si l'application n'a pas besoin d'accéder à des périphériques Si l'application n'a pas besoin d'accéder à des périphériques spécifiques, de performances « temps réel » ou le dessin 3D, il est spécifiques, de performances « temps réel » ou le dessin 3D, il est préférable de créer une application multiplateforme. préférable de créer une application multiplateforme.
Dans ce contexte, le fureteur est la plateforme et les technologies Dans ce contexte, le fureteur est la plateforme et les technologies du fureteur, comme JavaScript, HTML et CSS sont à privilégierdu fureteur, comme JavaScript, HTML et CSS sont à privilégier
La boîte à outils Ajax GWT facilite la création d'un client La boîte à outils Ajax GWT facilite la création d'un client multiplateforme sur la base d’une application web pour mobile et multiplateforme sur la base d’une application web pour mobile et d'ajouts spécifiques via les bibliothèques comme PhoneGap, mGWT d'ajouts spécifiques via les bibliothèques comme PhoneGap, mGWT et GwtMobile et GwtMobile
À long terme, extension de la norme HTML5 et l’accroissement À long terme, extension de la norme HTML5 et l’accroissement des performances des engins JavaScript des performances des engins JavaScript
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT et la mobilitéGWT et la mobilité La performance compte en mobilitéLa performance compte en mobilité
processeurs lents / réseaux lents / alimentation par batteriesprocesseurs lents / réseaux lents / alimentation par batteries
GWT est très bien positionné au niveau de la performanceGWT est très bien positionné au niveau de la performance
Gzip de HTML, CSS et JavaScript => ServletFilterGzip de HTML, CSS et JavaScript => ServletFilter
taille du codetaille du code
chargement asynchrone ou différés des scripts chargement asynchrone ou différés des scripts
usage des cachesusage des caches
usages des ressources: ClientBundles + ImageResources + CssResourcesusages des ressources: ClientBundles + ImageResources + CssResources
Division du code => GWT.runAsync()Division du code => GWT.runAsync()
Appels par lots des données => patron de conception commande + Appels par lots des données => patron de conception commande + schedulerscheduler
Mises en page « natives » & animations « natives » => CSSMises en page « natives » & animations « natives » => CSS
Source : Daniel Kurka – Google I/O 2013 – Gwt Roadmap for the Future
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT + PhoneGapGWT + PhoneGap Combinées à PhoneGap, les apps GWT roulent sur tous les téléphones et tablettesCombinées à PhoneGap, les apps GWT roulent sur tous les téléphones et tablettes
Visuel natif (look and feel)Visuel natif (look and feel)
API natives via les standards du WebAPI natives via les standards du Web
Le même code pour les téléphones, les tablettes et les ordinateurs personnelsLe même code pour les téléphones, les tablettes et les ordinateurs personnels
Les mêmes modèlesLes mêmes modèles
Les mêmes présentateurs (presenters)Les mêmes présentateurs (presenters)
Les mêmes services (RPC, REST, ...)Les mêmes services (RPC, REST, ...)
Des vues différentesDes vues différentes
Des navigations différentesDes navigations différentes
mgwt et gwt-mobile - widgets GWT pour la mobilitémgwt et gwt-mobile - widgets GWT pour la mobilité
gwt-phonegap et gwt-mobile-phonegap- des enrobage (wrapping) JSNI de la gwt-phonegap et gwt-mobile-phonegap- des enrobage (wrapping) JSNI de la bibliothèque JavaScript PhoneGap pur l'intégrer aux applications GWTbibliothèque JavaScript PhoneGap pur l'intégrer aux applications GWT
Source : Daniel Kurka – Google I/O 2013 – Gwt Roadmap for the Future
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
ZoneCours Mobile – HEC MontréalZoneCours Mobile – HEC Montréal
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWTGWT - - Avantages & inconvénientsAvantages & inconvénients
* Source Clipart : http://www.clipart.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT – AGWT – Avantages pour les utilisateursvantages pour les utilisateurs
* Source Clipart : http://www.clipart.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT – AGWT – Avantages pour les utilisateursvantages pour les utilisateurs
Réponses rapides aux actions de l'utilisateurRéponses rapides aux actions de l'utilisateur La vitesse est vitale, spécialement au démarrageLa vitesse est vitale, spécialement au démarrage Ne requiert pas de plugiciel, Flash, .Net, ni de JVMNe requiert pas de plugiciel, Flash, .Net, ni de JVM Pas de long téléchargement, ni d'installationPas de long téléchargement, ni d'installation Compatible avec tous les fureteursCompatible avec tous les fureteurs Donne la préférence aux composants natifs de l'IUDonne la préférence aux composants natifs de l'IU L'utilisateur conserve le contrôle du navigateur Web en L'utilisateur conserve le contrôle du navigateur Web en
tout tempstout temps Gestion de l'historique de navigationGestion de l'historique de navigation Produit des applications Web riches, rapides et légèresProduit des applications Web riches, rapides et légères
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
aniaqueGWT
GWTGWT – – AAvantages pour les développeursvantages pour les développeurs
* Source Clipart : http://www.clipart.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWTGWT – – AAvantages pour les développeursvantages pour les développeurs
Un unique langage, le “Java”Un unique langage, le “Java” Bien que le code-serveur peut être en n'importe quel langageBien que le code-serveur peut être en n'importe quel langage Gère les différences entre les fureteurs WebGère les différences entre les fureteurs Web Bibliothèque OO de composants IUGBibliothèque OO de composants IUG Semblable à SWING ou AWTSemblable à SWING ou AWT Encourage les bonnes pratiques du génie logiciel en s'appuyant Encourage les bonnes pratiques du génie logiciel en s'appuyant
sur des outils Java matures et performantssur des outils Java matures et performants Eclipse, NetBeans, IntelliJEclipse, NetBeans, IntelliJ Communications Ajax faciles via RPC et REST via RequestBuilderCommunications Ajax faciles via RPC et REST via RequestBuilder S'intègre aux technologies Web standardsS'intègre aux technologies Web standards Réduit la charge sur le serveur et le réseauRéduit la charge sur le serveur et le réseau Le code-client est beaucoup plus léger qu'une Applet JavaLe code-client est beaucoup plus léger qu'une Applet Java
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Qui peut le mieux profiter de GWT ?Qui peut le mieux profiter de GWT ?
J' GWT
* Source Clipart : http://www.clipart.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Designers WebDesigners Web– GWT utilise les feuilles de style CSSGWT utilise les feuilles de style CSS– Doivent apprendre JavaDoivent apprendre Java
Développeurs d'applications Web Java Développeurs d'applications Web Java – Une application GWT s'exécute sur le client plutôt que d'être contrôlée Une application GWT s'exécute sur le client plutôt que d'être contrôlée
entièrement par le serveurentièrement par le serveur– Doivent maîtriser les technologies du client riche et de présentation Doivent maîtriser les technologies du client riche et de présentation
Développeurs Ajax Développeurs Ajax (gourous JavaScript)(gourous JavaScript)
– GWT intègre facilement le code JavaScript grâce à JSNIGWT intègre facilement le code JavaScript grâce à JSNI– Doivent laisser tomber certaines habitudes du codage JS Doivent laisser tomber certaines habitudes du codage JS
Développeurs d'applications Java Développeurs d'applications Java (Swing)(Swing)– Réaliser des Web-app. avec des outils et un environnement familierRéaliser des Web-app. avec des outils et un environnement familier– Doivent apprendre CSS & les restrictions particulières des Web-app.Doivent apprendre CSS & les restrictions particulières des Web-app.
Qui peut le mieux profiter de GWT ?Qui peut le mieux profiter de GWT ?
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT - AvantagesGWT - Avantages Un seul langage: JAVA + typage statique + riche écosystèmeUn seul langage: JAVA + typage statique + riche écosystème Développement et mise au point rapide dans des EDIs favorisantDéveloppement et mise au point rapide dans des EDIs favorisant une bonne productivité et qualité du codeune bonne productivité et qualité du code Compatibilité multifureteurCompatibilité multifureteur Très bon support AjaxTrès bon support Ajax Performant & économe en ressources réseau & serveurPerformant & économe en ressources réseau & serveur Division du code aisée (code splitting), resources bundlesDivision du code aisée (code splitting), resources bundles Code JavaScript optimisé plus rapide que celui écrit à la mainCode JavaScript optimisé plus rapide que celui écrit à la main Intégration facile aux APIs de GoogleIntégration facile aux APIs de Google Code source libre, licence Apache 2, bien documentéCode source libre, licence Apache 2, bien documenté Supporté par la communauté GWT (> 100K dév.) et par GoogleSupporté par la communauté GWT (> 100K dév.) et par Google
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT - InconvénientsGWT - Inconvénients
JS
Ajax
* Source Clipart : http://www.clipart.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT - InconvénientsGWT - Inconvénients Nécessite que le fureteur exécute JavaScriptNécessite que le fureteur exécute JavaScript Connaissance de la programmation JavaConnaissance de la programmation Java Courbe d'apprentissageCourbe d'apprentissage Séparation nette entre client et serveurSéparation nette entre client et serveur Les composants (widgets) sont de sources et de qualités Les composants (widgets) sont de sources et de qualités
inégalesinégales Lenteur du transcompilateurLenteur du transcompilateur Quelques problèmes de compatibilité entre fureteurs, surtout Quelques problèmes de compatibilité entre fureteurs, surtout
au niveau des CSSau niveau des CSS L'aspect sécurité est à surveillerL'aspect sécurité est à surveiller Parfois beaucoup de code de support (boiler plate code)Parfois beaucoup de code de support (boiler plate code)
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Quand utiliser GWT?Quand utiliser GWT? Site Web traditionnel avec Ajax => jQuerySite Web traditionnel avec Ajax => jQuery Application web riche / RIA « monopage » UI complexe => GWTApplication web riche / RIA « monopage » UI complexe => GWT Application web de « type bureautique » (Desktop Like) => GWTApplication web de « type bureautique » (Desktop Like) => GWT Application mobile multiplateforme => GWT + PhoneGapApplication mobile multiplateforme => GWT + PhoneGap Application web infonuagique PaaS => GWTApplication web infonuagique PaaS => GWT Application web Application web HTML5 avec Canvas ou SVG => GWT HTML5 avec Canvas ou SVG => GWT GWT pas fait pour des pages Web ni des « Hello World! »GWT pas fait pour des pages Web ni des « Hello World! » Il existe une zone grise où le choix dépendra de la familiarité de Il existe une zone grise où le choix dépendra de la familiarité de
l'équipe avec Java vs JavaScriptl'équipe avec Java vs JavaScript
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
L'avenir de GWT...L'avenir de GWT...
* Source Clipart : http://www.clipart.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Événements récents...Événements récents... En avril 2012, une partie de l'équipe GWT basée à Atlanta a quitté En avril 2012, une partie de l'équipe GWT basée à Atlanta a quitté
Google pour démarrer une nouvelle entreprise, ce qui explique le Google pour démarrer une nouvelle entreprise, ce qui explique le ralentissement du développement de GWT en 2012.ralentissement du développement de GWT en 2012.
27 au 28 juin 2012 - 27 au 28 juin 2012 - Google I/O 2012Google I/O 2012
Une seule session sur GWTUne seule session sur GWT
Création d'un comité de pilotage (steering committee)Création d'un comité de pilotage (steering committee)
Google, Redhat, Vaadin, Sencha, Arcbees (Qc!), Jetbrains, Bizo Google, Redhat, Vaadin, Sencha, Arcbees (Qc!), Jetbrains, Bizo
GWT 2.5 : SuperDev Mode, ElementalGWT 2.5 : SuperDev Mode, Elemental Septembre 2012 – Enquête - « The Future of GWT » SurveySeptembre 2012 – Enquête - « The Future of GWT » Survey Novembre 2012 – « The Future of GWT » ReportNovembre 2012 – « The Future of GWT » Report
https://vaadin.com/gwt/report-2012/https://vaadin.com/gwt/report-2012/ 15 au 17 mai 2013 - Google I/O 201315 au 17 mai 2013 - Google I/O 2013
3 sessions sur GWT3 sessions sur GWT
nouveaux champions: Ray Cromwell, Daniel Kurka, Erik Kuefler, Thomas nouveaux champions: Ray Cromwell, Daniel Kurka, Erik Kuefler, Thomas BroyerBroyer
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Google I/O 2013 – Roadmap for the FutureGoogle I/O 2013 – Roadmap for the Future OuvertureOuverture
accès élargi aux contributions de la communautéaccès élargi aux contributions de la communauté
serveur public d'intégration continue / mavénisationserveur public d'intégration continue / mavénisation SimplicitéSimplicité
rendre GWT plus modulaire / réduire l'emploi des fichiers .gwt.xml / nettoyer le rendre GWT plus modulaire / réduire l'emploi des fichiers .gwt.xml / nettoyer le code, @Deprecatedcode, @Deprecated
VitesseVitesse
accélérer la vitesse de compilation de 50 % / accélérer le rafraîchissement du accélérer la vitesse de compilation de 50 % / accélérer le rafraîchissement du SuperDevModeSuperDevMode
continuer de réduire la taille du code / améliorer CodeSplittercontinuer de réduire la taille du code / améliorer CodeSplitter
adapter le code JavaScript aux nouveaux interpréteurs JavaScript comme V8adapter le code JavaScript aux nouveaux interpréteurs JavaScript comme V8
meilleurs outils de rapports et de profilage pour identifier les problèmes de meilleurs outils de rapports et de profilage pour identifier les problèmes de performanceperformance
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Google I/O 2013 – Roadmap for the FutureGoogle I/O 2013 – Roadmap for the Future InteropérabilitéInteropérabilité
Java <=> JavaScriptJava <=> JavaScript
intégration avec le compilateur de Closure (https://developers.google.com/closure/compiler/)intégration avec le compilateur de Closure (https://developers.google.com/closure/compiler/)
support d'applications hybrides où l'on compile du code GWT et du code issu de librairies JavaScript externessupport d'applications hybrides où l'on compile du code GWT et du code issu de librairies JavaScript externes
support de Java 7 et Java 8support de Java 7 et Java 8 FiabilitéFiabilité
régler les 100 bogues en tête de liste / améliorer les tests unitaires avec GWTrégler les 100 bogues en tête de liste / améliorer les tests unitaires avec GWT
retirer le support des vieux fureteurs, IE6,IE7,IE8retirer le support des vieux fureteurs, IE6,IE7,IE8 Modularité - capacité à « embarquer » des morceaux de GWTModularité - capacité à « embarquer » des morceaux de GWT
diviser la structure monolithique du SDK de GWT en plus petits modulesdiviser la structure monolithique du SDK de GWT en plus petits modules
davantage de points de raccrochage ("hook points") pour l'intégration avec d'autres outilsdavantage de points de raccrochage ("hook points") pour l'intégration avec d'autres outils MobilitéMobilité
support des fureteurs mobiles modernessupport des fureteurs mobiles modernes
widgets optimisés pour la mobilitéwidgets optimisés pour la mobilité
cycle de vie de l'applicationcycle de vie de l'application
support du fonctionnement hors-lignesupport du fonctionnement hors-ligne
support des magasins « Apps Stores »support des magasins « Apps Stores »
GWT 2.6 – Q4 2013GWT 3.0 – I/O 2014
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
L'avenir de GWT... c'est HTML5L'avenir de GWT... c'est HTML5À cause de HTML5, l'augmentation de l'usage et de la À cause de HTML5, l'augmentation de l'usage et de la quantité de code JavaScript va favoriser l'emploi d'outils quantité de code JavaScript va favoriser l'emploi d'outils comme GWT qui s'appuient sur Java un langage de haut comme GWT qui s'appuient sur Java un langage de haut niveau orienté objets à typage statique avec un riche niveau orienté objets à typage statique avec un riche écosystème d'outils. écosystème d'outils.
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT in Action – 2nd editionpar Robert Hanson, Adam Tacy, Jason Essington,Anna Tökke645 pagesManning Publications (7 février, 2013)www.manning.com/tacy/
Ressources - LivresRessources - Livres
Programmation GWT 2.5 : Développer des applications HTML5/JavaScript en Java avec Google Web Toolkit – 2e éditionpar Sami Jaber515 pagesEyrolles(13 septembre, 2012)www.programmationgwt2.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Ressources - LivresRessources - Livres
GWT in Practicepar Robert T. Cooper, Charlie E. Collins358 pagesManning Publications (12 mai, 2008)www.manning.com/cooper/
Google Web Toolkit Solutions : More Cool & Useful Stuffpar David Geary, Rob Gordon408 pagesPrentice Hall(17 novembre, 2007)www.coolandusefulgwt.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Ressources - LivresRessources - Livres
GWT - Créer des applications web interactives avec Google Web Toolkit (versions 1.7 et 2.0)par Olivier Gérardin205 pagesDunod(4 novembre, 2009)http://code.google.com/p/livre-gwt
Google Web Toolkit Applicationspar Ryan Dewsbury608 pagesPrentice Hall (15 décembre, 2007)www.gwtapps.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Ressources - OutilsRessources - Outils
Sites généralistes
Groupe de discussions (25 000 membres)
Socle d'application MVP - GWTP
http://code.google.com/webtoolkit/http://www.gwtproject.com
https://code.google.com/p/gwt-platform/
https://groups.google.com/forum/#!forum/google-web-toolkit