Introduction

L'objectif de ce post est de décrire l'installation d'un environnement de développement Java / Flex. Beaucoup d'environnements existent à l'heure actuelle dans le monde Java (on peut par exemple citer IntelliJ ou NetBeans). Cependant, et comme Flex Builder se présente sous la forme d'un plugin eclipse, nous l'avons choisi pour ce tuto.

De quoi j'ai besoin

  • D'un peu de patience
  • Du JDK 1.5 ou 1.4 (1.5.0_12 dans ce tuto)
    Télécharger le JDK 1.5 sur le site de Sun
    Choisissez "JDK 5.0 Update 12"

  • De Tomcat 5.5.X de préférence
    Télécharger Tomcat 5.5
    Téléchargez :
    • Core (zip ou tar.gz)
    • JDK 1.4 Compatability Package pour les utilisateurs du JDK 1.4
    • (Optionnel) Administration Web Application

  • D'eclipse en version 3.2.X (3.2.2 dans ce tuto)
    Page des téléchargements d'eclipse

    Cliquez sur le lien "3.2.2" puis choisissez l'archive adaptée à votre OS (j'utilise ici Windows XP)

  • De Flex Builder 2 (2.01 dans ce tuto)
    Page d'accueil d'Adobe Flex

  • Des Flex Data Serivces
  • De vos numéros de série pour les applicatifs Flex

Pour ceux qui disposent déjà d'un Tomcat installé : passez tout de suite à Eclipse !

Installation

Le JDK

Si vous disposez déjà du JDK, passez cette section. Petit rappel : le JRE n'est pas le JDK. Le JRE ne permet que d'exécuter du Java (par exemple, lancer eclipse), mais vous ne pouvez pas compiler d'applications avec, seul le JDK le permet.

  • Sous Linux : suivez les instructions données par Sun ('chmod +x' sur le .bin téléchargé puis exécution du .bin dans le répertoire de votre choix).
  • Sous Windows : lancez l'exécutable et installez le JDK dans le répertoire de votre choix.

J'appelerai ce chemin [JDK].

Tomcat

  • Extrayez l'archive téléchargée dans le répertoire de votre choix (je l'appelerai [TOMCAT])
  • Pour les utilisateurs du JDK 1.4, extrayez le compatibility package

Eclipse

  • Extrayez l'archive d'eclipse dans le répertoire de votre choix (que j'appelerai [ECLIPSE])
  • Créez un raccourci vers l'exécutable d'eclipse que vous utiliserez pour le lancer : cela permettra notamment de paramétrer la taille de la mémoire allouée à la JVM pour permettre à eclipse de ne pas s'étouffer sous les plugins (on va un peu charger la mule).

Dans le raccourci à la fin de la ligne de commande terminant par eclipse.exe (sous Windows), ajoutez les paramètres suivants :

-vmargs -Xmx1024M

Ceci allouera 1024 Mo à la JVM pour eclipse. Notez que ça fait beaucoup, vous pouvez réduire au besoin si vous ne disposez pas de suffisamment de mémoire sur votre machine. J'avais rencontré quelques soucis de mémoire en mettant 512 Mo.

Les plugins

C'est à partir d'ici que ça se gâte (ou que ça devient intéressant selon les points de vues) :

  • Lancez eclipse en utilisant le raccourci créé précédemment et choisissez votre espace de travail que j'appelerai [WORKSPACE]
  • Ouvrez le menu Help > Software updates > Find and install... :

  • Faites "Search new features to install"
  • Dans la fenêtre qui apparaît, cochez "Callisto Discovery Site" :

  • Cliquez sur "Finish"
  • La recherche de plugins commence. Vous devrez choisir votre miroir. La fenêtre de résultats s'affiche. Déployez "Callisto Update Site" et cochez "Web and J2EE Development". Vous devez aboutir à une fenêtre de ce type (oui, je sais, il y a une erreur, c'est normal) :

  • Cliquez à présent sur le bouton "Select Required". C'est tout de même formidable la technologie d'aujourd'hui.
  • Faites "Next"
  • Cochez "I accept..."
  • Faites "Next" de nouveau
  • Faites "Finish" (on y arrive...)

C'est parti, eclipse lance le téléchargement des plugins liés au WTP. Vous devrez choisir "Install all" lorsqu'il vous le demandera et redémarrer eclipse (ne faites pas "Apply changes").

Pour valider que votre installation a bien fonctionné, après redémarrage d'eclipse, passez dans la perspective J2EE en utilisant le bouton "+" en haut à droite de l'écran :

A présent, nous pouvons installer Flex Builder.

Flex Builder

Vous avez dû télécharger un fichier exécutable du style "FLXB_2.0_Win_WWE.exe" pour Windows (je ne connais pas le nom Linux). Lancez cet exécutable et laissez-vous guider dans les étapes d'installation.

Vous devrez notamment :

  • Spécifier le répertoire de stockage des fichiers d'installation
  • Spécifier le type d'installation :
    IMPORTANT : choisissez l'installation en mode Plugin pour un eclipse existant et non la version standalone. Pensez à fermer eclipse avant de lancer l'installation du plugin.



  • Spécifier le répertoire d'installation de votre choix (je l'appelerai [FLEX BUILDER])
  • Spécifier le répertoire de votre installation d'eclipse ([ECLIPSE])
  • Fermer votre navigateur préféré (pensez à bookmarker ce tutoriel =] )
  • Cliquer sur "Réessayer" (ça le fait à tout le monde ce coup-là)

A la fin de l'installation, en lançant eclipse, vous pourrez constater l'apparition de la perspective "Flex Development" et "Flex Debugging" ainsi que les possibilités de configuration de Flex Builder.

Vous êtes prêts à démarrer !

Préparation de l'environnement

Déclarer son Tomcat

Pour profiter pleinement des WTP, il est nécessaire de déclarer votre installation de Tomcat à eclipse afin que vous puissiez l'utiliser pour y publier vos projets web. Pour cela :

  • Passez en perspective J2EE (si vous n'y êtes pas déjà) comme indiqué plus haut ou via le menu "Window" > "Open Perspective..." > "Other..."
  • Vous devez voir apparaître un onglet "Servers" dans la partie basse de l'écran, choisissez-le
  • Faites un clic droit puis "New" > "Server"
  • La fenêtre de création de serveur apparaît vous permettant de déclarer votre installation de Tomcat, choisissez dans "Apache" > "Tomcat 5.5 Server"

  • Faites "Next"
  • Vous devez lui donner un petit nom (le mien, c'est Roger), et surtout, définir son emplacement ([TOMCAT])
  • Faites finish

Votre serveur est déclaré, mais où est sa configuration ?

Vous avez probablement noté la présence d'un pseudo-projet nommé "Servers" : ce projet contient un répertoire portant le nom de votre serveur Tomcat. Ce répetoire contient les fichiers de configuration du serveur.

Vous savez à présent utiliser votre instance de Tomcat dans eclipse. Ajoutons-lui notre premier projet !

Création du projet

Apparte sur les types de projets : dans le cadre d'un développement Java / Flex, il est préférable de commencer par créer le projet web Java pour ensuite ajouter la couche Flex plutôt que l'inverse. L'expérience m'a douloureusement montré qu'il était plus compliqué de faire l'inverse. Aussi, pour toute personne qui souhaiterait porter un projet Flex dans un environnement, recréez un nouveau projet dans lequel vous pourrez incorporer vos sources, cela sera bien plus simple à gérer que tenter une fusion douteuse...

  • Créez un nouveau projet et choisissez dans le répertoire "Web", un "Dynamic Web Project" (après tout, c'est relativement explicite)
  • Faites "Next"
  • Indiquez le nom de votre projet et son emplacement (nommé [PROJET] dans la suite du tuto), vérifiez que votre serveur est bien positionné dans la zone "Target Runtime"
  • Faites "Next" (pas Finish, c'est important pour la suite)
  • Faites "Next" de nouveau
  • Dans cette dernière fenêtre, vous pouvez configurer le nom du contexte Tomcat utilisé (appelé à terme sous la forme http://localhost:8080/nom_du_contexte), mais également deux autres paramètres :

    • Content directory : il s'agit du répertoire où il est prévu de mettre les ressources web du projet (images, JSP, CSS, etc. ...)

      Indiquez ici 'src/main/webapp'

    • Java Source Directory : je traduis pour les anglophobes : Répertoire de sources Java

      Indiquez ici 'src/main/java'

Ce formalisme est vivement recommandé pour :

  • une meilleure structuration des sources du projet
  • une utilisation future potentielle de Maven 2

Structure du projet

Examinons rapidement la structure du projet :

Le CLASSPATH Java contient les JAR de Tomcat, ceux du JDK et ceux de la webapp (vide pour le moment) Le répertoire "build" contiendra les fichiers Java compilés en .class Le répertoire "src/main/webapp" contient déjà le répertoire WEB-INF initialisé avec un fichier web.xml standard et le répertoire "lib" destiné à recevoir les librairies de votre projet.

A noter que les "dynamic web projects" offrent la particularité d'ajouter automatiquement au CLASSPATH les JAR ajoutés dans WEB-INF/lib : pratique ! Ils permettent également d'ajouter une référence à un autre projet du workspace (exemple un projet générant un JAR)

Ajout du nouveau projet à Tomcat

  • Retournez sur l'onglet "Servers" où vous avez déclaré votre serveur Tomcat.
  • En faisant un clic droit dessus, vous pouvez choisir "Add an remove Projects..."
  • Ce choix ouvre une fenêtre vous présentant votre projet : ajoutez-le et faites "Finish"

A présent, lorsque vous déployez (icône '+') votre serveur, vous pouvez y voir votre projet, indiquant qu'une déclaration a été faite dans la configuration de votre Tomcat. Vous pouvez éventuellement la personnaliser (déclaration de Data Sources notamment) via le server.xml accessible depuis le pseudo-projet "Servers".

Vous remarquerez qu'un clic droit sur le serveur Tomcat offre une possibilité de "publier" votre projet sur Tomcat. Le plugin WTP gère une synchronisation entre vos sources et la webapp publiée sur Tomcat via ce système.
Pour retrouver les fichiers publiés sur votre disque dur, vous devez vous rendre dans le répertoire '.metadata/.plugins/org.eclipse.wst.server.core/tmp0' situé dans le répertoire de votre workspace

Dans le cas de projets liés (webapp dépendant d'un JAR situé dans le workspace), le JAR est compilé en premier lieu, et la webapp est publié avec ce JAR. Ce processus de publication prend alors tout son sens.

Assez parlé de Tomcat, passons à Flex !

Projet Flex

Votre squelette de projet est pratiquement finalisé, il ne reste plus qu'à le déclarer en tant que projet Flex. Pour cela :

  • Passer en perspective "Flex Development"
  • Créer le répertoire src/main/flex
  • Clic droit sur le projet puis "Flex Project Nature" > "Add Flex Project Nature"
  • Clic droit sur le projet puis "Properties"
  • Dans "Flex Build Path", indiquer src\main\flex dans le champ "Main source folder"
  • Positionner src\main\webapp comme "Output folder"
  • Faire OK
  • Déplacer le fichier MXML créé par défaut dans src/main/flex
  • Aller dans l'onglet "Problems" en bas de l'écran"
  • Faire un clic droit sur le message d'erreur "Cannot create HTML wrapper. Right-click here to recreate folder html-template." et choisir "Recreate HTML Templates"

On constate à présent que src/main/webapp contient le résultat de la compilation Flex.

Flex Data Services

C'est l'ultime étape (et pas la moindre) :

Note importante : les LiveCycle Data Services ne sont pas convenablement pris en compte en terme de compilation par Flex Builder (la compilation n'accepte pas le modèle fourni par Adobe, c'est un comble !) Il faut donc disposer de la version précédente des Flex Data Services.



    

  • Installer
    • 

  • Prendre le WAR d'exemple installé, le renommer en ZIP, et prendre le contenu du WEB-INF/flex afin de l'intégrer à son projet
    • 

  • Prendre les définitions du web.xml et les intégrer à celles du projet en cours
    • 

  • Intégrer le WEB-INF/lib par défaut de l'exemple dans son propre WEB-INF/lib
    • 

  • Ajouter les directives de compilation suivantes :
    • 



-services "[PROJET]\src\main\webapp\WEB-INF\flex\services-config.xml" -compiler.context-root=[NOM PROJET]





Oui, c'est sûr que ce n'est pas super simple, mais on n'a à le faire qu'une seule fois sur l'ensemble du projet. Ensuite, on pourra toujours imaginer la création d'un squelette de ce type à personnaliser en fonction du nom du projet.




Maven 2




Je parlerai de maven 2 dans un prochain article. En attendant, vous pouvez vous documenter sur le sujet à l'adresse officielle




Bonne continuation !