Mettre en place le Desktop de GXT : tutorial

de | 3 janvier 2011

Créez votre projet GWT

Consulter la section créez votre projet de cet article

Démarrer l’application

On vérifie que tout marche bien en cliquant avec le bouton droit de la souris sur le projet : Run as >> Web application (avec le logo Google) la fenêtre de développement mode s’ouvre, et propose une adresse de ce type :

http://127.0.0.1:8888/GWT_Desktop.html?gwt.codesvr=127.0.0.1:9997

Copiez-collez cette adresse dans votre navigateur (je recommande vivement Firefox) et affichez la page. Si c’est la première fois que vous lancez une application GWT non compilée, vous devrez télécharger le plugin permettant de le faire

Bien comprendre ce qui se passe

Lorsque vous aurez cette page affichée dans votre navigateur :

Ce que vous verrez n’est pas encore compilé en Javascript, mais votre Java est interprété à la volée par le hosted mode que vous voyez dans Eclipse et qui est appelé grâce au paramètre ?gwt.codesvr=127.0.0.1:9997 de l’url fournie, ce qui rend l’application particulièrement LENTE (ce ne sera plus le cas lorsque qu’elle sera compilée en Javascript pur)

Cliquez sur « Send », si vous obtenez une fenêtre donnant des informations sur votre browser, le serveur Jetty (que vous avez lancé en même temps que le Hosted mode) et votre OS, tout s’est bien déroulé.

Mise en place de GXT

Nous allons à présent mettre en place GXT pour faire fonctionner l’API

Clean

Supprimez tout ce qui est inutile dans l’exemple créé lors de la création du projet:

Supprimez le package shared

Supprimez tout ce qui est dans le classe définissant l’entry point de votre application, gardez la methode onModuleLoad() vide ainsi que l’instanciation de votre service asynchrone (nous ne nous en servirons pas, mais cela pourrait vous être utile si vous souhaitez pousser l’exemple un peu plus loin)

1
private final GreetingServiceAsync greetingService = GWT.create(GreetingService.class);

Supprimez toutes les méthodes dans les classes et interfaces suivantes:

  • La servlet GWT GreetingServiceImpl
  • L’interface implémentée par la servlet : GreetingService
  • L’interface contenant vos méthodes asynchrones : GreetingServiceAsync

Téléchargement

Téléchargez le Zip qui contient GXT ici et extrayez le. Il contient toutes les ressources necessaires à la mise en place du projet.

Jar

Rajoutez le jar de GXT dans votre classpath, comme vous faites dans vos projets Java normaux. Le jar s’appelle gxt.jar et se trouve à la racine du dossier que vous venez de dezipper

Inherits

Lorsque l’on développe une application GWT et que l’on souhaite utiliser des composants externes au package client en cours, il faut indiquer dans le fichier Pojet_Courant.gwt.xml que l’on va utiliser une librairie externe et fournir un pointeur sur le fichier Librairie_Externe.gwt.xml qui décrit cette librairie.

Rajouter donc un pointeur vers le desktop GWT en rajoutant la ligne suivante dans votre fichier MON_APPLICATION.gwt.xml:

1
<inherits name='com.extjs.gxt.desktop.WebDesktop'/>;

Dans le fichier MON_APPLICATION.gwt.xml de votre projet. Vous pourrez donc utiliser les classes présentes dans le jar gxt.jar. On remarquera que ce fichier de Desktop pointe à son tour sur le fichier com.extjs.gxt.ui.GXT , ce qui vous permettra d’utiliser les classes offertes par GXT sans rajouter de nouvel inherits dans le fichier de votre application.

CSS

GXT est fourni avec ses propres CSS pour fonctionner, qui sont différents de ceux proposés dans GWT. Afin de pouvoir en profiter, il faut les mettre dans le dossier de votre application. Copiez donc le fichier resources contenu dans le zip dans le dossier war de votre application.

Afin d’appliquer les CSS, ouvrez le seul fichier Html qui compose votre application, rajoutez les CSS GXT et enlevez le restant de manière à ne garder que ceci:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript" language="javascript" src="gwt_desktop/gwt_desktop.nocache.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        
    <link type="text/css" rel="stylesheet" href="resources/css/gxt-all.css">
    </link><link type="text/css" rel="stylesheet" href="resources/desktop/css/desktop.css">
    <title>GXT - Example</title>    
  </link></meta></head>
  <body>
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    <noscript>
    </noscript>
  </body>
</html>

Desktop

A présent, on lance le Desktop de GXT. Cette opération se fait dans la classe d’Entry Point de votre application que vous avez normalement nettoyé au début de ce tutorial. Pour lancer le desktop GXT l’opération est relativement simple : écrivez tout simplement :

1
new Desktop();

Dans la méthode onModuleLoad(); de l’entry point. Lorsque vous rafraîchirez la page Web, vous verrez alors le Desktop GXT apparaitre. Cela peut paraitre un peu magique, mais lorsque l’on ouvre le code du constructeur du Desktop, on se rend compte que celui-ci se charge de l’ajout du Desktop au RootPanel.

Raccourcis

A présent, afin de lancer vos applications, nous allons rajouter des raccourcis dans le Desktop. Voici à quoi devrait ressembler votre Entry Point avec quelques raccourcis (libre à vous de rajouter des images):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		Desktop d = new Desktop();
 
		// First Start menu items
		MenuItem startMenuItem1 = new MenuItem("First Launch");
		startMenuItem1.addSelectionListener(new SelectionListener<menuevent>() {
 
			@Override
			public void componentSelected(MenuEvent ce) {
				MessageBox.alert("Shortcut", "First menu item selected", null);
			}
		});
		d.getStartMenu().addTool(startMenuItem1);
 
		// Second start menu item
		MenuItem startMenuItem2 = new MenuItem("Second Launch");
		startMenuItem2.addSelectionListener(new SelectionListener</menuevent><menuevent>() {
 
			@Override
			public void componentSelected(MenuEvent ce) {
				MessageBox.alert("Shortcut", "Second menu item", null);
			}
		});
		d.getStartMenu().add(startMenuItem2);
	}
 
</menuevent>

Conclusion

Nous avons mis en place le Desktop GXT. Cet exemple simple peut vous permettre avec un peu d’ingéniosité de créer votre framework autour de cet environnement, afin de créer un environnement de travail agréable et dynamique pour les utilisateurs des applications que vous développerez avec votre framework.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Time limit is exhausted. Please reload the CAPTCHA.