Les fondamentaux de Flex 3 - Introduction au Data Binding

Démarrez Flex 3 Builder et créez un nouveau projet. Appelez-le comme vous voulez, ça n'aura aucune incidence sur les étapes que nous allons suivre. Assurez-vous de changer le layout par défaut d'« absolute » à « vertical » pour que les composants soient correctement disposés.

Passez à la vue en mode source si besoin et commencez par créer une balise script juste sous la balise application. Elle contiendra l'ActionScript que nous allons écrire. Pensez à <mx:Script> de Flex comme à la balise <script> de son cousin, le HTML.

<mx:Script>
    <![CDATA[
    ]]>
</mx:Script>

Vous remarquerez qu'une fois la balise ouvrante créée tout le reste est automatiquement renseigné. Flex est aussi pratique que ça. Si vous commencez à taper un mot (par exemple : script) Flex proposera toujours l'autocomplétion pour une balise. Saisir le préfixe « mx: » dans les balises devient pénible avec les grandes applications, donc zappez-le !

Pour travailler avec une variable comme donnée, nous devons déjà activer son binding. En ajoutant le code [Bindable] sur la ligne précédant immédiatement une variable, nous la déclarons comme « liable ». Créez une variable « liable » appelée nomSelectionne de type String et donnez-lui comme valeur initiale « personne ». Votre code devrait ressembler à ça :

<mx:Script>
    <![CDATA[
        [Bindable]
        private var nomSelectionne:String = "personne";
    ]]>
</mx:Script>

Attention : la ligne [Bindable] est spécifique à chaque variable et doit être déclarée à chaque fois. Une ligne ne concernera pas toutes les variables !

Ensuite, nous allons écrire une fonction basique qui sera utilisée pour l'affichage du contenu de 'nomSelectionne' dans une étiquette que nous allons créer par la suite. Elle sera appelée 'changerNom' et recevra un paramètre de type String 'changerPour' qui sera affecté à la variable 'nomSelectionne'. J'espère que vous obtenez quelque chose qui ressemble à ça :

private function changerNom(changerPour:String):void
{
    // Remplace le nom affiché par la nouvelle valeur
    nomSelectionne = changerPour;
}

Après ça, nous en avons terminé avec l'ActionScript. Il ne reste plus qu'à créer les composants pour faire fonctionner tout ce bel ActionScript.

Nous aurons besoin d'une étiquette et de deux boutons. Le texte de l'étiquette affichera une phrase avec un nom sélectionné. Les boutons contiendront chacun un nom à afficher dans l'étiquette. Vous pouvez créer ces éléments à votre convenance soit dans la vue design soit dans le MXML en mode source. J'ai opté pour un peu plus de pratique et l'ai fait dans le MXML. Nous allons commencer avec l'étiquette :

    <!--  Affiche la variable liée 'nom' -->
    <mx:Label text="Le bouton avec {nomSelectionne} a été pressé."/>

Une source de donnée liée est spécifiée entre crochets dans Flex. Dans cet exemple, le {nomSelectionne} chargera le contenu de la variable nomSelectionne (que nous avons définie comme liable plus tôt) et l'affichera dans la phrase.

Les boutons passeront chacun un paramètre contenant un nom à la fonction changerNom. Rappelez-vous que l'objectif de la fonction changerNom est de modifier la valeur de nomSelectionne, donc nous remplaçons essentiellement le nom actuel par un nouveau. N'hésitez pas à personnaliser.

    <!-- Boutons avec des valeurs 'nom' -->
    <mx:Button label="Zach" click="changerNom('Zach')"/>
    <mx:Button label="Sylvain" click="changerNom('Sylvain')"/>

Sauvegardez votre projet et exécutez-le. Avec de la chance, l'étiquette devrait afficher un nouveau nom à chaque fois qu'un bouton est pressé. Voici le code complet pour vérifier les erreurs :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="300" height="500">
    <mx:Script>
        <![CDATA[
            [Bindable]
            private var nomSelectionne:String = "personne";
            
            private function changerNom(changerPour:String):void
            {
                // Remplace le nom affiché par la nouvelle valeur
                nomSelectionne = changerPour;
            }
        ]]>
    </mx:Script>

    <!--  Affiche la variable liée 'nom' -->
    <mx:Label text="Le bouton avec {nomSelectionne} a été pressé."/>
    
    <!-- Boutons avec des valeurs 'nom' -->
    <mx:Button label="Zach" click="changerNom('Zach')"/>
    <mx:Button label="Sylvain" click="changerNom('Sylvain')"/>
    
</mx:Application>

Et maintenant vous y êtes. Une autre raison d'aimer Flex.

Regardez la démo en ligne avec des exemples supplémentaires.

Téléchargez les sources du projet.

Un aveu honnête pour ceux ayant une plus grande expérience de Flex : c'était une façon détournée d'afficher la valeur d'un composant. Pour nous réconcilier, les fichiers sources joints comprennent un exemple supplémentaire de liaison directe avec la valeur d'un champ de saisie sans utiliser de variable. Si vous ne cherchez pas un haut niveau de flexibilité, la liaison directe vous conviendra parfaitement. Le but de cette explication était d'introduire un moyen interactif de lier des variables. Si vous l'avez compris, allez de l'avant et optimisez ! Assurez-vous de partager vos résultats dans les commentaires !

Tous mes remerciements à freegreg et Kerod pour leur relecture !