dimanche 16 mars 2008

Netbeans, GWT, GWT-EXT, Struts 2


Netbeans, GWT, GWT-EXT, Struts 2

Dans cet article, nous allons mettre en place un environnement de travail pour créer des applications utilisant GWT. Nous utiliserons Netbeans comme environnement de développement. Nous employerons GWT-Ext afin d'avoir accès à plus de composant et nous ajouterons Struts 2 pour avoir appeler une action.

GWT

GWT, 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

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

Struts

Struts est un framework web pour développer des applications Java.Il permet d'employer l'architecture MVC.

Préparation

Nous utiliserons la version 6 de netbeans, vous pouvez la télécharger à cette adresse http://download.netbeans.org/netbeans/6.0/final/. Sélectionner la version comprenant le pack Web & Java EE.

Plugin gwt4nb

Il existe un plugin de gwt pour netbeans. Il permet de faciliter le développement de gwt sous cet éditeur. Le plugin se nomme gwt4nb. Téléchargez la version la plus récente du plugin à l'adresse https://gwt4nb.dev.java.net/. Ensuite installer le plugin dans netbeans. Démarrer netbeans, cliquer sur Tools, sélectionner Plugins. Cliquer sur l'onglet Downloaded et ensuite cliquer sur Add Plugins. Il vous reste juste à sélectionner le plugins et cliquer sur Install.

Autres librairies

Voici la liste complète des jars que vous allez avoir besoins pour ce projet.

gwt-servlet
gwt-dev-windows
gwt-user
struts2gwtplugin
gwtext
xwork
freemarkervoyage sncf
ognl
struts2-core
commons-collections
commons-logging
commons-loogin-adapters
commons-looging-api

Création du projet

Dans netbeans, cliquer sur File, New Project.Sélectionner la catégorie Web et le projet Web Application.

Ensuite spécifier un nom pour le projet et sélectionner votre serveur. Nous avons employé Tomcat, mais j'ai testé avec jboss et ça fonctionne aussi très bien.

Ensuite, vous devez sélectionner le framework Google Web Framework. Si ce framework n'est pas disponible, c'est que vous n'avez pas installer le plugin gwt4nb. Spécifier aussi l'emplacement d'installation de gwt. Spécifier un nom pour le module.

Si vous pouvez exécuter directement le projet, par défaut, vous devriez avoir une page ressemblant à celle-ci.

Maintenant ajouter les librairies mentionnées plus tôt dans ce projet.
Maintenant il faut ajouter les librairies de Ext à notre projet. Créer un répertoire js sous Web Pages. Sous le js, créer un répertoire ext. Ajouter à ce répertoire, le répertoire adapter, ressources et ext-all.js.

Dans le fichier de module (Main.gwt.xml), il faut ajouter la ligne suivante
 <inherits name='com.gwtext.GwtExt'/>
Le fichier devrait maintenant ressembler à
<?xml version="1.0" encoding="UTF-8"?>
<module>
 <inherits name="com.google.gwt.user.User"/>
        <inherits name='com.gwtext.GwtExt'/>
 <entry-point class="org.yournamehere.client.MainEntryPoint"/>
 
</module>
Maintenant il faut ajouter les fichiers de Ext dans notre page hôte GWT.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta name='gwt:module' content='org.yournamehere.Main=org.yournamehere.Main'>
        <title>Main</title>

        <link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css"/>
        <link rel="stylesheet" type="text/css" href="js/ext/resources/css/xtheme-aero.css" />
        
        <script type="text/javascript" src="js/ext/adapter/yui/yui-utilities.js"></script>
        <script type="text/javascript" src="js/ext/adapter/yui/ext-yui-adapter.js"></script>
        <script type="text/javascript" src="js/ext/ext-all.js"></script>

    </head>
    <body>
        <script language="javascript" src="org.yournamehere.Main/org.yournamehere.Main.nocache.js"></script>
    </body>
</html>

Partie struts

Maintenant pour la partie struts, nous allons créer une action qu'on nommera HelloWorldAction. Créer un package org.yournamehere.action. Voici le code de la classe.
package org.yournamehere.action;

public class HelloWorldAction {

    public String execute() {
        return "Hello World";
    }
}

Sous le répertoire, Source Packages, créer le fichier struts.xml. Dans ce fichier, copier ce code
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE struts PUBLIC 
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
 <package name="samplepackage" extends="gwt-default">
  <action name="Hello" class="org.yournamehere.action.HelloWorldAction">
   <interceptor-ref name="gwt"/>
  </action>
 </package>
</struts>
Dans le fichier web.xml sou WEB-INF, il faudra rajouter de l'information sur les filters de struts.
<display-name>Struts 2 - Starter</display-name>
    <filter>
        <filter-name>action2</filter-name>
        <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>action2</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
Maintenant il faut faire le pont entre la partie client et notre action. La partie serveur étant notre action. Créer les deux interfaces ci-dessous.

MyService

package org.yournamehere.client;
import com.google.gwt.user.client.rpc.RemoteService;

public interface MyService extends RemoteService{
    public String execute();
}

MyServiceAsync

package org.yournamehere.client;
import com.google.gwt.user.client.rpc.AsyncCallback;


public interface MyServiceAsync {
    public void execute(AsyncCallback callback);
}

Appel de l'action

Nous allons maintenant faire l'appel de l'action dans le fichier MainEntryPoint.java. Ce fichier devrait ressembler à
package org.yournamehere.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;


public class MainEntryPoint implements EntryPoint {
    
    /** Creates a new instance of MainEntryPoint */
    public MainEntryPoint() {
    }

    public void onModuleLoad() {
        final Label label = new Label("Hello, GWT!!!");
        final Button button = new Button("Click me!");
        
        button.addClickListener(new ClickListener(){
            public void onClick(Widget w) {
                label.setVisible(!label.isVisible());
            }
        });
        
        RootPanel.get().add(button);
        RootPanel.get().add(label);
    }
    
}
Après l'ajout du code pour appeler notre action, votre code devrait ressembler à
package org.yournamehere.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.rpc.ServiceDefTarget;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.gwtext.client.widgets.MessageBox;


public class MainEntryPoint implements EntryPoint {
    
    /** Creates a new instance of MainEntryPoint */
    public MainEntryPoint() {
    }
    
    public void onModuleLoad() {
        final Label label = new Label("Hello, GWT!!!");
        final Button button = new Button("Click me!");
        
        button.addClickListener(new ClickListener(){
            public void onClick(Widget w) {
                label.setVisible(!label.isVisible());
                
                callAction();
                
            }
        });
        
        RootPanel.get().add(button);
        RootPanel.get().add(label);
    }
    
    private void callAction() {
        MyServiceAsync service = (MyServiceAsync) GWT.create(MyService.class);
        AsyncCallback callback = new AsyncCallback() {
            public void onSuccess(Object result) {
                MessageBox.alert(result.toString());
            }

            public void onFailure(Throwable caught) {
                MessageBox.alert(caught.toString());
            }
        };
        ServiceDefTarget endpoint = (ServiceDefTarget) service;
        endpoint.setServiceEntryPoint("Hello.action");
        service.execute(callback);
    }
}
Si vous avez bien suivit l'article, lorsque vous appuyez sur le bouton, vous devriez avoir un message.


Nous avons vu comment appelé une action struts 2 dans GWT. Dans l'exemple montré, le bouton employait GWT, mais le message affiché utiliser GWT-Ext. Vous pouvez utiliser les composants de GWT-Ext au lieu de GWT. Un plugin existe pour spring aussi. GWT est une platteforme qui évolue rapidement, il manque encore de documentation surtout pour l'intégration avec d'autre framework.