Adobe Flex Tutorial - Adobe Flex Tutorial

19mar/095

Flex Item Renderer – Créer un ItemRenderer réutilisable avec listData

Voici la suite de la traduction de l'article de Peter Ent. On va maintenant parler de la création d'ItemRenderers réutilisables (génériques). Pour créer ces itemRenderer génériques, on va faire abstraction des champs sur lesquels on cherche les propriétés. Vous verrez qu'en passant par listData et en remontant un peu la chaîne, on peut récupérer l'information qui nous convient sans mettre de valeur "en dur".

Voici un exemple qui affiche une valeur numérique en utilisant un CurrencyFormatter. Celui-ci va simplement arrondir notre valeur pour qu'elle ait uniquement 2 chiffres après la virgule. Cet ItemRenderer peut être intéressant pour afficher un prix par exemple.

Voici donc le code de l'itemRenderer PriceFormatter:

<?xml version="1.0" encoding="utf-8"?>
<mx:Text xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			import mx.controls.dataGridClasses.DataGridListData;

			[Bindable] private var formattedValue:String;

			override public function set data(value:Object):void
			{
				super.data = value;

				formattedValue = cfmt.format( Number(data[(listData as DataGridListData).dataField]) );

			}
		]]>
	</mx:Script>

	<mx:CurrencyFormatter precision="2" id="cfmt" />

	<mx:text>{formattedValue}</mx:text>

</mx:Text>

Le point-clé de cet ItemRenderer est la partie indiquée en orange, qui modifie la variable bindable formattedValue. Tout d'abord, vous pouvez voir que le <mx:CurrencyFormatter> a été défini grâce à un tag MXML (vous pourriez le faire en ActionScript si vous le souhaitiez) avec l'id "cfmt". Dans cet exemple, formattedValue est donnée par le résultat de l'appel à la fonction format() du CurrencyFormatter.

Cette fonction prend un Number en paramètre, donc la valeur est cast en Number car le dataProvider de cet exemple est XML et dans du XML, tout est interprété comme du texte. Si vous utilisez un Object pour votre data ayant de vraies valeurs numériques, le cast en Number ne sera pas génant.

Comme vous le savez si vous avez lu les articles sur les itemRenderer, "data" est la propriété qui détient la donnée de l'item affiché par l'itemRenderer Flex. La notation [ ] est une autre manière d'accéder aux champs d'un item "data". Par exemple, data['price'] serait la colonne "price". Mais pour rendre cet itemRenderer, on ne doit pas coder pour un champ spécifique, il nous faut donc une manière plus générique.

Et c'est la que listData arrive. Tous les composants Flex qui implémentes l'interface IDropInListItemRenderer ont une propriété listData.

La plupart des composants comme Text, Label, Button, CheckBox etc. implémentent l'interface IDropInListItemRenderer. La plupart des conteneurs comme HBox, Canvas etc. n'implémentent pas cette interface. Si vous voulez utiliser listData dans un itemRenderer qui hérite d'un Container, vous devrez implémenter IDropInListItemRenderer par vous même.

Cette propriété listData d'un itemRenderer contient entre autres, le rowIndex et le composant Flex qui utilise l'itemRenderer (la DataGrid, la List ou la TileList par ex.). Lorsque vous avez un itemRenderer utilisé dans une DataGrid, la propriété listData est en fait un objet DataGridListData, qui inclut le columnIndex et le dataField associé à la DataGridColumn.

Voici le découpage de l'expression en orange dans l'exemple, en partant du niveau le plus bas:

listData as DataGridListData: Cette ligne cast la listeData en objet DataGridListData pour avoir accès à la propriété dataField
.dataField: Le champ de colonne qui est concernée. C'est ce qui rend l'itemRenderer générique. Vous pouvez utiliser cet itemRenderer pour de multiples colonnes sans vous soucier du nom du champ.
data[...]: On accède à la donnée du champ spécifique pour cet item (notre nombre à formatter ici).
Number(...):On fait un cast de la valeur en Number pour être sûr car la fonction format() requiert un paramètre de type Number
cfmt.format ( ... ): On formatte notre valeur comme un prix

Voici un exemple d'utilisation:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:VBox>
		<mx:DataGrid editable="false">
			<mx:columns>
				<mx:DataGridColumn headerText="Titre" dataField="title"/>
				<mx:DataGridColumn headerText="Artist" dataField="artist"/>
				<mx:DataGridColumn headerText="Prix" dataField="price" itemRenderer="PriceFormatter"/>
				<mx:DataGridColumn headerText="Prix Soldé" dataField="soldPrice" itemRenderer="PriceFormatter"/>
			</mx:columns>
			<mx:dataProvider>
				<mx:ArrayCollection>
					<mx:Array>
						<mx:Object songId="0" title="Astronaut" artist="David Byrne" price="10.8743" soldPrice="8.4"/>
						<mx:Object songId="1" title="Rio" artist="Duran Duran" price="9" soldPrice="7.345"/>
						<mx:Object songId="2" title="Enjoy The Silence" artist="Depeche Mode" price="7.4322" soldPrice="4.9"/>
						<mx:Object songId="3" title="Mesopotamia" artist="B-52s" price="8.3" soldPrice="5"/>
					</mx:Array>
				</mx:ArrayCollection>
			</mx:dataProvider>
		</mx:DataGrid>
	</mx:VBox>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

This movie requires Flash Player 11

Remplis sous: CurrencyFormatter, data binding, DataGrid, Exemple, Formatter, Item Renderer, MXML, Text || Taggé comme: CurrencyFormatter, dataField, DataGrid, DataGridColumn, DataGridListData, itemRenderer, listData Laisser un commentaire

Articles similaires

Commentaires (5) Trackbacks (0) (Souscrire aux commentaires de cet article)

gg
19 mars 2009

Vraiment parfait ! Merci
Wyndie
9 octobre 2009

Bonjour,

Un petit commentaire simplement pour dire merci car ce tutoriel (ainsi que beaucoup d'autres sur votre blog) m'a été très utile !

Wyndie
Denis BEURIVE
13 décembre 2009

Encore une fois : merci pour ce site! C'est une source d'information très appréciable.
Denis BEURIVE
13 décembre 2009

Hello,

Je préfère l'ActionScript au MXML. Voici donc ma contribution :

COPIER-COLLER
Actionscript:
package Classes

{

// Auteur: Denis BEURIVE

import flash.events.Event;

import flash.events.MouseEvent;

import mx.containers.Box;

import mx.controls.Button;

import mx.controls.TextArea;

import mx.controls.dataGridClasses.DataGridListData;

import mx.controls.listClasses.BaseListData;

import mx.controls.listClasses.IDropInListItemRenderer;

import mx.events.FlexEvent;

// Consultez la documentation:

// DataGrid => DataGridItemRenderer (Implements) => IDataRenderer (Implementors) => Container (Subclasses) => Box

// IDropInListItemRenderer: BaseListData et DataGridListData

public class MyItemRenderer extends Box implements IDropInListItemRenderer

{

// Cette propriété est utilisée pour implémenter l'interface "IDropInListItemRenderer".

private var _listData:BaseListData;

// Ce bouton est utilisé pour rendre le composant interactif.

private var __bouton:Button = new Button();

// Cette propriété est utilisée pour illustrer l'usage de la propriété "properties" de la classe "ClassFactory".

// var fac:ClassFactory;

// fac = new ClassFactory(Classes.MyItemRenderer);

// fac.properties = { butonLabel:'Press' };

public var butonLabel:String;

// Affichage des informations fournies par la grille d'affichage "DataGrid".

private var __text:TextArea = new TextArea();

public function MyItemRenderer()

{

super();

__setSeventHandlers();

__createInterface();

}

private function __createInterface():void

{

this.addChild(__bouton);

this.addChild(__text);

}

private function __setSeventHandlers():void

{

this.addEventListener(FlexEvent.INITIALIZE, __init);

__bouton.addEventListener(MouseEvent.CLICK, __printDataGridInfo);

}

private function __init(event:Event):void

{

__bouton.label = butonLabel;

}

private function __printDataGridInfo(event:Event):void

{

__text.htmlText = '<b>Rox index</b>: ' + this._listData.rowIndex + '' +

'<b>Column index</b>: ' + this._listData.columnIndex;

}

// Implémentation de l'interface "IDropInListItemRenderer".

public function get listData():BaseListData

{

return _listData;

}

// Implémentation de l'interface "IDropInListItemRenderer".

public function set listData(value:BaseListData):void

{

_listData = value;

}

}

}
Et:

COPIER-COLLER
MXML:
Implementors => Container => Subclasses => Box

import Classes.MyItemRenderer;

import mx.controls.dataGridClasses.DataGridColumn;

import mx.collections.XMLListCollection;

import mx.controls.DataGrid;

private var __xml:XML =







   ;

private var __grid:DataGrid = new DataGrid();

private function __initComplete():void

{

var c1:DataGridColumn = new DataGridColumn();

var c2:DataGridColumn = new DataGridColumn();

var c3:DataGridColumn = new DataGridColumn();

var c4:DataGridColumn = new DataGridColumn();

var fac:ClassFactory;

__grid.dataProvider = new XMLListCollection(__xml.line);

fac = new ClassFactory(Classes.MyItemRenderer);

// La classe "MyItemRenderer" implémente l'interface "IDropInListItemRenderer".

// La propriété "listData" sera automatiquement renseignée.

fac.properties = { butonLabel:'Press' };

c1.dataField = '@col1'; c1.headerText = 'Région';

c2.dataField = '@col2'; c2.headerText = 'Ville';

c3.dataField = '@id'; c3.headerText = 'Id';

c4.itemRenderer = fac; c4.headerText = 'Action';

__grid.dataProvider = new XMLListCollection(__xml.line);

__grid.columns = [ c1, c2, c3, c4 ];

this.addChild(__grid);

}

]]>
A+
tafkap
29 décembre 2009

Denis, merci pour ta contribution, cela m'a beaucoup aidé dans mon projet.