Création de classe

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

Le framework Flex met à disposition du développeur un grand nombre de classes ActionScript qui peuvent être importées dans un projet. Mais il donne également la possibilité de créer ses propres classes ActionScript, comme nous allons le voir dans ce chapitre.

 

En guise d'exercice pratique, nous allons reprendre le formulaire de connexion réalisé précédemment dans le chapitre Création de composant.

 

L'objectif est ici d'implémenter un modèle de données composé des données des utilisateurs qui se connecteront à l'application. Nous verrons dans le prochain chapitre le data binding, de manière à lier les données saisies dans le formulaire aux données de l'application.

 

Architecture du projet

 

Nous allons donc partir de l'architecture suivante :

creation_classe

 

Le fichier LoginForm.mxml contient le code du formulaire que nous avions créé précédemment : 

 
 
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      width="400" height="300" >
 
 
 
 
 
 
 
 
 
 
 
 
 

 

Le fichier classes.mxml, constituant le fichier principal de notre application, contient seulement le code nécessaire à l'instanciation du composant LoginForm : 

 
 
       xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:mx="library://ns.adobe.com/flex/mx"
       xmlns:application="fr.mistra.flex.application.*"
       minWidth="600" minHeight="400" >
 
 

 

Nous pouvons dès à présent exécuter le programme pour tester l'affichage du formulaire : 

creation_classe_2

 

 

Création d'un nouveau fichier ActionScript

 

Nous allons créer une classe User, qui possèdera deux propriétés stockant un nom et un mot de passe.

Afin de bien organiser notre projet, commençons par créer un nouveau package (c'est-à-dire une unité regroupant des classes), fr.mistra.flex.model, dans lequel nous mettrons toutes nos classe ActionScript relevant du modèle de données : 

creation_classe_3

 

Avec un clic droit sur le nom de ce nouveau package, atteignons l'entrée de menu Nouveau / Autre... pour afficher cette fenêtre :

creation_classe_4

 

Sélectionnez la ligne Classe ActionScript, puis cliquez sur Suivant

creation_classe_5

 

Saisissez le nom de la classe à créer et laissez vide les autres champs. Cliquez enfin sur Terminer pour lancer la création de la classe : un fichier User.as est désormais placé dans le package fr.mistra.flex.model :

creation_classe_6

 

Par défaut, Flash Builder ajoute au fichier ActionScript le code minimal suivant :

package fr.mistra.flex.model
{
      public class User
      {
            public function User()
            {
            }
      }
}

La ligne 1 indique le package dans lequel nous nous trouvons.

A la ligne 3, nous trouvons le début de la déclaration de la classe User, se terminant ligne 8.

Enfin, à la ligne 5, Flash Builder a également inséré le constructeur par défaut de la classe.

 

 

A cette classe minimale, nous allons ajouter la déclaration de deux propriétés privées de type String, nommées login et password. Par convention, nous allors préfixer toutes les propriétés de classe avec le caractère '_' (underscore) :

package fr.mistra.flex.model
{
      public class User
      {
            private var _login:String;
            private var _password:String;
 
            public function User()
            {
            }
      }
}

 

Accesseurs et mutateurs

 

 

Afin de pouvoir accéder à ces attributs à l'extérieur de la classe, créons également des accesseurs et des mutateurs. Les accesseurs, en ActionScript3, doivent suivre la syntaxe suivante:

public function get propriete():Classe
{
      /* ... */
}
propriete correspond au nom qui sera utilisé à l'extérieur de la classe pour appeler cet accesseur et Classe est le type de cette propriété, qui sera alors retourné par la méthode get. 
Les mutateurs, quant à eux, possèdent tous la structure suivante : 
public function set propriete (nom_parametre:Classe) : void
{
      /* ... */
}

nom_parametre correspond au nom que vous souhaitez donner à la variable passée en paramètre à la méthode. La signification de propriete et Classe est inchangée.
En ajoutant les accesseurs et mutateurs pour nos deux propriétés, la classe User contient donc désormais le code suivant :

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;
            }
      }
}

 

Nous n'avons ici que deux propriétés, mais la rédaction des accesseurs et mutateurs peut vite s'avérer longue et répétitive. Flash Builder met donc à notre disposition un outil de génération automatique de ces méthodes.

 

Pour ce faire, placez le curseur de la souris sur le nom de la propriété, puis choisir dans le menu Source la ligne Générer le Getter/Setter

creation_classe_7

 

Une nouvelle fenêtre s'ouvre alors, semblable à celle-ci :

creation_classe_8

 

Ce fenêtre vous donne tout d'abord la possibilité d'effectuer des modifications sur la variable en elle-même : la rendre privée si elle ne l'était pas déjà et la renommer.

Le deuxième cadre contient les informations relatives aux accesseurs et mutateurs générés :

  • leur nom, qui correspond au nom de la variable, auquel on aura ôté le préfixe underscore s'il était présent,
  • le choix de générer seulement le getter ou le setter, ou les deux, 
  • l'espace de noms, qui peut être public, protected private ou internal, comme toute méthode,
  • le choix d'insérer le code générer avant la première méthode, après la dernière méthode, ou juste après la déclaration de la variable concernée.

Notez qu'en laissant les paramètres par défaut, le code généré est bien identique à celui que nous avions écrit plus haut :

public function get password():String
{
      return _password;
}
 
public function set password(value:String):void
{
      _password = value;
}

 

 

Utilisation d'un objet User

 

Instanciation

 

Revenons dans le fichier LoginForm.mxml : nous allons y insérer un script ActionScript qui aura pour but d'instancier un objet de type User et de manipuler ses propriétés.

 

Commençons par importer la classe afin de pouvoir l'utiliser :

      <![CDATA[
            import fr.mistra.flex.model.User;
       ]]>

Nous pouvons ensuite instancier un objet de la classe User de la même manière que nous avions instancié les classes Alert ou Array au chapitre précédent : 

private var u:User = new User();

 

Appel des méthodes getters et setters

 

Nous allons implémenter un gestionnaire d'évènement pour le bouton Valider du formulaire, qui sera chargé d'affecter aux propriétés de User les valeurs saisies dans le formulaire. Nous ajoutons également deux labels, qui afficheront le contenu de User.

 

Le code MXML devient donc le suivant :

<mx:Form xmlns:fx="http://ns.adobe.com/mxml/2009" 
    
       xmlns:s="library://ns.adobe.com/flex/spark"
    
       xmlns:mx="library://ns.adobe.com/flex/mx"
    
       width="400" height="300" >
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    

Côté ActionScript, nous avions jusqu'à présent le code suivant :

    
      <![CDATA[
            import fr.mistra.flex.model.User;
 
            public var u:User = new User();
      ]]>
    

Nous allons y ajouter la méthode validateForm() de manière à obtenir le code suivant : 

    
      <![CDATA[
            import fr.mistra.flex.model.User;
 
            // Instanciation d'un objet User
            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;
 
                  // Appel aux accesseurs de User
                  loginLabel.text = "Login saisi : " + u.login;
                  passwordLabel.text = "Mot de passe saisi : " + u.password;
            }
      ]]>
    

Dans ce script ActionScript, nous avons ajouté la méthode validateForm(), gestionnaire d'évènement d'un clic sur le bouton "Valider" dans le formulaire.

Cette méthode récupère les valeurs saisies dans les champs du formulaire et les affecte aux propriétés de l'objet User instancié (lignes 10 et 11). Pour appeler les mutateurs de User, nous utilisons les mêmes noms que dans les méthodes set définies dans la classe User : 

public function set login (value:String) : void
    
{
    
      _login = value;
    
}
    
 
    
public function set password (value:String) : void
    
{
    
      _password = value;
    
}

De même aux lignes 14 et 15, nous appelons les accesseurs de User afin d'affecter ces valeurs aux textes des deux Labels. Les appels aux accesseurs de User s'effectuent en utilisant les mêmes noms que dans les méthodes get de la classe User.

 

Exécution du programme

 

Ainsi, le code final de notre composant MXML de formulaire est le suivant :

    
<mx:Form xmlns:fx="http://ns.adobe.com/mxml/2009"
        
     xmlns:s="library://ns.adobe.com/flex/spark"
        
     xmlns:mx="library://ns.adobe.com/flex/mx"
        
     width="400" height="300" >
        
 
        
 
        
            <![CDATA[
                  import fr.mistra.flex.model.User;
 
                  // Instanciation d'un objet User
                  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;
 
                        // Appel aux accesseurs de User
                        loginLabel.text = "Login saisi : " + u.login;
                        passwordLabel.text = "Mot de passe saisi : " + u.password;
                  }
            ]]>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

A l'exécution, nous obtenons un affichage semblable à celui ci-dessous :

creation_classe_9

 

tutoriel_precedent

tutoriel_suivant

.
X
 
 
 
 
 

You havecharacters left.