Data Binding bidirectionnel

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

Le Data Binding bidirectionnel permet de mettre en place une liaison de données entre deux objets de manière à ce que la communication s'effectue dans les deux sens.  

Les deux objets liés se comportent alors à la fois en tant que source et en tant que destination.

 

Syntaxe utilisée

 

Tout comme la liaison de données simple peut être mise en place à l'aide de crochets ou à l'aide du contrôle , une liaison de données bidirectionnelle peut être implémentée à l'aide de différentes syntaxes.

 

 

La première consiste à définir deux objets et à spécifier à chacun l'autre objet en tant que source de données à l'aide des crochets :

Dans cet exemple, la propriété text du TextInput "input1" a pour source de données input2.text, et inversement. Ainsi, une modification de l'une des deux propriétés text impactera automatiquement la valeur de l'autre propriété text.

 

 

Nous pouvons également définir une liaison bidirectionnelle à l'aide du caractère @ :

En utilisant cette syntaxe, il n'est pas nécessaire de définir une source de données pour le deuxième composant : le caractère @ suffit à indiquer le caractère bidirectionnel de la liaison.

 

 

Enfin, nous pouvons également utiliser le contrôle , en donnant la valeur true à sa propriété twoWay (qui vaut false par défaut) :

 

La propriété twoWay permet d'indiquer si le Data Binding s'effectue dans les deux sens (bidirectionnel) ou non.

 

Mise en application

 

Pour mieux comprendre l'utilité pratique d'une liaison bidirectionnelle, reprenons l'application réalisée au chapitre précédent, dont le code MXML était 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="400" minHeight="300" >
 
 
            <![CDATA[
                  import fr.mistra.flex.model.User;
 
                  // Instanciation d'un objet User liable
                  [Bindable]public var u:User = new User();
 
                  public function validateForm(event:Event):void {
                        // Appel aux mutateurs de User
                        u.login = nomSaisi.text;
                        u.password = passSaisi.text;
                  }
            ]]>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

Nous allons lier de façon bidirectionnelle les données suivantes :

  • la propriété text du TextInput "nomSaisi" et la propriété "login" du User,
  • la propriété text du TextInput "passSaisi" et la propriété "password" du User.

Ainsi, le gestionnaire d'évènement chargé d'initialiser l'objet u à partir des données saisies ne sera plus nécessaire : la mise à jour des données se fera automatiquement, et dans les deux sens.

 

Nous devons donc définir un data binding bidirectionnel entre la propriété text du TextInput "nomSaisi" et la propriété login du User u : 

Faisons de même entre la propriété text de "passSaisi" et la propriété password de l'objet u : 

 

 

Supprimons maintenant le gestionnaire d'évènements qui n'est plus nécessaire. Le fichier MXML final est donc le suivant :

 
<s:Application
    
      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="400" minHeight="300" >
    
 
    
 
    
            <![CDATA[
                  import fr.mistra.flex.model.User;
 
                  // Instanciation d'un objet User liable
                  [Bindable]public var u:User = new User();
            ]]>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

En exécutant ce programme, nous pouvons observer qu'une saisie dans l'un des deux champs met automatiquement à jour la propriété correspondante de l'objet User instancié.

Ainsi, la récupération des saisies se fait désormais automatiquement grâce au Data Binding.

 

tutoriel_precedent

tutoriel_suivant

.
X
 
 
 
 
 

You havecharacters left.