Comment compiler un projet GWT?

La compilation d’un projet GWT est différente du simple « Run » sous éclipse, pour les projets classiques.

Il faut faire un clic droit sur le projet, aller dans « Run as » puis « Run configurations » comme il suit :

Ensuite vous devez arriver sur l’écran suivant :

Si ce n’est pas le cas double cliqué sur « GWT hosted Mode Application », une nouvelle arborescence apparaitra telle quel à l’écran.

Vous devez spécifier un nom de la configuration (c’est vous qui choisissez) dans le panneau Name.

Dans l’onglet Name de la configuration, vous devez sélectionner dans le premier champ le nom duprojet. Dans notre exemple, il s’agit de GWT_tuto. Dans dans le second champ, vous devez sélectionner  la classe d’entrée du projet (un Main). Cette classe doit impérativement contenir la fonction onModuleLoad.

Puis cliquer sur Apply puis Run.

Vous devez voir apparaitre deux fenêtres qui s’affichent sur votre écran:

Le serveur qui se lance:

Le client :

Si c’est la première fois que vous compilez et que votre projet est vide le client doit également être vide.Au lieu de refaire toute cette manipulation( plutôt lourde), vous pouvez cliquez sur le petit triangle noir a coté du bouton Run c’est-à-dire :.

Ensuite vous devez sélectionner le nom de la configuration de la compilation (ici New_configuration).

Installation & Configuration

Il existe plusieurs manières de faire un projet GWT.  Nous allons vous exposer la solution  la plus simple que nous avons trouvé.  Pour cela nous allons utilisé Eclipse avec  le plugin « Cypal Studio For Gwt ». Ce plugin permet d’automatiser la création et la configuration de votre projet GWT. C’est un gain de temps majeur.

De plus, il facilite la création de modules et de requête RPC . Nous  reviendrons plus tard sur ces deux points.

Installation des outils nécessaires

Le téléchargement d’ Eclipse se fait à l’adresse suivante :

http://www.eclipse.org/downloads/

Sélectionnez Eclipse IDE for Java EE Developers, comme sur l’écran ci–dessous :

Le plugin Cypal Studio For Gwt est disponible à l’adresse : http://code.google.com/p/cypal-studio/.

Un petit clic ici et ce dernier est à vous. Pour installer ce plugin il suffit de dézipper l’archive  dans le répertoire plugin de Eclipse.
Le chemin d’accès est le suivant : \eclipse\plugins.

Configuration d’Eclipse

Au démarrage d’Eclipse, vous devez choisir un workspace . C’est l’endroit ou seront placés tout vos projets. Il est conseillé d’utiliser différents workspaces, un par langage.  Par exemple pour le GWT vous pouvez créer le workspace suivant : C:\workspaceGWT.

Création du projet GWT

Nous allons maintenant créer notre premier projet  GWT. Rien de bien compliqué je vous assure.  Il faut donc faire : File->new->other

Un écran de sélection de type de projet apparait. Celui qui vous intéresse se situe dans le dossier « Web » et s’appelle : « Dynamic Web Project ».

Lorsque vous avez choisi le « Dynamic Web Project », vous devez changer la configuration et la passer sous « Cypal Studio for GWT » . Comme sur  l’écran ci-dessous :

N’oubliez pas le nom du projet (project name) également. Ici,  nous l’avons appellé « GWT_TUTO ». Cliquez ensuite sur finish.

Vous venez de passer la première étape d’un projet GWT.
Maintenant nous allons rajouter le module GWT à notre projet pour avoir la page d’accueil de votre site.
Faites : file->new->other
Sélectionnez « GWT MODULE », qui est compris dans « Cypal Studio ».

Ensuite vous risquez de tomber sur cette écran:

Vous devez alors sélectionner l’endroit ou vous avez dézippé le framework en provenance de  Google, pour cela appuyé sur le bouton SET. Une autre page s’affiche alors comme si dessous :

Faites Browse puis sélectionnez le répertoire en question. Faites ok puis next.

Ensuite l’écran suivant apparait :

Vous devez écrire un nom de package et un nom de classe. Par exemple,  “module” pour le nom de package et ” Main_GWT ” pour la classe. Faites finish.
A ce stade la deuxième étape est franchie !!! Félicitations ! Votre projet peut maintenant compiler !

Découverte du Gwt

Nous allons commencer ce Tutoriel par expliquer qu’est-ce que le GWT.

GWT, kesako?

Le GWT (Google Web Toolkit) est le framework open source crée par Google. Le GWT est une technologie simple, efficace et puissante qui permet de développer des applications Web 2.0. Il se rapproche donc des technologies Silverlight et Flex. Contrairement à ces deux concurrents, le GWT est une technologie compatible avec tous les navigateurs et ne nécessite aucune installation.

Disponible depuis 2006, il a subi de nombreuses évolutions, et dispose maintenant de librairies performantes. Pour finir, le GWT est compatible CSS (heureusement), mais on peut aussi  incorporer des bouts de codes de Javascript, des librairies Java…

A quoi ressemble le GWT?

Le développement en GWT est ni plus ni plus moins que du Java.  Le développement des composants se fait en Java et à  l’aide du HTML et du CSS, on personnalise son interface. La compilation génère notre code Java en Javascript. Créer des sites web dynamiques n’a jamais été aussi facile. Plus besoin de se casser la tête avec le Javascript qui est un langage difficile à maitriser.  Le GWT permet de le faire à votre place.

Voyons voir à quoi ressemble le fameux Hello World en GWT:

public class Hello implements EntryPoint { public void onModuleLoad() { Button b = new Button(“Click me”, new ClickListener() { public void onClick(Widget sender) { Window.alert(“Hello, AJAX”); } }); RootPanel.get().add(b); } }

La méthode onModuleLoad correspond au “Main” de beaucoup de langages.

Que faut-il pour faire du GWT?

Pour développer du GWT, il faut obligatoirement avoir les outils suivants:

- Java IDE (environnement de développement intégré)

Les deux IDE majeurs pour le Java sont Eclipse et NetBeans. Tous les deux sont très performants, et assez semblables. Dans la suite du tutoriel, nous ferrons les démonstrations sur Eclipse. Eclipse est disponible à l’adresse suivante :  http://www.eclipse.org/downloads/

- le framework GWT

Ce framework est indispensable, sinon pas de GWT.  Il est disponible à l’adresse suivante: http://code.google.com/intl/fr/webtoolkit/

Nous verrons dans le prochain tutoriel comment installer et configurer Eclipse avec le framework GWT.

Sommaire du Tutoriel

Voici le sommaire du Tutoriel GWT avec la date d’apparition de chaque étape.

Ce post sera régulièrement mis à jour.

- Découverte du GWT

Qu’est ce que le GWT?

A quoi ressemble le GWT?

Quels sont les outils nécessaires?

- Installation & Configuration

Installation des outils nécessaires

Configuration d’Eclipse

Créer un projet GWT

- Votre premier programme

Création de classes

XML, HTML et CSS

- La communication Client – Serveur

Création d’un service RPC (Remote Procedure Call)

- A suivre…

Gwt France

Le blog Gwt France ouvre ses portes !

Ce blog a pour objectif de de faire découvrir le Google Web Toolkit, le framework made in Google.

Des tutoriels arriveront très prochainement, pour montrer les possibilités du GWT.

Bonne visite !