Tutorial GWT : Rapport de mini projet J2EE avec JAVA , GWT , Cypal , Oracle , EXT , GwtExt et Eclipse by MedMst

VIEWS: 11,792 PAGES: 48

Tutorial GWT : un mini projet en Eclipse JEE crée avec GWT , GwtExt , Ext , Cypal , Oracle ...

More Info
									              Projet JEE




              Pour une bonne communication entre le serveur et le navigateur du client.



Réalisé par :
           Mohamed HABOU
           Yassir JANATI IDRISSI                                   Encadré par :
                                                                             Dr. FENNAN




              Année universitaire 2009-2010
Sommaire
                                                                                                                                                                                              2
I.          Introduction ............................................................................................................................................................. 3
II.         Librairies et versions utilisées pour les besoins de ce projet : ................................................................................. 3
III.        Présentation du Framework Google Web ToolKit ................................................................................................... 4
               Introduction ........................................................................................................................................................ 4
               Le principe du framework ................................................................................................................................... 5
               Les outils .............................................................................................................................................................. 6
               Les licences .......................................................................................................................................................... 7
IV.         GWT : Architecture des dossiers, fichiers et packages ............................................................................................ 7
               Le projet .............................................................................................................................................................. 7
               Dossier src ........................................................................................................................................................... 8
V.          Installation ............................................................................................................................................................... 8
        Création du projet ...................................................................................................................................................... 10
        La page web de base : WelcomePage.html ............................................................................................................... 17
        Le programme Java .................................................................................................................................................... 17
Débogage et Exécution du projet avec Google Web Toolkit Hosted Mode : ..................................................................... 18

1ère partie

Création d'un programme de base (User Interface) ........................................................................................................... 26

2ème partie

I.          Des langages différents ......................................................................................................................................... 34
II.         Le même projet, mais deux utilisations différentes .............................................................................................. 34
III.        Deux interfaces, une classe ................................................................................................................................... 36
IV.         Des noms formatés ................................................................................................................................................ 36
V.          Une déclaration nécessaire ................................................................................................................................... 37
VI.         Une implémentation de la partie Serveur ............................................................................................................. 38
VII.        Connexion à la base de données ............................................................................................................................ 42

3ème partie

I.          La gestion des navigateurs..................................................................................................................................... 47
II.         L'optimisation du code .......................................................................................................................................... 48
III.        La communication client/serveur .......................................................................................................................... 48
Conclusion .......................................................................................................................................................................... 48
  I.    Introduction
Nous avons beaucoup cherché sur internet des références, des exemples, des tutoriaux mais nous avons été
régulièrement frustré par la simplicité des exemples qui reste relativement éloigné du monde réel. Le
simple hello world est très vite frustrant lorsque vous voulez aborder la sécurisation de votre application, le
                                                                                                                  3
build automatisé, le packaging, le debugging etc...

L'application que nous allons développer au cours de ce projet se veut plus complet afin d'aborder un grand
nombre de pièges communs. Il est loin d'être parfait mais comporte quelques éléments intéressants qui,
nous l'espère, vous permettront d'en apprendre davantage et de partir du bon pied sur un projet plus
complexe.

L'objectif de ce projet est de travailler avec Google Web Toolkit et faire un petit atelier expliquant le
fonctionnement de ce Framework, les diverses librairies, l’installation et la configuration de ce Framework,
la connexion avec la base de données …



 II.    Librairies et versions utilisées pour les besoins de ce projet :
                       Eclipse est un environnement de développement intégré libre extensible,
                       universel et polyvalent, permettant de créer des projets de développement
                       mettant en œuvre n'importe quel langage de programmation. Eclipse IDE est
                       principalement écrit en Java
                       GWT version 1.7.1 pour windows :

                       Google Web Tookit est un framework java open source qui permet d'écrire des
                       applications AJAX. Gmail, Google Maps utilisent ce framework. Ce framework
                       permet de faciliter le développement d'application en oubliant les contraintes des
                       navigateurs internet.



                       GWT-Ext version 2.0.1:

                       GWT-Ext est une librarie de composant graphique, elle fait le pont entre GWT et
                       Ext.



                       Ext JS version 2.0.2
                       Ext est une bibliothèque Javascript permettant de construire des applications web
                       interactives. Ext apporte un certain nombre de composants visuels d'une grande
                       qualité comme des champs de formulaires avancés, des arbres, des tableaux, menu
                       et barre d'outils, onglets, boites de dialogue. La version 2.0 est de sortie le 4
                       décembre 2007. Il s'agit d'une amélioration majeure de la bibliothèque.




                       Cypal Studio version 1.0 : est un plugin pour Eclipse qui offre des fonctionnalités
                       similaires. Il est limité à la version 1.5 de GWT
III.     Présentation du Framework Google Web ToolKit

Google Web Toolkit (GWT) est une plate-forme qui sert à créer des applications Ajax en utilisant Java
                                                                                                             4
comme langage de programmation. GWT est un logiciel libre qui met l'accent sur des solutions efficaces et
réutilisables aux problèmes rencontrés habituellement par le développement Ajax : difficulté du débogage
JavaScript, gestion des appels asynchrones, problèmes de compatibilité entre navigateurs, gestion de
l'historique et des favoris, etc. A l'issue de cette formation, en plus d'avoir une vue d'ensemble de
l'écosystème GWT, les participants auront appris à développer un client riche et sauront mener à bien un
projet GWT.

Gmail, Google Maps utilisent ce framework. Ce framework permet de faciliter le développement
d'application en oubliant les contraintes des navigateurs internet.

     Introduction


AJAX, ça nettoie les navigateurs ?
Non, AJAX n'est pas un nouveau produit qui récure votre cuisine. En fait AJAX c'est plein de chose.

Pour faire simple, c'est un ensemble de technologies WEB, pas forcément récentes, mais qui, mises
ensemble, forment un concept qui fait beaucoup parler de lui. Le mieux pour tout savoir est encore d'aller
voir là : AJAX.

En définitive, AJAX n'est pas un logiciel, n'est pas un framework, ça ne se télécharge pas, mais alors que
faire? Comme d'habitude, on va chercher sur Google.

La réponse de Google




Google a rendu public depuis quelques années, un framework de développement Web estampillé AJAX.
Ce framework de développement JAVA est utilisé dans plusieurs applications Google comme
Gmail, GoogleEarth et, nous supposons, Google Notebook.

Si l'on reprend la définition du dictionnaire, la mise en place de l'AJAX dans une application WEB soulève
plusieurs problèmes.



       Inconvénients :

           - ergonomie : l'utilisation d'Ajax entraîne une impossibilité pour
       l'utilisateur d'utiliser son bouton "Retour" de façon attendue.

            De la même façon, Ajax pose des problèmes pour la mise en place de signets
       (bookmarks) sur les pages, ainsi que pour l'indexation du contenu des pages.

           - temps de latence : les appels vers le serveur peuvent avoir des temps de
       latence importants qui sont mal perçus et compris par les utilisateurs.

           - utilisation de JavaScript : le moteur Ajax fait fortement appel au
       JavaScript.
          Il faut prévoir pour les utilisateurs ayant désactivé Javascript ou ne
     pouvant pas l'utiliser, une solution de repli acceptable.

         - complexité des développements : comme tout composant additionnel Ajax offre
     des possibilités, mais la mise en place peut se révéler coûteuse au moment du
     développement.
                                                                                                              5
A travers GWT, Google a essayé d'offrir une réponse à ces problèmes.

Pour les temps de latence, il n'y a pas vraiment d'alternative à part proposer, comme dans toute
application, un message de patience (solution retenue dans GMail).

Pour le reste, GWT offre une solution plus ou moins élégante.

Pour résoudre le problème d'historique entre les pages, Google a mis au point un composant que l'on
intègre à notre application sous forme d'IFrame :

     <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>



Cette IFrame va faire en sorte que l'historique des pages soit respecté et permette l'utilisation du bouton
précédent du navigateur.

Néanmoins, le principal avantage de ce framework reste la simplicité de développement.

La complexité est réduite du fait d'un développent en JAVA: un seul langage, une seule technologie, on
s'extrait avec bonheur du débuggage JavaScript.

De plus, GWT fournit une base de classes JUNIT pour tester son application.

     Le principe du framework


Le développement d'applications AJAX avec GWT suit un processus simple :

    1. Créer votre projet Eclipse avec les outils fournis (projectCreator ou applicationCreator);
    2. Créer votre application en JAVA dans Eclipse;

    3. Debugguer le code avec Eclipse et l'environnement GWT;

    4. Compiler votre application avec l'outil Java2Javascript;

    5. Déployer votre application.

         a)     Le framework coté zip
Le framework GWT est fourni sous forme d'archive.
Il est développé en JAVA mais l'outil de prévisualisation étant réalisé avec SWT, deux archives sont donc
proposées : une pour Windows et l'autre pour le monde Linux.
Pour information, cette différence de plateforme n'impacte que le poste du développeur.
En production, on utilise bien une seule et même librairie quel que soit le système d'exploitation.
                                                                                                               6
                                       L'archive contient :
                                       - La documentation et les exemples disponibles sur le site de GWT;.
                                       - Le fichier gwt-dev-windows.jar qui contient le compilateur
                                     java2javascript, ainsi que l'outil de prévisualisation et de debug;
                                       - Les scripts utilitaires, et les dll pour SWT;
                                       - Et le fichier gwt-user.jar contenant les classes GWT.

                                         b) Le Framework coté face
                                     L'utilisation de GWT implique l'utilisation de JAVA 1.4 maximum pour
                                     le développement de la partie cliente. Le développement coté serveur
                                     pouvant se faire en JAVA 1.5 sans problème.
                                     Un petit détail agaçant : l'absence de Javadoc Standard. Le détail des
                                     classes est bien fourni mais le format est peu exploitable.
                                     Heureusement, des sources documentées sont fournies et rien
                                     n'empêche de regénérer soi-même la Javadoc.

                                              Détail intéressant : Dans le cas d'une application ne
                                     nécessitant pas de dialogue avec le serveur l'ensemble de l'application
                                     générée est au format HTML standard. Un simple serveur WEB est donc
                                     nécessaire pour publier votre application, et ce sans besoin d'une JVM
                                     quelconque.



     Les outils


Les différentes commandes apportées par GWT pour démarrer un projet sont fournies sout forme de 3
scripts.
Ces 3 scripts n'étant que des appels à des fonctions Java, rien ne vous empêche de les remplacer par un
script ANT ou Maven plus adapté à votre IDE préféré.


    a) projectCreator
Cet outil permet de générer le squelette d'une application GWT standard.
De plus, il peut générer les fichiers nécessaires aux projets Eclipse et le script Ant de compilation du
projet.


    b) applicationCreator
Cet outil permet de générer, en plus du squelette, une application GWT minimaliste.
Cet outil permet de générer un ensemble de classes et de scripts, permettant le test de votre application
en mode local et distant.

     Les licences
                                                                                                               7
GWT est soumis à plusieurs licences dont http://code.google.com/webtoolkit/terms.html
Pour résumer en quelques lignes, l'ensemble du contenu généré avec le framework reste l'entière propriété
de son auteur.

       À lui de choisir sa licence.

       L'ensemble des composants fournis avec le kit (Tomcat, SWT,Xerces, etc.), sont soumis à leurs
        licences respectives.

       L'ensemble des classes fournies dans le fichier gwt-user.jar, classes nécessaires au déploiement en
        production, sont soumises à la licence Apache V2.0.

       Pour le reste, contenu dans le fichier gwt-dev-***.jar, Google n'autorise pas sa commercialisation,
        sa modification ou sa diffusion sans son autorisation.


        Mais le reste, c'est quoi ? Tout simplement le compilateur Java2Javascript.
        Google se réserve donc l'entière propriété et exploitation de son compilateur Java2Javascript, le
        reste de la solution étant Open-Source.


        Pour faire une comparaison, disons que le modèle se rapproche de celui de SUN avec la JVM.
        Il est compréhensible que Google ne souhaite pas voir son produit vendu par un autre, et surtout les
        bénéfices de cette vente aller à un autre.



IV.     GWT : Architecture des dossiers, fichiers et packages

Pour ceux qui n’auraient pas compris, en un seul coup d’oeil, l’architecture de base d’une application GWT
On va faire le tour de dossiers et packages présents dès la création d’un projet.

     Le projet


Lors de notre dernier projet, nous avons pris un screenshot de l’architecture du projet.
                                                                   Dossier src
                                                                                                                8
                                                              Le dossier src contient toute la partie
                                                              applicative de votre projet. C’est à dire tout
                                                              ce dont est capable de FAIRE votre application
                                                              web, par exemple : Lister des tweets, Ecrire
                                                              un nouveau tweet, Supprimer un Tweet mais
                                                              aussi la création de l’interface via la
                                                              manipulation du DOM.

                                                                  a) Package racine du projet


                                                              Dans ce package on trouvera tous les modules,
                                                              par défaut il n’y en a qu’un déjà tout prêt.

                                                                  b) Package client


                                                              Le package client défini tout ce qui se
                                                              trouvera du côté client de l’application. C’est
                                                              à dire tout ce qui s’exécutera du côté du
                                                              navigateur.

                                                              En réalité les classes Java que nous allons
                                                              développer dans ce package vont être
                                                              compilées en Javascript.

                                                                  c) Package server


                                                            Ce package comprends tout ce qui est
                                                            fonctionnement de l’application. C’est tout le
code qui s’exécutera du côté du serveur et qui sera pré-compilé en byte-code.



 V.      Installation

De notre part, nous n’utilisons pas directement le plugin pour Eclipse. Nous utilisons Cypal Studio .

Pour l'installer :

Copier les fichiers jar de Cypal Studio.
                                                                9



Et coller les dans le dossier plugins d’Eclipse :




Avant de créer notre projet, il faut configurer Cypal Studio.
                                                           10


Et on choisit le dossier qui contient le framework GWT :




Création du projet
11
12
13
14
15
16
                                                                                                   17



La page web de base : WelcomePage.html


Dans un projet de ce type, il y a au moins une page web de base, en html dans laquelle il y a des éléments
qui contiendront les divers objets qui seront ajoutés avec le programme Java.



Le programme Java

Dans le paquetage com.habou.client :
                                                                                                    18
Tout ce qu’est écrit en Java sera retransformé en JavaScript par le moteur applicatif fourni par Google.
Tout comme en programmation graphique avec Swing, vous utiliserez des éléments prédéfinis avec une
gestion des événements.


On ajoute un message POPUP pour tester notre application :




Débogage et Exécution du projet avec Google Web Toolkit Hosted Mode :

Configuration de Google Web Toolkit Hosted Mode :
           19




Et voila
20
                                                                                             21
Pas d’erreurs ou Warnings, maintenant tout va bien, on peut commencer de programmer notre propre
application.

Ajout de Ext et Gwt-Ext au notre projet :
22
                        23


Ajout de Gwt-Ext :

Click droit sur lib :
                                                       24
Ajoutant le même jar dans les librairies du projet :
                                                                          25




Maintenant on va modifier la page HTML :

On ajouter les lignes suivantes comme à la photo.



     <link rel="stylesheet" href="js/resources/css/ext-all.css"></link>



      <script language="javascript" src="js/adapter/ext/ext-base.js" />

      <script language="javascript" src="js/ext-all.js" />
Maintenant on va modifier le fichier de configuration de notre projet GWT :

On ajoute la ligne suivante comme la photo.
                                                                              26
     <inherits name='com.gwtext.GwtExt'/>




1ère partie

Création d'un programme de base (User Interface)




package com.habou.client;


import   com.google.gwt.core.client.EntryPoint;
import   com.google.gwt.user.client.ui.RootPanel;
import   com.gwtext.client.core.EventObject;
import   com.gwtext.client.widgets.Button;
import   com.gwtext.client.widgets.MessageBox;
import   com.gwtext.client.widgets.Panel;
import   com.gwtext.client.widgets.event.ButtonListenerAdapter;
import   com.gwtext.client.widgets.form.FormPanel;
import   com.gwtext.client.widgets.form.TextField;
import   com.gwtext.client.widgets.form.VType;
import   com.gwtext.client.widgets.layout.HorizontalLayout;
public class WelcomePage implements EntryPoint {                             27
     public WelcomePage()
     {};


     public void onModuleLoad() {

     createComponents();

     }

     public void createComponents()
     {
           final TextField txtUsername = new TextField("Username","username");
           TextField txtPassword = new TextField("Password","password");
           TextField txtEmail = new TextField("Email","email");
           TextField txtPhone = new TextField("Numero de telephone","phone");


           txtUsername.setRegex("^[a-zA-Z]*$");
           txtUsername.setRegexText("Seulement les alphabets qui ont permis ");

           txtPassword.setPassword(true);
           txtPassword.setRegex("^[a-zA-Z]*$");
           txtPassword.setRegexText("Seulement les alphabets qui ont permis ");

           txtEmail.setVtype(VType.EMAIL);

           txtPhone.setRegex("^\\d*$");
           txtPhone.setRegexText("Seulement les numeros qui ont permis ");

           final FormPanel frm = new FormPanel();
           frm.setDraggable(true);
           frm.setWidth(320);
           frm.setTitle("Test");
           frm.setPaddings(30);


           frm.add(txtUsername);
           frm.add(txtPassword);
           frm.add(txtEmail);
           frm.add(txtPhone);

           Panel buttonPannel = new Panel();
           buttonPannel.setLayout(new HorizontalLayout(10));


           Button btnSave = new Button("Enregistrer");
           btnSave.addListener(new ButtonListenerAdapter(){

                 public void onClick(Button button,EventObject e)
           {
           MessageBox.alert("Enregistrer","les champs sont bien enregistés");

           }

           });
                Button btnClear = new Button("Vider les champs");
                btnClear.addListener(new ButtonListenerAdapter(){
                      public void onClick(Button button,EventObject e)
                                                                                             28
                      {


                MessageBox.alert("Vider les champs","les champs sont vidés");
                      }

                });


                buttonPannel.add(btnSave);
                buttonPannel.add(btnClear);

                frm.add(buttonPannel);
                RootPanel.get().add(frm);
         }

     }




Les divers éléments (Button ,FormPanel,Panel …. ) sont tous disponibles dans les paquetage

        com.google.gwt.user.client.ui

        com.gwtext.client.widgets.



On va tester si tous va bien par l’exécution de l’application.




Voila notre interface :
                                         29




Voila le code qui vérifie ça :

     txtUsername.setAllowBlank(false);
                                                                            30

Voila le code qui vérifie ça :

     txtUsername.setRegex("^[a-zA-Z]*$");

     txtUsername.setRegexText("Seulement les alphabets qui ont permis ");




Voila le code qui vérifier ça :

     txtEmail.setVtype(VType.EMAIL);
                                                                       31

Voila le code qui vérifier ça :

     txtPhone.setRegex("^\\d*$");

     txtPhone.setRegexText("Seulement les numeros qui ont permis ");
                                                                                 32



Voila le code du button <<Enregister>> :

     Button btnSave = new Button("Enregistrer");

                    btnSave.addListener(new ButtonListenerAdapter(){



                              public void onClick(Button button,EventObject e)

                    {

     MessageBox.alert("Enregistrer ","Les donnees sont bien enregistres");

                  }});
                                                                                 33



Voila le code du Button <<Vider les champs>> :

     Button btnClear = new Button("Vider les champs");

                    btnClear.addListener(new ButtonListenerAdapter(){

                              public void onClick(Button button,EventObject e)

                              {

                                        txtUsername.reset();

                                        txtPassword.reset();

                                        txtPhone.reset();

                                        txtEmail.reset();

          MessageBox.alert("Vider les champs"," les champs sont vides");

                              }});
2ème partie                                                                                          34
L'intérêt d'une application web est aussi de pouvoir sauvegarder des données, comme si l'utilisateur était
sur une machine personnelle avec son espace de stockage. Dans les applications web, le stockage se fait
sur un serveur distant. Il est nécessaire de faire communiquer l'application (exécutée dans le navigateur)
avec le serveur applicatif.

La communication ne doit pas se faire de manière traditionnelle avec des formulaires HTML dont on envoi
les données avec la méthode GET ou POST à une page PHP ou JSP. Elle se fait continuellement sans avoir à
recharger la page web (avec la technologie AJAX). Si vous utilisez Google Maps, Google Documents ou une
autre application, vous remarquerez que la page n'est jamais rechargée. Les éléments évoluent
dynamiquement et les appels au serveur sont effectués selon les actions de l'utilisateur.



  I.    Des langages différents

Avec le Web Toolkit, l'application est divisée en deux parties :

       La partie client, transformée en JavaScript est exécutée dans le navigateur web ;

       La partie serveur, compilée en ByteCode et exécutée sur le serveur, dans un serveur applicatif
        Google spécifique livré avec le Web Toolkit.

Avec le Web Toolkit, les procédures d'appel (RPC, Remote Procedure Call) sont basées sur les servlets Java,
le serveur applicatif exécutant un programme Java comme serveur.




 II.    Le même projet, mais deux utilisations différentes

La partie client se trouve dans les paquetages nommés client. Toute cette partie est entièrement
transformée en JavaScript pour être exécutée par le navigateur web. Il est donc facile de comprendre que
les possibilités sont limitées et qu'il n'est pas question d'utiliser des librairies Java dont on sait que
l'utilisation sera impossible une fois transformé en JavaScript (par exemple la sérialisation n'est pas
disponible).

La partie serveur (dans les paquetages server) est quand à elle exécutée sur le serveur directement dans la
machine virtuelle Java. Donc l'intégralité des possibilités du langage Java sont conservées ainsi que
quelques ajouts concoctés par Google pour permettre la communication avec l'application client en
JavaScript.
                                                                                                        35




La communication se fait grâce à des services. Google a créé une petite astuce en réutilisant un concept
présent dans le langage Java : les interfaces.

Une interface est présente coté client, l'implémentation de cette interface est faite dans une classe
exécutée cotée serveur. Pour la communication ? Il se débrouille, vous n'avez rien à faire.

Deux interfaces doivent être créées, l'une pour la communication synchrone et l'autre pour la
communication asynchrone. Au delà, nous ne savons pas absolument comment le système gère cet aspect
en interne.

Une interface (coté client) hérite de l'interface RemoteService. Quant à la classe, elle hérite de
RemoteServiceServlet et elle implémente l'interface client.

Cette vision des choses permet de comprendre le fonctionnement très rapidement sans devoir apprendre de
nouveaux concepts ni de nouveaux langages. L'astuce de programmation utilisée par Google est très simple
et tout bon programmeur en Java n'aura aucun mal à s'adapter à cet aspect.
                                                                                                        36
III.       Deux interfaces, une classe

Attention, suivez bien car cet aspect est à la fois simple mais aussi très surprenant. Une interface coté
client décrit la classe coté serveur (en héritant de l'interface RemoteService). Les méthodes et leurs
retours sont spécifiés.

Il faut aussi créer une deuxième interface, très ressemblante à la précédente. En effet, les retours ne
peuvent pas se faire comme si le programme était exécuté en local, il faut toute une procédure en interne
pour transférer les objets sur le réseau. Cette interface est dite "Asynchrone" et elle comporte les mêmes
méthodes avec le retour void et un objet supplémentaire du type AsyncCallback dans lequel le retour sera
inséré par le système. Aucune classe dans le système implémente cette interface.

Dans une classe client, il faut créer l'objet de communication asynchrone en invoquant la méthode create()
sur l'objet GWT (exemple : GWT.create(monConnecteur.class) me retourne un objet du type
monConnecteurAsync).

Ensuite, pour appeler une méthode et récupérer le résultat :

       monObjetAsynchrone.methode(argument, new AsyncCallback<int>(){

       public void onSuccess(int result) {

       // si la connection réussit

       }

       public void onFailure(Throwable caught) {

       // si la connection échoue

       }

       });


La classe coté serveur reste classique, elle peut utiliser toutes les possibilités offertes par la machine
virtuelle Java.



IV.        Des noms formatés

Le GWT est exigent concernant les noms attribués à chaque classe et interface. L'interface porte le nom
que l'on veut, l'interface asynchrone porte le suffixe "Async" et la classe qui implémente porte le suffixe
"Impl".
                                                                                                          37
Astuce : servez-vous de la force d'Eclipse ! Quand vous créez votre interface, Eclipse vous proposera et vous
générera la classe asynchrone associée en adaptant le nom et les arguments des méthodes.



 V.     Une déclaration nécessaire

Il faudra adapter le web.xml pour lui déclarer les ressources (ce fichier est analysé et interprété par
Jetty).Il faut déclarer la servlet ainsi que la ressource web qui appelera la servlet (l'url).

      <servlet>

      <servlet-name>monServiceImpl</servlet-name>

      <servlet-class>

      appli.server.monServiceImpl

      </servlet-class>

      </servlet>

      <servlet-mapping>

      <servlet-name>monServiceImpl</servlet-name>

      <url-pattern>/appliweb/monService</url-pattern>

      </servlet-mapping>


Prenez toujours garde aux noms que vous donnez, le GWT est exigent sur les noms des classes et interfaces.

Avant de se lancer, il faut réfléchir à la solution qui est la moins coûteuse en bande passante et en
ressources. L'idéal reste de gérer les objets en local (dans le navigateur chez le client) et de transmettre
juste les objets à sauvegarder au serveur.

Toutes les classes sont définies dans le paquetage client, et un objet qui va gérer les sauvegardes sur
disque sera instancié coté serveur. Le client transmettera les objets à sauvegarder directement en
appelant une méthode (par exemple save(monObjet)) et le serveur fera une simple sérialisation de son
coté. Simple non ?

Pour stocker des données coté client, deux solutions sont possibles :

       proposer à l'utilisateur de télécharger un fichier généré.

       utiliser le plugin Google gears.

Une application web doit être simple à utiliser, épurée mais aussi très rapide. Les terminaux sont de plus
en plus puissants certes, mais les 3ghz que l'on a dans nos pc ne sont pas encore dans nos téléphones.

De plus les connections internet doivent être utilisées à juste dose, ce n'est pas parce qu'elle est rapide
qu'il faut en abuser. Elle reste infiniment plus lente qu'un traitement en local.
VI.     Une implémentation de la partie Serveur
                                                  38




Voila les classes générées :
                                                    39

La classe DatabaseService .java:




Voila une nouvelle ligne ajoutée automatiquement.
                                                                                                  40
Maintenant on ajoute une fonction a la fin de la classe WelcomePage pour obtenir les données de la forme
sous forme MAP.




Revenons à la classe WelcomePage , on ajoute les lignes suivantes pour appeler la fonction saveData:
                                                                                                 41
ET on ajoute AsyncCallback et on click sur (2) pour Ajouter les méthodes onSuccess() et onFailure()
comme à la photo .




Et voila les méthodes qui va générer à la fin du classe :




Et on ajoute ces2 lignes (voir la photo) :
VII.       Connexion à la base de données
                                                                                               42
Avant de créer la connexion, il faut ajouter le Driver d’Oracle ojdbc14 .jar à notre projet.




On utilise dans ce projet Oracle comme Base de données.


On crée une table :

       CREATE TABLE      "GWTUSERS"

           ( "USERNAME" VARCHAR2(40),

            "PASSWORD" VARCHAR2(40),

            "EMAIL" VARCHAR2(40),

            "PHONE" VARCHAR2(40)

           )

       /

Après la création de la table sur Oracle, on écrit la fonction saveData .

package com.habou.server;
                                                                                          43




Maintenant on doit ajouter le prototype de cette fonction à la classe DatabaseService :
                                                                                               44



On remarque que la ligne suivante a été ajoutée à la classe DatabaseServiceAsync automatiquement.




                                                                                       *

On arrive à la fin de notre projet

Maintenant, on exécute le projet et on tester l’ajout à la base de données.
                                                                                              45

Voila l’appel de ce window.alert dans la fonction getFormDataAsMap ( classe : WelcomePage.java):




Dans le cas de cet exemple :

     formValues est égale à :

     username=Habou&password=dayssam&email=m.habou%40hotmail.com.fr&phone=0
     6777968828


Et on utilise cette fonction pour séparer les paramètres.

Après la click sur Ok de ce windowalert , il s’affiche :
                                                                                                   46


Finalement, on doit vérifier l’ajout de ces données à la base de données :




On remarque l’insertion double des données.

On a fait ça exprès par 2 méthodes, la première par décodage, et la 2ème sans décodage et la photo vous
montre la différence.
                                                                                                       47




3ème partie


  I.    La gestion des navigateurs

Vous n'avez rien à faire, le web toolkit adapte son application selon le navigateur qui l'exécute. En effet,
Google chrome est le plus rapide à exécuter le javascript, Firefox le navigateur le plus utilisé du web,
internet explorer ne remplit pas (encore) les standards de la W3C... il faut donc réussir à contenter tout le
monde.

La certitude que vous pouvez avoir, c'est que quelque soit le navigateur web (récent) utilisé, votre
application fonctionnera sans aucun problème.
 II.    L'optimisation du code

Même en ayant des méthodes de programmation mauvaises, en utilisant les mauvaises boucles, le
                                                                                                       48
compilateur est capable d'optimiser au maximum le code javascript pour en tirer les meilleures
performances. Si le plugin Google Gears est installé, l'améliorateur d'exécution fonctionnera aussi.



III.    La communication client/serveur

Tout comme le reste, les appels sont optimisés. Comme ils sont asynchrones, il est assez aisé pour le
logiciel de regrouper plusieurs appels en un seul pour optimiser au mieux les transferts.

Il faudra tout de même prendre toutes les précautions nécessaires lors de la programmation pour éviter des
transferts incessants entre le serveur et le client. Le client dispose de ressources matérielles, peut être
plus que les serveurs des fois. Cet aspect est aussi à prendre en compte.




Conclusion

GWT se présente comme une solution aux difficultés de développent Javascript/AJAX, notamment la
difficulté de débogage, gestion des appels asynchrones, les problèmes de compatibilité entre navigateurs.

La question que l'on doit se poser avant de choisir GWT est : "Avons-nous besoin d'AJAX dans notre
application ?".Sans cela, le seul intérêt de GWT reste l'abstraction du code JavaScript et HTML.

								
To top