Voici le nouvel opus des désormais célèbres vidéos Gymkhana : Gymkhana 4
Cette nouvelle vidéo, à la mise en scène impeccable se déroule dans les Studios Universal de Californie. On y voit donc Ken Block, le patron de DC Shoes se livrer à quelques dérapages dont il a le secret.

La voiture est une ford fiesta affichant une puissance d’environ 800 chevaux, découverte dans la video Gymkhana 3, les voitures des deux précédentes versions étant des Subaru Impreza.

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.

Tout est dans le titre : disponible depuis quelques temps aux états unis, le GPS made in Google débarque en France sur la plateforme Androïd.

GPS Gratuit

Là où ca se complique sérieusement pour les éditeurs de logiciels GPS, c’est que la solution proposée par Google sera entièrement GRATUITE. Ces mêmes éditeurs peuvent se rassurer, pour le moment ce GPS n’est disponible que sur Androïd et aucun portage vers une autre plateforme n’est prévu pour le moment …

Apple a annoncé il y a peu le nouveau système d’exploitation qui prendra place dans le nouvel iPhone 4, mais également dans les iphone 3gs. Une des grandes nouveautés de cette OS sera iAds : une sorte d’API permettant aux développeurs de proposer de la publicité dans leurs applications.

Jusqu’à présent, la publicité était directement intégrée dans le code de l’application, et un click sur une publicité entrainait un basculement vers le navigateur, la fermeture de l’application, bref, ce n’était pas très pratique. Il y avait donc peu de chance qu’un utilisateur, même interessé par le contenu d’une pub, clique sur celle-ci (volontairement) étant donné que ce click annulait ses actions en cours etc … pas terrible.

Apple apporte donc là une petite révolution dans la publicité en ligne. L’utilisateur pourra donc consulter la publicité sans quitter son application. Il y a donc fort à parier que celui-ci soit moins réticent à cliquer !

Rappelons au passage que Apple prélèvera 30% des revenus générés par la publicité …

C’est officiel, l’iPhone 4 a été présenté il y a quelques heures par mister Steve Jobs himself. Nouvelles fonctionalités, nouvel écran, nouvel OS, mais surtout nouveau design, la nouvelle mouture du téléphone d’Apple semble réellement différente des précédentes versions dont les silhouettes commencent à avoir un gout de déjà vu

Différences avec les iphone 3g / 3gs

Ce qui frappe tout d’abord c’est la différence esthétique de l’iphone 4 avec le 3g et 3gs qui, je le rappelle, sont pouvus du même habillage.

L’iphone 4 est donc beaucoup plus plat et épuré que les précédents iphone. On ne peut que se réjouir de cette nouveauté, les précédentes générations arrondies  arboraient un design relativement vieillissant à mon goût. De plus, la face arrière du nouvel opus semble plus qualitative que les iphone 3g et 3gs (contrairement à la toute première génération dont l’arrière était en aluminium brossé du plus bel effet)

Un nouvel écran

L’écran de l’iphone 4 proposera une résolution de 960 x 640 pixels, soit une résolution deux fois supérieure à l’actuel iphone 3gs. On notera que cette résolution est proche de celle d’un iPad, équipé pourtant d’un écran beaucoup plus grand puisque l’écran de l’iphone 4 n’évolue pas et conserve sa taille de 3,5 pouces.

Visiophonie

Cela fait longtemps que l’on attend Apple sur ce terrain. Sur ce point, la marque rattrape un peu son retard par rapport aux constructeurs de téléphones mobiles qui proposent depuis plusieurs années la vidéoconférence grâce à la 3g. Cependant, dans un premier temps, la possibilité de converser visuellement ne sera donnée qu’à deux interlocuteurs disposant tous les deux d’iphone 4. Une fonctionnalité à surveiller de près, donc, étant donné que celle-ci sera à priori amenée à évoluer dans le temps.

Flash

Ah, elle était facile, celle là ! Non, Apple n’a pas retourné sa veste, l’iphone 4 ne sera pas compatible avec la technologie d’Adobe, mais l’appareil aura à sa disposition un flash à Led, qui lui manquait cruellement, pour réaliser des clichés de meilleure qualité dans les endroits obscurs.

On noter au passage que l’appareil photo de l’iphone 4 progresse, avec un capteur de 5 megapixels.

OS4

Le nouvel OS pour iphone et ipod touch devrait être disponible pour l’été. Il sera bien sûr dans cette nouvelle mouture de l’iphone 4. Multitache, possibilité de créer des dossiers et de mettre les applications dedans du bout du doigt, les nouvelles fonctionalités de l’OS 4 semblent interessantes et viennent combler certains manques.

Prix

Les prix du terminal sont dores et déjà connus : 199 dollars (16 Go) et 299 dollars (32 Go), l’acquéreur ayant le choix, comme d’habitude entre la couleur blanche et la couleur noire. Comme d’habitudes, le téléphone devrait se retrouver à un prix de 199 ou 299 Euros, et ce, même si le dollar, qui regagne du terrain, reste moins fort que l’Euro. Affaire à suivre donc …

Disponibilité

L’iphone 4 sera disponible dès le 24 juin sur le territoire français.

[View with PicLens]