Ajrarn’s Weblog

… utiliser Flex 3 pour développer vos applications internet riches, c’est très bien, mais cette technologie ne se suffit pas à elle-même. En effet, Flex gère toute la partie IHM, c’est à dire, ce qui est visible et manipulable de votre application, mais cette technologie a besoin d’être couplée à un langage serveur, qui, en général, s’occupera du traitement métier (accès aux bases de données, etc.).

Il est fréquent de combiner Flex et Java pour répondre à ce besoin.
Adobe propose un projet open source, nommé BlazeDS, permettant de réaliser la passerelle entre le client Flex et le code métier Java. Il s’agit, en pratique, d’une servlet, ayant pour rôles d’invoquer les services Java adéquats, de traduire les objets Action Script de Flex en objet Java et vice-versa.

D’un autre côté, l’utilisation du framework Spring au sein des projets Java/J2EE devient presque incontournable (Spring, c’est par ici). Alors, bien sur, l’envie est forte de combiner Flex et Spring et jusqu’à peu de temps, on passait par une factory Spring pour réaliser celà (un tutoriel developpez.com très bien fait sur la question).

Mais les choses ont évolué depuis. Adobe et Springsource ont travaillé main dans la main pour la création d’un nouveau projet Spring : Spring BlazeDS Integration. Concrètement, Spring prend la main sur BlazeDS et toute la configuration se passe dans son fichier de configuration.
La pleine puissance de Spring dans son application Flex, ça donne envie!

J’ai décidé de reprendre le principe détaillé dans le tutoriel de developpez.com (voir ci-dessus) mais en le modifiant pour utiliser la version GA de Spring BlazeDS Integration, toute fraîche d’il y a quelques jours.

Pour commencer, vous aurez besoin de :

• un JDK d’une version supérieure ou égale à Java 5
• Eclipse 3.4 (ce tutoriel fonctionne très bien à partir de la 3.2)
• Flex Builder 3 dans sa version plugin pour Eclipse
• la dernière Binary Distribution de BlazeDS
• Spring 3.0.0.M3
• la version GA de Spring BlazeDS Integration
• Tomcat 6.x
• ANTLR 3.0.1 : éviter les versions supérieures, il y a semble-t-il des problèmes

Décompressez tout ça et installez le JDK si nécessaire, puis lancez Eclipse.
Créez un nouveau projet Flex et donnez-lui un petit nom (SpringFlex dans mon cas), puis sélectionnez J2EE dans Application server type et cliquez sur Next.
Définissez votre serveur J2EE en sélectionnant Tomcat 6 et en pointant sur votre répertoire d’installation, puis indiquez la WAR de BlazeDS (il se trouve à la racine du répertoire dans lequel vous avez décompressé l’archive de BlazeDS).
Cliquez sur Finish, votre projet est créé.
Pour finir la configuration, cliquez droit sur ce nouveau projet et cliquez sur Properties.
Sélectionnez Flex Server et dans le champs Context Root, ajoutez le contexte de votre application (/SpringFlex dans mon cas).
Pour finir, dans la vue Servers (menu Windows / Show View / Other / Server / Servers) de votre Eclipse, faîtes un clic droit, sélectionnez Add and Remove Projects… et ajoutez votre projet dans les Configured projects.

Si vous galérez lors de ces étapes de configuration, allez jeter un oeil sur le tutoriel developpez.com. Tout y est clairement détaillé avec des captures d’écran.

Bon, les choses sérieuses commencent!

Pour ajouter Spring à votre application, il vous faut copier tous les fichiers jars, situé dans le dossier dist de votre répertoire d’installation de Spring dans le répertoire WebContent/WEB-INF/lib de votre projet.
Faîtes de même avec les jars ANTLR (situé dans le dossier lib de votre répertoire d’installation ANTLR), puis copiez le jar de spring flex (répertoire dist de votre répertoire d’installation de Spring BlazeDS Integration).
Il vous en manque encore (oui oui) mais comme je suis sympa, je vous les ai compressés ici. Ajoutez les également dans WebContent/WEB-INF/lib.

Il vous faut maintenant créer votre fichier de configuration Spring, que j’ai nommé application-context.xml (à la racine de WebContent/WEB-INF).
Voici son contenu :

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
  xmlns:flex="http://www.springframework.org/schema/flex" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="
    http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
    http://www.springframework.org/schema/flex 
    http://www.springframework.org/schema/flex/spring-flex-1.0.xsd">
    <bean id="welcomeServiceBean" class="fr.sokaris.service.WelcomeService"/>
    <flex:message-broker/>
    <flex:remoting-destination ref="welcomeServiceBean" />
</beans>

Comme vous pouvez le constater, nous définissons un bean correspondant à une classe WelcomeService.
Dans le répertoire src de votre projet, créez une nouvelle classe Java nommée WelcomeService et contenant le code suivant :

public class WelcomeService {
	public String sayHello(String pLogin){
		return "Bienvenue "+pLogin;
	}
}

Il faut ensuite que vous remplaciez votre fichier services-config.xml (situé dans WebContent/WEB-INF/flex) par celui-ci :

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
  <services>
    <default-channels>
      <channel ref="my-amf"/>
    </default-channels> 
  </services>
  <channels>
    <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
      <endpoint url="http://{server.name}:{server.port}/{context.root}/spring/messagebroker/amf" 
        class="flex.messaging.endpoints.AMFEndpoint"/>
    </channel-definition>
    <channel-definition id="my-polling-amf" 
      class="mx.messaging.channels.AMFChannel">
      <endpoint url="http://{server.name}:{server.port}/{context.root}/spring/messagebroker/amfpolling" 
        class="flex.messaging.endpoints.AMFEndpoint"/>
        <properties>
          <polling-enabled>true</polling-enabled>
            <polling-interval-seconds>4</polling-interval-seconds>
          </properties>
    </channel-definition>
  </channels>
</services-config>

Ce sont les seules modifications à apporter à ce fichier. Regardez-le bien, vous ne l’ouvrirez plus jamais.

Il faut maintenant modifiez le web.xml afin de le configurer pour Spring. Remplacez votre fichier existant par celui-ci :

<?xml version="1.0" encoding="UTF-8"?>
<web-app>
  <display-name>SpringFlex</display-name>
  <servlet>
    <servlet-name>spring-flex</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>/WEB-INF/application-context.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>spring-flex</servlet-name>
    <url-pattern>/spring/*</url-pattern>
  </servlet-mapping>
</web-app>

Voilà, nous y sommes! La configuration est complète…

Nous allons maintenant pouvoir créer l’interface Flex, à proprement parlé, qui va appeler notre classe Java par l’intermédiaire de Spring. Cette interface (reprise du tutoriel developpez.com, je le rappelle) est très simple : une zone de saisie pour indiquer un nom, un bouton pour valider et une zone de texte permettant d’afficher le résultat renvoyé par notre bean Java.

Voici le code du fichier SpringFlex.mxml (situé dans le répertoire flex_src de votre projet) :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="vertical" 
	width="451" 
	height="168" 
	paddingBottom="0" 
	paddingLeft="0" 
	paddingRight="0" 
	paddingTop="0">
 
  <mx:Script>
    <![CDATA[
      import mx.rpc.events.FaultEvent;
      import mx.rpc.events.ResultEvent;
 
      private function doCall():void{
        // Appeler le service distant
        roWelcomeService.sayHello(tiLogin.text);
      }
 
      /**
      * Méthode invoquée en cas de succès de l'appel RPC 
      */ 
      private function onResult(event : ResultEvent):void{
        // Afficher la réponse
        taReponse.text = event.result as String;
      }
 
      /**
      * Méthode invoquée en cas d'échec de l'appel RPC 
      */ 
      private function onFault(event : FaultEvent):void{
        // Afficher le message d'erreur
        taReponse.text = event.fault.message;
      }
 
    ]]>
  </mx:Script>
  <!--La balise mx:RemoteObject permet d'appeler
  le bean welcomeServiceBean--> 
  <mx:RemoteObject id="roWelcomeService" 
    destination="welcomeServiceBean"
    result="onResult(event)"
    fault="onFault(event)"/>
  <mx:Panel width="451" height="168"
    layout="absolute" 
    title="Hello World">
  <mx:Label x="10" y="10" text="Login : "/>
  <mx:TextInput id="tiLogin" 
    text="Guest"
    x="66" y="8" />
  <mx:Button id="btnAppel" 
    label="Appel de WelcomeService"
    x="234" y="8" 
    click="doCall()"/>
  <mx:Label x="10" y="38" text="Réponse :"/>
  <mx:TextArea id="taReponse" 
    x="81" y="37" width="327" height="81"/>
  </mx:Panel>
</mx:Application>

Nous y voilà enfin… Démarrez votre serveur tomcat, puis lancez votre navigateur sur l’URL suivante (à adapter en fonction du nom de votre projet) : http://localhost:8080/SpringFlex/SpringFlex.html

L’interface Flex devrait s’afficher dans la page html. Renseignez une donnée dans le champs login (exemple : Ajrarn) et cliquez sur le bouton Appel de WelcomeService.
Le résultat attendu (exemple : Bienvenue Ajrarn) s’affiche alors…

Vous allez vous dire : tout ça pour ça…

Je vous répondrai tout d’abord que vu le temps que j’y ai passé par rapport à vous pour parvenir à faire marcher tout ça, vous faîtes un bon deal! (^_^)
Deuxièmement, ce n’est évidemment qu’un petit tutoriel simpliste, qui ne fait que gratter la surface des possibilités. L’important derrière ce nouveau projet Spring est toutes les fonctionnalités qu’il apporte à vos applications Flex : authentification, sécurité, etc.
Intéressés? C’est par là que ça se passe.

This entry was posted on Dimanche, juin 14th, 2009 at 4 h 00 min and is filed under Flex, Java/J2EE. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.