Créer des composants Flex réutilisables

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

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

Formulaire

XebiaForm1.mxml

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

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 :

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

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

XebiaForm2.mxml

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 :

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