Création de composant

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

A la fin du chapitre précédent, le fichier fondamentaux.mxml, fichier principal (et pour l'instant unique) de l'application, contenait le code suivant:

<?xml version="1.0" encoding="utf-8"?>
<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"
      width="700" height="450">
 
      <!-- Disposition verticale avec centrage horizontalement -->
      <s:layout>
            <s:VerticalLayout horizontalAlign="center" paddingTop="20" gap="10"/>
      </s:layout>
 
      <s:Panel title="Premier Formulaire" width="540" height="300" >
            <!-- Utilisation d'un conteneur Form pour disposer automatiquement les éléments -->
            <mx:Form paddingTop="20" paddingLeft="60" width="100%">
                  <mx:FormItem label="Nom">
                        <mx:TextInput id="nomSaisi"/>
                  </mx:FormItem>
                  <mx:FormItem label="Mot de passe">
                        <mx:TextInput id="passSaisi" />
                  </mx:FormItem>
                  <mx:FormItem label="Commentaire">
                        <s:TextArea id="commentaireSaisi" height="40" />
                  </mx:FormItem>
                  <mx:FormItem>
                        <s:Button label="Valider" />
                        <s:Button label="RAZ" />
                  </mx:FormItem>
            </mx:Form>
      </s:Panel>
</s:Application>

 

Notre application est pour l'instant assez restreinte et le fichier n'est donc pas trop long. Toutefois, il nous faudra vite apprendre à découper notre application en différents fichiers MXML afin de ne pas surcharger le fichier principal.

 

En guise d'illustration, nous allons créer un composant MXML personnalisé constituant notre formulaire, que nous appellerons ensuite dans le fichier principal. 

 

Création d'un composant MXML

 

Pour créer un nouveau composant, cliquez sur le menu Fichier / Nouveau / Autre.... Dans la fenêtre qui s'ouvre, sélectionnez alors la ligne Composant MXML du dossier Flash Builder : 

composants_personnalises

 

Cliquez sur Suivant. A l'étape suivante, saisissez alors les informations suivantes:

  • Package: si ce champ est laissé vide, le fichier sera créé dans le package par défaut
  • Nom : pour l'exemple, nous avons choisi le nom "MonFormulaire" ; le fichier créé sera alors MonFormulaire.mxml
  • Basé sur : MonFormulaire étant un formulaire personnalisé, nous allons le baser sur le composant Form, adapté à ce type de besoins, comme nous l'avons vu dans le chapitre Conteneurs d'agencement
  • Largeur et Hauteur : nous avons ici laissé 400 et 300 pixels, qui sont les valeurs par défaut : lorsque nous instancierons ce composant dans l'application, il prendre la taille indiquée par ces paramètres.

Vous pouvez également modifier le dossier source, mais ce n'est généralement pas nécessaire, sauf dans le cas particulier où vous utilisez les sources venant d'un autre projet.

composants_personnalises_2

 

Cliquez alors sur Terminer : un nouveau fichier est apparu dans l'explorateur de packages :

composants_personnalises_3

 

Le fichier créé prend en compte les paramètres que nous lui avons indiqué et Flash Builder ajoute le code nécessaire:

<?xml version="1.0" encoding="utf-8"?>
<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">
</mx:Form>

Le composant contenu dans le fichier formulaire.mxml est bien un composant de type de mx:Form, comme l'indiquent les lignes 2 et 5.

 

Ajoutons maintenant le code correspond à notre formulaire personnalisé :

<?xml version="1.0" encoding="utf-8"?>
<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">
 
      <mx:FormItem label="Nom">
            <mx:TextInput id="nomSaisi"/>
      </mx:FormItem>
 
      <mx:FormItem label="Mot de passe">
            <mx:TextInput id="passSaisi" />
      </mx:FormItem>
 
      <mx:FormItem label="Commentaire">
            <s:TextArea id="commentaireSaisi" height="40" />
      </mx:FormItem>
 
      <mx:FormItem>
            <s:Button label="Valider" />
            <s:Button label="RAZ" />
      </mx:FormItem>
</mx:Form>

 

Instanciation du composant

 

Pour instancier le composant, il faut:

  1. appeler le composant en indiquant le préfixe (namespace) que nous voulons donner au package
  2. indiquer au composant parent où trouver le namespace choisi dans l'arborescence du projet

En règle générale, nous utiliserons le préfixe local pour le package courant, ce qui donne le code suivant 

<?xml version="1.0" encoding="utf-8"?>
<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"
      xmlns:local="*"
      >
      <s:layout>
            <s:VerticalLayout horizontalAlign="center" paddingTop="20" gap="10"/>
      </s:layout>
 
      <s:Panel title="Premier Formulaire" width="540" height="300" >
            <local:MonFormulaire paddingTop="20" paddingLeft="60" width="100%" />
      </s:Panel>
</s:Application>

 

A la ligne 6, nous indiquons à quoi correspond le préfixe "local" : dans notre cas, c'est le dossier courant, donc *.

Ligne 13, nous instancions le composant MonFormulaire en précisant son namespace et en ajoutant des propriétés de taille et de positionnement par rapport au composant parent (ici, le panel).

 

Dans le cas où le composant instancié est situé dans un package différent, par exemple fr.mistra.flex.perso, nous aurions le code suivant :

<?xml version="1.0" encoding="utf-8"?>
<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"
      xmlns:perso="fr.mistra.perso.*"
      >
      <s:layout>
            <s:VerticalLayout horizontalAlign="center" paddingTop="20" gap="10"/>
      </s:layout>
 
      <s:Panel title="Premier Formulaire" width="540" height="300" >
            <!-- Instanciation d'un composant présent dans un autre package -->
            <perso:MonFormulaire paddingTop="20" paddingLeft="60" width="100%" />
      </s:Panel>
</s:Application>

 

tutoriel_precedent

tutoriel_suivant

.
X
 
 
 
 
 

You havecharacters left.