Intégration de Flex dans GWT

Written by Gaetan Zoritchak & Pierre Mariac

Après avoir comparé dans un précédent billet les forces et faiblesses des solutions GWT et Flex pour le développement des applications RIA, nous allons voir comment marier ces deux technologies afin de garder le meilleur de chacune d'entre elles.

GWT présente les avantages de la productivité du java et de ses outils pour la gestion de gros projet.
De son côté, Flex offre un rendu visuel très précis avec des composants ergonomiquement très riche.

Ce récent billet d'Octo se penche justement sur la communication entre JavaScript et Flex et présente 2 solutions : l'utilisation d'ExternalInterface et du Flex Ajax Bridge. Suite à notre expérience d'intégration de Flex dans un projet GWT via la première solution, nous allons en détailler ici les spécificités.

Notre exemple montre comment utiliser les composants graphiques de Flex au sein d’une page HTML/GWT en fournissant une communication de GWT vers Flex et inversement.

L’application Flex contient 2 graphiques, un camembert et un histogramme. Lorsque l’utilisateur clique sur une donnée, le détail de la donnée est affiché dans la page HTML.

Pour des exemples plus complexes d'interface réalisables, vous pouvez vous rendre sur notre site dédié à l'information sur le crédit immobilier.

Ce simulateur de rachat de crédit par exemple, fournit une interface riche, et -comme vous pouvez le voir- très réactive, alors que chaque appel demande au serveur de traiter de gros volumes de données (optimisation de plusieurs crédits...)

Intégration d’un composant Flash dans une interface GWT

La première étape consiste à intégrer l’application Flash (le fichier binaire « swf ») dans une page GWT.

Le mécanisme le plus simple consiste à utiliser le widget gwt « HTML » qui propose une méthode setHTML nous garantissant d’avoir toute la liberté nécessaire pour paramétrer l’intégration de l’objet flash.

public void setCallBackName(String callBackFunctionName){
          flashCode.setHTML( "<embed"+
                    " height='300' width='300'"+
                    " src='FlexGWT.swf'"+
                    " id='flashEmbed'"+ 
                    (...)
                    " allowScriptAccess='sameDomain'"+
                    " type='application/x-shockwave-flash'"+
                    " pluginspage='http://www.macromedia.com/go/getflashplayer' />" );
}

GWT (Java)

Le code HTML à utiliser diffère selon la version du navigateur, ici il s'agit de l'implémentation "non-IE". On notera que l'on a saisi ici flashEmbed comme identifiant de l'animation Flash insérée, nous y ferons référence plus tard.

La gestion de cette particularité est facilement gérée par le mécanisme de Deffered Binding qui permet de changer l’implémentation d’une classe en fonction du « user.agent » du navigateur.

Le paramétrage est réalisé dans la définition du module GWT :

<replace-with class="flexGWT.client.FlashPanelImplIE6">
   <when-type-is class="flexGWT.client.FlashPanelImpl"/>
   <when-property-is name="user.agent" value="ie6"/>
</replace-with>

GWT (XML)

On définit ainsi un composant FlashPanel de type composite qui encapsule le composant HTML contenant l’objet Flash.

Diagramme de classe intégration SWF dans code GWT

Diagramme de classe de l'intégration d'un Flash dans le code GWT

public class FlashPanel extends Composite {

 /**
  * Utilisation du deffered binding pour changer d'implémentation selon le navigateur.
  */
 private final FlashPanelImpl flashPanel = GWT.create(FlashPanelImpl.class);

GWT (Java)

Communication GWT → Flex

Pour faire communiquer nos applications dans ce sens 2 éléments sont nécessaires :

Une méthode JavaScript native qui fera le pont d'un appel GWT vers une méthode Flex
L'exposition d'une méthode Flex grâce à l'API ExternalInterface

La méthode native Javascript

/**
 * Méthode native appelée depuis le bouton, appelle la méthode switchCharts() de l'application Flex.
 */
 public native void switchFlexCharts()/*-{
       $doc.flashEmbed.switchCharts();
 }-*/;

GWT (Java)

L’utilisation du mot clef « native » de java indique au compilateur GWT que le code qui va suivre est du javascript. Le compilateur injecte alors directement ce code dans le reste du script produit lors de la traduction du code java.

La variable $doc est une variable pré-initialisée par GWT pour référencer l’objet Document de la page en cours.

Ainsi, le code $doc.flashEmbed fait directement référence à l’objet HTML d’identifiant flashEmbed. Cet identifiant doit bien entendu correspondre au code HTML utilisé pour intégrer l’application Flex.

L'exposition de la méthode Flex

switchCharts() est transmis à l’application Flex. Cette méthode doit avoir été préalablement indiquée par Flex comme appelable depuis le JavaScript. Pour cela nous utilisons la méthode statique ExternalInterface.addCallback :

Dans l’application Flex:

// (...) Initialisation de l'application : chargement des paramètres fournis.
ExternalInterface.addCallback("switchCharts", switchCharts);                
 
/**
 * Change la vue en cours.
 */
 private function switchCharts():void {
       mainStack.selectedIndex = (mainStack.selectedIndex + 1) % 2;    
 }

Flex (MXML)

Communication Flex → GWT

Pour faire communiquer nos applications dans ce sens 3 éléments sont nécessaires :

Une méthode JavaScript native (le callBack GWT qui sera appelé depuis Flex)
Informer l’application Flex du nom du callback JS
Utiliser l’API ExternalInterface pour appeler le callBack

Le callBack JavaScript

On indique au compilateur GWT que nous écrivons ici une méthode native JS :

/**
 * Construction de la fonction de callBack utilisée par Flex pour communiquer avec notre code GWT.
 * Délègue le traitement à la méthode écrite en Java handleFlexCallBack
 */
 private native void buildCallBackHandler(FlexGWT instance, String nativeJSFunctionName)/*-{
       tmpCallBack = function(labelValue) {
             instance.@flexGWT.client.FlexGWT::handleFlexCallBack(Ljava/lang/String;)(labelValue);
       };
       eval("$wnd."+nativeJSFunctionName+"=tmpCallBack");
 }-*/;

GWT (Java)

La variable $wnd est une variable pré-initialisée par GWT pour référencer l’objet Window de la page en cours.

La méthode native délègue elle-même le traitement notre méthode « java » handleFlexCallBack. GWT fournit ici encore un mécanisme assez efficace permettant d'effectuer une mapping JS/java (cf. la documentation GWT concernant l’interface native javascript).

Le passage de variables via le composant FlashPanel

Lors de la création du FlashPanel on transmet à l’application Flex le nom du callBack JS à appeler, par passage d’un paramètre (que nous appelons ici callBackFunctionName).

Le paramètre flashvars permet de fournir à l’application Flex divers paramètres qui seront enregistrés à l’initialisation de l’application, nous renseignons sa valeur dans la méthode d'initialisation du FlashPanel.

public void setCallBackName(String callBackFunctionName){
          flashCode.setHTML( "<embed"+
                    " height='300' width='300'"+
                    " src='FlexGWT.swf'"+
                    (...)
                    " flashVars='callBackFunctionName="+callBackFunctionName+"'"+
                    " type='application/x-shockwave-flash'"+
                    " pluginspage='http://www.macromedia.com/go/getflashplayer' />" );
}

GWT (Java)

Lors de l’initialisation de l'application Flex nous récupérons le paramètre défini sous le nom callBackFunctionName, les flashvars passés aux code Flex étant accessibles directement depuis Application.application.parameters.

/**
 * Initialisation de l'application : chargement des paramètres fournis.
 */
 private function initApp():void {
       var app:Application = Application.application as Application;
       callBackFunctionName = app.parameters.callBackFunctionName;
}

Flex (AS3)

L’appel du callBack depuis Flex

La méthode statique ExternalInterface.call permet d’appeler directement le callBack de notre conteneur.

/**
 * Appel d'une méthode du code GWT via ExternalInterface.
 */ 
 private function callHandler(parameter:String):void {
       ExternalInterface.call(callBackFunctionName, parameter);
 }

Flex (AS3)

Conclusion

La technique mise en œuvre est fastidieuse car elle nécessite de prévoir toutes les interactions possibles entre les applications Flex et GWT. Elle ne peut donc pas fournir un modèle de développement pour une application RIA où tous les composants de bas niveau seraient fournis par Flex alors que GWT gérerait la structure de l’application.

Néanmoins utilisé avec parcimonie ce mécanisme améliore une interface GWT un peu austère.

Télécharger les sources du projet

Commentaires

Ajouter un nouveau

Rechercher

Ecrire un commentaire

Nom:

Email:

Website:

Titre:

BBCode:

Saisissez le code que vous voyez.

said safi - developpeur

|41.226.210.xxx |2009-05-26 14:26:11

thank you for this tutorial,

But i don't know how integrate this project in my
eclipse;

I would like a demo or video CONFIGURATION FOR help me to sucessed
integret flex in GWT PROJECT.

THANKS FOR HELP!!!!

Répondre | Citer

ingénieur de développement ( e - Trés bon article; un grand merci;)

|105.136.180.xxx |2012-01-31 23:31:09

Bonjour,

j'ai lu l'article plusieurs fois et on s'est tombé dans le cadre de
développement d'une application à une problématique de perfs qui nous a
amené à penser à l’intégration d'une listeBox flex qui pourra contenir
beaucoup de donnée sans problème du temps d'affichage (temps liée au
construction des composants niveau DOM), et j'ai trouvé ton article très bien
fait et trés intéressent comme piste de départ. Merci ;)

Répondre | Citer