Une petite révolution est entrain de s’installer dans la Box préférée des clients Bouygues Telecom, souvent titulaires de forfaits quadruple play aux prix attractifs.

BBOX, Media Center

Non, vous ne rêvez pas, la BBOX devient media center ! Alors oui, effectivement cette fonctionnalité existe juste depuis des années chez Free sur la Freebox, idem sur toutes les autres Box internet qui se respectent, mais chez Bouygues Telecom on prend son temps et comme dit le proverbe : mieux vaut tard que jamais !

Fonctionnalités

Bon, là encore, il est possible de lire du contenu sur une clé USB ou un disque dur, ou encore, plus interessant, du contenu sur le réseau local. Rien de bien révolutionnaire, l’interface mise en place est relativement dépouillée, mais l’essentiel est bien présent. Plus besoin de se doter d’un appareil capable de lire les fichiers sur l’ordinateur, c’est en soi une petite révolution pour la Box …

Lire du contenu en reseau par DLNA

C’est de loin, selon moi, la fonctionnalité la plus importante apportée par cette mise à jour. En effet, il devient possible de partager du contenu multimedia avec la Box, utile pour regarder un film par exemple.

Pour mener à bien cette mission, il vous faut un « serveur » DLNA que vous installerez sur votre ordinateur. Développé en Java et donc multi plateformes, PS3 Media server, initialement développé pour la Playstation 3 fait très bien le boulot, il vous suffit de lui indiquer le répertoire où sont stockées vos vidéos pour les partager. Vous verrez le serveur apparaitre instantanément dans la liste des source de données réseau du Media Center de la BBOX et pourrez naviguer.

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:

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.

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.

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.

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.

1. Dans eclipse ouvrez le menu help
2. Cliquez sur Install new software
3. 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)
4. Sélectionnez le repository, sélectionnez tous les items et installez-les.
5. Redémarrez votre Eclipse quand on vous le demandera
6. 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 :

1. 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.
2. La classe GreetingServiceAsync : Cette interface contient toutes les méthodes asynchrones qui seront appelées coté client pour executer des méthodes coté serveur.
3. 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.

Le catalogue de services est une pratique dont ITIL, préconise la mise en oeuvre pour une amélioration du management du système d’informations. Mais concrètement, qu’en est-il ? Que doit contenir ce fameux catalogue de services, et dans quel but ? Dans cet article, je donne quelque pistes pour la mise en place d un processus de gestion d’un catalogue de services.

Les composants du catalogue de services

1- Les horaires

Les horaires d’ouverture

Pour un service donné, cela peut paraitre bête, mais il faut définir les horaires de disponibilité pour celui-ci. Un réel travail doit être mené pour définir des horaires pertinents et adapté spécifiquement au service concerné. Prenons un exemple simple : nous sommes dans une entreprises dont l’activité principale est la vente en ligne d’objets manufacturés. Cette entreprise est implantée exclusivement en France. Si nous imaginons deux services dans cette entreprise

• Le service du site de e-commerce
• Le service paie de l’entreprise (composé entre autres d’une application de gestion)

Il est évident que le service e-commerce de l’entreprise devra avoir des horaires d’ouverture différents du service de paie qui, en simplifiant à l’extrême, n’aurait besoin d’être ouvert qu’une fois par mois, au moment de l’établissement de la paie des salariés de l’entreprise.

Les autres horaires

Lors de la définition d’un service, d’autres types d’horaires sont à prendre en compte. Par exemple, les horaires de backup du service sont trop souvent négligées. Négligées car à priori ceux-ci n’affectent pas la fourniture de service, mais en pratique peuvent par exemple être générateurs de forte utilisation de ressource machine, ce qui peut être dommageable si à ce moment là le service en question est également et exceptionnellement demandeur de ressources machines.

Toutes les informations importantes concernant les plages horaires d’ouverture, de sauvegarde et de maintenance (normales et exceptionelles) doivent être rigoureusement renseignées dans le catalogue de services.

2- Les interactions

Tout d’abord, il convient d’établir les dépendances du service que vous souhaitez définir avec les autres composants de votre système d’information.

Les CIs

Par définition, un service informatique s’appuie sur des composants de votre infrastructure (c’est le but …). Il s’agit, à ce stade du processus, d’identifier de quels éléments de l’infrastructure le service a besoin pour fonctionner normalement. Beaucoup de soin doit être apporté à ce recensement, de manière à obtenir une information exhaustive, à jour et de qualité. Ceci est particulièrement important si ces informations sont utilisées plus tard dans le cadre d’investigations pour résoudre des incidents ou des problèmes.

Les autres services

Indéniablement, les services d’un système d’information fonctionnent rarement seuls, et sont souvent la base du fonctionnement d’un autre, ou, dans l’autre sens, nécessitent un autre service pour fonctionner. A titre d’example, on peu très simplement imaginer qu’un intranet d’entreprise nécessite une base de données MySQL pour son fonctionnement, mais également un accès à l’annuaire active directory de l’entreprise pour authentifier les utilisateurs.

3- Les contacts

Dans cette activité du processus, il s’agit de définir les acteurs qui sont en relation avec le service que l’ont définit :

Application owner

Il s’agit d’identifier le ou les responsables de l’applications. En effet, il s’avère que souvent, plusieurs personnes sont responsables d’une même application, avec des rôles différents. Ainsi, le plus couramment, on trouvera

• Des responsables du coté métier (responsable des achats, financier …)
• D’autres responsables qui ont en charge le parametrage de l’application
• Enfin des responsables techniques qui doivent mettre en oeuvre les moyens necessaires pour que l’application s’exécute d’une manière optimale en production.

Clients

Le plus souvent, le « client » d’un service désigne en réalité un groupé d’individus qui est consommateur de celui-ci. Il est très important d’identifier avec précision ces clients, car cette information sera très précieuse par exemple en cas d’incident majeur mettant le service hors d’état de fonctionner. Grâce à cette connaissance des clients de l’application, une stratégie de communication peut être élaborée au plus vite, de façon à éviter une surcharge inutile du service desk de l’entreprise.

Les autres contacts

Nous venons de définir les types de contacts qu’il est intéressant de répertorier, mais d’autres peuvent également faire l’objet de votre intérêt. Par exemple, on pourra renseigner un contact ayant participé au paramétrage du service, ou encore la personne la plus qualifiée pour résoudre des problématiques de haut niveau … C’est à vous de juger des informations pertinentes à collecter !

4- Les SLA

Les SLA, ou accords de niveau de service sont un point très important du catalogue de services, à un tel point que certains diront presque qu’ils en sont la raison d’être.

Les accords de niveau de service formalisent les accords entre l’organisation qui fourni le service et les clients qui consomment le service. L’objet de cette formalisation porte essentiellement sur la qualité de service attendue (taux de disponibilité, temps de réponse …). Je ne vais pas décrire dans cet article toute la composition d’un SLA, mais voici à gros grain les essentiels points à aborder lors des discussions.

Bénéfices

Les bénéfices de la mise en place du processus de catalogue de service sont multiples :

Financier

Identifier les applications critiques ainsi que la partie de l’infrastructure technique sur laquelle elle s’appuie. Cette constatation amène à imaginer des axes d’amélioration de l’infrastructure multiples . Par exemple, identifier les services dont le niveau de service est à priori trop élevé et donc couteux pour l’utilisation que l’on en fait. On peut également imaginer regrouper des services différents sur la meme machine en fonction des horaires d’ouverture et de backup de ces services. A l’heure où tout le monde parle du Green IT, une telle optimisation de l’infrastructure permet de faire de réels gains certes financiers, mais également en énergie (consommation des machines, climatisation) et donc réduire l’impact carbone des services, mais nous nous écartons du sujet …

Infrastructure

Meilleure connaissance de l’infrastructure technique dans sa globalité : identifier les interactions entre les services, base de connaissance pour les responsables de cette infrastructure.

Infogérance

Vous êtes infogérés? Le catalogue de service est une excellente manière d’améliorer le pilotage de votre infogérant. Il vous permet de partager avec lui des informations sur vos différents services, de manière à ce qu’il sache communiquer avec vous lorsqu’un incident majeur se présente.

Conclusion

Un catalogue de services à jour et contenant des informations pertinentes est un réel atout pour le département IT de l’entreprise. Il peut être une base de connaissances précieuse pour le travail des chefs de projet déploiement, et permet de formaliser des informations trop souvent éparpillées et parfois oubliées.

Solution implémentant des processus ITIL : Comarch ITM

Prévue pour début 2010, la nouvelle suite bureautique de Microsoft, Office 2010 n’a pas encore livré tous ses secrets. En effet, Microsoft compte mettre en place un nouveau mode de commercialisation :

Une carte prépayée pour la licence d’Office 2010

Certains ordinateurs seront livrés avec une version d’essai de Microsoft Office. Jusque ici, rien de nouveau. Cependant, sur cette version d’office, les personnes souhaitant disposer de la version complète du logiciel pourront s’acquitter d’une sorte de carte prépayée avec un numéro de licence pour un prix inférieur aux version « boite ». Microsoft permet de cette façon à ses clients de réaliser des économies tout en devenant écologique : une petite carte, forcément, ca pollue moins qu’une boite…

Bye bye Microsoft Works

L’arrivée d’Office 2010 coïncidera avec le départ de la suite « Works » généralement livrée installée sur les PC qui sera remplacée par Office Starter 2010, une version d’Office bridée dans les fonctionnalités mais à l’ergonomie identique.

Bien que Microsoft n’aie pas encore dévoilé les tarifs de la suite bureautique, on imagine une commercialisation en dessous des 100 euros (Les licences étudiantes étant actuellement vendues 139 Euros). De plus, personnellement, je me suis toujours posé la question de l’intérêt de la suite Works que je trouvais peu pratique, il y a quelques années de cela, je pense qu’elle sera avantageusement remplacée par cette version certes un peu limitée.

Si, comme moi vous êtes un amateur de Mac OS, vous êtes surement déjà tombés sur un os le jour où vous avez voulu écrire sur le disque dur externe d’un de vos amis, ou tout simplement lire votre partition Windows. En effet, les partitions NTFS sont accessibles par défaut uniquement en lecture.

Cependant, une petite manipulation du fichier fstab permet, comme sous linux, d’activer l’écriture NTFS. Si la manipulation vous rebute, vous pourrez trouver ici un logiciel qui fera l’opération pour vous. Reste que l’opération est à vos risques et périls : si Apple n’a pas activé la fonction dans Snow Leopard, c’est que cette fonctionnalité n’est probablement pas stable.

En attendant un montage en écriture officiel sur Mac OS, vous pouvez toujours opter pour pluieurs autres solutions, certaines gratuites comme ntfs-3g, ou payantes comme Paragon NTFS.

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 :