GWT permet de coder en Java une application AJAX, s’affranchissant ainsi de tous les problèmes d’écriture et de maintenance du code Javascript.

Cependant, pour faire une application Ajax réussie, il est indispensable de mettre en oeuvre des composants graphiques évolués, afin d’obtenir une ergonomie homogène et efficace à l’utilisation.

Dans cet article, nous allons voir comment intégrer les composants Rialto à une application GWT. Cet article se base sur le module GWT de Rialto, disponible en preview sur le site Improve Community.

Notre but est de créer l’écran suivant :

La première étape à l’utilisation de Rialto dans GWT est la déclaration du module Riato dans notre application. Pour cela, il faut rajouter dans le fichier .gwt.xml définissant notre application un héritage au module Rialto :

<inherits name="fr.improve.rialto.gwt.core.Rialto"/>

ce qui donne par exemple le fichier suivant :

<module>
	<!-- Inherit the core Web Toolkit stuff. -->
	<inherits name="com.google.gwt.user.User"/>
        
        <!-- Inherit Rialto core stuff. -->
        <inherits name="fr.improve.rialto.gwt.core.Rialto"/>
 
	<!-- Specify the app entry point class. -->
	<entry-point class="fr.improve.test.client.Application"/>
  
</module>

Attention, il faut également modifier le classpath d’Eclipse pour inclure le jar de Rialto/GWT, ainsi que le classpath des scripts GWT.

Note : pour créer une application GWT, se reporter au précédent article.

Maintenant que notre projet est configuré , nous allons créer un premier écran “d’accueil” comportant une fenêtre et des boutons. Créons pour cela une nouvelle classe dans le package client de l’application :

package fr.improve.test.client;
 
import fr.improve.rialto.gwt.core.client.Composite;
import fr.improve.rialto.gwt.core.client.Button;
import fr.improve.rialto.gwt.core.client.Frame;
import fr.improve.rialto.gwt.core.client.RialtoObject;
import fr.improve.rialto.gwt.core.client.SimpleWindow;
import fr.improve.rialto.gwt.core.client.event.ClickListener;
 
public class HomeWindow extends Composite {
    private SimpleWindow window;
    private Frame frame;
    private Button button1;
    private Button button2;
    protected void create() {
        window = SimpleWindow.create("Home", 0, 0, 750, 550);
        frame = Frame.create(100, 300, "395", 165, "Main menu", "window");
        button1 = Button.create(50, 100, "Registrer", "Register with the MailReader application", 200, frame);
        button2 = Button.create(80, 100, "Logon", "Logon", 200, frame);
    }
    protected void init() {
        button1.setClickListener(new ClickListener() {
            public void onClick(RialtoObject sender) {
                window.close();
                frame = null;
                button1 = null;
                button2 = null;
                new RegisterWindow();
            }
        });
        button2.setClickListener(new ClickListener() {
            public void onClick(RialtoObject sender) {
                window.close();
                frame = null;
                button1 = null;
                button2 = null;
                new LogonWindow();
            }
        });
    }
 
}

Notre classe hérite de fr.improve.rialto.gwt.core.client.Composite. A ce titre, elle contient 2 méthodes : une méthode create() , qui crée les composants que va contenir notre écran, et une méthode init(), qui initialise les différents composants.

La méthode create() appelle les constructeurs statiques des différents composants, avec en paramètres les titres, la position et la taille des composants.

La méthode init(), spécifie elle le code à exécuter lorsqu’on clique sur les boutons. La spécification du code à exécuter se fait en déclarant un objet de type listener. Ici, les listeners ferment la fenêtre Rialto, et ouvre un nouvelle fenêtre défini dans les Composite RegisterWindow et LogonWindow.

La construction d’un écran en Rialto avec GWT ne nécessite aucune compétence particulière autre que Java : le développeur manipule uniquement des objets Java dont la Javadoc indique l’emploi.

Le traitement des actions de l’utilisateur se fait également et naturellement en Java, en utilisant la terminologie événementielle classique.

Vous pouvez lire notre article sur la mise en oeuvre du mécanisme d'échange entre le client et le serveur avec le module Rialto/GWT.

Le module Rialto/GWT est en cours d’intégration dans la plateforme de développement communautaire Improve Foundations. Il sera prochainement disponible en preview sur le site Improve Community

Vous pouvez aussi consulter l’actualité autour de GWT sur le site onGWT