Liaison de composants MXML

Demander un devis
Je souhaite télécharger le programme ou imprimer le programme
  • Imprimer
tutoriel_vers_formation_Flex

Pour mieux comprendre la notion de Data Binding, nous allons commencer par découvrir la liaison de données entre des composants MXML.

Nous serons ensuite à même d'intégrer de l'ActionScript dans du Data Binding, et de concevoir des liaisons de données plus complexes.

 

Un premier exemple simple

 

Nous l'avons vu, le Data Binding consiste à lier une source de données à un composant destinataire. A titre d'exemple, nous allons définir un champ de saisie TextInput et un Label, dont la valeur sera liée au contenu du TextInput.

Ainsi, lorsque l'utilisateur saisira un texte quelconque dans le champ de saisie, celui-ci sera automatiquement stocké dans le Label.

 

Pour des raisons d'esthétique, nous encapsulerons le Label et le TextInput dans un VGroup, de manière à les disposer automatiquement l'un en-dessous de l'autre. Le code MXML utilisé est donc le suivant :

 
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="600" minHeight="400">
 
 
 
 
 

Ajoutons maintenant le Data Binding entre nos deux composants. L'objectif est ici d'afficher dans le Label le contenu du TextInput : la source de données est donc le TextInput, repéré par son identifiant "source".

 

La syntaxe la plus couramment utilisée est l'ensemble de crochets {}, qui évalue une expression. Pour évaluer la valeur saisie dans le TextInput identifié par le nom "source", nous utiliserons donc la syntaxe {source.text}, que nous allons affecter à la propriété text du Label (ligne 10) :

 
xmlns:fx="<a href="http://ns.adobe.com/mxml/2009">http://ns.adobe.com/mxml/2009</a>"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="600" minHeight="400">
 
 
 
 
 

 

A l'exécution de ce programme, nous obtenons donc l'affichage suivant :

data_binding

 

Le Label contient la valeur de la propriété text du TextInput, que nous avons affecté par défaut à "Tapez un texte". Si l'utilisateur modifie le texte du champ de saisie, la valeur du Label affiché en-dessous est automatiquement modifiée :

data_binding_2

 

 

Grâce aux crochets, nous avons défini que la modification du TextInput entraine la modification du Label : c'est le principe du Data Binding, ou liaison de données.

 

Lier une source de données à des destinataires multiples

 

Dans l'exemple précédent, nous avons lié une source unique à un destinataire unique. Voyons maintenant comment lier deux composants destinataires à une même source de données.

 

Pour ce faire, nous allons ajouter un deuxième Label dans le VGroup, qui constituera le deuxième destinataire. La source de données reste le TextInput, dont la valeur devra désormais être copiée dans les deux Labels :

 
xmlns:fx=" http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="600" minHeight="400">
 
 
 
 
 
 

L'exécution du programme nous permet de vérifier que les deux Labels sont bien liés à la valeur saisie dans le TextInput :

data_binding_3

 

Lier plusieurs sources de données à un même destinataire

 

Il peut également être utile de lier plusieurs sources de données à un même destinataire, par exemple dans le cas d'un formulaire dans lequel l'utilisateur doit remplir l'un ou l'autre de deux champs de saisie indifféremment, et dont la saisie effectuée, quel que soit le champ d'origine, doit être utilisée par le même destinataire.

 

Illustrons ceci à l'aide de deux TextInput, nom commercial et raison sociale. Nous y associerons un Label, qui affichera la saisie de l'utilisateur, que le texte soit tapé dans l'un ou l'autre des deux TextInput sources. Si ce dernier insère du texte dans les deux champs de saisie, seule la dernière saisie sera prise en compte.

 

Pour ce faire, nous pouvons utiliser la syntaxe {} pour l'une des sources de données, mais pour une seulement. La ou les autres sources de données doivent être déclarées en utilisant le contrôle :

 
xmlns:fx=" http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="600" minHeight="400">
 
 
 
 
 
 
 
 
 
 
 

Nous définissons ici deux TextInput, identifiés par "nom" et "raison_sociale" (lignes 13 et 15).

Le binding entre "raison_sociale" et le Label "destinataire" est assuré par la syntaxe avec crochets : text="{raison_sociale.text}" (ligne 16).

Le binding entre "nom" et "destinataire" est quant à lui assuré par la déclaration suivante, qui définit la liaison entre la propriété text du composant "nom" et la propriété text du composant "destinataire" :

 

Ainsi, l'exécution du programme affichera deux TextInput et le texte saisi en dernier par l'utilisateur. La séquence d'actions suivante aura donc pour effet les affichages ci-dessous :

  1. Saisie de "Mistra Formation" dans le champ Nom
  2. Saisie de "Mistra"dans le champ Raison sociale
  3. Saisie de "Mistra F" dans le champ Nom

data_binding_4

 

 

Le Data Binding permet donc d'associer une ou plusieurs sources de données et des destinations, de manière à automatiser le lien entre les valeurs des unes et des autres.

 

Nous connaissons désormais le fonctionnement de base du Data Binding. Voyons maintenant comment insérer du langage ActionScript dans des expressions de Data Binding, ainsi que la liaison entre composants MXML et variables ActionScript.

 

tutoriel_precedent

tutoriel_suivant

.
X
 
 
 
 
 

You havecharacters left.