Les fondamentaux de Flex 3 - Introduction au Data Binding

| Zach Dunn | Sylvain Jorge Do Marco |

Cet article est la traduction de l'article :Flex 3 Basics - Introduction to Data Binding.

Retrouvez toutes les traductions disponibles de Build Internet sur buildInternet.developpez.com.

Commentez : Commentez

Ca ressemble beaucoup à une expression à la mode pour développeurs, mais qu'est exactement le data binding ? Est-il seulement utile ? Pour faire court, absolument. Il y a des chances que vous travailliez avec des données dans Flex. Avec le data binding, un développeur peut lier automatiquement des données entre des sources et des cibles. Toujours perdu ? Imaginez une étiquette conçue pour automatiquement afficher la valeur d'un bouton sélectionné. C'est un concept simple qui se montre très souvent utile dans la construction d'applications Internet riches (RIA). Dans un second temps, passons simplement à la pratique ! ♪

- Titre : Les fondamentaux de Flex 3 - Introduction au Data Binding

- Auteurs : Zach Dunn, Sylvain Jorge Do Marco

- Parution : 20 mai 2009

- Licence : Copyright ® 2009 Zach Dunn. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Paramétrer l'espace de travail

- L'ActionScript

- Design & Mise en page

- Remerciements

Paramétrer l'espace de travail

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.

L'ActionScript

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.

Design & Mise en page

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 !

Remerciements

Tous mes remerciements à freegreg et Kerod pour leur relecture !