Le but de ce tutoriel (qui est une réactualisation d'un tutoriel écrit précédemment) est de vous permettre de créer en un même projet une application Flex et une application Java web.
Environnement : Eclipse 3.3 (Europa J2EE), Flex builder 2.0.1 (et +), tomcat 5 (et +) et java 1.5 (et +).

1 - Introduction

Généralement, la création d'une application Flex communicant avec le serveur se gère sur deux projets différents. Un pour la partie client (Flex), un autre pour la partie serveur (Java). Et tout fonctionne bien, alors pourquoi vouloir proposer de fusionner les deux projets en un seul ?
Cette solution permet de :

• combiner en un projet le client et le serveur et facilite l'organisation.
• obtenir une seule archive war pour le déploiement.
• utiliser une url relative (et pas absolue) pour la connection aux services.

2 - C'est parti !

Nous allons créer le projet. Dans éclipse, sélectionnez la perspective Java J2EE (menu Window->Open Perspective->Other... puis dans la boîte de dialogue apparait la liste des perspectives).

1 - Création d'un nouveau projet web

Créez le projet (menu File->New->Project...). Dans la boîte de dialogue, sélectionnez "Dynamic Web Project" dans le dossier "Web". Cliquez sur le bouton [Next >] pour faire apparaître la boîte de dialogue de la sélection du runtime.

2 - Définition du projet

A cette étape de la création, nous devons donner un nom au projet et définir son environnement d'exécution dans éclipse. Appelons-la "FlexJavaWap". Pour la section "Target Runtime", il existe deux scénarii.

Serveur cible pré-existant

Sélectionnez Tomcat 5.5 (ou +).

Serveur cible non défini

3 - Sélection du conteneur de servlet/JSP

De retour sur la boîte de dialogue intitulée "New Dynamic Web Project", cliquez sur [Next >] pour faire apparaître les versions de Projects Facet. Là, cliquez sur [Next >] pour faire apparaître l'étape de configuration du module web. Dans le champ texte "Java Source Directory" (le dernier), changer le nom du répertoire de "src" en "srcJava", puis cliquez sur [Finish].

4 - Modification du répertoire source java

Eclipse génère alors tout une arborescence de fichier. Voici ce qui devrait s'afficher dans le "Project Explorer".

5 - Vue du projet java

3 - Côté serveur

Nous allons créer un service web qui nous renverra la date du serveur...on ne peut faire plus simple. Un objet métier nous donnant le temps, et une JSP de visualisation.

La classe Clock

Dans le "Project Explorer", cliquez droit sur le dossier "Java Resources : srcJava". Dans le menu contextuel, cliquez sur New->Class. Donnez un nom au package ("test") et à la classe ("Clock"), puis cliquez sur [Finish].

6 - Création de la classe java Clock

Eclipse affiche alors le contenu de la classe. Tapez le code suivant:

package test;

import java.util.Date;

public class Clock 
{
  public String getTime()
  {
    return (new Date()).toString();
  }
}	

La JSP ClockView

Dans le "Project Explorer", cliquez droit sur le dossier "WebContent". Dans le menu contextuel, cliquez sur New->JSP. Dans le champ texte "Filename" (tout en bas), entrez le nom de la JSP ("ClockView") puis cliquez sur [Finish].

Dans "Project Explorer", le fichier ClockView.jsp doit apparaitre dans le dossier "WebContent". Sur la partie droite, éclipse affiche le contenu de la JSP (qui devrait être vide). Tapez le code suivant:

<%@ page import="test.Clock"%>
<?xml version="1.0" encoding="utf-8"?>
<info>
  <date><%= (new Clock()).getTime() %></date>
</info>

Nous pouvons maintenant tester le bon fonctionnement de notre partie serveur.
Dans "Project Explorer", cliquez droit sur la JSP. Dans le menu contextuel, cliquez sur Run As->Run On Server. Une boite de dialogue proposant de sélectionner le serveur apparait. Le serveur Apache Tomcat v5.5 doit apparaître présélectionné. Cochez la case "Always use this server when running this project" pour éviter qu'éclipse nous embête par la suite. Cliquez sur [Finish].

8 - Définition du serveur tomcat

Eclipse démarre alors tomcat (des informations apparaissent dans l'onglet console), puis le message tant espéré s'affiche enfin !

10 - Affichage de la JSP

ndlr: Retenez bien cette date, c'est celle de mon anniversaire !)

4 - Côté client

Préparation du terrain

Pour pouvoir créer le sous-projet Flex, nous allons utiliser une fonctionnalité apportée par le plug-in flex builder. Dans "Project Explorer" sélectionnez le nom du projet, puis dans le menu contextuel cliquez sur Flex Project Nature->Add Flex Project Nature. Sur la première boite de dialogue, cliquez sur [Next >]. Sur la seconde, dont le sous-titre est "Configure None", nous allons spécifier le répertoire dans lequel sera créé le binaire de l'application flex (le .swf). Sélectionnez avec le bouton [Select...] ou tapez dans le champ texte "WebContent". Un certain nombre d'éléments sont ajoutés au projet comme on peut le voir:

11 - Ajout d'une "Nature Flex" au projet

Par contre, vous aurez certainement remarqué la petite croix rouge à gauche du nom du projet, qui n'indique rien de bon. En regardant dans l'onglet "Problems", la cause de l'erreur est affichée et, chance!, également le moyen de le résoudre.

12 - Gestion de l'erreur

Comme indiqué, cliquez-droit sur le libellé de l'erreur, et dans le menu contextuel, cliquez sur Recreate HTML Templates. Cette opération ajoute un nouveau dossier "html-templates" qui apparait dans le "Project Explorer".

Pour le code java nous avons créé un dossier spécifique pour placer les sources (srcJava). Faisons de même pour Flex. Créez un nouveau dossier "srcFlex" dans le projet actuel (menu File->New->Folder).
Déplacez le fichier FlexJavaWap.xml du dossier "src" vers "srcFlex" (un glisser-déposer avec la souris devrait le permettre).
Nous allons maintenant faire en sorte qu'éclipse prenne en compte ce changement. Cliquez-droit sur le projet et dans le menu contextuel, cliquez sur Properties.
Dans la partie, du bas, modifier le champ "Main source folder" par srcFlex, puis le champ "Output folder URL" par http://localhost:8080/FlexJavaWap. Cliquez sur [OK] pour valider les changements.

13 - Modification du répertoire source flex

Un peu de code

Ouvrez le fichier FlexJavaWap.xml, et copiez-y le code ci-dessous, qui permet simplement de récupérer le contenu délivré par la JSP et de l'afficher dans le client Flex:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	creationComplete="service_clock_id.send()">
	<mx:Label id="lbl_id" text="{service_clock_id.lastResult.info.date}"/>	
	<mx:Button label="Refresh!" click="service_clock_id.send()"/>
	<mx:HTTPService id="service_clock_id"
		url="ClockView.jsp"/>		
</mx:Application>

3 - Testons l'application

Tous les éléments sont en place. Nous pouvons maintenant tester notre application. Pour cela, démarrer dabord le serveur tomcat (s'il ne tourne pas déjà). Dans l'onglet "servers", cliquez-droit sur la ligne Tomcat v5.5 Server (ou v6.0 selon votre version), puis dans le menu contextuel, cliquez sur Start. Le serveur se lance.

14 - Le serveur tomcat à l'état démarré

Lancez l'application Flex en cliquant droit sur le fichier FlexJavaWap.mxml, puis dans le menu contextuel cliquez sur Run As->Flex Application.

15 - Affichage depuis l'application Flex

A partir de cette configuration, il est possible de créer un fichier archive war de manière classique (menu File->Export et dans le dossier web, choisir "WAR file").