[GWT] Tutoriel AJAX

Bonjour,                                                                                        GWT V2.0.4

Pour commencer à toucher au modèle MVC, on va se pencher sur la réalisation d'une calculatrice respectant le modèle MVC et  appelant le serveur pour ce qui est du calcul de factorielles.
Dans un premier temps, on va faire une calculatrice non ajax, seulement coté client.
Je vous conseille de faire maintenant un petit diagramme de classe faisant apparaitre correctement les cotés Model, View et Controller ainsi que les interfaces implémentées ou les classes mères.
On rajoutera dans la partie 2 les appels RPC (AJAX)
Voici mon diagramme de classe, celui qu'on utilisera lors de ce tuto :

On va donc créer une nouvelle application GWT, (voir le tuto précédent) puis on va créer de nouveaux packages à ceux déjà existant.

Ainsi dans le package com.client, on va créer 3 packages : model, view, controller.

Cela nous créé notre modèle MVC.
On va d'abord créer le MODELE Calculator.
1) Clic droit sur le package, new-> class; entrer Calculator comme nom de classe puis valider.
2)  sur notre schéma on a déclaré 4 constantes, définissant les modes de calcul disponible de la calculatrice. On a aussi une "proprieté" mode qui définit le mode courant.
La proprieté oldValue est le résultat de l'opération précédente.
La proprieté currentValue correspond au nombre dernierement ajouté.
La proprieté saveCurrentValue est un booléen qui va gérer l'ajout ou le remplacement des chiffres à l'écran. Ainsi, la première touche, au départ et après une opération, remplacera le résultat et le booléen passera à false jusqu'à ce que l'on clique sur un opérateur (+ - * / = ).

3) Les méthodes ! On déclare un constructeur Calculator(); Rien de méchant, le constructeur va servir à instancier (créer) un nouveau calculator.
On va ensuite déclarer un méthode appendDigit(int value) qui va être appellée lors du clic sur un bouton numérique (0-9) et va servir à remplacer le résultat à l'écran ou à le mettre à la suite (en fonction du booléen saveCurrentValue).
La méthode clear() va servir à purger notre calculatrice, c'est litteralement un remise à zéro RAZ, déclenchée lorsqu'on clique sur le bouton C.
La méthode compute() va calculer notre opération. En fonction du mode (ADD=>0,SUBSTRACT=>1,MULTIPLY=>2,DIVIDE=>3)
la méthode getOldValue() est juste un accesseur, pas besoin d'en parler plus longuement.

On va maintenat créer la VUE CalculatorWidget.
Celle-ci va nous permettre de générer notre clavier, notre écran, bref notre calculatrice coté utilisateur.

1) On a une proprieté screen qui va définir l'écran dans lequel l'utilisateur verra affiché la réponse.

2) On ajoute ensuite les méthodes. On a une méthode pour afficher quelque chose à l'écran, une méthode pour créer une touche : createButton(), une autre pour le clavier : createKeyboard() qui va utiliser la méthode createButton().
Mais avez vous remarqué que notre CalculatorWidget hérite de SimplePanel.
Notre widget sera donc un SimplePanel et on veut que lorsqu'on le charge, on génère un VerticalPanel dans lequel on ajoute screen (TextBox) qu'on désactive pour ne pas qu'on puisse y taper n'importe quoi, et qu'on génère un clavier pour pouvoir demander un calcul.
On ordonne ces actions dans la méthode @override onLoad()

La fonction display() est bateau, pas besoin d'un dessin, je la met quand même pour plus de clarté.

On va enfin créer le CONTROLLEUR ButtonHandler.


1) Le controlleur est la pièce directrice de votre programme. C'est ici que l'on va créer notre modèle et notre vue et que l'on va effectuer les actions au clic des boutons.
Ainsi, on va faire implémenter l'interface ClickHandler et on va donc implémenter l'action onClick() afin de définir le comportement du programme et donc calculer les opérations et recharger l'affichage de l'écran.

On pourrait presque penser que c'est fini et c'est presque vrai !

Il faut maintenant changer ce que fait le programme, le main si vous venez du Java. En GWT, vous l'avez compris, on appelle ça le onModuleLoad() :

                                                                                                                          

ACTION AJAX

                                                                                                                          

On va essayer d'expliquer le plus facilement possible les concepts de base. 

Pour intégrer de l'AJAX dans notre calculatrice, on va ajouter une nouvelle fonctionnalité : la factorielle.

C'est peut être pas très clair pour ce qu'est la factorielle alors je vous le dis la factorielle de 5, c'est 1x2x3x4x5 donc c'est pas forcément très dur mais ca monte très vite dans des nombres énormes.

GWT fournit un framework complet reposant sur un modèle entièrement asynchrone.

Voilà comment s'articule le moteur RPC :

L’interface de service est le contrat de notre service. C’est l’ensemble des opérations que nous proposons de distribuer. Il existe deux types d’interface.

• L’interface synchrone (MyService/FactoService) : c’est cette interface qui est utilisée par notre implémentation sur le serveur. Elle est générée en JavaScript lors de la phase de compilation et se

situe côté client du fait de sa dépendance avec d’autres éléments côté client.

• L’interface asynchrone : dans GWT, toute requête Ajax s’effectue de manière asynchrone. C’est cette interface qui est concrètement utilisée lors de l’invocation par le code client.

1) On va donc créer notre interface de synchrone. On va la nommer FactoService et la faire étendre de RemoteServiceServlet

    On déclare la méthode pour calculer la factorielle. On va l'appeller factoServer(int n)

    Il faut ensuite assigner à notre servlet un alias en ajoutant @RemoteServiceRelativePath("facto") au dessus de la déclaration de l'interface

2) Puis l'autre interface, l'asynchrone. On va la nommer, et c'est obligatoire de la nommer comme ceci NomDeLInterfaceSynchrone+Async, ce qui donne FactoServiceAsync, 

3) Comme vous le voyez sur le schéma au dessus, on doit générer un proxy. Le Proxy va servir à communiquer entre le client et le serveur. Sur le schéma, il y a marqué "Généré", Java nous permet de créer dynamiquement des classes. On appelle la méthode create de la final Class GWT en lui passant le nom de l'interface FactoService et le type FactoServiceAsync. Il faut mettre cette ligne de code dans le modèle ou l'on veut éffectuer l'action AJAX (on peut cependant le mettre ailleurs si on en a besoin ailleurs, tant que ca respecte le modèle MVC).

Voici la fameuse ligne de code :

4) Le mécanisme RPC est quasiment fini coté client. Il faut maintenant créer la méthode dans notre modèle. Je vous rappelle le but de l'action AJAX, c'est trouver la factorielle d'un nombre.

Donc dans notre modèle Calculator, on va ajouter une méthode askFactoToServer(int n)

On a bouclé tout ce qui se trouve du coté client.

Une classe reste désormais à implémenter, la classe coté serveur.

5) Sur le schéma, on voit la classe MyServiceImpl.java, c'est la classe coté serveur qui va nous calculer notre factorielle.

on ajout @suppressWarnings("serial") pour éviter un avertissement lié à la sérialisation

Et voilà ! Profitez bien !