Les objets de type liste permettent l'affichage de données dans notre application. Mais il est souvent utile de vouloir afficher, par exemple, des boutons de suppression, ...

Pour ce faire, nous disposons de l'attribut itemRenderer qui va nous permettre de remplir notre liste avec autre chose que des données (voir également des données mais formatées différement).

Il existe deux types d'itemRenderer. 

Tout d'abord un type que nous pouvons qualifier d'inline.
Exemple : 

< mx:DataGrid>
	< mx:columns>
		< mx:DataGridColumn headerText="Nom" />
		< mx:DataGridColumn headerText="">
			< mx:itemRenderer>
				< mx:Component>
					< mx:Button toolTip="Supprimer" />
				< /mx:Component>
			< /mx:itemRenderer>
		< /mx:DataGridColumn>
	< /mx:columns>
< /mx:DataGrid>

C'est-à-dire que l'itemRenderer est intégré directement dans la balise colonne (dans notre cas colonne de la dataGrid) en utilisant la balise <mx :Component> qui permet de définir une nouvelle partie dans notre MXML. Cette nouvelle partie est vraiment à part. C'est-à-dire que les éléments définis entre les balises <mx :Component></mx :Component> sont isolé du reste du MXML.

Dans le cas ou nous avons besoin de communiquer avec le MXML conteneur, nous pouvons utiliser la méthode propre à un component, outerDocument. Cette méthode permet de sortir du component et donc de communiquer avec le code du parent. Voici un exemple :

< mx:Script>
	< ![CDATA[
	private function alert() :void {
		mx.controls.Alert.show('appel du component') ;
	}
	]]>
< /mx:Script>

< mx:DataGrid>
	< mx:columns>
		< mx:DataGridColumn headerText="Nom" />
		< mx:DataGridColumn headerText="">
			< mx:itemRenderer>
				< mx:Component>
					< mx:Button toolTip="Supprimer" click="{outerDocument.alert()}" />
				< /mx:Component>
			< /mx:itemRenderer>
		< /mx:DataGridColumn>
	< /mx:columns>
< /mx:DataGrid>

Dans l'exemple précédent, lors d'un clique sur le bouton présent dans l'itemRenderer, la fonction du parent va etre appelé.
Il est également possible de passer des paramètre, par exemple, la propriété 'data' peut permettre d'envoyer l'item courament selectionné.
Cett solution est très utile et est relativement rapide à mettre en place. Mais si on souhaite réutiliser notre itemRenderer, c'est loin d'etre la meilleure solution. Notre code est 'statique' et communique seulement avec son parent.
Nous en venons donc a la deuxième solution.
Celle-ci consiste à exporter son code dans un nouveau fichier MXML. Pour pouvoir le réutiliser. Mais dans ce cas la, c'est un peut plus compliqué de communiquer avec le parent.
Nous allons donc communiquer grâce à des evenements que nous allons distribuer lors d'action.
Voici notre itemRenderer :

< mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center">
    < mx:CheckBox id="editor" selected="{data.isSelected}" />
< /mx:VBox>

Celui-ci permet d'avoir une colonne avec des checkboxes à cocher. Comme vous avez pu le constater, nous avons toujours l'attribut data qui contient toute les données de la ligne courante.
Maintenant si nous voulons envoyer un évènement, il nous suffit de le dispatcher :

< mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center">
   < mx:Script>
        < ![CDATA[
		import flash.events.Event;
		private function onClickCheckbox():void {
			dispatchEvent(new Event('click', true,true ));
		}
        ]]>
    < /mx:Script>
    < mx:CheckBox id="editor" selected="{data.isSelected}" click="{onClickCheckbox()}"/>
< /mx:VBox>

Tout simplement. Maintenant dans le MXML parent, nous devons écouter l'evenement pour pouvoir l'attraper lorsque celui-ci est distribué.

< mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initHandler()">
< ![CDATA[
	import flash.events.Event;

	private function initHandler():void {
		DG.addEventListener(CustomEvent.CLICKED, alert);
	}

	private function alert(evt:Event) :void {
		mx.controls.Alert.show('appel du component') ;
	}
]]>

< mx:DataGrid id="DG">
	< mx:columns>
		< mx:DataGridColumn headerText="Nom" />
		< mx:DataGridColumn headerText="" itemRenderer="CheckboxRenderer" />
	< /mx:columns>
< /mx:DataGrid>

Nous pouvons maintenant appeler des fonctions du MXML parent. Mais je vous entend deja, comment pouvons nous passer des parametres aux fonctions appelées ?
Tout simplement en créant un évènement personnalisé et disposant d'une variable qui va contenir nos parametres.
Voici un exemple d'évènement : 
package {
    import flash.events.Event;
    public class CustomEvent extends Event {

        public static const CLICKED:String = "button clicked";

        public var data : * ;

        public function Events(type:String, bubbles:Boolean=false, cancelable:Boolean=false){
            super(type, bubbles, cancelable);
        }
    }
}

Maintenant, lors de la distribution des évènements :
var evt : CustomEvent = new CustomEvent(CustomEvent.CLICKED, true, true);
evt.data = data;
dispatchEvent(evt);

Et voila, le tour est joué !