skip to main content

developerWorks  >  Open source | Information Management  >

Build an Ajax application using Google Web Toolkit, Apache Derby, and Eclipse, Part 1: The fancy front end

Check out Google Web Toolkit for developing Ajax applications within the Java framework

Construire une application Ajax en utilisant Google Web Toolkit, Apache Derby, et Eclipse, Partie 1: Le bel interface
Traduction pour créer une application Ajax utilisant Google Web Toolkit, Apache Derby, et Eclipse
Contrôlez Google Web Toolkit pour developper des applications Ajax avec le framework Java

developerWorks

Niveau : Intermédiaire

Noel Rappin (noelrappin@gmail.com), Senior Software Engineer, Motorola, Inc.

05 Dec 2006

La trousse à outils Web de Google (GWT) est un pas en avant important dans la création des applications dynamiques de Java™Script qui fonctionnent dans les navigateurs Web des utilisateurs. En utilisant GWT, les développeurs peuvent concevoir l'interface utilisateur (UI) et le modèle de l'événement en utilisant des techniques familières de Java tandis que GWT effectue le dur travail de rendre le code compatible pour tous les navigateurs principaux. Apprenons les bases de GWT dans ce premier article d'une série, incluant comment GWT vous laisse créer un Javascript asynchrone + l'application de XML (Ajax) tout en écrivant votre code dans la langue de Java. Découvrez comment créer et lancer une petite application de l'échantillon GWT -- une application Web 2.0 appelée Slicr, qui vend des pizzas en ligne.

GWT crée une interface riche de client de navigateur d'Ajax encore plus facilement que les interfaces traditionnelles GUI de Java. Aussi fabuleux qu'est GWT, il ne peut pas créer une application entière de Web par lui-même. Vous devez avoir un jeu de données sur le serveur et un framework pour convertir ces données en objets Java que GWT peut passer du serveur à son client. Dans cette série d'articles, vous emploierez Apache Derby, une base de données 100% pure de Java que vous pouvez inclure dans la même machine virtuelle de Java (JVM) restant côté serveur.

Le premier article de cette série se concentre sur GWT. Ici vous apprendrez comment configurer GWT et créer une simple interface client qui répond aux actions d'utilisateur. Les articles suivants montrent comment établir la base de données de Derby et relier le front end GWT au back end de la base Derby. En conclusion, vous apprendrez comment déployer votre système en dehors de de votre environnement de développement.

Qu'est ce que Google Web Toolkit?

Avec GWT, vous pouvez développer des applications d'Ajax avec le langage de programmation de Java. Le cachet d'une application d'Ajax est un environnement riche et interactif plus souvent lié aux applications traditionnelles d'UI. Le schéma 1 montre un échantillon d'interface GWT qui imite une application d'e-mail d'ordinateur de bureau. Cette démo est fonctionnelle sur le site Web de GWT.


Schéma 1. Une démonstration GWT de gestion d'e-mail
A GWT e-mail demonstration

La fonctionnalité la plus unique de GWT est que vous pouvez créer votre application Ajax tout en écrivant votre code avec le langue Java. Vous pouvez employer votre environnement de développement Java (IDE) préféré et, encore meilleur, vous pouvez debuguer votre client dans cet IDE Java. Vous pouvez communiquer entre le client et le serveur employant les objets Java, et c'est beaucoup plus léger en poids dans le client que serait un applet Java.

À la base, GWT est un compilateur. Il convertit le code de Java que vous écrivez dans le code de Javascript qui est alors inséré dans le HTML page et employé pour exécuter le côté de client de votre application. Cette fonctionnalité vous libère des détails du différent code Javascript selon les multiples navigateurs, permettant de se concentrer sur l'interface et l'interaction de votre programme.

Naturellement, si le compilateur étaient la seule chose que GWT offrait, cela ne serait pas très passionnant. Heureusement, il y a plus. Avec GWT, le compilateur est juste un mécanisme pour fournir une architecture entière d'application de client/serveur. Les fonctionnalitées incluent :

  • Un ensemble de widgets standard d'UI qui semblent bons, flexibles, et qui sont déjà prêts pour travailler dans tous navigateurs principaux (y compris Safari et Opéra).
  • Un mécanisme d'événement pour attraper (catcher) et répondre aux événements complètement du côté de client.
  • Un framework pour contrôler les appels asynchrones entre votre application Web et le serveur.
  • Un mécanisme pour créer l'état complet de l'historique du navigateur de sorte que votre application d'Ajax ne soient pas perturbée avec le comportement prévu du bouton en arrière (précédent).
  • Un framework d'essai pour l'usage de JUnit pour écrire des essais d'unité pour votre application client.

Cette série examinera plusieurs de ces dispositifs. Mais commençons par télécharger et installer GWT.

Acquérir GWT

En date de cette écriture, la version en cours de GWT est la version 1.4. (Voir les ressources à la fin de cet article pour des liens à l'emplacement de téléchargement.) GWT est pleinement approuvé sous les systèmes de Microsoft® Windows® XP, de Windows 2000, de Linux® qui possèdent GTK+ 2.2.1 ou plus (attention toute fois aux systèmes 64bits utilisant java 64bits), et l'OS X.

Votre téléchargement est un fichier compressé. L'extraire, et puis placer le dossier résultant quelque part où cela vous est commode. Les détails de la distribution changent légèrement parmi les versions, mais les éléments de base sont :

  • Trois fichiers .jar : Celui qui contient les classes d'utilisateur dont vous aurez besoin dans le classpath de votre projet s'appelle le gwt-user.jar, alors que celui qui contient la partie du code de compilateur s'appelle gwt-dev-windows.jar ou le gwt-dev-linux.jar. Le troisième dossier, gwt-servlet.jar, est employé dans le déploiement.
  • Trois commandes en ligne utiles : applicationCreator, junitCreator, et projectCreator. (Sur Windows, ils ont un suffixe .cmd) Plus de détail au sujet de ces derniers dans un moment.
  • Un dossier de code d'échantillon.

Car vous employez GWT, quelques autres dossiers sont placés dans le répertoire local de GWT pour contrôler vos fichiers temporaires.

Créer un projet

Maintenant que tout est téléchargé, votre premiere tache est de créer un projet. Vous allez construire une nouvelle application Web 2.0 en ligne appelée Slicr, qui vend de la pizza en ligne. Les détails exacts de la façon établir votre projet de GWT diffèrent selon si vous projetez employer un ide. Ici, vous emploierez Eclipse parce qu'il est libre et supporte directement les lignes de commande utilisés par GWT.

Commencez par employer l'outil en ligne de commande pour créer votre projet Eclipse :

  1. Créer un nouveau répertoire appelé le slicr dans n'importe quel endroit commode sur votre disque dur.
  2. Ouvrir une console d'invite de commande (prompt) dans le nouveau répertoire slicr.
  3. Tapez la commande suivante (vous devrez convertir les slashes (/) et autre pour se conformer à votre système d'exploitation) :

<GWT_HOME>/projectCreator -eclipse slicr

Cette commande crée le minimum requis pour un projet de GWT. Le résultat est un nouveau sous-répertoire src et de nouveaux fichiers .project et de .classpath.

A ce moment vous pouvez commencer juste le projet sans modification, mais GWT s'attend à une certaine autre structure, que vous pouvez établir avec la commande suivante :


<GWT_HOME>/applicationCreator -eclipse slicr com.ibm.examples.client.Slicr

L'argument -eclipse slicr est le nom du projet Eclipse et doit être identique que ce que vous avez utilisé dans le projectCreator. (S'il n'est pas le cas, vous aurez des ennuis en lançant votre application de GWT depuis Eclipse.) L'argument final est le nom de ce qui sera la classe principale de votre application. Vous devez nommer le paquet du plus bas-niveau client, mais pour le nom des paquets supérieurs vous êtes libres.

Cette commande crée quelques fichiers. Le fichier .java est votre classe principale (et tous les répertoires parents qu'il doit créer). Vous obtenez un répertoire public au même niveau que le dossier client, et ce répertoire contient un fichier appelé Slicr.html. Le répertoire précédent contient un fichier important appelé le Slicr.gwt.xml. GWT crée également un fichier Slicr.launch qu'Eclipse utilise comme un script de lancement.



Back to top


Utiliser le projet dans Eclipse

Maintenant, vous devez insèrer le projet dans l'éclipse.

  1. Ouvrez Eclipse, et puis cliquez sur File > Import.
  2. Dans la fenêtre qui apparaît, developpez l'arbre General, et puis choisissez les Existing Projects into Workspace.
  3. Cliquez Next, et cliquez alors Browse pour choisir le répertoire racine de Slicr.
  4. Choisissez le projet, et assurez vous que Copy projects into workspace n'est pas activé; vous ne voulez pas déplacer le projet.

Ce processus place votre code dans Eclipse. GWT a créé trois fichiers importants. Le premier est dans le paquet de com.ibm.examples et s'appelle le slicr.gwt.xml. C'est votre fichier XML de configuration. A ce moment là, il ressemble à la liste 1.


Liste 1. slicr.gwt.xml
	
<module>
    <inherits name='com.google.gwt.user.User'/>
    <entry-point class='com.ibm.examples.client.Slicr'/>
</module>

Dans ce document de XML, vous pouvez définir les modules pour votre application de GWT. Le module est l'unité de base de votre code de GWT et est mis en référence par les pages HTML que votre client utilise.

Le deuxième fichier d'intérêt est le fichier Slicr.html créé dans le dossier public. C'est le fichier .html qui est actuellement envoyé au client comme première page de votre application Web. Le fichier par défaut contient beaucoup de commentaires des lesquels vous vraiment n'avez pas besoin. Les entrailles du fichier sont montrées dans la liste 2.


Liste 2. Slicr.html
	
<html>
    <head>
        <title>Wrapper HTML for Slicr</title>
        <meta name='gwt:module' 
            content='com.ibm.examples.Slicr'>
    </head>
    <body>
        <script language="javascript" 
            src="gwt.js"></script>
        <iframe id="__gwt_historyFrame" 
            style="width:0;height:0;border:0"></iframe>
        <h1>Slicr</h1>
        <p>
            This is an example of a host page for 
            the Slicr application. 
        </p>
        <table align=center>
            <tr>
                <td id="slot1"></td>
                <td id="slot2"></td>
            </tr>
        </table>
    </body>
</html>

La chose la plus importante à réaliser à ce sujet est celle à la fin du jour, il est un fichier ordinaire de .html. Inclure n'importe quel HTML arbitraire que vous voulez. Il y a quatre éléments dans ce fichier .html qui l'identifient comme fichier employé par GWT. Ils sont :

  • L'étiquette meta : L'attribut name doit être comme montré, et l'attribut content est le nom logique entièrement qualifié de votre module. (C'est le paquet contenant le fichier XML du module et puis le nom de fichier du XML sans l'extension.) Cette étiquette associe votre page HTML à un module spécifique. L'appel de la page met en marche le module. (Spécifiquement, tout point d'entrée des classe du module sont initialisés.)
  • L'étiquette script : Cette étiquette charge un fichier appelé le gwt.js, qui est l'un des fichiers créés quand vous convertissez votre code GWT Java en code Javascript. Puisque ce dossier commande le chargement de tout votre code client, l'inclure est plutôt important pour le fonctionnement de votre programme.
  • L'étiquette iframe : Inclure exactement cette étiquette -- avec la même précision comme c'est écrit -- permet à votre application Web de se rappeler l'histoire et l'état, signifiant que votre application de GWT ne neutralisera pas le bouton Précédent de l'utilisateur.
  • Les étiquettes td : Ces étiquettes dans ce fichier particulier .html contiennent des marques de Javascript. Il n'y a particulièrement rien de commun à ce sujet, mais car vous verrez dans un moment, comment GWT emploie ces marques comme endroit (point d'insertion) pour mettre des éléments.

La classe de démarrage de Java de zones fixes - The boilerplate Java startup class

GWT crée également une classe de démarrage de Java de zones fixes pour vous, suivant les indications de la liste 3.


Liste 3. Boilerplate Java startup class
	
public class Slicr implements EntryPoint {

  public void onModuleLoad() {
    final Button button = new Button("Click me");
    final Label label = new Label();
    button.addClickListener(new ClickListener() {
      public void onClick(Widget sender) {
        if (label.getText().equals(""))
          label.setText("Hello World!");
        else
          label.setText("");
      }
    });
    RootPanel.get("slot1").add(button);
    RootPanel.get("slot2").add(label);
  }
}

Juste un couple de choses à noter maintenant au sujet de cette classe. La classe Java est dans votre package client, signifiant qu'elle a prévu pour être compilée par GWT dans le code de Javascript. Ceci place certaines limitations sur ce qui peut être dans ce fichier, mais pour la plupart, c'est juste code de base de Java 1.4. La classe créé implémente l'interface EntryPoint, qui définit seulement une méthode, onModuleLoad (). GWT appelle automatiquement cette méthode quand une page HTML utilisant ce module est chargé.

Cet EntryPoint particulier est simple. Il définit un bouton et une étiquette dans les deux premières lignes. Dans les deux dernières lignes, il associe ces widgets aux éléments spécifiques de la page HTML en employant la méthode de RootPanel.get(). L'argument de cette méthode est l'identificateur Javascript (id) de l'élément comme défini dans le HTML page.

Entre ces lignes, vous définissez un écouteur d'événement utilisant un idiome semblable à ce que vous aviez l'habitude de lier un événement dans Swing. Dans ce cas-ci, le ClickListener est appellé quand votre bouton est cliqué et bascule simplement le texte dans le widget d'étiquette dans les deux sens.



Back to top


Exécuter votre programme GWT

Maintenant vous pouvez essayer d'exécuter l'échantillon de programme que GWT a créé. Il y a deux manières différentes d'exécuter un programme de GWT : Web mode et hosted mode. Le mode de Web est le mode de déploiement complet; c'est lui que vous emploierez après que vous compiliez votre programme GWT en code Javascript.

Vous employez le mode hosté pendant le développement; c'est un émulateur avec lequel vous pouvez simuler immédiatement le client et le code du serveur, simplifiant nettement le déploiement tandis que vous développez. (Le mode hosté ne fonctionne pas actuellement dans Mac OS X.) Si vous utilisez un IDE avec un debugger, vous pouvez exécuter votre programme GWT en mode hosté sous le debugger, ce qui permet de placer des points d'arrêt et de suivi des variables sur la partie cliente de votre code qui va être compilé en Javascript. C'est, naturellement, très bien et vraiment utile. Comme vous travaillez avec GWT, vous dépenserez beaucoup de temps en mode hosté.

Vous pouvez appeler le mode hosté avec n'importe quelle de ces manières. Le script applicationCreator que vous avez lancé plus tôt a créé un script Slicr-shell que vous pouvez appeler en ligne de commande pour lancer le mode hosté. Plus tôt dans l'article, vous avez vu comment importer votre projet GWT dans Eclipse. Depuis votre projet Eclipse, vous pouvez choisir Debug ou Run depuis le Run menu ou depuis la barre des taches. Dans la fenêtre qui apparaît, cliquez Java Application pour voir l'option Slicr. Cette option est rendue possible par un dossier de Slicr.launch que GWT créé et que vous avez importé dans Eclipse avec le reste du projet. Le fichier de lancement décrit le classpath et la classe de départ pour Eclipse. Naturellement, après que vous l'ayez lancé une fois, ce sera le fichier de défaut quand vous cliquerez le bouton de la barre des taches. Le schéma 2 montre à quoi ressemble cette fenêtre dans la pratique.


Figure 2. Appeler le mode hosté
Invoking hosted mode

Quand vous lancez en mode hosté, deux fenêtres apparaissent. (Note que cela prend une minute du temps que l'installation en mode hosé s'initialise, particulièrement quand vous le lancer pour la première fois.) La première fenêtre, représentée sur le schéma 3, est appelée Google Web Toolkit Development Shell / Port 8888. Cette fenêtre contient des messages d'erreur et de notation de GWT. En utilisant la barre d'outils, vous pouvez ouvrir un nouveau navigateur hosté aussi bien qu'augmentez, réduire, et purger votre écran de logs.


Figure 3. Fenêtre de controle du mode hosté (shell)
Hosted mode shell window

La deuxième fenêtre, représentée sur le schéma 4 est le navigateur simulé. Comme vous pouvez voir, elle contient le HTML statique de votre page de slicr.html aussi bien que le widget de bouton créé dans votre classe de Slicr.java EntryPoint. En cliquant le bouton bascule l'étiquette. Si vous avez fait quelque chose d'incorrect dans les étapes d'installation, vous ne verrez pas cette fenêtre; au lieu de cela, vous recevrez un message d'erreur dans la fenêtre shell. Vérifier que tous vos noms sont corrects. (En particulier, regarder dans le fichier .launch, et vérifier qu'il indique le bon dossier du projet.)


Figure 4. Navigateur simulant le mode hosté
Hosted mode simulated browser

Réaliser un simple client

Pour cet article, vous vous concentrez sur l'obtention des widgets sur l'écran et sur l'interactivité. Vous finirez avec l'écran représenté sur le schéma 5, qui est tout simple mais fonctionnel.


Figure 5. Slicr
Slicr

Pour avoir ces widgets créés quand la page est chargée, vous devez mettre le code dans la méthode onModuleLoad() de votre classe EntryPoint. La liste 4 définit un couple des membres de données d'exemple et d'une méthode supérieure qui appelle des aides (helpers) pour construire chaque panneau (panel). Pour que cette liste fonctionne, vous devez avoir un élément dans votre HTML page avec une identification ID de slicr. Ceci permet à la commande RootPanel.get() dans cette liste de trouver un élément dans la page. La manière la plus facile d'accomplir cela est de remplacer la table dans la liste précédente de HTML avec >div id="slicr" /<.


Liste 4. Chargement du module de traitement d'événements
	
private DockPanel panel;
private List clearables;

public void onModuleLoad() {
    clearables = new ArrayList();
    initDockPanel();
    panel.add(buildActionPanel(), DockPanel.SOUTH);
    panel.add(buildPizzaTypePanel(), DockPanel.WEST);
    panel.add(buildToppingPanel(), DockPanel.EAST);
    RootPanel.get("slicr").add(panel);
}

Créer les widgets

You put everything inside a DockPanel, which is the GWT equivalent of a Swing panel that uses BorderLayout. Where Swing has one Panel class and multiple layout managers, GWT has multiple panel subclasses, each with its own algorithm for laying out child widgets. Other panel classes include SimplePanel, HTMLTable, FlowPanel, and StackPanel. Creating the dock panel isn't difficult: The setters do what you expect, as Listing 5 shows.

Vous mettez tout à l'intérieur d'un DockPanel, qui est l'équivalent GWT d'un panneau (panel) Swing qui emploie BorderLayout. Là où Swing a une classe Panel et de multiples managers de disposition, GWT a des sous-classes multiples de panel, chacune avec son propre algorithme pour présenter des widgets fils. D'autres classes de panneau incluent SimplePanel, HTMLTable, FlowPanel, et StackPanel. Créer le dock panel n'est pas difficile : Les setters font ce que vous comptez, comme exposé dans la liste 5.


Liste 5. Initialiser le panneu principal
	
private void initDockPanel() {
    panel = new DockPanel();
    panel.setBorderWidth(1);
    panel.setSpacing(5);
}

Créer le SOUTH (bouton) panel

You define the SOUTH (bouton) panel first, because a DockPanel is first come, first served when it comes to claiming corner space. This way, the south widget runs across the entire panel. You build up the action panel as a HorizontalPanel, roughly the equivalent of a Swing box, as shown in Listing 6.

Vous définissez d'abord le panneau SOUTH (bouton), parce qu'un DockPanel est le premier à venir, d'abord servi quand il vient réclamer l'espace faisant les coins. De cette façon, le widget du sud fonctionne à travers le panneau entier. Vous constuisez le panneau d'action comme un HorizontalPanel, vraiment l'équivalent d'une boîte Swing, comme c'est montré dans la liste 6.


Liste 6. Le SOUTH (bouton) panel
	
public HorizontalPanel buildActionPanel() {
    HorizontalPanel actions = new HorizontalPanel();
    actions.setSpacing(10);
    Button clear = new Button("Clear");
    clear.addClickListener(new ClearClickListener());
    Button newPizza = new Button("Another Pizza");
    Button submitOrder = new Button("Submit");
    actions.add(clear);
    actions.add(newPizza);
    actions.add(submitOrder);
    return actions;
}

Vous employez le widget Button de GWT pour créer trois boutons, et alors vous les ajoutez au panneau. Vous créez également un ClickListener pour le bouton Clear, que vous définirez plus tard. GWT sépare ses auditeurs d'événement (écouteurs) différemment de Swing: Le ClickListener détecte des clics de souris et seulement pour des clics de souris. (Souvent, vous verriez l'écouteur défini comme une classe anonyme intégrée. Je trouve ce modèle difficile à lire et essayer, ainsi j'ai créé une classe appelée à l'intérieur.)

Créer the WEST (type de pizza) panel

Le panneau avec les types de pizza n'est pas compliqué. Vous employez le widgetT RadioButton de GW, suivant les indications de la liste 7.


Liste 7. Le WEST (type de pizza) panel
	
public static final String[] PIZZA_TYPES = new String[] {
    "Thin Crust Medium", "Thin Crust Large", 
    "Thin Crust X-Large", "Thick Crust Medium", 
    "Thick Crust Large"
};

private VerticalPanel buildPizzaTypePanel() {
    VerticalPanel pizzaTypes = new VerticalPanel();
    HTML label = new HTML("<h2>Pizza</h2>");
    pizzaTypes.add(label);
    for (int i = 0; i < PIZZA_TYPES.length; i++) {
        RadioButton radio = new RadioButton("pizzaGroup", 
            PIZZA_TYPES[i]);
        clearables.add(radio);
        pizzaTypes.add(radio);
    }
    return pizzaTypes;
}

Vous ferez quelque chose de plus futé avec les données plus tard. Cette fois, vous employez un VerticalPanel, qui est l'équivalent vertical de HorizontalPanel. Vous employez également le widget de HTML, qui est simplement une étiquette pour faire le rendu HTML. (Essentiellement, c'est un emballage autour d'une étiquette <span> HTML.) Le constructeur RadioButton prend deux arguments. Le premier est une étiquette texte pour le groupe de boutons radio, et la seconde est une étiquette de texte. Vous ajoutez chaque bouton au panneau et à la liste d'articles effaçables, que vous emploierez dans un des écouteurs.


Créer le EAST (toppings - garnitures) panel

Le panneau des garnitures est un peu plus compliqué. Vous voulez permettre aux utilisateurs de créer une pizza avec différentes garnitures sur chaque moitié. Cliquer le bouton pour une garniture vérifie les deux moitiés, mais chaque moitié peut être vérifiée ou effacée indépendamment. Vous voulez que tout soit à ligne, ainsi vous employez une grille, comme c'est montré dans la liste 8.


Liste 8. La grille des garnitures
	
public static final String[] TOPPINGS = new String[] {
    "Anchovy", "Gardineria", "Garlic", 
    "Green Pepper", "Mushrooms", "Olives", 
    "Onions", "Pepperoni", "Pineapple", 
    "Sausage", "Spinach"
};

private VerticalPanel buildToppingPanel() {
    VerticalPanel toppings = new VerticalPanel();
    toppings.add(new HTML("<h2>Toppings</h2>"));
    Grid topGrid = new Grid(TOPPINGS.length + 1, 3);
    topGrid.setText(0, 0, "Topping");
    topGrid.setText(0, 1, "Left");
    topGrid.setText(0, 2, "Right");
    for (int i = 0; i < TOPPINGS.length; i++) {
        Button button = new Button(TOPPINGS[i]);
        CheckBox leftCheckBox = new CheckBox();
        CheckBox rightCheckBox = new CheckBox();
        clearables.add(leftCheckBox);
        clearables.add(rightCheckBox);
        button.addClickListener(new ToppingButtonListener(
                leftCheckBox, rightCheckBox));
        topGrid.setWidget(i + 1, 0, button);	
        topGrid.setWidget(i + 1, 1, leftCheckBox);
        topGrid.setWidget(i + 1, 2, rightCheckBox);
    }
    toppings.add(topGrid);
    return toppings;
}

De nouveau, vous employez un VerticalPanel et le widget HTML. Vous mettez tout dans une grille (Grid) GWT, ainsi vous devez placer la taille de la grille quand vous la créez. Chaque cellule dans la grille peut contenir un texte plat ou un autre widget GWT. Pour chaque rangée, créer le bouton et deux cases à cocher, et puis les assigner à leurs cellules. Ajouter un écouteur pour le bouton, et puis mettre les cases à cocher dans la liste effaçable (clearable).

Les écouteurs définits

Les widgets étant établi, il est temps de regarder vos deux auditeurs définis. Le plus simple des deux est pour le bouton Clear. Ce bouton marche simplement par la liste clearable et efface tout, comme c'est montré dans la liste 9.


Liste 9. Ecouteur pour le bouton d'effacement (Clear)
	
private class ClearClickListener implements ClickListener {
    public void onClick(Widget sender) {
    for (Iterator iter = clearables.iterator(); iter.hasNext();) {
            CheckBox cb = (CheckBox) iter.next();
            cb.setChecked(false);
        }
    }
}

Note : Dans GWT, RadioButton est réellement une sous-classe de CheckBox. Ainsi le code ci-dessus ne déclenche pas une exception de typage de classe (class cast exception).

L'écouteur pour les boutons de garnitures est seulement un peu plus compliqué. Si ni l'un ni l'autre des cases à cocher associées n'est choisie, cet écouteur choisit les deux cases à cocher. Autrement, elle les purge toutes les deux, comme c'est montré dans la liste 10.


Listing 10. Ecouteur pour les boutons
	
private class ToppingButtonListener implements ClickListener {

    private CheckBox cb1;
    private CheckBox cb2;

    public ToppingButtonListener(CheckBox cb1, CheckBox cb2) {
        this.cb1 = cb1;
        this.cb2 = cb2;
    }

    public void onClick(Widget sender) {
        boolean unchecked = !cb1.isChecked() && !cb2.isChecked();
        cb1.setChecked(unchecked);
        cb2.setChecked(unchecked);
    }
}

Share this...

digg Digg this story
del.icio.us Post to del.icio.us
Slashdot Slashdot it!

Prochaines attractions

Vous avez employé tout le code nécessaire pour créer cette version simple du client de Slicr. Le prochain article vous montrera comment établir une couche données du côté de serveur employant la base de données Derby et convertir les données de sa base de données en objets Java qui peuvent être envoyés à votre client GWT. Alors vous découvrirez l'architecture du procédé distant qui relie le serveur et le client.

Quand au côté serveur qui doit fonctionner séparément, vous devrez vous inquiéter de la façon de le déployer, pour le développement et pour votre environnement de production. Vous apprendrez également quelques manières pour rendre l'interface un plus esthétique.

Resources

Article traduit en Français

Original English article

Learn

Get products and technologies

Discuss


A propos de l'auteur

Noel Rappin, a Ph.D. from the Graphics, Visualization, and Usability Center at the Georgia Institute of Technology, is a senior software engineer at Motorola. He is also the coauthor of wxPython in Action and Jython Essentials.