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

Flex Item Renderer – Item Renderer utilisant des composants personnalisés (MXML Component)

Pour avoir encore plus de contrôle sur l'affichage de votre item qu'avec un Item Renderer Inline, vous pouvez créer un composant complètement personnalisé, et pas seulement un composant singulier du framework Flex. En utilisant un composant personnalisé (soit MXML, soit ActionScript), vous pourrez créer des items renderers bien plus sophistiqués. Par exemple, on va créer dans ce tutorial un item renderer qui affiche un rating (une appréciation) en utilisant des formes colorées.

Un composant doit implémenter certaines interfaces AS3 pour que l'item renderer fonctionne correctement. Il y a trois interfaces basiques pour les item renderers: IListItemRenderer, IDropInListItemRenderer, and IDataRenderer. Tous les item renderer doivent implémenter IListItemRenderer et IDataRenderer. Puisque IListItemRenderer extends IDataRenderer, vous aurez simplement besoin d'implémenter IListItemRenderer dans la plupart des cas. L'interface IListItemRenderer requiert de nombreuses méthodes getters/setters et plusieurs méthodes public. La manière la plus simple d'implémenter cette interface est simplement d'hériter (extends) d'une classe qui implémente déjà cette interface.

Les classes suivantes implémentent l'interface IListItemRenderer: Button, ComboBox, Container, DataGridItemRenderer, DateField, Image, Label, ListBase, ListItemRenderer, MenuBarItem, MenuItemRenderer, NumericStepper, TextArea, TextInput, TileListItemRenderer et TreeItemRenderer. Puisque Container implémente cette interface, vous pouvez extend n'importe quel type de conteneur (Box, HBox ...).

L'interface IDataRenderer requiert que vous implémentiez dans la classe un getter/setter de "data" de type Object. Le data setter est appelé automatiquement chaque fois que le data provider est mis à jour, et que l'item renderer à besoin d'être mis à jour. On passe à ce setter, l'Object du dataProvider correspondant à l'item. Par exemple, dans une DataGrid, la data est l'objet représentant la ligne. Même si votre composant va hériter de l'implémentation de ces getters/setters sur data, vous pourrez les utiliser pour faire votre propre utilisation. Pour cela, vous allez utiliser des override.

L'exemple suivant est un document MXML appelé Rating.mxml, qui dessine 5 carrés en utilisant des Canvas de 10x10. Les carrés sont bleu par défaut, et ils sont colorés en rouge si une valeur est passée à la propriété "rating". Notez que le composant override le getter et le setter de data. Le setter récupère la valeur de la propriété "rating", et dessine les Canvas avec les couleurs appropriées, basées sur la valeur de "rating".

L'exemple suivant n'est pas optimisé d'un point de vue performances, c'est uniquement pour montrer le fonctionnement des Item Renderer dans un composant séparé.

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
	<![CDATA[
	import mx.containers.Canvas;

	private var _data:Object;

	override public function set data(value:Object):void{
		// on conserve la valeur dans une variable private
		// pour pouvoir la renvoyer dans le get
		_data = value;
		// on prend la valeur de rating de l'Object value corrsespondant à la ligne
		var rating:uint = uint(value.rating);
		// on enlève les composants qui pourraient être la avant
		// dans la cas d'un refresh par exemple
		removeAllChildren();
		var canvas:Canvas;
		for (var i:uint = 0; i < 5 ; i++){
			canvas = new Canvas;
			// définition de la couleur du canvas
			canvas.setStyle("backgroundColor", i< rating ? 0xFF0000 : 0x0000FF);
			canvas.width = 10;
			canvas.height = 10;
			addChild(canvas);
		}
	}

	override public function get data():Object{
		return _data;
	}
	]]>
	</mx:Script>
</mx:HBox>

Et voici le document MXML principal (MXML Application) qui va utiliser ce composant personnalisé comme un itemRenderer pour une DataGrid:

<?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="Artiste" dataField="artist"/>
				<mx:DataGridColumn headerText="Vote" dataField="rating" itemRenderer="Rating"/>
			</mx:columns>
			<mx:dataProvider>
				<mx:ArrayCollection>
					<mx:Array>
						<mx:Object songId="0" title="Astronaut" artist="David Byrne" inFavorites="true" rating="5"/>
						<mx:Object songId="1" title="Rio" artist="Duran Duran" rating="3"/>
						<mx:Object songId="2" title="Enjoy The Silence" artist="Depeche Mode" rating="4"/>
						<mx:Object songId="3" title="Mesopotamia" artist="B-52s" inFavorites="true" rating="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

Ici on indique simplement "Rating" car le composant Rating.mxml est situé dans le même dossier que le fichier MXML principal (donc le même package). Si vous utilisez un composant MXML situé dans un package, il vous faudra utiliser le nom complet de la classe ActionScript ou du fichier MXML