Composants réutilisables dans Flex : Les Templates
Un des grands atouts de Flex provient du fait que son architecture autorise la réutilisabilité (si si, ça existe) des composants.
Un moyen de créer des composants réutilisables est de les définir sous forme de templates.
Il faut voir ces composants comme une coque très flexible dans le sens où ces composants définissent leur propre layout mais laissent au développeur le choix des éléments qui les composent.
Ca veut peut-être rien dire à la première lecture mais ça devrait le devenir, enfin je l'espère, d'ici la fin du billet.
Un composant template possède enfait , une ou plusieurs propriétés typées très globalement, de telle sorte que le développeur puisse spécifier par la suite un type plus concret pour ces propriétés. Ces propriétés représentent les éléments contenus dans le composant.
Imaginons un composant , de type Panel , à l'intérieur duquel on veut afficher 3 éléments visuels (qui héritent tous du UIComponent) alignés horizontalement.
Pour cela , il faut créer un composant de type Panel avec un tableau accessible publiquement contenant des UIComponents. Ces éléments seront affichés lors de l'événement creationComplete.
-
<?xml version="1.0" encoding="utf-8"?>
-
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" creationComplete="init()">
-
<mx:Script>
-
<![CDATA[
-
import mx.core.UIComponent;
-
-
[ArrayElementType("mx.core.UIComponent")]
-
public var elements:Array;
-
-
private function init():void
-
{
-
for (var i:int = 0; i<elements.length ; i++)
-
{
-
this.addChild(elements[i]);
-
}
-
}
-
]]>
-
</mx:Script>
-
</mx:Panel>
Imaginons maintenant un développeur qui utilise ce composant et qui veut afficher , un simple texte, un bouton et un textarea :
-
<?xml version="1.0" encoding="utf-8"?>
-
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
-
<local:SimplePanel>
-
<local:elements>
-
<mx:Label text="Ces composants" />
-
<mx:Button label="héritent de" />
-
<mx:TextArea text="UIComponent" />
-
</local:elements>
-
</local:SimplePanel>
-
</mx:Application>
Ce qui donne ça
On peut remarquer au passage que l'accès au tableau 'elements' se fait par l'intermédiaire des balises
Ce qui n'est pas très joli, ni pratique. En effet, si le nom de notre tableau venait à changer à l'avenir, il faudrait le changer dans les 2 fichiers mxml.
C'est là que le metatag DefaultProperty devient interessant. Ce metatag permet de mettre en place une propriété par défaut pour un composant.
Ce qui donne dans notre example :
-
<?xml version="1.0" encoding="utf-8"?>
-
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" creationComplete="init()">
-
<mx:Metadata>
-
[DefaultProperty("elements")]
-
</mx:Metadata>
-
-
<mx:Script>
-
<![CDATA[
-
import mx.core.UIComponent;
-
-
[ArrayElementType("mx.core.UIComponent")]
-
public var elements:Array;
-
-
private function init():void
-
{
-
for (var i:int = 0; i<elements.length ; i++)
-
{
-
this.addChild(elements[i]);
-
}
-
}
-
]]>
-
</mx:Script>
-
</mx:Panel>
et pour le programme qui utilise le composant :
-
<?xml version="1.0" encoding="utf-8"?>
-
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
-
<local:SimplePanel>
-
//plus besoin de <local:elements>
-
<mx:Label text="Ces composants" />
-
<mx:Button label="héritent de" />
-
<mx:TextArea text="UIComponent" />
-
</local:SimplePanel>
-
</mx:Application>
Pratique , n'est-ce pas? 
On peut aussi se servir des templates comme layout pour une application dans sa globalité. C'est-à-dire, définir une en-tête, un menu, un corps et un pied-de-page comme on le ferait pour une page HTML/CSS.
templates
Souscrire
