SlideShare une entreprise Scribd logo
1  sur  98
Télécharger pour lire hors ligne
GWT (Google Web Toolkit)
                Approfondissement

                         Sujets spéciaux en TI
                    Le Web 2.0 : concepts et outils
                    École de technologie supérieure
                                  par

                           Claude Coulombe



GTI-780 / MTI-780                                     ETS - Montréal - 2009
But

Dans cette présentation vous verrez comment
le Google Web Toolkit (GWT) permet le
développement rapide en Java d'applications
Web 2.0 et AJAX à la fois complexes et
performantes.



                    http://code.google.com/webtoolkit/



GTI-780 / MTI-780                                        ETS - Montréal - 2009
Pourquoi GWT ? - Problèmes avec JavaScript

                                     Euh!..., il ne connaissait pas
                                       assez le JavaScript...




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Pourquoi GWT ? - Problèmes avec JavaScript
 Problèmes de portabilité, incompatibilités des fureteurs, fuites de
 mémoire & longs chargements

 Pas de typage statique des variables en JavaSript

 Le type d'une variable peut changer lorsqu'une nouvelle valeur lui est
 affectée (typage dynamique). var unNombre = 2; unNombre = "deux";

 Sensible à la moindre coquille, sensible à la casse

   formulaire.montnat = document.getElementById(''montant'');

 Quelques subtilités : null vs undefined vs false vs ""

 Débogage à l'exécution pas à la compilation

 Support inégal des outils et IDEs

 Problème de sécurité XSS (injection de scripts)

 Rareté des « programmeurs experts » en JavaScript

GTI-780 / MTI-780                                            ETS - Montréal - 2009
Pourquoi GWT ? - JS pas conçu pour de gros logiciels




                     Made in
                             Jav        aScript




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Pourquoi GWT ? - JS pas conçu pour de gros logiciels

 Excellente pour l'écriture rapide de petites applications, la souplesse de
JavaScript devient un handicap pour l'écriture de gros logiciels et de
logiciels complexes

 Le typage dynamique représente une source importante d'erreurs pour de
gros logiciels

 Pas d'espace de nommage (collision de variables), manque de modularité
et de capacité à grandir, pas un véritable langage à objets

 Mise au point et réutilisation difficiles

 Normal, car JS n'a pas été conçu pour de gros logiciels, mais juste pour
mettre un peu d'interactivité dans une page web

 On peut voir le JavaScript comme le langage d'assemblage (assembleur)
du fureteur

GTI-780 / MTI-780                                             ETS - Montréal - 2009
Pourquoi GWT ? - Si on pouvait utiliser Java!




                    * Source Clipart : http://www.clipart.com
GTI-780 / MTI-780     * Source image : http://www.sun.com       ETS - Montréal - 2009
Pourquoi GWT ? - Si on pouvait utiliser Java!
 Conçu pour le génie logiciel
    Véritable langage de POO
    Typage statique, compilé, complet
    Espace de nommage, notion de paquet (Package)
 Répandu, connu et imité!
    Langage le plus répandu – 6 millions de développeurs
    Multiplateforme - “Write Once, Run Anywhere” - Windows, Linux, OS X
 Abondante documentation, livres et cours
 Nombreux outils et EDIs
    Le plus grand nombre de bibliothèques et canevas d'applications
    Le plus grand nombre d'outils en source libre dont Java lui-même
 Puissants EDIs*
    Eclipse, NetBeans ou IntelliJ
    Débogueur / éditeur de code évolué / outil de refactorisation / outil
    d'analyse du code
GTI-780 / MTI-780                                             ETS - Montréal - 2009
GWT – Un « beau truc! »


                                                                              AJAX
             GWT =
                                                                                    +
                                                                      Génie logiciel
GTI-780 / MTI-780 * Source : http://www.google.com, http://www.sun.com, htttp://www.clipart.com ETS - Montréal - 2009
Qu'est-ce que GWT ?
   En mai 2006 Google lance son Google Web Toolkit
    Bruce Johnson & Joel Webber
   Canevas d'applications Web riches, entièrement basé
    Java, « orienté client » et en logiciel libre (Apache 2)
   Transcompilateur (cross-compiler) de Java à JavaScript
   Développement rapide d'applications Web riches par
    des programmeurs Java qui ne maîtrisent pas
    JavaScript
   Bon à la fois pour enrichir des applications Web avec
    des composants Ajax et pour créer des applications
    « similaires à des applications bureautiques locales »
    mais qui tournent dans un navigateur Web

GTI-780 / MTI-780                                 ETS - Montréal - 2009
Qu'est-ce que GWT ? - Du pur Java!
   Plus de 6 millions de développeurs Java
   “Write Once, Run Anywhere”
   Windows, Linux, Mac OS X
   Véritable langage de POO
   Utilise un EDI* Java usuel
   Débogage du code-client avec EDI
   Communication client-server d'objets Java
   Code-client plus léger que des applets Java

    * EDI : environnement de développement
      intégré (en anglais IDE)




GTI-780 / MTI-780                * Source image : http://www.sun.com   ETS - Montréal - 2009
GWT – Quelques exemples
   Lombardi Blueprint (outil de gestion des flux de travail)
    http://www.lombardisoftware.com/bpm-blueprint-product.php
   Exemples et démos du Google Web Tookit
    http://code.google.com/intl/fr-FR/webtoolkit/examples/

   GWT-Ext 2.0 Showcase
    http://www.gwt-ext.com/demo/
   Google Web Toolkit Applications        (site d'un livre)

     Widget DeskTop Demo
     http://desktop.gwtapps.com
   Gpokr (jeu de poker en ligne)
    www.gpokr.com
   OpenSyllabus (éditeur structuré de plan de cours)
    http://confluence.sakaiproject.org/confluence/display/OSYL/OpenSyllabus+Home


GTI-780 / MTI-780                                               ETS - Montréal - 2009
Google Wave – Un exemple qui fait des vagues!




  Source : http://googleblog.blogspot.com/2009/05/went-walkabout-brought-back-google-wave.html

GTI-780 / MTI-780                                                                 ETS - Montréal - 2009
OpenSyllabus – Un exemple Québécois!
OpenSyllabus : un éditeur structuré de plan de cours




            http://confluence.sakaiproject.org/confluence/display/OSYL/OpenSyllabus+Home
GTI-780 / MTI-780                                                                   ETS - Montréal - 2009
Planificateur d'horaire – GWT à l'ETS!




                    http://planhoraire.aeets.com/planhoraire.html
GTI-780 / MTI-780                                                   ETS - Montréal - 2009
GWT – Avantages pour les utilisateurs




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
GWT – Avantages pour les utilisateurs
   Réponses rapides aux actions de l'utilisateur
   La vitesse est vitale, spécialement au démarrage
   Ne requiert pas de plugiciel, Web Start, ni même de
    JVM
   Pas de long téléchargement, ni d'installation
   Compatible avec tous les fureteurs Web récents
   Donne la préférence aux composants natifs de l'IU
   L'utilisateur conserve le contrôle du navigateur Web en
    tout temps
   Gestion de l'historique de navigation
   Produit des applications Web riches, rapides et légères

GTI-780 / MTI-780                               ETS - Montréal - 2009
GWT – Avantages pour les développeurs




                    aniaque
                    GWT




GTI-780 / MTI-780    * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
GWT – Avantages pour les développeurs
   Un unique langage, le “Java”
   Bien que le code-serveur peut être en n'importe quel langage
   Gère les différences entre les fureteurs Web
   Bibliothèque OO de composants IUG
   Semblable à SWING ou AWT
   Encourage les bonnes pratiques du génie logiciel en s'appuyant
    sur des outils Java matures et performants
   Eclipse, NetBeans. IntelliJ
   Communications Ajax faciles via RPC
   S'intègre aux technologies Web standards
   Réduit la charge sur le serveur et le réseau
   Le code-client est beaucoup plus léger qu'un Applet Java


GTI-780 / MTI-780                                      ETS - Montréal - 2009
Comprendre GWT



             GWT


GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Application GWT – Client & Serveur
                                                   Le code-serveur (en Java ou
                                                   tout autre langage) s'exécute
                                                   sur le serveur.

                                                   L'application Web utilise le
                                                   serveur pour charger ou
                                                   sauvegarder des données.




                                                    Le code-client en JavaScript
                                                    est transmis sur le réseau
                                                    vers un ordinateur-client, où
                                                    il s'exécute dans un logiciel
                                                    de navigation Web


GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com        ETS - Montréal - 2009
Transcompilateur Java à JavaScript
                                                                       GWT version 1.5 supporte :
                                                                       * Firefox 1.0, 1.5, 2, 3.x
                    Java                                               * Internet Explorer 6, 7, 8
                                                                       * Safari 2.0, 3.0
                                                                       * Opera 9.0




Write Once...
                                                  JavaScript




                     Run Everywhere!
GTI-780 / MTI-780          * Source Clipart : http://www.clipart.com             ETS - Montréal - 2009
Transcompilateur Java à JavaScript
  Transcompilateur GWT prend du code-client en Java et
  produit du code JavaScript optimisé
  JavaScript devient le code assembleur du fureteur
  Élimination du code non-utilisé dans les bibliothèques,
  inférence de type, retrait du polymorphisme,
  compression “agressive” du code, « Obfuscation »
  Le JavaScript produit est généralement plus rapide
  que du JavaScript écrit à la main*
  Emploi de la liaison différée (“Deferred Binding”) pour
  produire du code JavaScript optimal pour chaque
  fureteur (i.e. génère du code spécifique à chaque
  fureteur)
  « Ne payez que pour ce que vous utilisez »
GTI-780 / MTI-780   * Note : sauf si code < 100 lignes   ETS - Montréal - 2009
Transcompilateur- Liaison différée
 Générer du code optimal et spécifique à chaque fureteur




                                        Copyright Google 2008




                    « Ne payez que pour ce que vous utilisez »
GTI-780 / MTI-780             * Source : http://www.google.com   ETS - Montréal - 2009
Client léger HTML vs client riche Ajax




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Transcompilateur – Code optimisé!




                                                                   Copyright Google 2008



                    « Ne payez que pour ce que vous utilisez »


GTI-780 / MTI-780               * Source : http://www.google.com                     ETS - Montréal - 2009
GWT – Structure bibliothèque & API




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Vue d'ensemble de l'architecture GWT
                                            Trans
                                         compilateur
                              Interface     Java à   Bibliothèque
                                Native    JavaScript d'émulation
                              JavaScript                  JRE
                                 JSNI




                                          GWT API

               Bibliothèque
                            Communication
                    IUG     avec le serveur
                                              Analyseur   Gestion de     Intégration
                Widgets & RPC & Ajax            XML       l'historique      à JUnit
                  Panels




GTI-780 / MTI-780                                                                  ETS - Montréal - 2009
GWT – Structure bibliothèque & API
  La structure du gwt-user.jar de GWT 1.5.3                              Note : Transcompilateur GWT
                                                            Trans
                                                                            dans gwt-dev-windows.jar
                                                          compilateur
                                          Interface         Java à      Bibliothèque
                                            Native         JavaScript   d'émulation
                                         JavaScript
                                                                            JRE
                                             JSNI




                                                      GWT API



                         Bibliothèque
                                        Communication
                             IUG                          Analyseur     Gestion de     Intégration
                                        avec le serveur
                          Widgets &                          XML        l'historique      à JUnit
                                         RPC & Ajax
                           Panels


GTI-780 / MTI-780                                                                 ETS - Montréal - 2009
Transcompilateur Java à JavaScript

       Code Java
        MonProjet
           .java                                                               Code
                                                                             JavaScript
                                                                           MonProjet.js
        Ressources
     MonProjet. html
     MonProjet.css,
                                                                          RessourcesMonPr
      .png, .jpg, .gif
                                        Transcompilateur                        ojet.
                                                                                html
                                                                           MonProjet.css,
      Configuration                                                        .png, .jpg, .gif

         Module
      MonProjet.gwt
           .xml

                                                            Autres .jar
                                           Gwt-dev-
                         gwt-user.jar                      Compatibles
                                          windows.jar
                                                           avec GWT




GTI-780 / MTI-780                                                          ETS - Montréal - 2009
Transcompilateur Java à JavaScript
   Du JavaScript plus rapide que du code écrit à la main !!!
Ainsi, ceci
public static void onModuleLoad() {
    Button b = (new Button()).Button();
    b.setText("Java vers JavaScript");

}



après compilation, donnera quelque chose comme cela...
function onModuleLoad(){
    var b;
    b = $Button(new Button());
    $setInnerText(b.element, 'Java vers JavaScript');

}
GTI-780 / MTI-780                                       ETS - Montréal - 2009
Emulation – JRE (Java Runtime Environment)
  Le transcompilateur de GWT fournit l'émulation en
  JavaScript d'un sous-ensemble du langage Java (JRE)
  généralement utilisé pour la programmation de base
  java.lang, java.util, java.io, java.sql
  Restriction pour le code client
  devant être traduit en JavaScript.
  Aucune restriction n'est imposée
  du côté du code serveur : Java
  (JSP/JSF/Servlet), PHP,
  ASP .NET, Perl, RoR, Python, Perl, ...



GTI-780 / MTI-780   * Source image : http://www.sun.com   ETS - Montréal - 2009
JSNI : JavaScript Native Interface
  GWT permet l'intégration facile avec des bibliothèques
  JavaScript externes grâce à son JavaScript Native
  Interface (JSNI)
  Interagir directement avec JavaScript (accès natif) à
  partir de Java et vice-versa
  Inclusion automatique des bibliothèques JavaScript
  GWT 1.5 introduit le concept de JavaScript Overlay
  pour simplifier l'intégration de prototypes JavaScript
  dans GWT




GTI-780 / MTI-780                             ETS - Montréal - 2009
JSNI : JavaScript Native Interface
   GWT permet l'intégration facile avec des bibliothèques
    JavaScript externes grâce à son JavaScript Native
    Interface (JSNI)
   Interagir directement avec JavaScript à partir de Java
    et vice-versa
   Inclusion automatique des bibliothèques JavaScript

    // Déclaration de la méthode en Java...
    native String inverserNomPrenom(String nom)
    /*-{
      // Implémentation en JavaScript
      var re = /(w+)s(w+)/;
      return name.replace(re, '$2, $1');
    }-*/;
GTI-780 / MTI-780                                 ETS - Montréal - 2009
JSNI : Type Overlay JavaScript
GWT 1.5 introduit le concept de JavaScript Overlay pour simplifier
l'intégration de prototypes JavaScript dans GWT
Une structure de données JSON (JavaScript Object Notation)
var electionsJSON = [

 { "Prenom" : "Pauline", "NomFamille" : "Marois" }, { "Prenom" : "Amir", "NomFamille" : "Khadir" },

 { "Prenom" : "Mario", "NomFamille" : "Dumont" }, { "Prenom" : "Jean", "NomFamille" : "Charest" }

];

// Un type Overlay JavaScript
class PoliticienQC extends JavaScriptObject {
     // Un type Overlay JS a toujours un constructeur protected, à zéro argument
     protected PoliticienQC() { }
     // Les méthodes dans un Overlay JavaScript sont en JSNI
     public final native String getPrenom() /*-{ return this.Prenom; }-*/;
     public final native String getNomFamille() /*-{ return this.NomFamille; }-*/;
     // Notez, toutefois, que toutes les méthodes ne sont pas obligatoirement en JSNI
     public final String getNomComplet() {
         return getPrenom() + " " + getNomFamille();
     }
}

GTI-780 / MTI-780                     * Source : http://googlewebtoolkit.blogspot.com                 ETS - Montréal - 2009
JSNI : Type Overlay JavaScript
// Obtenir un prototype JavaScript pour l'Overlay
class MonModuleEntryPoint implements EntryPoint {
    public void onModuleLoad() {
        PoliticienQC p = getPremierPoliticien();
        // Youppi! Maintenant j'ai un prototype JavaScript qui est aussi un PoliticienQC
        Window.alert("Bonjour, " + p.getPrenom());
    }


    // Utilisation de JSNI pour obtenir le prototype JSON que nous désirons
    // Le prototype JSON object reçoit un type Java implicitement
    // en se basant sur le type retourné par la méthode
    private native PoliticienQC getPremierPoliticien() /*-{
        // Obtenir une référence au premier PoliticienQC dans le tableau JSON
        return $wnd.electionsJSON[0];
    }-*/;
}




GTI-780 / MTI-780                      * Source : http://googlewebtoolkit.blogspot.com     ETS - Montréal - 2009
Génie logiciel pour les applications Web
riches & Ajax
    Support du cycle de vie complet du logiciel
    Patrons de conception OO éprouvés
    EDIs* Java matures
    Cycle : édition / test / débogage /
    Restructuration (refactoring)
    Support au débogage
    Détection d'erreurs à la compilation
    Mise au point & débogage en mode hôte
    Journalisation (logging)
    Support de JUnit

    * EDI : environnement de développement
      intégré (en anglais IDE)




GTI-780 / MTI-780                 * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Intégration à Eclipse




GTI-780 / MTI-780       ETS - Montréal - 2009
Intégration à Eclipse – Mode Hôte




GTI-780 / MTI-780               ETS - Montréal - 2009
GWT en « mode hôte » - Débogage
  Application GWT peut s'exécuter en « mode
  hôte » (“Hosted Mode”)
  En « mode hôte », la JVM exécute le code GWT
  comme du bytecode Java à l'intérieur d'une
  fenêtre de navigateur Web
  L'exécution en « mode hôte » facilite le
  débogage :
    Éditer le code-source
    Rafraîchir
    Examiner les résultats
GTI-780 / MTI-780                       ETS - Montréal - 2009
Structure d'un projet GWT
                                       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
GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com                   ETS - Montréal - 2009
Intégration à Eclipse – débogueur




GTI-780 / MTI-780               ETS - Montréal - 2009
GWT en « Mode Web » - Déploiement
 Une  fois testé en « Mode Hôte », vous pouvez
  compiler votre code source Java en JavaScript
  et déployer votre application Web
 Une  application Web GWT qui a été déployée
  est dite en « Mode Web »
 Une fois compilé le code-client est uniquement
  du pur JavaScript et du HTML
 Afinde déployer votre application Web en
  production, vous déplacez les fichiers du
  répertoire « war » sur le serveur Web, i.e.
  Tomcat (ou Apache)
GTI-780 / MTI-780                      ETS - Montréal - 2009
Vue d'ensemble de la bibliothèque de
composants d'interface utilisateur (IU)
  Composants d'interface-utilisateur
  Programmation par événements
  Exemples d'événements
  Gestion des événements
  Panneaux
  Bouton simple
  Case à cocher
  Bouton radio
  Boîte de texte
  Liste déroulante
  Arbre
  Éditeur de textes
  Support des CSS
  I18N
  Gestion de l'historique

GTI-780 / MTI-780           * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
IU - Composants
  Balises HTML usuelles, comme img, anchor, hyperlink
  Bouton, bouton radio, bouton à bascule, case à cocher
  Menu, sous-menu, menu déroulant
  Champ de texte, zone de texte
  Onglets, liste déroulante, boîte de dialogue
  Séparateurs de fenêtre
  Widgets complexes comme des tables, boîte de
  téléversement de fichier, widget d'arbres, éditeur de
  texte enrichi,
  Différents panneaux très utiles pour la disposition


GTI-780 / MTI-780                                ETS - Montréal - 2009
IU – Programmation par événements
  Essentiellement de la programmation par événements
  Une méthode ou procédure s'exécute quand un
  événement est déclenché
  Dans une IU, un événement est déclenché chaque fois
  que l'utilisateur clique sur la souris, appuie sur une
  touche du clavier, sélectionne un élément dans un
  menu, ouvre ou ferme une fenêtre, etc.
  À chaque composant de l'IU appelé aussi contrôle ou
  widget (comme un bouton, un menu, etc.) est associé
  un ou plusieurs gestionnaires d'événements (Listener
  ou Handler) qui peuvent comporter des paramètres



GTI-780 / MTI-780                            ETS - Montréal - 2009
IU – Exemples d'événements
 OnClick – déclenché quand l'usager clique un élément
 OnBlur – déclenché quand un élément perd le focus du clavier
 OnChange - déclenché quand le contenu de la saisie change
 OnFocus – déclenché quand un élément reçoit le focus clavier
 OnKeyDown – déclenché quand l'usager appuie sur une touche
 OnKeyUp – déclenché quand l'usager relâche une touche
 OnKeyPress – déclenché quand un caractère est généré
 OnMouseOver – déclenché quand la souris passe au-dessus
 OnMouseMove – déclenché quand la souris entre dans la zone
 OnMouseOut – déclenché quand la souris sort de la zone
 OnScroll – déclenché quand un élément avec défilement bouge
 OnLoad – déclenché quand un élément termine de se charger
 OnDblClick – déclenché quand l'usager double-clique - Montréal - 2009
GTI-780 / MTI-780                                 ETS
IU –            Récepteur / gestionnaire d'événements
   GWT utilise le concept de récepteur ou gestionnaire («
    listener interface ») pour traiter les événements
   Semblable à d'autres canevas d'applications
    graphiques comme SWING
   Le récepteur via l'interface “listener interface” définit
    une ou plusieurs méthodes que le widget appelle en
    réaction à un événement
          Button unBouton = new Button("Cliquez moi!");
          unBouton.addClickListener(new ClickListener() {
             public void onClick(Widget emetteur) {
                // traitement du Clic
             }
          });

GTI-780 / MTI-780                                 ETS - Montréal - 2009
Interface Utilisateur - Composants
  Éléments statiques: étiquette (Label), HTML, Image, hyperlien (Hyperlink), champ
  caché (Hidden)
  Widgets (E/S) : bouton (Button), bouton poussoir (PushButton), bouton à bascule
  (ToggleButton), case à cocher (CheckBox), bouton radio (RadioButton), menu déroulant
  (ListBox), zone de texte (TextBox), zone de texte avec suggestions (SuggestBox),
  zone d'entrée de mot de passe (PasswordTextBox), zone de texte multiligne (TextArea),
  zone d'édition de texte enrichi (RichTextArea)
  Widgets complexes : arbre (Tree), barre de menus (MenuBar), téléversement de
  fichiers (FileUpload)
  Panneaux de disposition simple : panneau en file (FlowPanel), panneau horizontal
  (Horizontal Panel), panneau vertical (VerticalPanel), panneau à coulisse
  (HorizontalSplitPanel, VerticalSplitPanel), panneau HTML (HTMLPanel), panneau
  superposé (DeckPanel)
  Panneaux de disposition complexe : table flexible* (FlexTable), grille (Grid), panneau
  polyptyque* (DockPanel), panneau à onglets (TabPanel), panneau en pile (StackPanel)
  Panneaux conteneurs simples : panneau composite ou composite (Composite) panneau
  simple (SimplePanel), panneau à barre de défilement (ScrollPanel), panneau de focus
  (FocusPanel)
  Panneaux conteneurs complexes : panneau de formulaire (FormPanel), panneau à
  dévoilement* (DisclosurePanel), panneau surprise* (PopupPanel), boîte de dialogue
  (DialogBox)
                    http://gwt.google.com/samples/Showcase/Showcase.html
GTI-780 / MTI-780                                                          ETS - Montréal - 2009
Interface Utilisateur - Panneaux
                                                      DisclosurePanel
  VerticalPanel                                                               HorizontalSplitPanel

                            HorizontalPanel




 VerticalSplitPanel
                                 FlowPanel

                                                                   DockPanel



                                         TabPanel
                    PopupPanel




GTI-780 / MTI-780      http://gwt.google.com/samples/Showcase/Showcase.html       ETS - Montréal - 2009
Interface Utilisateur – Bouton simple

  Bouton (Button)



// Création d'un bouton qui réagit à un clic grâce à un récepteur de clic

   Button bouton = new Button("Cliquez-moi", new ClickListener() {

      public void onClick(Widget sender) {

          Window.alert("Bonjour GWT");

      }
   });




GTI-780 / MTI-780                                                    ETS - Montréal - 2009
Interface Utilisateur – Case à cocher
  Case à cocher (CheckBox)
      // Création d'une case à cocher
       CheckBox caseResidentMtl = new CheckBox("Résident de Montréal");
       // La case est cochée par défaut
       caseResidentMtl.setChecked(true);
      // Attacher un récepteur de clic à la case
      caseResidentMtl.addClickListener(new ClickListener() {
          public void onClick(Widget sender) {
              boolean estMontrealais = ((CheckBox) sender).isChecked();
              Window.alert( (estMontrealais ? "" : "non") + " Montréalais");
          }
      });



GTI-780 / MTI-780                                                     ETS - Montréal - 2009
Interface Utilisateur – Bouton radio
  Bouton radio (RadioButton)
// Création d'un groupe de boutons radio

RadioButton rbBleu = new RadioButton("groupeRbCouleurs", "bleu");

   RadioButton rbBlanc = new RadioButton("groupeRbCouleurs", "blanc");

   RadioButton rbRouge = new RadioButton("groupeRbCouleurs", "rouge");

   // Cocher le bouton bleu par défaut

   rbBleu.setChecked(true);

   // Ajouter le groupe de boutons radio à un panneau
   FlowPanel panneau = new FlowPanel();
   panneau.add(rbBleu);
   panneau.add(rbBlanc);
   panneau.add(rbRouge);

GTI-780 / MTI-780                                               ETS - Montréal - 2009
Interface Utilisateur – Boîte de texte
•      Boîte de texte (TextBox)
    TextBox zoneSaisie = new TextBox();
    // Interdire la saisie de texte non numérique
    zoneSaisie.addKeyboardListener(new KeyboardListenerAdapter() {
      public void onKeyPress(Widget emetteur, char codeCar, int modifiers) {
          if ((!Character.isDigit(codeCar)) && (codeCar != (char) KEY_TAB)
              && (codeCar != (char) KEY_BACKSPACE) && (codeCar != (char) KEY_DELETE)
              && (codeCar != (char) KEY_ENTER) && (codeCar != (char) KEY_HOME)
              && (codeCar != (char) KEY_END) && (codeCar != (char) KEY_LEFT)
              && (codeCar != (char) KEY_UP) && (codeCar != (char) KEY_RIGHT)
              && (codeCar != (char) KEY_DOWN)) {
                // Annuler l'événement KeyPress
                ( (TextBox) emetteur ).cancelKey();
          }
      }
    });
    GTI-780 / MTI-780                                                   ETS - Montréal - 2009
Interface Utilisateur – Liste déroulante
•      Liste déroulante (ListBox)
    // Créer une liste, et lui ajouter quelques items
    ListBox listeChoix = new ListBox();
    listeChoix.addItem("Pied-De-Vent");
    listeChoix.addItem("Notre-Dame-des-Neiges");
    listeChoix.addItem("Migneron");
    listeChoix.addItem("Riopelle de l'Isle");
    listeChoix.addItem("Bleu Bénédictin");
    // Faire assez de place pour les 6 items
     listeChoix.setVisibleItemCount(6);
    // Ajouter un gestionnaire sur les événements de sélection
    listeChoix.addChangeHandler(new ChangeHandler() {
      public void onChange(ChangeEvent event) {
        alert(listeChoix.getSelectedIndex().getValue());
       }
    });
    GTI-780 / MTI-780                                            ETS - Montréal - 2009
Interface Utilisateur – Arbre
•      Arbre (Tree) : une hiérarchie déployable de widgets
    TreeItem tronc = new TreeItem("Racine");
    tronc.addItem("item 0");
    tronc.addItem("item 1");
    tronc.addItem("item 2");


    // Ajouter une case à cocher à l'arbre
    TreeItem item = new TreeItem(new CheckBox("item 3"));
    tronc.addItem(item);


    Tree arbre = new Tree();
    arbre.addItem(tronc);




    GTI-780 / MTI-780                                       ETS - Montréal - 2009
Interface Utilisateur – Éditeur de textes
  Éditeur de textes riche (RichTextArea)

// Crée la zone d'édition et sa barre de menu
RichTextArea editeur = new RichTextArea();
editeur.setSize("100%", "14em");
RichTextToolbar barreMenu =
          new RichTextToolbar(editeur);
barreMenu.setWidth("100%");


// Ajoutez les composants à un panneau
Grid panneauGrille = new Grid(2, 1);
panneauGrille.setStyleName("editeur");
panneauGrille.setWidget(0, 0, barreMenu);
panneauGrille.setWidget(1, 0, editeur);




GTI-780 / MTI-780                               ETS - Montréal - 2009
Support des CSS
 Séparation        du code et de la présentation
   Code Java :
public ListWidget(String Item) {
  ...
   setStyleName(“gwt-ListWidget”);
}


   Fichier CSS :
.gwt-ListWidget {
   background-color:black;
   color:lime;
}


GTI-780 / MTI-780                            ETS - Montréal - 2009
Support des CSS - conseils
Code Java : (usage de CSS primaire et dépendant)
MonPetitWidget monPW = new MonPetitWidget();
monPW.setStylePrimaryName("monPetitWidget");
monPW.addStyleDependentName("selected");
Fichier CSS :
.monpetitWidget {
   background-color:black;
   color:lime;
}
.monPetitWidget .monPetitWidget-selected {
   color:red;
}
Permet de faire varier facilement l'apparence en fonction de l'état
Note : Ne pas utiliser les CSS pour la disposition (ex.
  .monPetitWidget { position: absolute; } )

GTI-780 / MTI-780                                      ETS - Montréal - 2009
I18N – Internationalisation




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
I18N
 Le  transcompilateur GWT utilise la liaison différée
  (« Deferred Binding ») pour générer une version
  différente de l'application Web pour chaque langue
 Par exemple, puisque GWT supporte 4 navigateurs
  différents, si votre application doit fonctionner en
  3 langues, le transcompilateur de GWT produira
  12 versions différentes de votre application au
  moment de la compilation
À   l'exécution, GWT choisira la bonne version de
  l'application à montrer à l'utilisateur



GTI-780 / MTI-780                         ETS - Montréal - 2009
I18N – mécanismes de localisation
 “Constants” pour des chaînes constantes et des réglages
 “Messages” pour les chaînes avec des arguments
 “DateTimeFormat” pour les dates et l'heure
 “NumberFormat” pour les nombres et les unités de mesure
 Pas de processus dynamique (tout est statique et fait à la
  compilation), sinon il faut développer son propre mécanisme




GTI-780 / MTI-780                                     ETS - Montréal - 2009
Gestion de l'historique du navigateur
   La gestion de l'historique du navigateur s'occupe des
    boutons « avancer » et « reculer » et des liens
   Une API simple de gestion de l'historique basée sur
    une pile de jetons
     – Lorsque l'application démarre, la pile est vide
     – Lorsque l'utilisateur clique sur quelque chose
           • Vous pouvez ajouter des jetons sur la pile
             History.newItem(“nouveauJeton”)
           • Classe Hyperlink ajoute des jetons automatiquement
     – Vous pouvez aussi réagir aux événements “History
       events” en utilisant un HistoryListener
         History.addHistoryListener(controle)

GTI-780 / MTI-780                                         ETS - Montréal - 2009
GUI – Patrons de conception




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
GUI – Patrons de conception - MVC
  Patron MVC
                                                    Client MVC

     Vue:                         Présentation découplée

     Affiche les                                                                                   Échages de
                                                                événements                         données
     informations et
     achemine les
     actions de l'usager
                                         V                                             C
                                                                 mise à jour


                                         no




                                                                                              es
                                         not




                                                                                            né
                                            tiifii
                                             acc
                                                                                                      Contrôleur:
                                               fc
                                               ccè do




                                                                                          on
                                                                                      de ur
                                                   atti




                                                                                        sd
                                                                                    nt jo
                                                   a o
                                                    s e onné
                                                    s e nné




                                                                                  me e à
                                                        on
                                                                                                      Établit les liens
                                                         n ll es
                                                         n


                                                         n
                                                          d




                                                                                ge is
                                                             ect es
                                                             et




                                                                              an m
                                                                                                      entre le Modèle et
                                                                ure
                                                                ue


                                                                       M                              la Vue
                                                                    au
                                                                    aux




                                                                           ch
                                                                       x



                                                                                                      Reçoit les
                                                                                                      événements de la
                     Modèle:
                                                                                                      Vue et gère les
                     Données de l'application                                                         actions de l'usager
                     (POJOs) Notifie les
                     changements du modèle
                     par des événements
                     transmis aux vues
                     abonnées
GTI-780 / MTI-780                                                                                               ETS - Montréal - 2009
GUI – Patrons de conception - Observateur
  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*
  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
  quelque sorte abonnés aux modifications des données du modèle.
  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
  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).




                          * Patron observateur relie MV et VC dans le patron MVC
GTI-780 / MTI-780         Source figure : R. Dewsbury 2008 – Chap.2, p.96          ETS - Montréal - 2009
GUI – Patrons de conception - Composite
Patron Composite (ou Object Composite)




                                                                * Source : http://www.google.com


      * Source : http://fr.wikipedia.org/wiki/Objet_composite


   Facilite la création de Widgets
   S'utilise chaque fois qu'on crée un nouveau widget à partir de widgets existants
   Offre un meilleur contrôle sur l'API exposé
   Généralement préférable à l'utilisation de l'héritage
GTI-780 / MTI-780                                                                  ETS - Montréal - 2009
GUI – Patrons de conception - Composite

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);
    }
}



GTI-780 / MTI-780                                            ETS - Montréal - 2009
Communication client-serveur & Ajax




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Ajax – Diagramme de collaboration




GTI-780 / MTI-780   Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php   ETS - Montréal - 2009
Ajax – Diagramme de séquence


En mode synchrone, le fureteur est gelé en attendant
la réponse du serveur.




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.




                                                       Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php
    GTI-780 / MTI-780                                                                                                    ETS - Montréal - 2009
Communication avec le serveur & Ajax
  Le RPC (« Remote Procedure Call »), appel de procédure à
  distance
  RPC rend facile l'échange d'objets Java ou POJOS (sérialisés)
  entre le code-client et le code-serveur
  Fournit une procédure automatique de sérialisation des objets


  Autres outils Ajax :
  HTTPRequest
  RequestBuilder
  FormPanel


  Support de :
  XML
  JSON (JavaScript Object Notation)
GTI-780 / MTI-780                                     ETS - Montréal - 2009
Compilation & déploiement serveur RPC
                                                                              WEB-INF/
                            Eclipse                                           classes/../client/

          Données à
           Échanger                                                          Model/
          MesDonnee                                                           MesDonneesDO
             DO                                                              Services/
                                                                              MonService
                                                                              MonServiceAsync


        Interfaces client
               Java
                                            Compilateur                      classes/../server/
          MonService
          MonService                           Java
              Async
                                                                               MonServiceImpl
                                                                                MonServiceImpl
                                                                                  (servlet)
                                                                                    (servlet)
          Code Java
           Serveur
           (servlet)
          MonService                                                                 lib/
             Impl

                                                                                gwt-servlet.jar
                                                                                  gwt-servlet.jar
         Configuration
           web.xml                                            Autres .jar
                            gwt-user.jar   gwt-servlet.jar   serveurs sans
                                                              restrictions

                                                                                Configuration
                                                                                  web.xml




GTI-780 / MTI-780                                                               ETS - Montréal - 2009
Client léger HTML vs client riche Ajax


                         Client HTML
                          (fureteur)
                                                                                Serveur
                           sans état                                            avec état
                              (stateless)                                         (statefull)

                           Pas d'état persistant
                      entre les transactions qui sont
                    considérées comme indépendantes




                          Client JavaScript
                            (fureteur)                                          Serveur
                             avec état                                          sans état
                              (statefull)                                        (stateless)

                                                                             Pas d'état persistant
                                                                        entre les transactions qui sont
                                                                      considérées comme indépendantes
GTI-780 / MTI-780                  * Source : http://www.google.com                            ETS - Montréal - 2009
Appel de procédure à distance
GWT 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
            J
hébergés sur un serveur JEE. Client et serveur parlent alors le même langage,
i.e. le Java




GTI-780 / MTI-780           * Source : http://www.google.com      ETS - Montréal - 2009
RPC (Remote Procedure Call)
Un objet Java MesDonneesDO à échanger
   import com.google.gwt.user.client.rpc.IsSerializable;
   public class MesDonneesDO implements IsSerializable {
         //...
  }
Une première interface définit le service
   import com.google.gwt.user.client.rpc.RemoteService;
   public interface MonService extends RemoteService {
       MesDonneesDO getReponseMonService(String requete);
   }
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
appeler le service.
   import com.google.gwt.user.client.rpc.AsyncCallback;
   public interface MonServiceAsync {
       public void getReponseMonService(String requete,
                         AsyncCallback maProcedureDeRappel);
   }
GTI-780 / MTI-780                                                                    ETS - Montréal - 2009
RPC - Code-serveur
Classe à implémenter du côté serveur hérite de com.google.gwt.user.server.rpc.RemoteServiceServlet
import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import qc.ets.web2.gwt.client.MesDonneesDO;
import qc.ets.web2.gwt.client.MonService;
public class MonServiceImpl extends RemoteServiceServlet implements MonService {
    public MesDonneesDO getReponseMonService(String requete) {
           if (requete.length() < 1) {
               throw new IllegalArgumentException("Requete invalide.");
           }
           MesDonneesDO resultat = new MesDonneesDO();
           resultat.setDonnees("...");
           if ( isInvalide( resultat )) {
                return null;
           }
           return resultat;
     }
     public boolean isInvalide(MesDonneesDO resultat) {
         Return true; // à modifier
     }
}
GTI-780 / MTI-780                                                              ETS - Montréal - 2009
RPC - Code-client
    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.
public class MonClientRPC implements EntryPoint {
     public void onModuleLoad() {
          final Button bouton = new Button("Appel RPC");
          final MonServiceAsync serviceProxy =
                             (MonServiceAsync)GWT.create(qc.ets.web2.gwt.client.MonService.class);
          ServiceDefTarget pointService = (ServiceDefTarget) serviceProxy;
          pointService.setServiceEntryPoint(GWT.getModuleBaseURL() + "/reponseService");
          bouton.addClickListener(new ClickListener( ) {
                public void onClick(Widget emetteur) {
                     AsyncCallback maProcedureDeRappel = new AsyncCallback() {
                          public void onSuccess(Object resultat) {
                               MesDonneesDO resultatDO = (MesDonneesDO) resultat;
                               System.out.println("*** SUCCES RPC ***n" + resultatDO.getDonnees());
                          }
                          public void onFailure(Throwable erreur) {
                                 System.out.println("*** ERREUR RPC ***" + erreur.getMessage());
                            }
                        };
                        serviceProxy.getReponseMonService("Requete bidon", maProcedureDeRappel);
          }});
          RootPanel.get("emprise1").add(bouton);
      }
}
    GTI-780 / MTI-780                                                               ETS - Montréal - 2009
Intégration facile aux APIs Google




GTI-780 / MTI-780            ETS - Montréal - 2009
Intégration facile aux APIs Google
 Google offre un riche écosystème d'APIs en source
  libre
 Androïd : plateforme Java en source libre pour la
  téléphonie intelligente
 AppEngine : hébergement d'applications Java dans le
  nuage
 OpenSocial : norme libre pour les sites sociaux
 Google Maps : services de cartes et géolocation
 Google Ajax Searh APIs : le moteur Google Search
 Google Gears API : BD locale et navigation hors ligne
 Google Language API : services de traduction
 YouTube widget ?

GTI-780 / MTI-780                            ETS - Montréal - 2009
Démo – Bâtir des applications GWT




                                      GWT
                                      en Action
GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Créer un squelette d'application GWT
   GWT crée automatiquement un code-client
    rudimentaire
   Vous pouvez ensuite mettre de la chair sur ce
    squelette dans le but de créer une application Web
    plus sophistiquée




                    GWT
GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Créer un squelette d'application GWT
public class Bonjour implements EntryPoint {
  public void onModuleLoad() {
        Button bouton = new Button("Cliquez-moi!",
          new ClickListener() {
                public void onClick(Widget sender) {
                  Window.alert("Bonjour GWT");
                }
        });
        RootPanel.get().add(bouton);
    }
}
GTI-780 / MTI-780                                      ETS - Montréal - 2009
Enrichir une page web
   GWT permet d'ajouter des composants graphiques
    interactifs dans une page Web
   Un composant GWT peut être intégré dans n'importe
    quelle page HTML, ainsi l'application continue à
    ressembler à une page Web
   Tout fichier HTML incluant un certain jeu de balises
    peut servir de support à une application GWT
   GWT ne cherche pas exclusivement à ressembler à
    une application bureautique en exécution locale
   Le résultat est juste une meilleure application Web
   Exemple : application d'ouverture de session (login)


GTI-780 / MTI-780                               ETS - Montréal - 2009
Créer des applications Web similaires à
des applications bureautiques locales
   Ouverture de plusieurs fenêtres à la fois dans le
    navigateur
   Déplacement des fenêtres dans le navigateur,
    redimensionnement et défilement des fenêtres
   Glisser et déposer des contenus
   Applications Web se comportant « comme des
    applications bureautiques locales »




GTI-780 / MTI-780                               ETS - Montréal - 2009
Qui peut le mieux profiter de GWT ?




                    J'
                    GWT




GTI-780 / MTI-780    * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Qui peut le mieux profiter de GWT ?
   Designers Web
     – GWT utilise les feuilles de style CSS
     – Doivent apprendre Java
   Développeurs d'applications Web
     – Une application GWT s'exécute sur le client plutôt que d'être
       contrôlée entièrement par le serveur
     – Doivent maîtriser les technologies du client et de présentation
   Développeurs Ajax (gourous JavaScript)
     – GWT intègre facilement le code JavaScript grâce à JSNI
     – Doivent laisser tomber certaines habitudes du codage JS
   Développeurs d'applications Java
     – Réaliser des Web-app. avec des outils et un environnement familier
     – Doivent apprendre CSS & les restrictions particulières des Web-app.


GTI-780 / MTI-780                                             ETS - Montréal - 2009
Des emplois...




GTI-780 / MTI-780   * Source : http://www.indeed.com   ETS - Montréal - 2009
GWT vs autres solutions Web riche




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
GWT vs autres solutions Web riche
 Outils purs JavaScript (Scriptaculous, Prototype, DWR, JQuery, YUI, etc.)
    Facilitent beaucoup la programmation JavaScript mais ça reste du JavaScript!

 JavaServer Faces - Norme JEE, canevas d'applications Web populaire, basé
  sur le serveur, plutôt complexe

 JavaFX - Trop tôt pour se prononcer, exige JVM, langage à script
 Java Applet - Trop lourd, exige JVM, doivent beaucoup s'améliorer
 ZK     - Rapide et facile à programmer, basé sur le serveur, licence GPL

 Adobe Flash, Flex, AIR             (Adobe Integrated Runtime) et   OpenLazslo
 Basé sur le serveur, +/- propriétaire, exige plugiciel Flash, langage à scripts

 Micro$oft Silverlight - Pas Java, propriétaire & basé Windows
    Windows...Volta, 5 décembre 2007, une copie GWT pour .NET
    http://labs.live.com/volta

 Ruby - Innovateur, mais toujours à base de pages et basé sur le serveur..
GTI-780 / MTI-780                                                    ETS - Montréal - 2009
GWT - Avantages & inconvénients




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
GWT - Avantages
  Bon pour enrichir des applications Web avec Ajax et créer
  des applications Web de « style bureautique »
  Un seul langage: JAVA
  Développement et mise au point rapide dans des EDIs
  favorisant une bonne productivité et qualité du code
  Riche bibliothèque de composants (~ SWING)
  Très bon support Ajax
  Performant & économe en ressources réseau & serveur
  Code source libre, licence Apache 2, bien documenté
  Supporté par GOOGLE... et l'écosystème des outils Google
  Pas magique mais GWT a le potentiel de devenir le
    « prochain gros truc »
GTI-780 / MTI-780                                 ETS - Montréal - 2009
GWT - Inconvénients

                    JS
                         Ajax




GTI-780 / MTI-780               ETS - Montréal - 2009
GWT - Inconvénients
   Nécessite que le fureteur exécute JavaScript
   Exige la connaissance de la programmation Java
   Exige une séparation nette client et serveur
   Les composants (Widgets) sont de sources et de
    qualités inégales
   Dépend des performances du transcompilateur
   Quelques problèmes de compatibilité entre les
    fureteurs Web, surtout au niveau des CSS
   Certains problèmes demandent une expertise JS
   L'aspect sécurité est à surveiller
   GWT ne va pas résoudre « magiquement » tous les
    problèmes avec Ajax ou le Web 2.0
GTI-780 / MTI-780                                  ETS - Montréal - 2009
Ressources - Livres
GWT in Action: Easy Ajax with the Google Web
Toolkit
par Robert Hanson, Adam Tacy
600 pages
Manning Publications
(5 juin, 2007)
www.manning.com/hanson/

Google Web Toolkit Applications
par Ryan Dewsbury
608 pages
Prentice Hall
(15 décembre, 2007)
www.gwtapps.com

GTI-780 / MTI-780                              ETS - Montréal - 2009
Ressources - Livres
Google Web Toolkit Solutions : More Cool &
Useful Stuff
par David Geary, Rob Gordon
408 pages
Prentice Hall
(17 novembre, 2007)
www.coolandusefulgwt.com

GWT in Practice
par Robert T. Cooper, Charlie E. Collins
358 pages
Manning Publications
(12 mai, 2008)
www.manning.com/cooper/

GTI-780 / MTI-780                            ETS - Montréal - 2009
Ressources - Outils
  GWT Designer
      Éditeur graphique
      Plugiciel Eclipse
      www.instantiations.com/gwtdesigner
  Sites
     http://code.google.com/webtoolkit/
     http://groups.google.com/group/Google-Web-Toolkit
     www.ongwt.com


GTI-780 / MTI-780                           ETS - Montréal - 2009
Questions




                                   ?

GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009

Contenu connexe

Tendances

Booster votre application Windows Phone 8
Booster votre application Windows Phone 8Booster votre application Windows Phone 8
Booster votre application Windows Phone 8Microsoft
 
Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014Ippon
 
Presentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub FoundationPresentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub FoundationStéphane Traumat
 
JPA avec Cassandra, grâce à Achilles
JPA avec Cassandra, grâce à AchillesJPA avec Cassandra, grâce à Achilles
JPA avec Cassandra, grâce à AchillesIppon
 
Nouveau look pour une nouvelle vie, version spéciale Ippon
Nouveau look pour une nouvelle vie, version spéciale IpponNouveau look pour une nouvelle vie, version spéciale Ippon
Nouveau look pour une nouvelle vie, version spéciale IpponJulien Dubois
 
Quoi de neuf pour JHipster en 2016
Quoi de neuf pour JHipster en 2016Quoi de neuf pour JHipster en 2016
Quoi de neuf pour JHipster en 2016Ippon
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8Microsoft
 
GWT Principes & Techniques
GWT Principes & TechniquesGWT Principes & Techniques
GWT Principes & TechniquesRachid NID SAID
 
Etat de l'art Server-Side JavaScript - JS Geneve
Etat de l'art Server-Side JavaScript - JS GeneveEtat de l'art Server-Side JavaScript - JS Geneve
Etat de l'art Server-Side JavaScript - JS GeneveAlexandre Morgaut
 
Telosys tools jug-nantes-2014-v1.2
Telosys tools jug-nantes-2014-v1.2Telosys tools jug-nantes-2014-v1.2
Telosys tools jug-nantes-2014-v1.2Laurent Guérin
 
20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache MavenArnaud Héritier
 
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et MobileNouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et MobileIppon
 
20080311 - Paris Vi Master STL TA - Initiation Maven
20080311 - Paris Vi Master STL TA - Initiation Maven20080311 - Paris Vi Master STL TA - Initiation Maven
20080311 - Paris Vi Master STL TA - Initiation MavenArnaud Héritier
 
Requêtes multi-critères avec Cassandra
Requêtes multi-critères avec CassandraRequêtes multi-critères avec Cassandra
Requêtes multi-critères avec CassandraJulien Dubois
 
Quand java prend de la vitesse, apache maven vous garde sur les rails
Quand java prend de la vitesse, apache maven vous garde sur les railsQuand java prend de la vitesse, apache maven vous garde sur les rails
Quand java prend de la vitesse, apache maven vous garde sur les railsArnaud Héritier
 
20091020 - Normandy Jug - Builders Battle
20091020 - Normandy Jug - Builders Battle20091020 - Normandy Jug - Builders Battle
20091020 - Normandy Jug - Builders BattleArnaud Héritier
 

Tendances (19)

Formation gwt
Formation gwtFormation gwt
Formation gwt
 
Booster votre application Windows Phone 8
Booster votre application Windows Phone 8Booster votre application Windows Phone 8
Booster votre application Windows Phone 8
 
Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014
 
Presentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub FoundationPresentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub Foundation
 
JPA avec Cassandra, grâce à Achilles
JPA avec Cassandra, grâce à AchillesJPA avec Cassandra, grâce à Achilles
JPA avec Cassandra, grâce à Achilles
 
Nouveau look pour une nouvelle vie, version spéciale Ippon
Nouveau look pour une nouvelle vie, version spéciale IpponNouveau look pour une nouvelle vie, version spéciale Ippon
Nouveau look pour une nouvelle vie, version spéciale Ippon
 
Quoi de neuf pour JHipster en 2016
Quoi de neuf pour JHipster en 2016Quoi de neuf pour JHipster en 2016
Quoi de neuf pour JHipster en 2016
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
 
GWT Principes & Techniques
GWT Principes & TechniquesGWT Principes & Techniques
GWT Principes & Techniques
 
Cours cordova & REST
Cours cordova & RESTCours cordova & REST
Cours cordova & REST
 
Etat de l'art Server-Side JavaScript - JS Geneve
Etat de l'art Server-Side JavaScript - JS GeneveEtat de l'art Server-Side JavaScript - JS Geneve
Etat de l'art Server-Side JavaScript - JS Geneve
 
Telosys tools jug-nantes-2014-v1.2
Telosys tools jug-nantes-2014-v1.2Telosys tools jug-nantes-2014-v1.2
Telosys tools jug-nantes-2014-v1.2
 
20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven
 
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et MobileNouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
 
20080311 - Paris Vi Master STL TA - Initiation Maven
20080311 - Paris Vi Master STL TA - Initiation Maven20080311 - Paris Vi Master STL TA - Initiation Maven
20080311 - Paris Vi Master STL TA - Initiation Maven
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Requêtes multi-critères avec Cassandra
Requêtes multi-critères avec CassandraRequêtes multi-critères avec Cassandra
Requêtes multi-critères avec Cassandra
 
Quand java prend de la vitesse, apache maven vous garde sur les rails
Quand java prend de la vitesse, apache maven vous garde sur les railsQuand java prend de la vitesse, apache maven vous garde sur les rails
Quand java prend de la vitesse, apache maven vous garde sur les rails
 
20091020 - Normandy Jug - Builders Battle
20091020 - Normandy Jug - Builders Battle20091020 - Normandy Jug - Builders Battle
20091020 - Normandy Jug - Builders Battle
 

Similaire à GWT Approfondissement - GTI780 & MTI780 - ETS - A09

Web 2.0 & Génie Logiciel - GTI780 & MTI780 - ETS - A09
Web 2.0 & Génie Logiciel  - GTI780 & MTI780 - ETS - A09Web 2.0 & Génie Logiciel  - GTI780 & MTI780 - ETS - A09
Web 2.0 & Génie Logiciel - GTI780 & MTI780 - ETS - A09Claude Coulombe
 
GWT Approfondissement - GTI780 & MTI780 - ETS - A08
GWT Approfondissement - GTI780 & MTI780 - ETS - A08GWT Approfondissement - GTI780 & MTI780 - ETS - A08
GWT Approfondissement - GTI780 & MTI780 - ETS - A08Claude Coulombe
 
GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013
GWT, quoi de neuf?  Présentation au GDG/GTUG Montréal - 26 juin 2013GWT, quoi de neuf?  Présentation au GDG/GTUG Montréal - 26 juin 2013
GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013Claude Coulombe
 
Présentation GWT au JUG Montréal 14 avril 2011
Présentation GWT au JUG Montréal 14 avril 2011Présentation GWT au JUG Montréal 14 avril 2011
Présentation GWT au JUG Montréal 14 avril 2011Claude Coulombe
 
Introduction à web assembly
Introduction à web assemblyIntroduction à web assembly
Introduction à web assemblyJérémy Buget
 
Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogySacha Leprêtre
 
Normes avancées du Web - GTI780 & MTI780 - ETS - A08
Normes avancées du Web  - GTI780 & MTI780 - ETS - A08Normes avancées du Web  - GTI780 & MTI780 - ETS - A08
Normes avancées du Web - GTI780 & MTI780 - ETS - A08Claude Coulombe
 
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09Claude Coulombe
 
Google Web Toolkit 1.5 Presentation Web Creative Common
Google Web Toolkit 1.5 Presentation Web Creative CommonGoogle Web Toolkit 1.5 Presentation Web Creative Common
Google Web Toolkit 1.5 Presentation Web Creative CommonStéphane Liétard
 
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesLes Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesTristan Nitot
 
[FR] Capture vidéo avec HTML5
[FR] Capture vidéo avec HTML5[FR] Capture vidéo avec HTML5
[FR] Capture vidéo avec HTML5Thomas Bassetto
 
Présentation DevoxxFR 2015 sur GWT
Présentation DevoxxFR 2015 sur GWTPrésentation DevoxxFR 2015 sur GWT
Présentation DevoxxFR 2015 sur GWTDNG Consulting
 
Présentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'OfflinePrésentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'OfflineDNG Consulting
 
Keynote .NET 2015 : une nouvelle ère
Keynote .NET 2015 : une nouvelle èreKeynote .NET 2015 : une nouvelle ère
Keynote .NET 2015 : une nouvelle èreMicrosoft
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologiewyggio
 
Ingénieur étude et développement JAVA JEE.pdf
Ingénieur étude et développement JAVA JEE.pdfIngénieur étude et développement JAVA JEE.pdf
Ingénieur étude et développement JAVA JEE.pdfJEANCLAUDECAMARA
 

Similaire à GWT Approfondissement - GTI780 & MTI780 - ETS - A09 (20)

Web 2.0 & Génie Logiciel - GTI780 & MTI780 - ETS - A09
Web 2.0 & Génie Logiciel  - GTI780 & MTI780 - ETS - A09Web 2.0 & Génie Logiciel  - GTI780 & MTI780 - ETS - A09
Web 2.0 & Génie Logiciel - GTI780 & MTI780 - ETS - A09
 
GWT Approfondissement - GTI780 & MTI780 - ETS - A08
GWT Approfondissement - GTI780 & MTI780 - ETS - A08GWT Approfondissement - GTI780 & MTI780 - ETS - A08
GWT Approfondissement - GTI780 & MTI780 - ETS - A08
 
Gdd07 Gwt Dig
Gdd07 Gwt DigGdd07 Gwt Dig
Gdd07 Gwt Dig
 
GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013
GWT, quoi de neuf?  Présentation au GDG/GTUG Montréal - 26 juin 2013GWT, quoi de neuf?  Présentation au GDG/GTUG Montréal - 26 juin 2013
GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013
 
Présentation GWT au JUG Montréal 14 avril 2011
Présentation GWT au JUG Montréal 14 avril 2011Présentation GWT au JUG Montréal 14 avril 2011
Présentation GWT au JUG Montréal 14 avril 2011
 
Introduction à web assembly
Introduction à web assemblyIntroduction à web assembly
Introduction à web assembly
 
Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogy
 
Normes avancées du Web - GTI780 & MTI780 - ETS - A08
Normes avancées du Web  - GTI780 & MTI780 - ETS - A08Normes avancées du Web  - GTI780 & MTI780 - ETS - A08
Normes avancées du Web - GTI780 & MTI780 - ETS - A08
 
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
 
Google Web Toolkit 1.5 Presentation Web Creative Common
Google Web Toolkit 1.5 Presentation Web Creative CommonGoogle Web Toolkit 1.5 Presentation Web Creative Common
Google Web Toolkit 1.5 Presentation Web Creative Common
 
CV_Bilel CHAOUADI
CV_Bilel CHAOUADICV_Bilel CHAOUADI
CV_Bilel CHAOUADI
 
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesLes Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
 
Gwtmo formation-gwt-mobile
Gwtmo formation-gwt-mobileGwtmo formation-gwt-mobile
Gwtmo formation-gwt-mobile
 
[FR] Capture vidéo avec HTML5
[FR] Capture vidéo avec HTML5[FR] Capture vidéo avec HTML5
[FR] Capture vidéo avec HTML5
 
Présentation DevoxxFR 2015 sur GWT
Présentation DevoxxFR 2015 sur GWTPrésentation DevoxxFR 2015 sur GWT
Présentation DevoxxFR 2015 sur GWT
 
Devoxx fr
Devoxx frDevoxx fr
Devoxx fr
 
Présentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'OfflinePrésentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'Offline
 
Keynote .NET 2015 : une nouvelle ère
Keynote .NET 2015 : une nouvelle èreKeynote .NET 2015 : une nouvelle ère
Keynote .NET 2015 : une nouvelle ère
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
 
Ingénieur étude et développement JAVA JEE.pdf
Ingénieur étude et développement JAVA JEE.pdfIngénieur étude et développement JAVA JEE.pdf
Ingénieur étude et développement JAVA JEE.pdf
 

Plus de Claude Coulombe

Plates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel librePlates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel libreClaude Coulombe
 
Augmenter la persévérance dans les CLOM / MOOC? Possible!
Augmenter la persévérance dans les CLOM / MOOC? Possible!Augmenter la persévérance dans les CLOM / MOOC? Possible!
Augmenter la persévérance dans les CLOM / MOOC? Possible!Claude Coulombe
 
Séminaire polytechnique 12nov15
Séminaire polytechnique 12nov15Séminaire polytechnique 12nov15
Séminaire polytechnique 12nov15Claude Coulombe
 
Clom portfolios - ACFAS 2013
Clom portfolios - ACFAS 2013Clom portfolios - ACFAS 2013
Clom portfolios - ACFAS 2013Claude Coulombe
 
De nouvelles plateformes technologiques pour les CLOM
De nouvelles plateformes technologiques pour les CLOMDe nouvelles plateformes technologiques pour les CLOM
De nouvelles plateformes technologiques pour les CLOMClaude Coulombe
 
Infonuagique retour d'expérience
 Infonuagique   retour d'expérience Infonuagique   retour d'expérience
Infonuagique retour d'expérienceClaude Coulombe
 
De nouvelles plateformes technologiques pour les CLOM / MOOCs
De nouvelles plateformes technologiques pour les CLOM / MOOCsDe nouvelles plateformes technologiques pour les CLOM / MOOCs
De nouvelles plateformes technologiques pour les CLOM / MOOCsClaude Coulombe
 
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012Claude Coulombe
 
Web social - GTI780 & MTI780 - ETS - A09
Web social - GTI780 & MTI780 - ETS - A09Web social - GTI780 & MTI780 - ETS - A09
Web social - GTI780 & MTI780 - ETS - A09Claude Coulombe
 
Normes avancées du Web - GTI780 & MTI780 - ETS - A09
Normes avancées du Web  - GTI780 & MTI780 - ETS - A09Normes avancées du Web  - GTI780 & MTI780 - ETS - A09
Normes avancées du Web - GTI780 & MTI780 - ETS - A09Claude Coulombe
 
Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09Claude Coulombe
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09Claude Coulombe
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09Claude Coulombe
 
Ajax GTI780 & MTI780 ETS A09
Ajax  GTI780 & MTI780  ETS  A09Ajax  GTI780 & MTI780  ETS  A09
Ajax GTI780 & MTI780 ETS A09Claude Coulombe
 
Web 2.0 GTI780 & MTI780 ETS A09
Web 2.0  GTI780 & MTI780  ETS  A09Web 2.0  GTI780 & MTI780  ETS  A09
Web 2.0 GTI780 & MTI780 ETS A09Claude Coulombe
 
Mcetech 2009 - Open Social
Mcetech 2009 - Open SocialMcetech 2009 - Open Social
Mcetech 2009 - Open SocialClaude Coulombe
 
Web social - GTI780 & MTI780 - ETS - A08
Web social - GTI780 & MTI780 - ETS - A08Web social - GTI780 & MTI780 - ETS - A08
Web social - GTI780 & MTI780 - ETS - A08Claude Coulombe
 
Ajax en Java - GTI780 & MTI780 - ETS - A08
Ajax en Java - GTI780 & MTI780 - ETS - A08Ajax en Java - GTI780 & MTI780 - ETS - A08
Ajax en Java - GTI780 & MTI780 - ETS - A08Claude Coulombe
 
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08Claude Coulombe
 
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08Claude Coulombe
 

Plus de Claude Coulombe (20)

Plates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel librePlates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel libre
 
Augmenter la persévérance dans les CLOM / MOOC? Possible!
Augmenter la persévérance dans les CLOM / MOOC? Possible!Augmenter la persévérance dans les CLOM / MOOC? Possible!
Augmenter la persévérance dans les CLOM / MOOC? Possible!
 
Séminaire polytechnique 12nov15
Séminaire polytechnique 12nov15Séminaire polytechnique 12nov15
Séminaire polytechnique 12nov15
 
Clom portfolios - ACFAS 2013
Clom portfolios - ACFAS 2013Clom portfolios - ACFAS 2013
Clom portfolios - ACFAS 2013
 
De nouvelles plateformes technologiques pour les CLOM
De nouvelles plateformes technologiques pour les CLOMDe nouvelles plateformes technologiques pour les CLOM
De nouvelles plateformes technologiques pour les CLOM
 
Infonuagique retour d'expérience
 Infonuagique   retour d'expérience Infonuagique   retour d'expérience
Infonuagique retour d'expérience
 
De nouvelles plateformes technologiques pour les CLOM / MOOCs
De nouvelles plateformes technologiques pour les CLOM / MOOCsDe nouvelles plateformes technologiques pour les CLOM / MOOCs
De nouvelles plateformes technologiques pour les CLOM / MOOCs
 
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
 
Web social - GTI780 & MTI780 - ETS - A09
Web social - GTI780 & MTI780 - ETS - A09Web social - GTI780 & MTI780 - ETS - A09
Web social - GTI780 & MTI780 - ETS - A09
 
Normes avancées du Web - GTI780 & MTI780 - ETS - A09
Normes avancées du Web  - GTI780 & MTI780 - ETS - A09Normes avancées du Web  - GTI780 & MTI780 - ETS - A09
Normes avancées du Web - GTI780 & MTI780 - ETS - A09
 
Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
 
Ajax GTI780 & MTI780 ETS A09
Ajax  GTI780 & MTI780  ETS  A09Ajax  GTI780 & MTI780  ETS  A09
Ajax GTI780 & MTI780 ETS A09
 
Web 2.0 GTI780 & MTI780 ETS A09
Web 2.0  GTI780 & MTI780  ETS  A09Web 2.0  GTI780 & MTI780  ETS  A09
Web 2.0 GTI780 & MTI780 ETS A09
 
Mcetech 2009 - Open Social
Mcetech 2009 - Open SocialMcetech 2009 - Open Social
Mcetech 2009 - Open Social
 
Web social - GTI780 & MTI780 - ETS - A08
Web social - GTI780 & MTI780 - ETS - A08Web social - GTI780 & MTI780 - ETS - A08
Web social - GTI780 & MTI780 - ETS - A08
 
Ajax en Java - GTI780 & MTI780 - ETS - A08
Ajax en Java - GTI780 & MTI780 - ETS - A08Ajax en Java - GTI780 & MTI780 - ETS - A08
Ajax en Java - GTI780 & MTI780 - ETS - A08
 
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
 
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08
 

GWT Approfondissement - GTI780 & MTI780 - ETS - A09

  • 1. GWT (Google Web Toolkit) Approfondissement Sujets spéciaux en TI Le Web 2.0 : concepts et outils École de technologie supérieure par Claude Coulombe GTI-780 / MTI-780 ETS - Montréal - 2009
  • 2. But Dans cette présentation vous verrez comment le Google Web Toolkit (GWT) permet le développement rapide en Java d'applications Web 2.0 et AJAX à la fois complexes et performantes. http://code.google.com/webtoolkit/ GTI-780 / MTI-780 ETS - Montréal - 2009
  • 3. Pourquoi GWT ? - Problèmes avec JavaScript Euh!..., il ne connaissait pas assez le JavaScript... GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 4. Pourquoi GWT ? - Problèmes avec JavaScript Problèmes de portabilité, incompatibilités des fureteurs, fuites de mémoire & longs chargements Pas de typage statique des variables en JavaSript Le type d'une variable peut changer lorsqu'une nouvelle valeur lui est affectée (typage dynamique). var unNombre = 2; unNombre = "deux"; Sensible à la moindre coquille, sensible à la casse formulaire.montnat = document.getElementById(''montant''); Quelques subtilités : null vs undefined vs false vs "" Débogage à l'exécution pas à la compilation Support inégal des outils et IDEs Problème de sécurité XSS (injection de scripts) Rareté des « programmeurs experts » en JavaScript GTI-780 / MTI-780 ETS - Montréal - 2009
  • 5. Pourquoi GWT ? - JS pas conçu pour de gros logiciels Made in Jav aScript GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 6. Pourquoi GWT ? - JS pas conçu pour de gros logiciels Excellente pour l'écriture rapide de petites applications, la souplesse de JavaScript devient un handicap pour l'écriture de gros logiciels et de logiciels complexes Le typage dynamique représente une source importante d'erreurs pour de gros logiciels Pas d'espace de nommage (collision de variables), manque de modularité et de capacité à grandir, pas un véritable langage à objets Mise au point et réutilisation difficiles Normal, car JS n'a pas été conçu pour de gros logiciels, mais juste pour mettre un peu d'interactivité dans une page web On peut voir le JavaScript comme le langage d'assemblage (assembleur) du fureteur GTI-780 / MTI-780 ETS - Montréal - 2009
  • 7. Pourquoi GWT ? - Si on pouvait utiliser Java! * Source Clipart : http://www.clipart.com GTI-780 / MTI-780 * Source image : http://www.sun.com ETS - Montréal - 2009
  • 8. Pourquoi GWT ? - Si on pouvait utiliser Java! Conçu pour le génie logiciel Véritable langage de POO Typage statique, compilé, complet Espace de nommage, notion de paquet (Package) Répandu, connu et imité! Langage le plus répandu – 6 millions de développeurs Multiplateforme - “Write Once, Run Anywhere” - Windows, Linux, OS X Abondante documentation, livres et cours Nombreux outils et EDIs Le plus grand nombre de bibliothèques et canevas d'applications Le plus grand nombre d'outils en source libre dont Java lui-même Puissants EDIs* Eclipse, NetBeans ou IntelliJ Débogueur / éditeur de code évolué / outil de refactorisation / outil d'analyse du code GTI-780 / MTI-780 ETS - Montréal - 2009
  • 9. GWT – Un « beau truc! » AJAX GWT = + Génie logiciel GTI-780 / MTI-780 * Source : http://www.google.com, http://www.sun.com, htttp://www.clipart.com ETS - Montréal - 2009
  • 10. Qu'est-ce que GWT ?  En mai 2006 Google lance son Google Web Toolkit Bruce Johnson & Joel Webber  Canevas d'applications Web riches, entièrement basé Java, « orienté client » et en logiciel libre (Apache 2)  Transcompilateur (cross-compiler) de Java à JavaScript  Développement rapide d'applications Web riches par des programmeurs Java qui ne maîtrisent pas JavaScript  Bon à la fois pour enrichir des applications Web avec des composants Ajax et pour créer des applications « similaires à des applications bureautiques locales » mais qui tournent dans un navigateur Web GTI-780 / MTI-780 ETS - Montréal - 2009
  • 11. Qu'est-ce que GWT ? - Du pur Java!  Plus de 6 millions de développeurs Java  “Write Once, Run Anywhere”  Windows, Linux, Mac OS X  Véritable langage de POO  Utilise un EDI* Java usuel  Débogage du code-client avec EDI  Communication client-server d'objets Java  Code-client plus léger que des applets Java * EDI : environnement de développement intégré (en anglais IDE) GTI-780 / MTI-780 * Source image : http://www.sun.com ETS - Montréal - 2009
  • 12. GWT – Quelques exemples  Lombardi Blueprint (outil de gestion des flux de travail) http://www.lombardisoftware.com/bpm-blueprint-product.php  Exemples et démos du Google Web Tookit http://code.google.com/intl/fr-FR/webtoolkit/examples/  GWT-Ext 2.0 Showcase http://www.gwt-ext.com/demo/  Google Web Toolkit Applications (site d'un livre) Widget DeskTop Demo http://desktop.gwtapps.com  Gpokr (jeu de poker en ligne) www.gpokr.com  OpenSyllabus (éditeur structuré de plan de cours) http://confluence.sakaiproject.org/confluence/display/OSYL/OpenSyllabus+Home GTI-780 / MTI-780 ETS - Montréal - 2009
  • 13. Google Wave – Un exemple qui fait des vagues! Source : http://googleblog.blogspot.com/2009/05/went-walkabout-brought-back-google-wave.html GTI-780 / MTI-780 ETS - Montréal - 2009
  • 14. OpenSyllabus – Un exemple Québécois! OpenSyllabus : un éditeur structuré de plan de cours http://confluence.sakaiproject.org/confluence/display/OSYL/OpenSyllabus+Home GTI-780 / MTI-780 ETS - Montréal - 2009
  • 15. Planificateur d'horaire – GWT à l'ETS! http://planhoraire.aeets.com/planhoraire.html GTI-780 / MTI-780 ETS - Montréal - 2009
  • 16. GWT – Avantages pour les utilisateurs GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 17. GWT – Avantages pour les utilisateurs  Réponses rapides aux actions de l'utilisateur  La vitesse est vitale, spécialement au démarrage  Ne requiert pas de plugiciel, Web Start, ni même de JVM  Pas de long téléchargement, ni d'installation  Compatible avec tous les fureteurs Web récents  Donne la préférence aux composants natifs de l'IU  L'utilisateur conserve le contrôle du navigateur Web en tout temps  Gestion de l'historique de navigation  Produit des applications Web riches, rapides et légères GTI-780 / MTI-780 ETS - Montréal - 2009
  • 18. GWT – Avantages pour les développeurs aniaque GWT GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 19. GWT – Avantages pour les développeurs  Un unique langage, le “Java”  Bien que le code-serveur peut être en n'importe quel langage  Gère les différences entre les fureteurs Web  Bibliothèque OO de composants IUG  Semblable à SWING ou AWT  Encourage les bonnes pratiques du génie logiciel en s'appuyant sur des outils Java matures et performants  Eclipse, NetBeans. IntelliJ  Communications Ajax faciles via RPC  S'intègre aux technologies Web standards  Réduit la charge sur le serveur et le réseau  Le code-client est beaucoup plus léger qu'un Applet Java GTI-780 / MTI-780 ETS - Montréal - 2009
  • 20. Comprendre GWT GWT GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 21. Application GWT – Client & Serveur Le code-serveur (en Java ou tout autre langage) s'exécute sur le serveur. L'application Web utilise le serveur pour charger ou sauvegarder des données. Le code-client en JavaScript est transmis sur le réseau vers un ordinateur-client, où il s'exécute dans un logiciel de navigation Web GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 22. Transcompilateur Java à JavaScript GWT version 1.5 supporte : * Firefox 1.0, 1.5, 2, 3.x Java * Internet Explorer 6, 7, 8 * Safari 2.0, 3.0 * Opera 9.0 Write Once... JavaScript Run Everywhere! GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 23. Transcompilateur Java à JavaScript Transcompilateur GWT prend du code-client en Java et produit du code JavaScript optimisé JavaScript devient le code assembleur du fureteur Élimination du code non-utilisé dans les bibliothèques, inférence de type, retrait du polymorphisme, compression “agressive” du code, « Obfuscation » Le JavaScript produit est généralement plus rapide que du JavaScript écrit à la main* Emploi de la liaison différée (“Deferred Binding”) pour produire du code JavaScript optimal pour chaque fureteur (i.e. génère du code spécifique à chaque fureteur) « Ne payez que pour ce que vous utilisez » GTI-780 / MTI-780 * Note : sauf si code < 100 lignes ETS - Montréal - 2009
  • 24. Transcompilateur- Liaison différée Générer du code optimal et spécifique à chaque fureteur Copyright Google 2008 « Ne payez que pour ce que vous utilisez » GTI-780 / MTI-780 * Source : http://www.google.com ETS - Montréal - 2009
  • 25. Client léger HTML vs client riche Ajax GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 26. Transcompilateur – Code optimisé! Copyright Google 2008 « Ne payez que pour ce que vous utilisez » GTI-780 / MTI-780 * Source : http://www.google.com ETS - Montréal - 2009
  • 27. GWT – Structure bibliothèque & API GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 28. Vue d'ensemble de l'architecture GWT Trans compilateur Interface Java à Bibliothèque Native JavaScript d'émulation JavaScript JRE JSNI GWT API Bibliothèque Communication IUG avec le serveur Analyseur Gestion de Intégration Widgets & RPC & Ajax XML l'historique à JUnit Panels GTI-780 / MTI-780 ETS - Montréal - 2009
  • 29. GWT – Structure bibliothèque & API La structure du gwt-user.jar de GWT 1.5.3 Note : Transcompilateur GWT Trans dans gwt-dev-windows.jar compilateur Interface Java à Bibliothèque Native JavaScript d'émulation JavaScript JRE JSNI GWT API Bibliothèque Communication IUG Analyseur Gestion de Intégration avec le serveur Widgets & XML l'historique à JUnit RPC & Ajax Panels GTI-780 / MTI-780 ETS - Montréal - 2009
  • 30. Transcompilateur Java à JavaScript Code Java MonProjet .java Code JavaScript MonProjet.js Ressources MonProjet. html MonProjet.css, RessourcesMonPr .png, .jpg, .gif Transcompilateur ojet. html MonProjet.css, Configuration .png, .jpg, .gif Module MonProjet.gwt .xml Autres .jar Gwt-dev- gwt-user.jar Compatibles windows.jar avec GWT GTI-780 / MTI-780 ETS - Montréal - 2009
  • 31. Transcompilateur Java à JavaScript  Du JavaScript plus rapide que du code écrit à la main !!! Ainsi, ceci public static void onModuleLoad() { Button b = (new Button()).Button(); b.setText("Java vers JavaScript"); } après compilation, donnera quelque chose comme cela... function onModuleLoad(){ var b; b = $Button(new Button()); $setInnerText(b.element, 'Java vers JavaScript'); } GTI-780 / MTI-780 ETS - Montréal - 2009
  • 32. Emulation – JRE (Java Runtime Environment) Le transcompilateur de GWT fournit l'émulation en JavaScript d'un sous-ensemble du langage Java (JRE) généralement utilisé pour la programmation de base java.lang, java.util, java.io, java.sql Restriction pour le code client devant être traduit en JavaScript. Aucune restriction n'est imposée du côté du code serveur : Java (JSP/JSF/Servlet), PHP, ASP .NET, Perl, RoR, Python, Perl, ... GTI-780 / MTI-780 * Source image : http://www.sun.com ETS - Montréal - 2009
  • 33. JSNI : JavaScript Native Interface GWT permet l'intégration facile avec des bibliothèques JavaScript externes grâce à son JavaScript Native Interface (JSNI) Interagir directement avec JavaScript (accès natif) à partir de Java et vice-versa Inclusion automatique des bibliothèques JavaScript GWT 1.5 introduit le concept de JavaScript Overlay pour simplifier l'intégration de prototypes JavaScript dans GWT GTI-780 / MTI-780 ETS - Montréal - 2009
  • 34. JSNI : JavaScript Native Interface  GWT permet l'intégration facile avec des bibliothèques JavaScript externes grâce à son JavaScript Native Interface (JSNI)  Interagir directement avec JavaScript à partir de Java et vice-versa  Inclusion automatique des bibliothèques JavaScript // Déclaration de la méthode en Java... native String inverserNomPrenom(String nom) /*-{ // Implémentation en JavaScript var re = /(w+)s(w+)/; return name.replace(re, '$2, $1'); }-*/; GTI-780 / MTI-780 ETS - Montréal - 2009
  • 35. JSNI : Type Overlay JavaScript GWT 1.5 introduit le concept de JavaScript Overlay pour simplifier l'intégration de prototypes JavaScript dans GWT Une structure de données JSON (JavaScript Object Notation) var electionsJSON = [ { "Prenom" : "Pauline", "NomFamille" : "Marois" }, { "Prenom" : "Amir", "NomFamille" : "Khadir" }, { "Prenom" : "Mario", "NomFamille" : "Dumont" }, { "Prenom" : "Jean", "NomFamille" : "Charest" } ]; // Un type Overlay JavaScript class PoliticienQC extends JavaScriptObject { // Un type Overlay JS a toujours un constructeur protected, à zéro argument protected PoliticienQC() { } // Les méthodes dans un Overlay JavaScript sont en JSNI public final native String getPrenom() /*-{ return this.Prenom; }-*/; public final native String getNomFamille() /*-{ return this.NomFamille; }-*/; // Notez, toutefois, que toutes les méthodes ne sont pas obligatoirement en JSNI public final String getNomComplet() { return getPrenom() + " " + getNomFamille(); } } GTI-780 / MTI-780 * Source : http://googlewebtoolkit.blogspot.com ETS - Montréal - 2009
  • 36. JSNI : Type Overlay JavaScript // Obtenir un prototype JavaScript pour l'Overlay class MonModuleEntryPoint implements EntryPoint { public void onModuleLoad() { PoliticienQC p = getPremierPoliticien(); // Youppi! Maintenant j'ai un prototype JavaScript qui est aussi un PoliticienQC Window.alert("Bonjour, " + p.getPrenom()); } // Utilisation de JSNI pour obtenir le prototype JSON que nous désirons // Le prototype JSON object reçoit un type Java implicitement // en se basant sur le type retourné par la méthode private native PoliticienQC getPremierPoliticien() /*-{ // Obtenir une référence au premier PoliticienQC dans le tableau JSON return $wnd.electionsJSON[0]; }-*/; } GTI-780 / MTI-780 * Source : http://googlewebtoolkit.blogspot.com ETS - Montréal - 2009
  • 37. Génie logiciel pour les applications Web riches & Ajax  Support du cycle de vie complet du logiciel  Patrons de conception OO éprouvés  EDIs* Java matures  Cycle : édition / test / débogage /  Restructuration (refactoring)  Support au débogage  Détection d'erreurs à la compilation  Mise au point & débogage en mode hôte  Journalisation (logging)  Support de JUnit * EDI : environnement de développement intégré (en anglais IDE) GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 38. Intégration à Eclipse GTI-780 / MTI-780 ETS - Montréal - 2009
  • 39. Intégration à Eclipse – Mode Hôte GTI-780 / MTI-780 ETS - Montréal - 2009
  • 40. GWT en « mode hôte » - Débogage Application GWT peut s'exécuter en « mode hôte » (“Hosted Mode”) En « mode hôte », la JVM exécute le code GWT comme du bytecode Java à l'intérieur d'une fenêtre de navigateur Web L'exécution en « mode hôte » facilite le débogage : Éditer le code-source Rafraîchir Examiner les résultats GTI-780 / MTI-780 ETS - Montréal - 2009
  • 41. Structure d'un projet GWT 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 GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 42. Intégration à Eclipse – débogueur GTI-780 / MTI-780 ETS - Montréal - 2009
  • 43. GWT en « Mode Web » - Déploiement  Une fois testé en « Mode Hôte », vous pouvez compiler votre code source Java en JavaScript et déployer votre application Web  Une application Web GWT qui a été déployée est dite en « Mode Web »  Une fois compilé le code-client est uniquement du pur JavaScript et du HTML  Afinde déployer votre application Web en production, vous déplacez les fichiers du répertoire « war » sur le serveur Web, i.e. Tomcat (ou Apache) GTI-780 / MTI-780 ETS - Montréal - 2009
  • 44. Vue d'ensemble de la bibliothèque de composants d'interface utilisateur (IU) Composants d'interface-utilisateur Programmation par événements Exemples d'événements Gestion des événements Panneaux Bouton simple Case à cocher Bouton radio Boîte de texte Liste déroulante Arbre Éditeur de textes Support des CSS I18N Gestion de l'historique GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 45. IU - Composants Balises HTML usuelles, comme img, anchor, hyperlink Bouton, bouton radio, bouton à bascule, case à cocher Menu, sous-menu, menu déroulant Champ de texte, zone de texte Onglets, liste déroulante, boîte de dialogue Séparateurs de fenêtre Widgets complexes comme des tables, boîte de téléversement de fichier, widget d'arbres, éditeur de texte enrichi, Différents panneaux très utiles pour la disposition GTI-780 / MTI-780 ETS - Montréal - 2009
  • 46. IU – Programmation par événements Essentiellement de la programmation par événements Une méthode ou procédure s'exécute quand un événement est déclenché Dans une IU, un événement est déclenché chaque fois que l'utilisateur clique sur la souris, appuie sur une touche du clavier, sélectionne un élément dans un menu, ouvre ou ferme une fenêtre, etc. À chaque composant de l'IU appelé aussi contrôle ou widget (comme un bouton, un menu, etc.) est associé un ou plusieurs gestionnaires d'événements (Listener ou Handler) qui peuvent comporter des paramètres GTI-780 / MTI-780 ETS - Montréal - 2009
  • 47. IU – Exemples d'événements OnClick – déclenché quand l'usager clique un élément OnBlur – déclenché quand un élément perd le focus du clavier OnChange - déclenché quand le contenu de la saisie change OnFocus – déclenché quand un élément reçoit le focus clavier OnKeyDown – déclenché quand l'usager appuie sur une touche OnKeyUp – déclenché quand l'usager relâche une touche OnKeyPress – déclenché quand un caractère est généré OnMouseOver – déclenché quand la souris passe au-dessus OnMouseMove – déclenché quand la souris entre dans la zone OnMouseOut – déclenché quand la souris sort de la zone OnScroll – déclenché quand un élément avec défilement bouge OnLoad – déclenché quand un élément termine de se charger OnDblClick – déclenché quand l'usager double-clique - Montréal - 2009 GTI-780 / MTI-780 ETS
  • 48. IU – Récepteur / gestionnaire d'événements  GWT utilise le concept de récepteur ou gestionnaire (« listener interface ») pour traiter les événements  Semblable à d'autres canevas d'applications graphiques comme SWING  Le récepteur via l'interface “listener interface” définit une ou plusieurs méthodes que le widget appelle en réaction à un événement Button unBouton = new Button("Cliquez moi!"); unBouton.addClickListener(new ClickListener() { public void onClick(Widget emetteur) { // traitement du Clic } }); GTI-780 / MTI-780 ETS - Montréal - 2009
  • 49. Interface Utilisateur - Composants Éléments statiques: étiquette (Label), HTML, Image, hyperlien (Hyperlink), champ caché (Hidden) Widgets (E/S) : bouton (Button), bouton poussoir (PushButton), bouton à bascule (ToggleButton), case à cocher (CheckBox), bouton radio (RadioButton), menu déroulant (ListBox), zone de texte (TextBox), zone de texte avec suggestions (SuggestBox), zone d'entrée de mot de passe (PasswordTextBox), zone de texte multiligne (TextArea), zone d'édition de texte enrichi (RichTextArea) Widgets complexes : arbre (Tree), barre de menus (MenuBar), téléversement de fichiers (FileUpload) Panneaux de disposition simple : panneau en file (FlowPanel), panneau horizontal (Horizontal Panel), panneau vertical (VerticalPanel), panneau à coulisse (HorizontalSplitPanel, VerticalSplitPanel), panneau HTML (HTMLPanel), panneau superposé (DeckPanel) Panneaux de disposition complexe : table flexible* (FlexTable), grille (Grid), panneau polyptyque* (DockPanel), panneau à onglets (TabPanel), panneau en pile (StackPanel) Panneaux conteneurs simples : panneau composite ou composite (Composite) panneau simple (SimplePanel), panneau à barre de défilement (ScrollPanel), panneau de focus (FocusPanel) Panneaux conteneurs complexes : panneau de formulaire (FormPanel), panneau à dévoilement* (DisclosurePanel), panneau surprise* (PopupPanel), boîte de dialogue (DialogBox) http://gwt.google.com/samples/Showcase/Showcase.html GTI-780 / MTI-780 ETS - Montréal - 2009
  • 50. Interface Utilisateur - Panneaux DisclosurePanel VerticalPanel HorizontalSplitPanel HorizontalPanel VerticalSplitPanel FlowPanel DockPanel TabPanel PopupPanel GTI-780 / MTI-780 http://gwt.google.com/samples/Showcase/Showcase.html ETS - Montréal - 2009
  • 51. Interface Utilisateur – Bouton simple Bouton (Button) // Création d'un bouton qui réagit à un clic grâce à un récepteur de clic Button bouton = new Button("Cliquez-moi", new ClickListener() { public void onClick(Widget sender) { Window.alert("Bonjour GWT"); } }); GTI-780 / MTI-780 ETS - Montréal - 2009
  • 52. Interface Utilisateur – Case à cocher Case à cocher (CheckBox) // Création d'une case à cocher CheckBox caseResidentMtl = new CheckBox("Résident de Montréal"); // La case est cochée par défaut caseResidentMtl.setChecked(true); // Attacher un récepteur de clic à la case caseResidentMtl.addClickListener(new ClickListener() { public void onClick(Widget sender) { boolean estMontrealais = ((CheckBox) sender).isChecked(); Window.alert( (estMontrealais ? "" : "non") + " Montréalais"); } }); GTI-780 / MTI-780 ETS - Montréal - 2009
  • 53. Interface Utilisateur – Bouton radio Bouton radio (RadioButton) // Création d'un groupe de boutons radio RadioButton rbBleu = new RadioButton("groupeRbCouleurs", "bleu"); RadioButton rbBlanc = new RadioButton("groupeRbCouleurs", "blanc"); RadioButton rbRouge = new RadioButton("groupeRbCouleurs", "rouge"); // Cocher le bouton bleu par défaut rbBleu.setChecked(true); // Ajouter le groupe de boutons radio à un panneau FlowPanel panneau = new FlowPanel(); panneau.add(rbBleu); panneau.add(rbBlanc); panneau.add(rbRouge); GTI-780 / MTI-780 ETS - Montréal - 2009
  • 54. Interface Utilisateur – Boîte de texte • Boîte de texte (TextBox) TextBox zoneSaisie = new TextBox(); // Interdire la saisie de texte non numérique zoneSaisie.addKeyboardListener(new KeyboardListenerAdapter() { public void onKeyPress(Widget emetteur, char codeCar, int modifiers) { if ((!Character.isDigit(codeCar)) && (codeCar != (char) KEY_TAB) && (codeCar != (char) KEY_BACKSPACE) && (codeCar != (char) KEY_DELETE) && (codeCar != (char) KEY_ENTER) && (codeCar != (char) KEY_HOME) && (codeCar != (char) KEY_END) && (codeCar != (char) KEY_LEFT) && (codeCar != (char) KEY_UP) && (codeCar != (char) KEY_RIGHT) && (codeCar != (char) KEY_DOWN)) { // Annuler l'événement KeyPress ( (TextBox) emetteur ).cancelKey(); } } }); GTI-780 / MTI-780 ETS - Montréal - 2009
  • 55. Interface Utilisateur – Liste déroulante • Liste déroulante (ListBox) // Créer une liste, et lui ajouter quelques items ListBox listeChoix = new ListBox(); listeChoix.addItem("Pied-De-Vent"); listeChoix.addItem("Notre-Dame-des-Neiges"); listeChoix.addItem("Migneron"); listeChoix.addItem("Riopelle de l'Isle"); listeChoix.addItem("Bleu Bénédictin"); // Faire assez de place pour les 6 items listeChoix.setVisibleItemCount(6); // Ajouter un gestionnaire sur les événements de sélection listeChoix.addChangeHandler(new ChangeHandler() { public void onChange(ChangeEvent event) { alert(listeChoix.getSelectedIndex().getValue()); } }); GTI-780 / MTI-780 ETS - Montréal - 2009
  • 56. Interface Utilisateur – Arbre • Arbre (Tree) : une hiérarchie déployable de widgets TreeItem tronc = new TreeItem("Racine"); tronc.addItem("item 0"); tronc.addItem("item 1"); tronc.addItem("item 2"); // Ajouter une case à cocher à l'arbre TreeItem item = new TreeItem(new CheckBox("item 3")); tronc.addItem(item); Tree arbre = new Tree(); arbre.addItem(tronc); GTI-780 / MTI-780 ETS - Montréal - 2009
  • 57. Interface Utilisateur – Éditeur de textes Éditeur de textes riche (RichTextArea) // Crée la zone d'édition et sa barre de menu RichTextArea editeur = new RichTextArea(); editeur.setSize("100%", "14em"); RichTextToolbar barreMenu = new RichTextToolbar(editeur); barreMenu.setWidth("100%"); // Ajoutez les composants à un panneau Grid panneauGrille = new Grid(2, 1); panneauGrille.setStyleName("editeur"); panneauGrille.setWidget(0, 0, barreMenu); panneauGrille.setWidget(1, 0, editeur); GTI-780 / MTI-780 ETS - Montréal - 2009
  • 58. Support des CSS  Séparation du code et de la présentation  Code Java : public ListWidget(String Item) { ... setStyleName(“gwt-ListWidget”); }  Fichier CSS : .gwt-ListWidget { background-color:black; color:lime; } GTI-780 / MTI-780 ETS - Montréal - 2009
  • 59. Support des CSS - conseils Code Java : (usage de CSS primaire et dépendant) MonPetitWidget monPW = new MonPetitWidget(); monPW.setStylePrimaryName("monPetitWidget"); monPW.addStyleDependentName("selected"); Fichier CSS : .monpetitWidget { background-color:black; color:lime; } .monPetitWidget .monPetitWidget-selected { color:red; } Permet de faire varier facilement l'apparence en fonction de l'état Note : Ne pas utiliser les CSS pour la disposition (ex. .monPetitWidget { position: absolute; } ) GTI-780 / MTI-780 ETS - Montréal - 2009
  • 60. I18N – Internationalisation GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 61. I18N  Le transcompilateur GWT utilise la liaison différée (« Deferred Binding ») pour générer une version différente de l'application Web pour chaque langue  Par exemple, puisque GWT supporte 4 navigateurs différents, si votre application doit fonctionner en 3 langues, le transcompilateur de GWT produira 12 versions différentes de votre application au moment de la compilation À l'exécution, GWT choisira la bonne version de l'application à montrer à l'utilisateur GTI-780 / MTI-780 ETS - Montréal - 2009
  • 62. I18N – mécanismes de localisation  “Constants” pour des chaînes constantes et des réglages  “Messages” pour les chaînes avec des arguments  “DateTimeFormat” pour les dates et l'heure  “NumberFormat” pour les nombres et les unités de mesure  Pas de processus dynamique (tout est statique et fait à la compilation), sinon il faut développer son propre mécanisme GTI-780 / MTI-780 ETS - Montréal - 2009
  • 63. Gestion de l'historique du navigateur  La gestion de l'historique du navigateur s'occupe des boutons « avancer » et « reculer » et des liens  Une API simple de gestion de l'historique basée sur une pile de jetons – Lorsque l'application démarre, la pile est vide – Lorsque l'utilisateur clique sur quelque chose • Vous pouvez ajouter des jetons sur la pile History.newItem(“nouveauJeton”) • Classe Hyperlink ajoute des jetons automatiquement – Vous pouvez aussi réagir aux événements “History events” en utilisant un HistoryListener History.addHistoryListener(controle) GTI-780 / MTI-780 ETS - Montréal - 2009
  • 64. GUI – Patrons de conception GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 65. GUI – Patrons de conception - MVC Patron MVC Client MVC Vue: Présentation découplée Affiche les Échages de événements données informations et achemine les actions de l'usager V C mise à jour no es not né tiifii acc Contrôleur: fc ccè do on de ur atti sd nt jo a o s e onné s e nné me e à on Établit les liens n ll es n n d ge is ect es et an m entre le Modèle et ure ue M la Vue au aux ch x Reçoit les événements de la Modèle: Vue et gère les Données de l'application actions de l'usager (POJOs) Notifie les changements du modèle par des événements transmis aux vues abonnées GTI-780 / MTI-780 ETS - Montréal - 2009
  • 66. GUI – Patrons de conception - Observateur 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* 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 quelque sorte abonnés aux modifications des données du modèle. 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 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). * Patron observateur relie MV et VC dans le patron MVC GTI-780 / MTI-780 Source figure : R. Dewsbury 2008 – Chap.2, p.96 ETS - Montréal - 2009
  • 67. GUI – Patrons de conception - Composite Patron Composite (ou Object Composite) * Source : http://www.google.com * Source : http://fr.wikipedia.org/wiki/Objet_composite Facilite la création de Widgets S'utilise chaque fois qu'on crée un nouveau widget à partir de widgets existants Offre un meilleur contrôle sur l'API exposé Généralement préférable à l'utilisation de l'héritage GTI-780 / MTI-780 ETS - Montréal - 2009
  • 68. GUI – Patrons de conception - Composite 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); } } GTI-780 / MTI-780 ETS - Montréal - 2009
  • 69. Communication client-serveur & Ajax GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 70. Ajax – Diagramme de collaboration GTI-780 / MTI-780 Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php ETS - Montréal - 2009
  • 71. Ajax – Diagramme de séquence En mode synchrone, le fureteur est gelé en attendant la réponse du serveur. 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. Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php GTI-780 / MTI-780 ETS - Montréal - 2009
  • 72. Communication avec le serveur & Ajax Le RPC (« Remote Procedure Call »), appel de procédure à distance RPC rend facile l'échange d'objets Java ou POJOS (sérialisés) entre le code-client et le code-serveur Fournit une procédure automatique de sérialisation des objets Autres outils Ajax : HTTPRequest RequestBuilder FormPanel Support de : XML JSON (JavaScript Object Notation) GTI-780 / MTI-780 ETS - Montréal - 2009
  • 73. Compilation & déploiement serveur RPC WEB-INF/ Eclipse classes/../client/ Données à Échanger Model/ MesDonnee MesDonneesDO DO Services/ MonService MonServiceAsync Interfaces client Java Compilateur classes/../server/ MonService MonService Java Async MonServiceImpl MonServiceImpl (servlet) (servlet) Code Java Serveur (servlet) MonService lib/ Impl gwt-servlet.jar gwt-servlet.jar Configuration web.xml Autres .jar gwt-user.jar gwt-servlet.jar serveurs sans restrictions Configuration web.xml GTI-780 / MTI-780 ETS - Montréal - 2009
  • 74. Client léger HTML vs client riche Ajax Client HTML (fureteur) Serveur sans état avec état (stateless) (statefull) Pas d'état persistant entre les transactions qui sont considérées comme indépendantes Client JavaScript (fureteur) Serveur avec état sans état (statefull) (stateless) Pas d'état persistant entre les transactions qui sont considérées comme indépendantes GTI-780 / MTI-780 * Source : http://www.google.com ETS - Montréal - 2009
  • 75. Appel de procédure à distance GWT 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 J hébergés sur un serveur JEE. Client et serveur parlent alors le même langage, i.e. le Java GTI-780 / MTI-780 * Source : http://www.google.com ETS - Montréal - 2009
  • 76. RPC (Remote Procedure Call) Un objet Java MesDonneesDO à échanger import com.google.gwt.user.client.rpc.IsSerializable; public class MesDonneesDO implements IsSerializable { //... } Une première interface définit le service import com.google.gwt.user.client.rpc.RemoteService; public interface MonService extends RemoteService { MesDonneesDO getReponseMonService(String requete); } 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 appeler le service. import com.google.gwt.user.client.rpc.AsyncCallback; public interface MonServiceAsync { public void getReponseMonService(String requete, AsyncCallback maProcedureDeRappel); } GTI-780 / MTI-780 ETS - Montréal - 2009
  • 77. RPC - Code-serveur Classe à implémenter du côté serveur hérite de com.google.gwt.user.server.rpc.RemoteServiceServlet import com.google.gwt.user.server.rpc.RemoteServiceServlet; import qc.ets.web2.gwt.client.MesDonneesDO; import qc.ets.web2.gwt.client.MonService; public class MonServiceImpl extends RemoteServiceServlet implements MonService { public MesDonneesDO getReponseMonService(String requete) { if (requete.length() < 1) { throw new IllegalArgumentException("Requete invalide."); } MesDonneesDO resultat = new MesDonneesDO(); resultat.setDonnees("..."); if ( isInvalide( resultat )) { return null; } return resultat; } public boolean isInvalide(MesDonneesDO resultat) { Return true; // à modifier } } GTI-780 / MTI-780 ETS - Montréal - 2009
  • 78. RPC - Code-client 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. public class MonClientRPC implements EntryPoint { public void onModuleLoad() { final Button bouton = new Button("Appel RPC"); final MonServiceAsync serviceProxy = (MonServiceAsync)GWT.create(qc.ets.web2.gwt.client.MonService.class); ServiceDefTarget pointService = (ServiceDefTarget) serviceProxy; pointService.setServiceEntryPoint(GWT.getModuleBaseURL() + "/reponseService"); bouton.addClickListener(new ClickListener( ) { public void onClick(Widget emetteur) { AsyncCallback maProcedureDeRappel = new AsyncCallback() { public void onSuccess(Object resultat) { MesDonneesDO resultatDO = (MesDonneesDO) resultat; System.out.println("*** SUCCES RPC ***n" + resultatDO.getDonnees()); } public void onFailure(Throwable erreur) { System.out.println("*** ERREUR RPC ***" + erreur.getMessage()); } }; serviceProxy.getReponseMonService("Requete bidon", maProcedureDeRappel); }}); RootPanel.get("emprise1").add(bouton); } } GTI-780 / MTI-780 ETS - Montréal - 2009
  • 79. Intégration facile aux APIs Google GTI-780 / MTI-780 ETS - Montréal - 2009
  • 80. Intégration facile aux APIs Google  Google offre un riche écosystème d'APIs en source libre  Androïd : plateforme Java en source libre pour la téléphonie intelligente  AppEngine : hébergement d'applications Java dans le nuage  OpenSocial : norme libre pour les sites sociaux  Google Maps : services de cartes et géolocation  Google Ajax Searh APIs : le moteur Google Search  Google Gears API : BD locale et navigation hors ligne  Google Language API : services de traduction  YouTube widget ? GTI-780 / MTI-780 ETS - Montréal - 2009
  • 81. Démo – Bâtir des applications GWT GWT en Action GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 82. Créer un squelette d'application GWT  GWT crée automatiquement un code-client rudimentaire  Vous pouvez ensuite mettre de la chair sur ce squelette dans le but de créer une application Web plus sophistiquée GWT GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 83. Créer un squelette d'application GWT public class Bonjour implements EntryPoint { public void onModuleLoad() { Button bouton = new Button("Cliquez-moi!", new ClickListener() { public void onClick(Widget sender) { Window.alert("Bonjour GWT"); } }); RootPanel.get().add(bouton); } } GTI-780 / MTI-780 ETS - Montréal - 2009
  • 84. Enrichir une page web  GWT permet d'ajouter des composants graphiques interactifs dans une page Web  Un composant GWT peut être intégré dans n'importe quelle page HTML, ainsi l'application continue à ressembler à une page Web  Tout fichier HTML incluant un certain jeu de balises peut servir de support à une application GWT  GWT ne cherche pas exclusivement à ressembler à une application bureautique en exécution locale  Le résultat est juste une meilleure application Web  Exemple : application d'ouverture de session (login) GTI-780 / MTI-780 ETS - Montréal - 2009
  • 85. Créer des applications Web similaires à des applications bureautiques locales  Ouverture de plusieurs fenêtres à la fois dans le navigateur  Déplacement des fenêtres dans le navigateur, redimensionnement et défilement des fenêtres  Glisser et déposer des contenus  Applications Web se comportant « comme des applications bureautiques locales » GTI-780 / MTI-780 ETS - Montréal - 2009
  • 86. Qui peut le mieux profiter de GWT ? J' GWT GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 87. Qui peut le mieux profiter de GWT ?  Designers Web – GWT utilise les feuilles de style CSS – Doivent apprendre Java  Développeurs d'applications Web – Une application GWT s'exécute sur le client plutôt que d'être contrôlée entièrement par le serveur – Doivent maîtriser les technologies du client et de présentation  Développeurs Ajax (gourous JavaScript) – GWT intègre facilement le code JavaScript grâce à JSNI – Doivent laisser tomber certaines habitudes du codage JS  Développeurs d'applications Java – Réaliser des Web-app. avec des outils et un environnement familier – Doivent apprendre CSS & les restrictions particulières des Web-app. GTI-780 / MTI-780 ETS - Montréal - 2009
  • 88. Des emplois... GTI-780 / MTI-780 * Source : http://www.indeed.com ETS - Montréal - 2009
  • 89. GWT vs autres solutions Web riche GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 90. GWT vs autres solutions Web riche Outils purs JavaScript (Scriptaculous, Prototype, DWR, JQuery, YUI, etc.) Facilitent beaucoup la programmation JavaScript mais ça reste du JavaScript! JavaServer Faces - Norme JEE, canevas d'applications Web populaire, basé sur le serveur, plutôt complexe JavaFX - Trop tôt pour se prononcer, exige JVM, langage à script Java Applet - Trop lourd, exige JVM, doivent beaucoup s'améliorer ZK - Rapide et facile à programmer, basé sur le serveur, licence GPL Adobe Flash, Flex, AIR (Adobe Integrated Runtime) et OpenLazslo Basé sur le serveur, +/- propriétaire, exige plugiciel Flash, langage à scripts Micro$oft Silverlight - Pas Java, propriétaire & basé Windows Windows...Volta, 5 décembre 2007, une copie GWT pour .NET http://labs.live.com/volta Ruby - Innovateur, mais toujours à base de pages et basé sur le serveur.. GTI-780 / MTI-780 ETS - Montréal - 2009
  • 91. GWT - Avantages & inconvénients GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 92. GWT - Avantages Bon pour enrichir des applications Web avec Ajax et créer des applications Web de « style bureautique » Un seul langage: JAVA Développement et mise au point rapide dans des EDIs favorisant une bonne productivité et qualité du code Riche bibliothèque de composants (~ SWING) Très bon support Ajax Performant & économe en ressources réseau & serveur Code source libre, licence Apache 2, bien documenté Supporté par GOOGLE... et l'écosystème des outils Google Pas magique mais GWT a le potentiel de devenir le « prochain gros truc » GTI-780 / MTI-780 ETS - Montréal - 2009
  • 93. GWT - Inconvénients JS Ajax GTI-780 / MTI-780 ETS - Montréal - 2009
  • 94. GWT - Inconvénients  Nécessite que le fureteur exécute JavaScript  Exige la connaissance de la programmation Java  Exige une séparation nette client et serveur  Les composants (Widgets) sont de sources et de qualités inégales  Dépend des performances du transcompilateur  Quelques problèmes de compatibilité entre les fureteurs Web, surtout au niveau des CSS  Certains problèmes demandent une expertise JS  L'aspect sécurité est à surveiller  GWT ne va pas résoudre « magiquement » tous les problèmes avec Ajax ou le Web 2.0 GTI-780 / MTI-780 ETS - Montréal - 2009
  • 95. Ressources - Livres GWT in Action: Easy Ajax with the Google Web Toolkit par Robert Hanson, Adam Tacy 600 pages Manning Publications (5 juin, 2007) www.manning.com/hanson/ Google Web Toolkit Applications par Ryan Dewsbury 608 pages Prentice Hall (15 décembre, 2007) www.gwtapps.com GTI-780 / MTI-780 ETS - Montréal - 2009
  • 96. Ressources - Livres Google Web Toolkit Solutions : More Cool & Useful Stuff par David Geary, Rob Gordon 408 pages Prentice Hall (17 novembre, 2007) www.coolandusefulgwt.com GWT in Practice par Robert T. Cooper, Charlie E. Collins 358 pages Manning Publications (12 mai, 2008) www.manning.com/cooper/ GTI-780 / MTI-780 ETS - Montréal - 2009
  • 97. Ressources - Outils GWT Designer Éditeur graphique Plugiciel Eclipse www.instantiations.com/gwtdesigner Sites http://code.google.com/webtoolkit/ http://groups.google.com/group/Google-Web-Toolkit www.ongwt.com GTI-780 / MTI-780 ETS - Montréal - 2009
  • 98. Questions ? GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009