lundi 3 juin 2013

Création d'un évènement personnalisé en GWT

Nous allons découvrir dans cet article comment créer un évènement personnalisé dans une application GWT. Pour cela nous allons concevoir une petite application où deux panneaux vont communiquer entre eux par l'intermédiaire d'un évènement créé par nos propres soins.

Voici à quoi va ressembler notre application :

L'application se composera donc de deux panneaux verticaux contenant chacun : une zone de saisie de texte, un bouton Ok et un espace vierge en dessous permettant d'afficher des labels.
Le fonctionnement doit être le suivant : Lorsque l'utilisateur clique sur le bouton présent dans un panneau vertical, alors un label sera ajouter sur le panneau opposé et son texte devra être celui qui a été saisi dans la zone de texte. Bien entendu, les panneaux ne sont pas liés par une quelconque variable, ainsi un panneau n'a pas connaissance de l'autre panneau placé à son opposé.

Étudions dans un premier temps le cas général de la création d'un évènement personnalisé. Trois classes interviendront dans le processus :
- La classe correspondante à l'évènement. Elle permet créer un évènement et de faire transiter un certain nombre d'informations entre le composant source (celui qui déclenche l'évènement) et le composant cible (celui qui reçoit l'évènement). Cette classe doit étendre la classe GwtEvent<Handler>.

- L'interface correspondante au traitement de l'évènement par le composant cible (le Handler). Elle va définir la méthode que devra implémenter le composant cible afin de traiter l'évènement. Elle devra elle-même implémenter la classe EventHandler.

- L'interface permettant au composant cible de s'abonner à l'évènement émis par le composant source. C'est le point de liaison entre la source, l'évènement et la cible. Cette interface devra être implémentée par le composant source (émetteur de l'évènement) avec de permettre au composant cible (récepteur de l'évènement : le handler) de pouvoir s'abonner à l'évènement.

Voici un petit schémas résumant la situation :



Nous allons voir un cas concret grâce à la mise en place de notre application. J’appellerai l'évènement LabelSend et le projet s'intitulera CustomEvent.

Dans un premier temps voici la classe correspondante à l'évènement


On déclare dans un premier temps le type, permettant ainsi d'identifier un évènement. Cela permettra lors de la réception d'un évènement, de le dispatcher à tous les handlers s'ayant abonnés à ce type d'évènement.
Ensuite on déclare les informations utiles à faire transiter entre la source et la cible. Ici il s'agit simplement d'une variable de type String qui correspondra au texte saisi dans la zone de texte. Enfin on note la présence de la méthode dispatch. Cette méthode est primordiale car elle permet d'appeler la fonction du handler pour traiter l'évènement qui est passé en paramètre (notamment pour avoir accès à la variable texte)

Dans un second temps, on a l'interface correspondante au handler :


Cette interface définit la méthode qui devra être implémentée par le/les handler(s) (les récepteurs de l'évènement).

Pour finir nous définissons l'interface permettant de s'abonner à l'évènement.

Comme on l'a dit précédemment cette méthode permet aux différents handlers de s'abonner à l'évènement. Elle devra être implémentée par le panneau source (l’émetteur de l'évènement) permettant ainsi au récepteur de s’enregistrer.

L'interface HasHandlers (contenu dans le SDK de GWT) contient une méthode fireEvent(GwtEvent<?> event). Elle devra donc être redéfinie dans la classe qui implémentera HasLabelSendHandlers.

Mise en place de l'application

Créons nos deux panneaux verticaux :



Ces deux panneaux sont à la fois récepteur (handler) et émetteur de l'évènement. Ils implémentent donc à la fois l'interface du Handler permettant de traiter la réception de l'évènement et l'interface Has*Handlers permettant de s'abonner à l'évènement. Ils déclenchent également tous les deux l'évènement LabelSendEvent avec la méthode fireEvent lorsque l'utilisateur clique sur le bouton.
A noter également qu'on a pas besoin de redéfinir la méthode fireEvent car elle est déjà contenue dans la classe Widget qui est une classe mère de notre VerticalPanel.

Dans le point d'entrée de l'application, j'affiche les panneaux verticaux et je les abonne mutuellement pour traiter la réception de l'évènement.



On compile puis on lance notre application :



Aucun commentaire:

Enregistrer un commentaire