Archives pour la catégorie “Nouvelles-technologies”
Publié par Sylvain Yenoussa dans GWT, tags: GWT, GXT, java
Le principal avantage de GXT est de proposer des Widget permettant des interactions complexes avec l’utilisateur, mais permettant de simplifier le travail des développeurs. Voici un nouvel exemple permettant de réaliser un arbre asynchrone avec GXT de manière relativement simple, avec la classe TreeGrid:
Qu’est-ce qu’un arbre asynchrone ?
Certaines données nécessitent d’être représentées sous forme d’arbre que tout le monde connait et dont voici un exemple:
 (capture d’écran de : http://www.jmdoudoux.fr)
Dans cet exemple simple, un arbre synchrone est amplement suffisant, la structure de l’arbre étant connue et finie.
Les choses se compliquent lorsque l’on souhaite mettre en place un arbre dont le chargement des enfants de la branche se font lorsque l’on clique sur celle-ci (une nouvelle requête au serveur est alors effectuée). En GXT cette opération est relativement simple, le code suivant permettant de le faire :
Dans l’entry point:
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
| package fr.yenoussa.example.gwt.gxt.desktop.client;
import java.util.Arrays;
import java.util.List;
import com.extjs.gxt.ui.client.data.BaseTreeLoader;
import com.extjs.gxt.ui.client.data.BaseTreeModel;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.store.TreeStore;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.treegrid.TreeGrid;
import com.extjs.gxt.ui.client.widget.treegrid.TreeGridCellRenderer;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.AsyncCallback;
/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class AsyncTreeGridExample implements EntryPoint {
/**
* Create a remote service proxy to talk to the server-side Greeting
* service.
*/
private final GreetingServiceAsync greetingService = GWT
.create(GreetingService.class);
/**
* This is the entry point method.
*/
public void onModuleLoad() {
// Une petite fenetre pour mettre notre arbre
Window win = new Window();
win.setHeading("Exemple d'arbre asynchrone");
win.setLayout(new FitLayout());
win.setSize(500, 500);
// On crée le proxy qui sera responsable du chargement des données ...
RpcProxy<List<BaseTreeModel>> proxy = new RpcProxy<List<BaseTreeModel>>() {
@Override
protected void load(Object loadConfig,
AsyncCallback<List<BaseTreeModel>> callback) {
// C'est le loader qui fera tout seul l'appel asynchrone pour
// le chargement des enfants
greetingService.getChildren((BaseTreeModel) loadConfig,
callback);
}
};
// on crée notre loader qui sera l'objet qui appelera le proxy ...
BaseTreeLoader<BaseTreeModel> loader = new BaseTreeLoader<BaseTreeModel>(
proxy) {
@Override
public boolean hasChildren(BaseTreeModel parent) {
// c'est ici que l'on définit si des enfants seront chargés lors
// d"un appel asynchrone, si false, il n'y aura pas de petite
// fleche qui permet de déplier la branche
return true;
}
};
// On crée notre tree store qui sera l'objet qui contiendra la liste des
// objets à afficher
TreeStore<BaseTreeModel> store = new TreeStore<BaseTreeModel>(loader);
// On crée l'arbre
ColumnConfig name = new ColumnConfig("_Name", "Name", 100);
// on n'oublie pas le treegrid cell renderer qui permet de savoir sur
// quelle colonne on place la petite fleche pour déplier l arbre
name.setRenderer(new TreeGridCellRenderer<BaseTreeModel>());
ColumnModel cm = new ColumnModel(Arrays.asList(name));
// on crée notre arbre
TreeGrid<BaseTreeModel> tree = new TreeGrid<BaseTreeModel>(store, cm);
// on etire la colonne ...
tree.getView().setForceFit(true);
// on rajoute l arbre dans la fenetre
win.add(tree);
// que l'on affiche ...
win.show();
}
} |
La servlet (j’ai gardé la même servlet que celle de l’example créé en même temps que le projet):
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
31
32
33
34
35
36
37
38
39
40
41
42
43
| package fr.yenoussa.example.gwt.gxt.desktop.server;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import com.extjs.gxt.ui.client.data.BaseTreeModel;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import fr.yenoussa.example.gwt.gxt.desktop.client.GreetingService;
/**
* The server side implementation of the RPC service.
*/
@SuppressWarnings("serial")
public class GreetingServiceImpl extends RemoteServiceServlet implements
GreetingService {
@Override
public List<BaseTreeModel> getChildren(BaseTreeModel father) {
if (father == null) {
BaseTreeModel root1 = new BaseTreeModel();
root1.set("_Name", "Root 1");
root1.set("_Profondeur", new Integer(0));
BaseTreeModel root2 = new BaseTreeModel();
root2.set("_Name", "Root 2");
root2.set("_Profondeur", new Integer(0));
List<BaseTreeModel> listToReturn = new ArrayList<BaseTreeModel>();
listToReturn.add(root1);
listToReturn.add(root2);
return listToReturn;
}
BaseTreeModel child = new BaseTreeModel();
Integer profondeur = father.<Integer> get("_Profondeur") + 1;
child.set("_Profondeur", profondeur);
child.set("_Name", "Enfant, profondeur: " + profondeur);
return Arrays.asList(child);
}
} |
Je donne l’ interface asynchrone et l’interface de la servlet, même si les deviner est relativement trivial:
L’interface de la servlet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| package fr.yenoussa.example.gwt.gxt.desktop.client;
import java.util.List;
import com.extjs.gxt.ui.client.data.BaseTreeModel;
import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;
/**
* The client side stub for the RPC service.
*/
@RemoteServiceRelativePath("greet")
public interface GreetingService extends RemoteService {
List<BaseTreeModel> getChildren(BaseTreeModel father);
} |
Interface asynchrone:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| package fr.yenoussa.example.gwt.gxt.desktop.client;
import java.util.List;
import com.extjs.gxt.ui.client.data.BaseTreeModel;
import com.google.gwt.user.client.rpc.AsyncCallback;
/**
* The async counterpart of <code>GreetingService</code>.
*/
public interface GreetingServiceAsync {
void getChildren(BaseTreeModel father,
AsyncCallback<List<BaseTreeModel>> callback);
} |
Fonctionnement:
Il est important de bien comprendre le fonctionnement du petit exemple :
- Le store contient les éléments à afficher
- Le store se sert du loader passé en paramètre du constructeur pour charger les éléments
- Le loader appelle le RPC proxy pour faire le chargement asynchrone de la liste des enfants d’un élément passé en paramètre
- Lors de l’affichage de l’arbre la première fois, celui-ci passe appelle automatiquement la méthode asynchrone disponible dans le proxy. Vu que l’arbre cherche à charger les éléments racine, le loadConfig vaut null la première fois. Lorsque l’on souhaitera déplier une branche de l’arbre, ce loadConfig sera l’objet représentatif de la branche que l’on souhaite déplier.
- Coté serveur, on doit retourner une liste d’éléments en fonction de l’élément parent que l’on reçoit en paramètre. Si cet élément est null, alors il faut renvoyer les racines de l’abre, et sinon renvoyer les enfants de l’élément racine reçu en paramètre.
- La méthode asynchrone est faite de manière à ce que l’on puisse passer en paramètre l’élément parent afin de pouvoir retrouver ses enfants.
Le résultat du code proposé est le suivant:
Pas de commentaire »
Publié par Sylvain Yenoussa dans GWT, tags: GWT, GXT, java
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 :
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.
Pas de commentaire »
Cet article est le premier d’une série qui traitera de GXT, une sur-couche graphique de GWT permettant de développer relativement facilement des applications Web très d’interactives, et fonctionnellement complexes . La librairie s’appuie sur la puissante librairie Javascript Ext-Js, maintenant renommée Sencha et qui permet d’avoir un rendu plutôt sympa.
L’objectif de ces articles est de montrer que l’on peut facilement développer une application Web en Java avec GXT et GWT et d’obtenir des applications très interactives avec un très bon rendu en n’ayant des notions de design Web très limitées (donc pas ou peu de CSS et de Html, que du code Java).
La force de GWT
Une des forces de GXT est de s’appuyer sur GWT, on dispose donc de tous les outils qui font le succès de GWT : environnement de développement (éclipse), possibilité de debuggage, technologie Java. De plus, seuls des développeurs Java sont nécessaires à sa mise en oeuvre, ce qui simplifie les développements …
La philosophie de Sencha / Ext-GWT
Positionnement par Layout
La philosophie de Sencha/GXT est relativement simple : le codage de vos applications s’effectue de la même manière qu’en Swing, avec un système de conteneurs (ContentPanel et autres LayoutContainers) et de Layout vous permettant de positionner vos composants graphiques au millimètre, ce qui vous dispense quasiment d’utiliser des CSS.
BorderLayout, FitLayout, RowLayout, chacun ont leur fonctionnement qu’il convient de maitriser pour éviter l’arrachage de cheveux. La vraie force du framework, c’est de proposer une pléthore de composant que vous pourrez customiser comme bon vous semble afin de les faire correspondre avec ingéniosité à vos besoins fonctionnels. Un showcase est disponible pour mieux connaitre ces composants et leur utilisation. Le connaitre et l’avoir sous le coude peut s’avérer primordial afin de ne pas perdre de temps et coder de manière propre.
Composants GXT
Voici quelques composants que vous pourrez utiliser pour travailler
- Les arbres (dont les arbres asynchrones)
- Les grilles (dont les grilles éditables pour modifiier les données « en live »)
- Composants de formulaires (Checkbox, boutons radio, textfields, combobox etc …)
- Des boutons, toggle boutons, toolbars etc …
Référez-vous au showcase dont le lien est donné ci-dessus pour plus d’informations…
ModelData qui formeront votre Datamodel
GXT vous contraint à utiliser un modèle de données relativement spécifique qui lui est propre. En effet, pour leur rendu, la plupart des composants utilisent des éléments ou listes d’éléments qui implémentent tous l’interface ModelData. Cette spécificité vous amènera à abandonner le système de POJO classique pour créer vos objets qui implémentent l’interface ModelData et donc qui utilisent des données stockées dans des Map<String, Object>
Les ListStore<? extends ModelData>
Une des autres particularités de GXT est de proposer des ListStore et des TreeStore. Ces objets sont des listes d’éléments utilisées par les composants GXT pour afficher des données. Ces listes sont relativement différentes des List classiques que tout développeur Java connait. En effet, les ListStore permettent :
- Poser des Listener sur le Store qui permettent de savoir si un ajout a été effectué, un modèle a été updaté, ou supprimé ou savoir si le store a été filtré
- Filtrer le store (si le store est associé à une grille, celle-ci sera mise à jour automatiquement)
- Charger automatiquement des données dedans en ayant définit au préalable une source de données
Un mode desktop
Une des forces de l’API GXT est de proposer une sorte de Web OS vous permettant, par exemple, de développer une application qui comporte plusieurs module qui se lancent depuis le menu « Démarrer » proposé par le Desktop GXT, ou des raccourcis que vous aurez posé sur le bureau de votre OS Web.
Véritable argument de vente pour certains, ergonomie pour d’autres, le mode Desktop proposé par GXT est relativement impressionant, effet garanti lors d’éventuelles présentations client !
Cependant, rassurez-vous, vous n’êtes en aucun cas obligé d’implémenter de mode Desktop et pouvez faire votre application à votre sauce avec la disposition que vous souhaitez !
Conclusion
GXT apporte une solution pertinente pour développer des applications Web comme on développerait en Swing ou en SWT. Le prochain article sur GXT sera sur la création d’un projet (avec eclipse) où l’on mettra en oeuvre le fameux Desktop proposé par GXT.
Un commentaire »
Lorsque l’on développe en Java, il est une chose qui est relativement pénible à faire : gérer les dépendances entre projets et courir derrière les différents Jar dont on a besoin.
Prenons un exemple : vous devez développer une application qui devra accéder à une base de données MySQL. Vous allez donc avoir besoin du driver MySQL pour pouvoir créer votre connection et effectuer des requêtes sur votre base.
Environnement
Pour utiliser Maven dans de bonnes conditions, il vous faut un plugin dans votre Eclipse. M2Eclipse fera l’affaire. Bien que parfois capricieux,il reste relativement simple d’utilisation. Rendez-vous ici: http://m2eclipse.sonatype.org pour l’installer, suivez la procédure d’installation.
Créez votre projet
Dans Eclipse : File >>> New >>> Maven Project
Cliquez sur Next. Cochez la combobox : Create a simple project (skip archetype selection)
 Donnez un Group ID et un Artifact ID à votre projet. Ces informations vous permettront de lier vos projets entre eux (si par exemple vous souhaitiez créer un projet qui contiendra UNIQUEMENT des DAO et qui devra être utilisable par d’autres projets)
un exemple:
- goupID : dao
- artifactID : mysql-dao
Cliquez sur finish pour finaliser la création de votre projet.
Maven dependency
Votre projet java est créé. Ce projet comprend un fichier pom.xml qui est le fichier de configuration utilisé par Maven. Ce fichier va vous permettre de définir les relations de votre projet avec d’autres projets et les librairies dont vous avez besoin. Nous allons à présent ajouter un dépendance vers la librairie qui nous intéresse : le Driver MySQL pour JDBC
Allez sur le site du repository maven officiel :http://mvnrepository.com et tapez MySQL dans le champ de recherche. Lorsque vous sélectionnez le MySQL connector, une portion de fichier xml vous est proposé pour maven :
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.13</version>
</dependency>
Rajoutez cette portion de XML dans votre fichier pom.xml (rajoutez une balise pour rajouter votre dependency)
vous devriez obtenir le résultat suivant :
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>dao</groupId>
<artifactId>mysql-dao</artifactId>
<version>0.0.1-SNAPSHOT</version>
<dependencies>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.13</version>
</dependency>
</dependencies>
</project>
Lorsque vous enregistrez le fichier pom.xml, Maven va automatiquement télécharger le jar correspondant à mysql connector sur internet et le rajoute automatiquement au classpath de l’application.
Vous pouvez à présent utiliser le driver MySQL qui a été ajouté de manière automatique, comme si vous aviez ajouté le Jar vous-même !
Conclusion
Nous venons de voire un exemple simple d’utilisation de Maven pour inclure les dépendances vers d’autres librairie de manière automatique.. D’autres exemples d’utilisation de l’outil sont disponibles sur la toile vous permettant de compiler, releaser, déployer vos applications.
Pas de commentaire »
Depuis plusieurs années, Google vous propose de créer des applications web très riches grâce à framework relativement facile à mettre en oeuvre (du moins au premier abord). L’objectif de cet article n’est pas de faire de vous un pro du GWT dans l’heure qui suit, mais plutôt de faire un état des lieux de la technologie, voire ce qu’il est possible de faire, et ce qui ne l’est pas …
Le principe
GWT part d’un constat simple : développer des application internet riches est un vrai casse-tête pour le développeur : il doit souvent associer plusieurs technologies différentes afin d’obtenir un résultat satisfaisant, comme par exemple du Java pour la partie serveur avec du Javascript etc …. pour la partie client. On se retrouve donc avec des applications qui sont difficilement maintenables car faisant cohabiter des technologies différentes et donc nécessitant des compétences différentes.
GWT met donc tout le monde d’accord en vous permettant de développer votre application intégralement en Java, la partie du client (exécutée par le navigateur) étant par la suite compilée en Javascript afin de pouvoir fonctionner sur n’importe quel type de navigateur.
Découpage de votre application
Votre application GWT sera donc découpée en deux parties qui se trouveront dans deux packages différents :
- Un package server qui contiendra des servlet qui permettront à votre application de communiquer avec le restant du monde
- Un package client qui contient la partie présentation de votre application (exécutée dans le navigateur) codée en Java mais qui sera intégralement transformée en Javascript et Html.
- La communication entre l’interface graphique et la partie serveur se fait par le biais de méthodes asynchrones
Point important : Etant donné que cette partie de l’application sera compilée en Javascript, vous n’avez le droit d’utiliser QUE des objets qui sont compilables en Javascript. De plus, ces objets doivent nécessairement se trouver dans un package client GWT afin d’être utilisés. Si votre application utilise un datamodel composé de classes, ces dernières devront nécessairement se trouver dans un package client d’un projet GWT.
Mise en oeuvre
Environnement de développement
La mise en oeuvre de GWT est relativement simple, grâce aux outils proposés par Google et à l’environnement de développement Eclipse qui fournit tout le cadre au développement. Pour faire vos premier pas, procédez comme suit pour installer votre environnement de développement:
Installez Eclipse, si ce n’est pas déjà fait, rendez-vous ici et récupérez la dernière version pour développeur JEE.
Installez le plugin GWT pour eclipse : Vous trouverez ici un lien pour connaitre l’Url du plugin GWT pour votre version d’Eclipse.
- Dans eclipse ouvrez le menu help
- Cliquez sur Install new software
- Rajoutez le repository dont l’Url est celle que vous avez trouvé sur le dernier site (http://dl.google.com/eclipse/plugin/3.6 pour Helios)
- Sélectionnez le repository, sélectionnez tous les items et installez-les.
- Redémarrez votre Eclipse quand on vous le demandera
- Le plugin est installé !!
Créez votre projet
- Créer un projet GWT est extrêmement simple : File >> New >> Web application project
- Donnez lui un nom
- Spécifiez un nom de package
- Décochez l’option « Use Google App Engine »
- Validez votre création en cliquant sur finish
Vous devriez obtenir une structure projet similaire à celle-ci
Comme vous pouvez le voire, le projet contient deux packages essentiels à son bon fonctionnement :
- le package client ( IHM, qui sera transformé en JavaScript ). Etant donné que ce package sera compilé en Javascript, il ne devra contenir QUE des objets compilables en Javascript.
- le package server
Le package shared n’est pas nécessaire au bon fonctionnement du projet.
On remarque également la présence d’un fichier MonProjet.gwt xml. Ce fichier xml permet de définir
- Les package qui seront compilés en JavaScript
- La classe qui sera le point d’entrée de l’application (cette classe est reconnaissable implémente l’interface EntryPoint, il s’agit ici de la classe MonProjet)
- Des liens vers les packages externes (également compilables en Javascript)
Le package client contient trois classes :
- La classe GreetingService : Cette interface est l’interface permettant de faire le lient entre les méthodes asynchrones et les méthodes qui seront appelées par le client. Cette interface est implémentée par la servlet coté serveur.
- La classe GreetingServiceAsync : Cette interface contient toutes les méthodes asynchrones qui seront appelées coté client pour executer des méthodes coté serveur.
- La classe MonProjet qui est le point d’entrée de l’application
Hosted mode
La notion de hosted mode est relativement importante dans GWT. Ce mode de développement permet de lancer votre application sans la compiler en Javascript (la compilation en Javascript est un procédé relativement long) et donc de tester le code que vous écrivez « à chaud ». L’affichage de votre travail non compilé se fait à présent dans votre navigateur préféré (le navigateur se prêtant le mieux à cet exercice rester Firefox), après l’installation d’un plugin dans celui-ci. Lorsque vous lancerez votre application pour la première fois, une fenêtre s’ouvrira dans éclipse vous permettant de contrôler le serveur Jetty embarqué. Une url apparaitra dans cette fenêtre, qui correspond à l’url de l’application que vous développez. Copiez-collez cette URL dans votre navigateur pour exécuter l’application. Si besoin est, le navigateur vous demandera de télécharger le plugin GWT pour exécuter l’application sans l’avoir compilée en Javascript.
Pour lancer le hosted mode, il vous suffit d’executer votre application comme une Application Web (une run conf GWT sera automatiquement crée)
Debug
Debugger un application GWT est un jeu d’enfant : si votre application est lancée en mode Debug, vous pouvez placer des points d’arrêt et débugger votre code Java alors que celui-ci est appelé à être compilé en Javascript.
Conclusion
Développer des application Web interactives et complexes en Javascript n’est pas chose aisée, la technologie se prêtant mal aux applications complexes et au Debug malgré des Framework efficaces comme JQuery. Google apporte donc une solution robuste quoique parfois contraignante car le package client ne permet d’utiliser que des éléments compilables en Javascripts, ce qui réduit certaines possibilités, comme par exemple utiliser un Stringtokenizer coté client qui n’est pas un objet compilable en Javascript.
Un commentaire »
Voici l’analogie qui est souvent faite entre la conception et la mise en place d’une balançoire et celles d’un projet informatique :
Pas de commentaire »
Après  Microsoft et Sony, une rumeur fait entrevoir une baisse de prix de la console qui a créé le buzz il y a quelques années. Ainsi, la console du japonnais passerait de 249 à 199 euros.
La concurrence est donc rude entre les différents constructeurs, ceux-ci mettant en oeuvre différentes stratégies pour attirer les joueurs sur leur console : réduction de prix et nouvelle version chez Sony, idem chez Microsoft, et même si cette baisse n’a pas été confirmée par Nintendo, celle-ci ne serait pas une grosse surprise.
Pas de commentaire »
Au terme d’une sélection qui aura duré un peu plus d’un an, on connait les gagnants qui auront en charge la refonte du système de paye de l’état français qui existait depuis les années 70, et gère la paie de quelques 3.1 millions de fonctionnaires.
Ce seront les sociétés Accenture, Logica et Sopra qui auront donc en charge de paramétrer un progiciel pour implanter les règles de gestion complexes qui permettent de prendre en compte les différents types de populations de fonctionnaires.
On retiendra de cet appel d’offre que le couple IBM – SAP n’a pas été assez convaincant, face à ce refus, le numéro un de l’informatique aurait d’ailleurs déposé un recours en référé devant le tribunal administratif pour contester la validité de la procédure, recours qui a finalement été rejeté.
Le trio gagnant aura également en charge la maintenance de la solution sur une période de neufs ans. Un tel accord est très bénéfique pour les sociétés de service, celui-ci leur permettant d’obtenir des revenus stables, ce qui en temps de crise est très important, pour assurer entre autres la pérennité de l’emploi des salariés et donc garder les compétences …
Pas de commentaire »
Cognos, suite décisionnelle, rachetée il y a quelques temps par IBM, convoite à son tour les PME/PMI en baissant en gamme en  proposant Cognos Express.
Cependant, Cognos arrive un peu tard sur un marché où Microsoft est très présent. « Il est vrai que nous arrivons après les autres, reconnaît Olivier Métier. Mais parmi tous ceux qui ciblent les PME, nous sommes les seuls à fournir un package incluant en plus du reporting, de la planification et de l’élaboration budgétaire. »
Les grands éditeurs, comme SAP mettent le paquet sur le marché des PME et PMI, le marché des grands comptes arrivant à maturité. Cependant, ce marché est déjà bien occupé, entres autres par Microsoft et son ERP dynamics, et les grands éditeurs souffrent souvent d’une image de solution complexe et couteuse à mettre en œuvre, les coûts de licence et de mise étant d’ailleurs quelques peu difficiles à comprendre et à anticiper.
Pas de commentaire »
 SAP le leader en matière d’ERP se lance à la conquête du marché des PME et PMI.
A cette occasion, l’éditeur de progiciel se lance dans le cloud computing avec une offre basée sur le concept de Saas. Baptisée Business ByDesign, cette solution, lancée en 2007 a connu des début commerciaux difficiles, notamment pour des raisons que j’ai évoquées dans cet article.
Afin de conquérir le marché, Rainer Zinow, vice-président senior de SAP en charge de la stratégie PME a annoncé : « Nous allons fournir un environnement de développement pour SAP Business ByDesign », ces applications pouvant s’exécuter sur la plateforme Saas. On notera également que le nombre de pays où l’offre est présente sera également élargi.
De plus, une plateforme, dans l’esprit de l’App Store d’Apple sera également mise en place afin que les éditeurs partenaires puissent commercialiser leurs réalisations et donc permettre à leurs clients de se rapprocher du fameux alignement stratégique du SI.
Les offres de cloud computing sont à la mode en ce moment, et cela se ressent dans la multiplication des offres basées sur ce principe. On entre de plus en plus dans une logique d’externalisation, qui permet aux entreprises de se recentrer sur leur métier, et donc éviter les problèmes engendrés par l’informatique : recrutement, problèmes techniques etc …
Cependant, on peut se poser la question du contrôle que l’entreprise garde sur son SI, celui-ci étant souvent stratégique pour l’organisation …
Pas de commentaire »
|
Bulletins (RSS)