Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Item Renderer – Créer un ItemRenderer externe (MXML et ActionScript)

Dans ce article sur les Item Renderer Flex, je vais parler des ItemRenderer externes, c'est-à-dire ceux contenus dans un fichier MXML ou AS externe. Puisque c'est l'équipe d'Adobe qui en parle le mieux, voici une traduction de l'excellent article de Peter Ent:

Understanding Flex itemRenderers — Part 2: External renderers

Comme vous le savez si vous suivez Flex Tutorial, vous pouvez créer des item Renderers de deux manières principalement. En inline (directement dans le code MXML)  ou bien dans des composants externes (MXML ou ActionScript). En fait, pendant la compilation, le compilateur Flex extrait le code inline et en fait une classe pour vous sans que vous le sachiez. Pour résumer, utiliser un itemRenderer a les avantages suivants:

• L'itemRenderer peut être facilement utilisé dans plusieurs listes
• Le code est plus simple à maintenir
• Vous pouvez utiliser la vue Design de Flex Builder pour construire l'itemRenderer initial

Transformer un itemRenderer Inline en itemRenderer externe

Voici un itemRenderer complexe utilisé dans une DataGrid Flex:

<mx:DataGridColumn headerText="Title" dataField="title">
	<mx:itemRenderer>
		<mx:Component>
			<mx:HBox paddingLeft="2">
				<mx:Script>
				<![CDATA[
					override public function set data( value:Object ) : void {
						super.data = value;
						var today:Number = (new Date()).time;
						var pubDate:Number = Date.parse(data.date);
						if( pubDate > today ) setStyle("backgroundColor",0xff99ff);
						else setStyle("backgroundColor",0xffffff);
					}
				]]>

				</mx:Script>
				<mx:Image source="{data.image}" width="50" height="50" scaleContent="true" />
				<mx:Text width="100%" text="{data.title}" />
			</mx:HBox>
		</mx:Component>

	</mx:itemRenderer>
</mx:DataGridColumn>

L'itemRenderer est basé sur HBox, contient une Image et un Text. La couleur de fond (backgroundColor) est fixée suivant la valeur du champ pubDate de l'item. Vous pouvez écrire le même itemRenderer en tant que fichier externe en suivant ces étapes:

1. Si vous utilisez Flex Builder, créez simplement un nouveau fichier MXML Component (nommé GridColumnSimpleRenderer dans cet exemple mais vous pouvez choisir un nom à vous) et donner comme tag root (celui qui englobe tout), un tag mx:HBox sans vous soucier de la taille.
2. Si vous utilisez le SDK seul, créez un nouveau fichier MXML (appelé  GridColumnSimpleRenderer.mxml) et donnez-lui HBox comme tag principal
3. Une fois que votre fichier est ouvert, copiez tout ce qu'il y a entre <mx:HBox> et </mx:HBox> mais ne copiez pas ces tags puisqu'ils sont déjà dans le fichier. Voici le résultat que vous devriez obtenir:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
	<mx:Script>
	<![CDATA[
		override public function set data( value:Object ) : void {
			super.data = value;
			var today:Number = (new Date()).time;
			var pubDate:Number = Date.parse(data.date);
			if( pubDate > today ) setStyle("backgroundColor",0xff99ff);
			else setStyle("backgroundColor",0xffffff);
		}
	]]>

	</mx:Script>
	<mx:Image source="{data.image}" width="50" height="50" scaleContent="true" />
	<mx:Text width="100%" text="{data.title}" />
</mx:HBox>

Sauvegardez le fichier. Modifiez maintenant la définition de la DataGridColumn en supprimant l'itemRenderer Inline et en le remplaçant par ceci:

<mx:DataGridColumn headerText="Title" dataField="title"
itemRenderer="GridColumnSimpleRenderer">

Relancez votre application et vous aurez la surprise de voir la hauteur de chaque ligne. Cela est du à la présence de height="300" dans l'itemRenderer.

Déterminer la width / height d'un ItemRenderer

Un composant de type Liste fixe toujours la largeur (width) de son itemRenderer. Si vous indiquez une width (par exemple, width="400"), elle sera ignorée. Vous devrez donc écrire vos itemRenderer en assumant le fait que la largeur va changer lorsque l'utilisateur va changer la largeur d'un colonne ou d'une liste.

Il n'en va pas de même pour la hauteur (height). Si la liste à sa propriété "rowHeight" fixée,  elle va imposer cette height à chaque ligne (row), ignorant les hauteur que vous avez fixé dans votre itemRenderer. Cependant, si vous fixez la propriété variableRowHeight d'une List à true, alors la liste va regarder la hauteur de chaque itemRenderer.

Changer l'itemRenderer de manière dynamique

Dans l'exemple précédent, on fait un override de la fonction set data() pour examiner la data et fixer la couleur de fond de l'itemRenderer. Cette pratique est très commune. Faire un override sur set data() vous permet d'intercepter le moment pendant lequel la data va être modifiée.

Voici les erreurs généralement constatées avec les itemRenderer personnalisés et le set data():

• Oublier de faire un appel à super.data = value;. Ce point est vital si vous voulez que votre itemRenderer fonctionne correctement
• Oublier de remettre les styles à zéro si le test échoue. Il peut être tentant de simplement fixer la couleur quand le test est positif mais il faut garder en tête que les itemRenderer sont recyclés et que les instructions else sont donc absolument nécessaires.

Créer un ItemRenderer en ActionScript

Pour faciliter la compréhension, on va prendre un itemRenderer écrit en MXML utilisé dans une TileList et le porter en ActionScript. Voici le MXML inline:

<mx:itemRenderer>
	<mx:Component>
		<mx:HBox verticalAlign="top">
			<mx:Image source="{data.image}" />
			<mx:VBox height="115" verticalAlign="top" verticalGap="0">
				<mx:Text text="{data.title}" fontWeight="bold" width="100%"/>

				<mx:Spacer height="20" />
				<mx:Label text="{data.author}" />
				<mx:Label text="Available {data.date}" />
				<mx:Spacer height="100%" />
				<mx:HBox width="100%" horizontalAlign="right">
					<mx:Button label="Buy" fillColors="[0x99ff99,0x99ff99]">

						<mx:click>
						<![CDATA[
							var e:BuyBookEvent = new BuyBookEvent();
							e.bookData = data;
							dispatchEvent(e);
						]]>
						</mx:click>
					</mx:Button>

				</mx:HBox>
			</mx:VBox>
		</mx:HBox>
	</mx:Component>
</mx:itemRenderer>

On va donc transformer cet itemRenderer en classe ActionScript.

Tout d'abord, créez une nouvelle classe appellée BookTileRenderer.as et faîtes la hériter de HBox tout comme votre itemRenderer inline:

Créez des variables membres pour avoir des références vers les composants enfant:

Faîtes un override sur la fonction createChildren() pour créer les composants et les ajouter à la HBox:

Le code est indenté pour bien que vous identifiez les relations parent-enfant. On ajoute aussi un eventListener au bouton car de base, il ne fait rien.

Faîtes ensuite un override sur la fonction commitProperties() pour modifier les composants UI suivant le data:

Enfin, ajouter un event handler pour le bouton Buy:

Modifier ensuite l'application pour utiliser la classe ActionScript comme itemRenderer. Supprimez simplement le renderer inline MXML pour le remplacer par le nom de la classe comme propriété itemRenderer:

<mx:TileList id="mylist" x="29" y="542" width="694" itemRenderer="BookTileRenderer"
       dataProvider="{testData.book}" height="232" columnWidth="275" rowHeight="135" >

Si vous vous basez sur un conteneur comme ici HBox, vous pouvez voir que de faire l'itemRenderer est plus difficile en ActionScript. Vous pouvez tout aussi bien utiliser un fichier MXML car la différence de performance ne sera pas flagrante.