Créer des composants Flex réutilisables

Article publié par Nicolas Jozwiak le 20 novembre 2008.

Catégorie(s) : RIA

Mots-clefs :Flex, RIA

Dans les précédents articles sur Flex, nous avons vu la mise en place d’une galerie d’images ainsi que le drag and drop. Ce billet sera consacré à la création de composants Flex génériques et réutilisables. Nous prendrons comme exemple un formulaire classique permettant de gérer les permissions d’un utilisateur.

Jeu de données

<mx:ArrayCollection id="countries">
        <mx:Object label="Germany" data="0"/>
	<mx:Object label="England" data="1"/>
	<mx:Object label="Spain" data="2"/>
	<mx:Object label="United States" data="3"/>
	<mx:Object label="France" data="4"/>
	<mx:Object label="India" data="5"/>
	<mx:Object label="Netherlands" data="6"/>
</mx:ArrayCollection>
<mx:Array id="roles">
      <mx:Object label="Administrator"/>
      <mx:Object label="Gold Customer"/>
      <mx:Object label="Read only Customer"/>
      <mx:Object label="Editor Customer"/>
      <mx:Object label="Read only User"/>
      <mx:Object label="Admin User"/>
</mx:Array>

Nous créons deux listes (id='countries', id='roles') composées d’objets qui ont comme attribut label.

Formulaire

XebiaForm1.mxml

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="absolute" width="522" height="338">
        <mx: Panel title="Gestion des utilisateurs">
	    <mx:Form>
		<mx:FormItem label="Login">
		     <mx:TextInput width="182" id="login"/>
		</mx:FormItem>
		<mx:FormItem label="Password">
		     <mx:TextInput width="182" id="password" displayAsPassword="true"/>
		</mx:FormItem>
		<mx:FormItem label="Country">
		     <mx:ComboBox id="country" dataProvider="{countries}" width="182"
		        	  prompt="Select a Country"
				  selectedIndex="-1"/>
		</mx:FormItem>
		<mx:FormItem>
		     <mx:HBox width="400" height="175">
			<mx:VBox width="50%">
			    <mx:Label text="Available Role"/>
                            <mx:List id="roleProvider" width="100%"
    				     dataProvider="{roles}"
 				     height="138"
				     allowMultipleSelection="true"
				     dragEnabled="true"
				     dropEnabled="true"
                                     dragMoveEnabled="true"/>
			</mx:VBox>
			<mx:VBox width="50%">
			    <mx:Label text="Selected Role"/>
			    <mx:List id="roleSelected" width="100%"
                                     height="138"
				     dropEnabled="true"
				     dragEnabled="true"
				     dragMoveEnabled="true"/>
			</mx:VBox>
		     </mx:HBox>
		</mx:FormItem>
	</mx:Form>
</mx: Panel>
</mx:Application>

Nous avons un composant Panel dans lequel se trouve un Form composé de FormItem. Ce formulaire possède :

Un champ texte pour le login.
Un champ texte pour le password.
Une liste déroulante pour les pays.
Deux listes : la première propose les permissions, et la seconde accueille les permissions accordées à l’utilisateur.

En ce qui concerne les attributs des deux listes pour le drag and drop, vous trouverez les détails dans ce billet.

Le résultat :

Imaginons maintenant que nous ayons besoin de la liste des pays et des permissions dans d’autres écrans. Comment faire pour réutiliser ce même code ? Flex propose un mécanisme très simple afin de pouvoir « créer ses propres composants ».

Formulaire simplifié

Dans un premier temps, nous allons créer notre composant pour la liste déroulante :

ComboCountry.mxml

<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml" prompt="Select a Country" selectedIndex="-1">
	<mx:dataProvider>
		<mx:ArrayCollection>
			<mx:Object label="Germany" data="0"/>
			<mx:Object label="England" data="1"/>
			<mx:Object label="Spain" data="2"/>
			<mx:Object label="United States" data="3"/>
			<mx:Object label="France" data="4"/>
			<mx:Object label="India" data="5"/>
			<mx:Object label="Netherlands" data="6"/>
		</mx:ArrayCollection>
	</mx:dataProvider>
</mx:ComboBox>

Lorsque vous créez un composant, vous devez lui indiquer le namespace (ici le préfixe mx et comme nom http://www.adobe.com/2006/mxml). Vous remarquerez que la liste des pays est directement incluse dans le composant ComboBox grâce à la propriété dataProvider. Néanmoins, il est possible d’écrire ce composant de la manière suivante :

<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml" prompt="Select a Country" selectedIndex="-1"
             dataProvider="{countries}">
	<mx:ArrayCollection id="countries">
		<mx:Object label="Germany" data="0"/>
		<mx:Object label="England" data="1"/>
		<mx:Object label="Spain" data="2"/>
		<mx:Object label="United States" data="3"/>
		<mx:Object label="France" data="4"/>
		<mx:Object label="India" data="5"/>
		<mx:Object label="Netherlands" data="6"/>
	</mx:ArrayCollection>
</mx:ComboBox>

De la même manière que la liste déroulante, les deux listes permettant de « drag and droper » les permissions peuvent être externalisées dans un composant :

ListPerm.mxml

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400"
 	 height="175">
	<mx:Array id="roles">
          <mx:Object label="Administrator"/>
          <mx:Object label="Gold Customer"/>
          <mx:Object label="Read only Customer"/>
          <mx:Object label="Editor Customer"/>
          <mx:Object label="Read only User"/>
          <mx:Object label="Admin User"/>
        </mx:Array>
 	<mx:VBox width="50%">
           <mx:Label text="Available Role"/>
           <mx:List id="roleProvider" dataProvider="{roles}" width="100%"
                    height="138"
                    allowMultipleSelection="true"
                    dragEnabled="true"
                    dropEnabled="true"
		    dragMoveEnabled="true"/>
        </mx:VBox>
        <mx:VBox width="50%">
            <mx:Label text="Selected Role"/>
            <mx:List id="roleSelected" width="100%" height="138"
                     dropEnabled="true"
                     dragEnabled="true"
		     dragMoveEnabled="true"/>
	</mx:VBox>
</mx:HBox>

Maintenant que ces deux composants ont été externalisés, nous pouvons les intégrer dans le formulaire :

XebiaForm2.mxml

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
		xmlns:myComponent="myComponents.*"
		layout="absolute" width="522" height="338">
	<mx: Panel title="Gestion des utilisateurs">
	   <mx:Form>
	        <mx:FormItem label="Login">
		   <mx:TextInput width="182" id="login"/>
		</mx:FormItem>
		<mx:FormItem label="Password">
		   <mx:TextInput width="182" id="password" displayAsPassword="true"/>
		</mx:FormItem>
		<mx:FormItem label="Country">
		    <myComponent:ComboCountry width="182" id="country"/>
		</mx:FormItem>
	        <mx:FormItem>
	            <myComponent:ListPerm id="listRoles"/>
		</mx:FormItem>
	    </mx:Form>
	</mx: Panel>
</mx:Application>

On remarquera que nous avons ajouté un namespace afin de pouvoir utiliser nos composants :

xmlns:myComponent="myComponents.*"

Cela signifie que nous pouvons utiliser nos deux composants se situant dans le package myComponents, et ayant comme préfixe myComponent :

<myComponent:ComboCountry width="182" id="country"/>
<myComponent:ListPerm id="listRoles"/>

Ainsi, pour utiliser nos composants nous déclarons le préfixe, ainsi que le nom de ce dernier (égal au nom_du_composant.mxml).

Le résultat :

À travers ce billet, nous avons pu voir que la création de composants Flex est vraiment très simple, permettant d’avoir un code plus clair, mieux structuré et d’avoir des composants réutilisables !

Vous pouvez télécharger les sources sur le SVN de Xebia France.

Références

http://livedocs.adobe.com/flex/3/html/help.html?content=Part4_CreateComps_1.html