Imaginez que vous développez une application AS3 dans Flash et que vous voulez ajouter un formulaire. Vous aimeriez développer ce formulaire en utilisant les puissantes bibliothèques de Flex. Normalement ce n’est pas possible. Nous allons expliquer comment contourner cette limite.
Principe
Le problème vient du mécanisme de chargement d’une application Flex pour initialiser le Framework. Il est possible de reproduire ce mécanisme dans une application Flash une fois qu’on a compris son principe.
Voici le principe :
- Compiler une application Flex contenant le formulaire (ou tout autre application) pour obtenir un fichier SWF.
- Charger le fichier SWF de l’application Flex dans l’application Flash.
- Attendre la fin de l’initialisation de l’application Flex et récupérer l’objet application.
- Utiliser l’objet application pour interagir avec le formulaire.
Mise en œuvre
Classe utilitaire de chargement
Nous allons écrire une classe utilitaire dérivée de MovieClip qui permettra de charger l’application Flex, l’initialiser et enfin l’afficher.
La classe « Loader » du package flash.display est utilisée pour charger des fichiers swf et des images. La fonction load() de cette classe prend en paramètre un URLRequest qui prend en paramètre le chemin vers le fichier swf ou bien l’image à charger.
A partir de la propriété « contentLoaderInfo » de la classe Loader qui retourne un objet « LoaderInfo », nous pouvons avoir des informations sur le swf chargé. Les informations fournies incluent la progression du chargement, l’URL du chargeur et le contenu chargé, et le nombre d’octets de médias chargés.
L’objet LoaderInfo déclenche un événement lors du chargement de swf ou bien d’une image, cet événement peut être un « Event.COMPLETE » lorsque le chargement a réussi ou bien un « IOErrorEvent.IO_ERROR » lorsque le chargement échoue.
public function FlexAS3Loader(url:String)
{
__loader = new Loader();
var info:LoaderInfo = __loader.contentLoaderInfo;
info.addEventListener(Event.COMPLETE, onComplete);
info.addEventListener(IOErrorEvent.IO_ERROR , onIOError );
var urlRequest:URLRequest = new URLRequest(url);
var loaderContext:LoaderContext = new LoaderContext();
loaderContext.applicationDomain = ApplicationDomain.currentDomain;
__loader.load(urlRequest, loaderContext);
}
Une fois l’événement COMPLETE capté, l’objet Loader est ajouté au stage. Une fois ces procédures effectuées nous pouvons voir l’application Flex s’afficher dans le Flash player. Cependant nous n’avons pas encore accès aux différentes propriétés de l’application.
Une application Flex a deux « frames », la première est pour le chargement et il faut attendre la deuxième frame pour pouvoir faire référence à l’application et accéder aux différentes propriétés.
Pour cela, nous avons créé un objet de type MovieClip et nous lui avons affecté le contenu de Loader, et nous avons ajouté un listener «Event.ENTER_FRAME » sur cet objet.
private function onComplete(_evt:Event):void
{
addChild(__loader);
__loadedClip = __loader.content as MovieClip;
__loadedClip.addEventListener(Event.ENTER_FRAME, onFlexAppLoaded);
}
Cet événement va être capté deux fois parce que - comme nous l’avons déjà vu - une application Flex a deux frames. La deuxième fois que cet événement est capté nous aurons accès à l’application Flex.
private function onFlexAppLoaded(_evt:Event):void
{
//application is a property of mx.managers.SystemManager and it represents the application parented by the SystemManager
//The first time we enter this function the property application will be null and the second time application will contain the Flex application
if( __loadedClip.application != null )
{
__loadedClip.removeEventListener(Event.ENTER_FRAME, onFlexAppLoaded);
application = __loadedClip.application;
dispatchEvent(new Event("FlexAppLoadingDone"));
}
}
Exemple d’utilisation
Pour illustrer le chargement d’une application Flex dans une application Flash, nous avons créé un formulaire en Flex “FormulaireFlex.mxml”. Ce formulaire est chargé dans une application Flash “FormulaireFlexIntoAS3.as” en utilisant la classe “FlexAS3Loader.as” dont le fonctionnement a déjà été expliqué.
public function FormulaireFlexIntoAS3()
{
fal = new FlexAS3Loader("FormulaireFlex.swf");
addChild(fal);
fal.addEventListener("FlexAppLoadingDone", _onFlexAppLoaded);
}
Une fois le chargement du formulaire réussi, la classe FlexAS3Loader déclenche l’événement “FlexAppLoadingDone”.
Une fois les champs dans le formulaire saisis correctement un événement “showButton” est déclenché.
private function validChange(event:ValidationResultEvent):void
{
if(fname.text.length != 0 && dob.text.length !=0 && email.text.length != 0 && age.text.length != 0 && ssn.text.length != 0 && zip.text.length != 0 && phone.text.length != 0 && !valid)
{
dispatchEvent(new Event('showButton'));
valid = true;
}
}
Cet événement va être capté dans l’application Flash et un bouton sera affiché.
private function showButton(e:Event):void
{
button = new myButton();
button.y = 350;
button.x = 200;
button.addEventListener(MouseEvent.CLICK, initializeForm);
addChild(button);
}
Le click du bouton va réinitialiser le formulaire. Dans notre exemple nous accédons aux différents champs de formulaire à partir de l’application Flash et en les réinitialisant.
private function initializeForm(e:MouseEvent):void
{
fal.application.fname.text = "";
fal.application.dob.text = "";
fal.application.email.text = "";
fal.application.age.text = "";
fal.application.ssn.text = "";
fal.application.zip.text = "";
fal.application.phone.text = "";
}
Une façon plus simple de faire cela sera de déclencher un événement à partir de l’application Flash qui sera capté par l’application Flex. Cet événement sera responsable d’appeler une fonction qui va réinitialiser les champs de formulaire.
Téléchargement
Le code source du programme Flash
Le code source du Formulaire Flex
Conclusion
Cette méthode présente aussi l’avantage de retarder le chargement du Framework Flex dont le poids est souvent un frein à son utilisation dans un site à fort trafic par rapport à de l’AS3 pur.
On peut ainsi avoir le meilleur des deux mondes : une application AS3 très vite chargée à l’affichage du site, et des formulaires riches très vite développés qui sont chargés lorsque nécessaire.
Bonjour,
J’aimerai savoir comment faire pour ajouter un bouton par exemple au formulaire donné en exemple.
Pour le moment avec la propriété AddChild a la propriété application j’obtiens l’erreur suivante.
TypeError: Error #1007: Tentative d’instanciation sur un élément non constructeur.
at mx.preloaders::Preloader/initialize()[E:\dev\gumbo_beta2\frameworks\projects\framework\src\mx\preloaders\Preloader.as:253]
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::initialize()[E:\dev\gumbo_beta2\frameworks\projects\framework\src\mx\managers\SystemManager.as:1923]
at mx.managers::SystemManager/initHandler()[E:\dev\gumbo_beta2\frameworks\projects\framework\src\mx\managers\SystemManager.as:2412]
Mon projet est en pure AS3
Merci d’avance
Bonjour Yoan,
La solution présentée ci-dessus est pour montrer comment faire pour communiquer entre un appication Flash et une application Flex. Du coup la création d’un composant à base du UIComponent coté Flash et de l’ajouter dans l’application Flex ne passera pas.
Une solution sera de créer une fonction coté Flex par example:
public function addButton(label:String, parent:String):void { var b:Button = new Button() b.label = label; this[parent].addChild(b); }label c’est le label à afficher dans le bouton et parent c’est l’id du composant parent où il faut ajouter le bouton.
Coté Flash nous appelons cette fonction. Dans l’exemple ci-dessus nous ajouterons dans la fonction initializeForm la ligne suivante:
fal.application.addButton('hello', 'myForm');J’espère avoir répondu à ta question.