GWT (Google Web Toolkit) GWT (Google Web Toolkit) Approfondissement Approfondissement GTI-780 / MTI-780 GTI-780 / MTI-780 ETS - Montréal - 2009 ETS - Montréal - 2009 Sujets spéciaux en TI Le Web 2.0 : concepts et outils École de technologie supérieure par Claude Coulombe
Présentation dans le but d'approfondir les connaissances sur GWT dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'Ecole de technologie supérieure, Montréal, Automne 2009
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
GWT (Google Web Toolkit)GWT (Google Web Toolkit)ApprofondissementApprofondissement
Dans cette présentation vous verrez comment Dans cette présentation vous verrez comment le Google Web Toolkit (GWT) permet le le Google Web Toolkit (GWT) permet le développement rapide en Java d'applications développement rapide en Java d'applications Web 2.0 et AJAX à la fois complexes et Web 2.0 et AJAX à la fois complexes et performantes.performantes.
Conçu pour le génie logiciel Conçu pour le génie logiciel
Véritable langage de POOVéritable langage de POO
Typage statique, compilé, completTypage statique, compilé, complet
Espace de nommage, notion de paquet (Package)Espace de nommage, notion de paquet (Package)
Répandu, connu et imité!Répandu, connu et imité!
Langage le plus répandu – 6 millions de développeursLangage le plus répandu – 6 millions de développeurs
Multiplateforme - “Write Once, Run Anywhere” - Windows, Linux, OS XMultiplateforme - “Write Once, Run Anywhere” - Windows, Linux, OS X
Abondante documentation, livres et coursAbondante documentation, livres et cours
Nombreux outils et EDIsNombreux outils et EDIs
Le plus grand nombre de bibliothèques et canevas d'applicationsLe plus grand nombre de bibliothèques et canevas d'applications
Le plus grand nombre d'outils en source libre dont Java lui-mêmeLe plus grand nombre d'outils en source libre dont Java lui-même
Puissants EDIs*Puissants EDIs*
Eclipse, NetBeans ou IntelliJEclipse, NetBeans ou IntelliJ
Débogueur / éditeur de code évolué / outil de refactorisation / outil Débogueur / éditeur de code évolué / outil de refactorisation / outil d'analyse du coded'analyse du code
Pourquoi GWT ?Pourquoi GWT ? - - Si on pouvait utiliser Java!Si on pouvait utiliser Java!
Qu'est-ce que GWT ?Qu'est-ce que GWT ? En mai 2006 Google lance son Google Web ToolkitEn mai 2006 Google lance son Google Web Toolkit
Bruce Johnson & Joel WebberBruce Johnson & Joel Webber Canevas d'applications Web riches, entièrement basé Canevas d'applications Web riches, entièrement basé
Java, « orienté client » et en logiciel libre (Apache 2)Java, « orienté client » et en logiciel libre (Apache 2) Transcompilateur (cross-compiler) de Java à JavaScriptTranscompilateur (cross-compiler) de Java à JavaScript Développement rapide d'applications Web riches par Développement rapide d'applications Web riches par
des programmeurs Java qui ne maîtrisent pas des programmeurs Java qui ne maîtrisent pas JavaScript JavaScript
Bon à la fois pour enrichir des applications Web avec Bon à la fois pour enrichir des applications Web avec des composants Ajax et pour créer des applications des composants Ajax et pour créer des applications « similaires à des applications bureautiques locales » « similaires à des applications bureautiques locales » mais qui tournent dans un navigateur Webmais qui tournent dans un navigateur Web
Qu'est-ce que GWT ?Qu'est-ce que GWT ? - Du pur Java!- Du pur Java!
* EDI : environnement de développement intégré (en anglais IDE)
Plus de 6 millions de développeurs JavaPlus de 6 millions de développeurs Java ““Write Once, Run Anywhere”Write Once, Run Anywhere” Windows, Linux, Mac OS XWindows, Linux, Mac OS X Véritable langage de POOVéritable langage de POO Utilise un EDI* Java usuelUtilise un EDI* Java usuel Débogage du code-client avec EDIDébogage du code-client avec EDI Communication client-server d'objets JavaCommunication client-server d'objets Java Code-client plus léger que des applets JavaCode-client plus léger que des applets Java
GWT – Quelques exemplesGWT – Quelques exemples Lombardi Blueprint (outil de gestion des flux de travail) Lombardi Blueprint (outil de gestion des flux de travail) http://www.lombardisoftware.com/bpm-blueprint-product.phphttp://www.lombardisoftware.com/bpm-blueprint-product.php
Exemples et démos du Google Web TookitExemples et démos du Google Web Tookit
Gpokr (jeu de poker en ligne)Gpokr (jeu de poker en ligne) www.gpokr.comwww.gpokr.com
OpenSyllabus (éditeur structuré de plan de cours)OpenSyllabus (éditeur structuré de plan de cours) http://confluence.sakaiproject.org/confluence/display/OSYL/OpenSyllabus+Homehttp://confluence.sakaiproject.org/confluence/display/OSYL/OpenSyllabus+Home
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, Web Start, ni même de Ne requiert pas de plugiciel, Web Start, ni même de
JVMJVM Pas de long téléchargement, ni d'installationPas de long téléchargement, ni d'installation Compatible avec tous les fureteurs Web récentsCompatible avec tous les fureteurs Web récents 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
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 RPCCommunications Ajax faciles via RPC 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'un Applet JavaLe code-client est beaucoup plus léger qu'un Applet Java
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 Le JavaScript produit est généralement plus rapide que du JavaScript écrit à la main* que 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
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
JSNI : JavaScript Native InterfaceJSNI : JavaScript Native InterfaceGWT permet l'intégration facile avec des bibliothèques GWT permet l'intégration facile avec des bibliothèques JavaScript externes grâce à son JavaScript Native JavaScript externes grâce à son JavaScript Native Interface (JSNI)Interface (JSNI)
Interagir directement avec JavaScript (accès natif) à Interagir directement avec JavaScript (accès natif) à partir de Java et vice-versa partir de Java et vice-versa
Inclusion automatique des bibliothèques JavaScriptInclusion automatique des bibliothèques JavaScript
GWT 1.5 introduit le concept de JavaScript Overlay GWT 1.5 introduit le concept de JavaScript Overlay pour simplifier l'intégration de prototypes JavaScript pour simplifier l'intégration de prototypes JavaScript dans GWTdans GWT
JSNI : JavaScript Native InterfaceJSNI : JavaScript Native Interface GWT permet l'intégration facile avec des bibliothèques GWT permet l'intégration facile avec des bibliothèques
JavaScript externes grâce à son JavaScript Native JavaScript externes grâce à son JavaScript Native Interface (JSNI)Interface (JSNI)
Interagir directement avec JavaScript à partir de Java Interagir directement avec JavaScript à partir de Java et vice-versaet vice-versa
Inclusion automatique des bibliothèques JavaScriptInclusion automatique des bibliothèques JavaScript
// Déclaration de la méthode en Java...// Déclaration de la méthode en Java...
JSNI : Type Overlay JavaScript JSNI : Type Overlay JavaScript GWT 1.5 introduit le concept de JavaScript Overlay pour simplifier GWT 1.5 introduit le concept de JavaScript Overlay pour simplifier l'intégration de prototypes JavaScript dans GWTl'intégration de prototypes JavaScript dans GWTUne structure de données JSON (JavaScript Object Notation)Une structure de données JSON (JavaScript Object Notation)
// 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() {
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() {
PoliticienQC p = getPremierPoliticien();PoliticienQC p = getPremierPoliticien();
// Youppi! Maintenant j'ai un prototype JavaScript qui est aussi un PoliticienQC// Youppi! Maintenant j'ai un prototype JavaScript qui est aussi un PoliticienQC
Génie logiciel pour les applications Web Génie logiciel pour les applications Web riches & Ajaxriches & Ajax Support du cycle de vie complet du logicielSupport du cycle de vie complet du logiciel
Patrons de conception OO éprouvésPatrons de conception OO éprouvés
EDIs* Java maturesEDIs* Java matures
Cycle : édition / test / débogage /Cycle : édition / test / débogage /
GWT en « Mode Web » - DéploiementGWT en « Mode Web » - Déploiement
Une fois testé en « Mode Hôte », vous pouvez Une fois testé en « Mode Hôte », vous pouvez compiler votre code source Java en JavaScript compiler votre code source Java en JavaScript et déployer votre application Webet déployer votre application Web
Une application Web GWT qui a été déployée Une application Web GWT qui a été déployée est dite en « Mode Web »est dite en « Mode Web »
Une fois compilé le code-client est uniquement Une fois compilé le code-client est uniquement du pur JavaScript et du HTMLdu pur 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 production, vous déplacez les fichiers du répertoire « war » sur le serveur Web, i.e. répertoire « war » sur le serveur Web, i.e. Tomcat (ou Apache)Tomcat (ou Apache)
IU - ComposantsIU - ComposantsBalises HTML usuelles, comme img, anchor, hyperlinkBalises HTML usuelles, comme img, anchor, hyperlink
Bouton, bouton radio, bouton à bascule, case à cocherBouton, bouton radio, bouton à bascule, case à cocher
Menu, sous-menu, menu déroulantMenu, sous-menu, menu déroulant
Champ de texte, zone de texteChamp de texte, zone de texte
Onglets, liste déroulante, boîte de dialogueOnglets, liste déroulante, boîte de dialogue
Séparateurs de fenêtreSéparateurs de fenêtre
Widgets complexes comme des tables, boîte de Widgets complexes comme des tables, boîte de téléversement de fichier, widget d'arbres, éditeur de téléversement de fichier, widget d'arbres, éditeur de texte enrichi,texte enrichi,
Différents panneaux très utiles pour la dispositionDifférents panneaux très utiles pour la disposition
IU IU – Programmation par événements– Programmation par événementsEssentiellement de la programmation par événementsEssentiellement de la programmation par événements
Une 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 (Listener un ou plusieurs gestionnaires d'événements (Listener ou Handler) qui peuvent comporter des paramètres ou Handler) qui peuvent comporter des paramètres
IU – Exemples d'IU – Exemples d'événementsévénements OnClick OnClick – déclenché quand l'usager clique un élément– déclenché quand l'usager clique un élément
OnBlur OnBlur – déclenché quand un élément perd le focus du clavier– déclenché quand un élément perd le focus du clavier
OnChange OnChange - déclenché quand le contenu de la saisie change- déclenché quand le contenu de la saisie change
OnFocus OnFocus – déclenché quand un élément reçoit le focus clavier– déclenché quand un élément reçoit le focus clavier
OnKeyDownOnKeyDown – déclenché quand l'usager appuie sur une touche – déclenché quand l'usager appuie sur une touche
OnKeyUp OnKeyUp – déclenché quand l'usager relâche une touche – déclenché quand l'usager relâche une touche
OnKeyPress OnKeyPress – déclenché quand un caractère est généré– déclenché quand un caractère est généré
OnMouseOver –OnMouseOver – déclenché quand la souris passe au-dessus déclenché quand la souris passe au-dessus
OnMouseMove –OnMouseMove – déclenché quand la souris entre dans la zone déclenché quand la souris entre dans la zone
OnMouseOutOnMouseOut – déclenché quand la souris sort de la zone – déclenché quand la souris sort de la zone
OnScroll OnScroll – déclenché quand un élément avec défilement bouge– déclenché quand un élément avec défilement bouge
OnLoadOnLoad – déclenché quand un élément termine de se charger – déclenché quand un élément termine de se charger
OnDblClickOnDblClick – déclenché quand l'usager double-clique– déclenché quand l'usager double-clique
IU – IU – Récepteur / gestionnaire d'événementsRécepteur / gestionnaire d'événements GWT utilise le concept de récepteur ou gestionnaire (« GWT utilise le concept de récepteur ou gestionnaire («
listener interface ») pour traiter les événementslistener interface ») pour traiter les événements
Semblable à d'autres canevas d'applications Semblable à d'autres canevas d'applications graphiques comme SWINGgraphiques comme SWING
Le récepteur via l'interface “listener interface” définit Le récepteur via l'interface “listener interface” définit une ou plusieurs méthodes que le widget appelle en une ou plusieurs méthodes que le widget appelle en réaction à un événementréaction à un événement
Button unBouton = new Button("Cliquez moi!");Button unBouton = new Button("Cliquez moi!"); unBouton.addClickListener(new ClickListener() {unBouton.addClickListener(new ClickListener() { public void onClick(Widget emetteur) {public void onClick(Widget emetteur) { // traitement du Clic// traitement du Clic }} });});
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 d'entrée de mot de passe (zone d'entrée de mot de passe (PasswordTextBoxPasswordTextBox), zone de texte multiligne (), zone de texte multiligne (TextAreaTextArea), ), zone d'édition de texte enrichi (zone 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 ((HorizontalSplitPanelHorizontalSplitPanel, , VerticalSplitPanelVerticalSplitPanel), panneau HTML (), panneau HTML (HTMLPanelHTMLPanel), panneau ), panneau superposé (superposé (DeckPanelDeckPanel))
Panneaux de disposition complexe : table flexible* (Panneaux de disposition complexe : table flexible* (FlexTableFlexTable), grille (), grille (GridGrid), panneau ), panneau polyptyque* (DockPanel)polyptyque* (DockPanel),, panneau à onglets ( panneau à onglets (TabPanelTabPanel), panneau en pile (), panneau en pile (StackPanelStackPanel))
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))
Interface Utilisateur – Interface Utilisateur – Boîte de texteBoîte de texte• Boîte de texte (TextBox)Boîte de texte (TextBox) TextBox zoneSaisie = new TextBox();TextBox zoneSaisie = new TextBox();
// Interdire la saisie de texte non numérique// Interdire la saisie de texte non numérique
Interface Utilisateur – Interface Utilisateur – Liste déroulanteListe déroulante• Liste déroulante (ListBox)Liste déroulante (ListBox) // Créer une liste, et lui ajouter quelques items// Créer une liste, et lui ajouter quelques items
ListBox listeChoix = new ListBox();ListBox listeChoix = new ListBox();
Interface Utilisateur – Interface Utilisateur – Éditeur de textesÉditeur de textesÉditeur de textes riche (RichTextArea)Éditeur de textes riche (RichTextArea)
// Crée la zone d'édition et sa barre de menu// Crée la zone d'édition et sa barre de menu
RichTextArea editeur = new RichTextArea();RichTextArea editeur = new RichTextArea();
Sé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”);}}
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 (ex. Note : Ne pas utiliser les CSS pour la disposition (ex.
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 (« Deferred Binding ») pour générer une version différente de l'application Web pour chaque langue différente de l'application Web pour chaque langue
Par exemple, puisque GWT supporte 4 navigateurs Par exemple, puisque GWT supporte 4 navigateurs différents, si votre application doit fonctionner en différents, si votre application doit fonctionner en 3 langues, le transcompilateur de GWT produira 3 langues, le transcompilateur de GWT produira 12 versions différentes de votre application au 12 versions différentes de votre application au moment de la compilation moment de 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
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
Gestion de l'historique du navigateurGestion de l'historique du navigateur La gestion de l'historique du navigateur s'occupe des La gestion de l'historique du navigateur s'occupe des
boutons « avancer » et « reculer » et des liensboutons « avancer » et « reculer » et des liens Une API simple de gestion de l'historique basée sur Une API simple de gestion de l'historique basée sur
une pile de jetonsune pile de jetons– 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 pileVous 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 Vous pouvez aussi réagir aux événements “History events” en utilisant un HistoryListenerevents” en utilisant un HistoryListener
GUI – Patrons de conception - MVCGUI – Patrons de conception - MVCPatron MVCPatron MVC
Client MVCClient MVC
VV CC
VueVue: :
Affiche les Affiche les informations et informations et achemine les achemine les actions de l'usageractions de l'usager
ContrôleurContrôleur::
Établit les liens Établit les liens entre le Modèle et entre le Modèle et la Vuela Vue
Reçoit les Reçoit les événements de la événements de la Vue et gère les Vue et gère les actions de l'usager actions de l'usager
accès en lecture aux
accès en lecture aux
donnéesdonnées
notification
notification
événementsévénements
mise à
jour
mise à
jour
chan
gemen
t des
donn
ées
chan
gemen
t des
donn
ées
Échages de Échages de donnéesdonnées
Présentation découpléePrésentation découplée
mise à jourmise à jour
MM
ModèleModèle: :
Données de l'application Données de l'application (POJOs) Notifie les (POJOs) Notifie les changements du modèle changements du modèle par des événements par des événements transmis aux vues transmis aux vues abonnées abonnées
GUI – Patrons de conception - GUI – Patrons 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).
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
En mode asynchrone, l'exécution dans le fureteur sur le poste client se poursuit sans attendre la réponse du Serveur. La réponse sera traitée par une fonction de retour (Callback) quand elle arrivera. L'état de la requête est donné par l'attribut readyState de l'objet XMLHttpRequest.
En mode synchrone, le fureteur est gelé en attendantla réponse du serveur.
Communication avec le serveur & AjaxCommunication avec le serveur & Ajax
Le RPC (« Remote Procedure Call »), appel de procédure à Le RPC (« Remote Procedure Call »), appel de procédure à distancedistance
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
Fournit une procédure automatique de sérialisation des objetsFournit une procédure automatique de sérialisation des objets
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)
public class MesDonneesDO implements IsSerializable {public class MesDonneesDO implements IsSerializable {
//...//...
}}
Un objet Java MesDonneesDO à échangerUn objet Java MesDonneesDO à échanger
Une deuxième interface dite asynchrone spécifie getReponseMonservice( ) mais avec un paramètre Une deuxième interface dite asynchrone spécifie getReponseMonservice( ) mais avec un paramètre supplémentaire sous la forme d'une procédure de rappel (« Callback ») que le code-client utilisera pour supplémentaire sous la forme d'une procédure de rappel (« Callback ») que le code-client utilisera pour appeler le service. appeler le service.
Une première interface définit le serviceUne première interface définit le serviceimport com.google.gwt.user.client.rpc.RemoteService;import com.google.gwt.user.client.rpc.RemoteService;
Return true; // à modifierReturn true; // à modifier}}
}}
Classe à implémenter du côté serveur hérite de Classe à implémenter du côté serveur hérite de com.google.gwt.user.server.rpc.RemoteServiceServletcom.google.gwt.user.server.rpc.RemoteServiceServlet
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 =
Le client n'est pas encore connecté au service. Nous pouvons faire cela en ajoutant un Le client n'est pas encore connecté au service. Nous pouvons faire cela en ajoutant un récepteur (Listener) à un élément de l'interface, ce qui peut être fait avec une classe interne.récepteur (Listener) à un élément de l'interface, ce qui peut être fait avec une classe interne.
Intégration facile aux APIs GoogleIntégration facile aux APIs Google Google offre un riche écosystème d'APIs en source Google offre un riche écosystème d'APIs en source
librelibre Androïd : plateforme Java en source libre pour la Androïd : plateforme Java en source libre pour la
téléphonie intelligentetéléphonie intelligente AppEngine : hébergement d'applications Java dans le AppEngine : hébergement d'applications Java dans le
nuagenuage OpenSocial : norme libre pour les sites sociauxOpenSocial : norme libre pour les sites sociaux Google Maps : services de cartes et géolocationGoogle Maps : services de cartes et géolocation Google Ajax Searh APIs : le moteur Google SearchGoogle Ajax Searh APIs : le moteur Google Search Google Gears API : BD locale et navigation hors ligneGoogle Gears API : BD locale et navigation hors ligne Google Language API : services de traductionGoogle Language API : services de traduction YouTube widget ?YouTube widget ?
Créer un squelette d'application GWTCréer un squelette d'application GWT
G G W W TT
GWT crée automatiquement un code-client GWT crée automatiquement un code-client rudimentairerudimentaire
Vous pouvez ensuite mettre de la chair sur ce Vous pouvez ensuite mettre de la chair sur ce squelette dans le but de créer une application Web squelette dans le but de créer une application Web plus sophistiquéeplus sophistiquée
GWT permet d'ajouter des composants graphiques GWT permet d'ajouter des composants graphiques interactifs dans une page Webinteractifs dans une page Web
Un composant GWT peut être intégré dans n'importe Un composant GWT peut être intégré dans n'importe quelle page HTML, ainsi l'application continue à quelle page HTML, ainsi l'application continue à ressembler à une page Webressembler à une page Web
Tout fichier HTML incluant un certain jeu de balises Tout fichier HTML incluant un certain jeu de balises peut servir de support à une application GWTpeut servir de support à une application GWT
GWT ne cherche pas exclusivement à ressembler à GWT ne cherche pas exclusivement à ressembler à une application bureautique en exécution localeune application bureautique en exécution locale
Le résultat est juste une meilleure application WebLe résultat est juste une meilleure application Web Exemple : application d'ouverture de session (login)Exemple : application d'ouverture de session (login)
Créer des applications Web similaires à Créer des applications Web similaires à des applications bureautiques localesdes applications bureautiques locales
Ouverture de plusieurs fenêtres à la fois dans le Ouverture de plusieurs fenêtres à la fois dans le navigateurnavigateur
Déplacement des fenêtres dans le navigateur, Déplacement des fenêtres dans le navigateur, redimensionnement et défilement des fenêtresredimensionnement et défilement des fenêtres
Glisser et déposer des contenusGlisser et déposer des contenus Applications Web se comportant « comme des Applications Web se comportant « comme des
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 Développeurs d'applications Web – Une application GWT s'exécute sur le client plutôt que d'être Une application GWT s'exécute sur le client plutôt que d'être
contrôlée entièrement par le serveurcontrôlée entièrement par le serveur
– Doivent maîtriser les technologies du client et de présentation Doivent maîtriser les technologies du client et de présentation
– 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 JavaDéveloppeurs d'applications Java– 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 ?
Facilitent beaucoup la programmation JavaScript mais ça reste du JavaScript!Facilitent beaucoup la programmation JavaScript mais ça reste du JavaScript!
JavaServer FacesJavaServer Faces -- Norme JEE, canevas d'applications Web populaire, basé Norme JEE, canevas d'applications Web populaire, basé sur le serveur, plutôt complexe sur le serveur, plutôt complexe
JavaFXJavaFX - - Trop tôt pour se prononcer, exige JVM, langage à scriptTrop tôt pour se prononcer, exige JVM, langage à script
Java AppletJava Applet - - TTrop lourd, exige JVM, doivent beaucoup s'améliorer rop lourd, exige JVM, doivent beaucoup s'améliorer
ZKZK -- Rapide et facile à programmer, basé sur le serveur, licence GPL Rapide et facile à programmer, basé sur le serveur, licence GPL
Adobe Flash, Flex, AIRAdobe Flash, Flex, AIR (Adobe Integrated Runtime) (Adobe Integrated Runtime) et OpenLazslo et OpenLazslo
Basé sur le serveur, +/- propriétaire, exige plugiciel Flash, langage à scriptsBasé sur le serveur, +/- propriétaire, exige plugiciel Flash, langage à scripts
Micro$oft SilverlightMicro$oft Silverlight -- Pas Java, propriétaire & basé Windows Pas Java, propriétaire & basé Windows
Windows...Volta, 5 décembreWindows...Volta, 5 décembre 2007, une copie 2007, une copie GWT pour .NETGWT pour .NEThttp://labs.live.com/voltahttp://labs.live.com/volta
RubyRuby - - Innovateur, mais toujours à base de pages et basé sur le serveur..Innovateur, mais toujours à base de pages et basé sur le serveur..
GWT vs autres solutions Web richeGWT vs autres solutions Web riche
GWT - InconvénientsGWT - Inconvénients Nécessite que le fureteur exécute JavaScriptNécessite que le fureteur exécute JavaScript Exige la connaissance de la programmation JavaExige la connaissance de la programmation Java Exige une séparation nette client et serveurExige une séparation nette client et serveur Les composants (Widgets) sont de sources et de Les composants (Widgets) sont de sources et de
qualités inégalesqualités inégales Dépend des performances du transcompilateurDépend des performances du transcompilateur Quelques problèmes de compatibilité entre les Quelques problèmes de compatibilité entre les
fureteurs Web, surtout au niveau des CSSfureteurs Web, surtout au niveau des CSS Certains problèmes demandent une expertise JSCertains problèmes demandent une expertise JS L'aspect sécurité est à surveillerL'aspect sécurité est à surveiller GWT ne va pas résoudre « magiquement » tous les GWT ne va pas résoudre « magiquement » tous les
problèmes avec Ajax ou le Web 2.0problèmes avec Ajax ou le Web 2.0