Liaison d'objets ActionScript

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

Le Data Binding offre une autre possibilité, qui s'avèrera très utile dans nos développements futurs : rendre un objet ActionScript liable, pour en faire une source de données.

 

Nous avions écrit, dans le chapitre Création de classe, une classe User contenant deux propriétés login et password. Nous allons reprendre ici cette classe et lier ses propriétés à deux Labels, qui afficheront automatiquement la valeur des deux propriétés.

 

Pour ce faire, nous devons nous assurer que : 

  1. les propriétés de la classe sont définies comme étant liables,
  2. l'instance de la classe est définie comme liable,
  3. la liaison de données est correctement définie entre la source et la cible.

 

La classe User était décrite comme ci-dessous :

package fr.mistra.flex.model
{
      public class User
      {
            private var _login:String;
            private var _password:String;
 
            /* Constructeur par défaut */
            public function User()
            {
            }
 
            /* Getters et setters */
            public function get login () :String
            {
                  return _login;
            }
 
            public function get password () :String
            {
                  return _password;
            }
 
            public function set login (value:String) : void {
                  _login = value;
            }
 
            public function set password (value:String) : void {
                  _password = value;
            }
      }
}

 

Rendre la classe liable

 

Pour qu'une propriété de la classe User puisse être utilisée en tant que source de données, il faut le spécifier en ajoutant le tag [Bindable] juste avant la déclaration de la propriété.

Ainsi, la propriété _login devient liable grâce au code suivant :

package fr.mistra.flex.model
{
      public class User
      {
            [Bindable]
            public var _login:String;
            private var _password:String;
 
            /* Constructeur par défaut */
            public function User() {}
 
            /* Getters et setters */
            /* ... */
      }
}

 

Pour rendre liable toutes les propriétés d'une classe, nous pouvons déclarer l'ensemble de la classe comme liable en apposant le tag avant la déclaration de la classe :

package fr.mistra.flex.model
{
      [Bindable]
      public class User
      {
            public var _login:String;
            private var _password:String;
 
            /* Constructeur par défaut */
            public function User() {}
 
            /* Getters et setters */
            /* ... */
      }
}

 

Ceci étant fait, nous pouvons maintenant revenir dans le fichier MXML pour instancier un objet User liable.

 

Instancier un objet liable

 

Nous avons défini que la classe User pouvait être utilisée comme source de données. Toutefois, ce n'est pas automatique, et il faut également spécifier que l'objet instancié est également liable, à nouveau à l'aide du tag [Bindable] :

      <![CDATA[
            import fr.mistra.flex.model.User;
 
            // Instanciation d'un objet User liable
            [Bindable]public var u:User = new User();
      ]]>

 

Définir la liaison de données

 

Nous allons reprendre le formulaire et le gestionnaire d'évènement que nous avions implémentés dans le chapitre Création de classe :

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Dans ce précédent chapitre, le gestionnaire d'évènement validateForm() était chargé de :

  1. récupérer les valeurs saisies pour les affecter aux propriétés de l'objet User,
  2. affecter aux deux Labels les valeurs de l'objet User

Cette deuxième étape sera désormais gérée par le Data Binding, en liant automatiquement les propriétés de l'objet User aux propriétés text des Labels. 

 

La méthode validateForm devient alors la suivante:

public function validateForm(event:Event):void {
      // Appel aux mutateurs de User
      u.login = nomSaisi.text;
      u.password = passSaisi.text;
}

Au niveau des Labels, la syntaxe est similaire à celle que nous avons vue précédemment : 

 

Ainsi, le code complet de l'application MXML est le suivant :

<s:Application
    
      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;
                  }
            ]]>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Notez qu'à la ligne 13, le mot-clé [Bindable] peut être écrit à gauche de la déclaration de la variable ou au-dessus de celle-ci, l'effet est identique.

 

A l'exécution, nous obtenons bien deux propriétés vides avant la validation du formulaire. Une fois que l'utilisateur a cliqué sur le bouton "Valider", les deux Labels contiennent automatiquement les valeurs des propriétés de l'objet User, c'est-à-dire les valeurs saisies dans le formulaire :

data_binding_9

 

 

Une variable ActionScript peut donc être définie comme liable et utilisée en tant que source de données. 

 

Toutefois, dans notre programme, nous devons toujours utiliser un gestionnaire d'évènements pour affecter aux propriétés de l'objet User les valeurs saisies dans le formulaire.

Le framework Flex offre la possibilité de se passer de ce gestionnaire d'évènements en automatisant l'affectation des valeurs, grâce au Data Binding bidirectionnel, abordé au prochain chapitre.

 

tutoriel_precedent

tutoriel_suivant

.
X
 
 
 
 
 

You havecharacters left.