mardi 2 août 2011

Le 'Code Behind' en Flex

Comme on sait tous, développer en Flex voudrait dire manipuler deux langages : MXML et ActionScript. Le plus gros avantage de la présence des deux langages est de distinguer les parties 'Vue' des parties 'Traitement' (même si on pourrait tout faire avec un seul des deux). Cependant dès qu'on commence à avoir des composants MXML volumineux qui contiennent un bloc 'Script' (ou plusieurs!!) qui inclut du code ActionScript ou fait appel à un fichier script externe (ou les deux!!), ça devient difficile de se repérer dans le code. Sans oublier que des fois l'assistance au développement de FB3/4 (linkage Ctrl+click par exemple) ne marche plus.

Une manière d'éviter tous ces problème en mettant un peu d'ordre dans son code, sans pour autant se contraindre à suivre un patron de conception (pattern) sophistiqué est d'utiliser la méthode code behind (le code à coté en français) en l'adaptant au flex. Cela consiste à ce que chaque composant mxml hérite d'une classe ActionScript. Du coup chaque appel de méthode ou de gestionnaire d’évènement est faite d'une manière transparante depuis le composant mxml et implémenté du coté classe ActionScipt.

Exemple :

Composant mxml : HelloWorldComposant
<?xml version="1.0" encoding="utf-8"?>
<HelloWorldBase xmlns:mx="http://www.adobe.com/2006/mxml">
       <mx:Label id="monBouton"
                 text="Dire bonjour!"
                 click="onButtonClick(event)"/>
</HelloWorldBase>



Classe ActionScript : HelloWorldBase
package com.test
{
 import mx.controls.Button;
        import flash.events.Event;

 public class HelloWorldBase extends VBox
 {
         // déclaration du bouton dans la classe mère
         var monBouton:Button;
                 
         public function HelloWorldBase ()
         {
            super();
         }
 
         protected function onButtonClick(event:Event):void {
            Alert.show("Hello World!");
            monBouton.text = "bravo!";
         }
 }
}




Comme dans l'exemple, pour utiliser un composant mxml internes dans une méthode actionscript , il suffit de le déclarer comme attribut de la classe mère, avec comme nom l'id du composant ('monBouton' dans l'exemple).


Voilà, bon courage!