Dans cet exemple, nous traiterons d’un problème récurent posé sur les forums : Comment écouter des itemRenderer ?

Notre exemple sera composé de 3 fichiers : L’un sera notre composant : MonItemRenderer.mxml, un second sera une Classe Actionscript qui servira à la manipulation de donnée (Un simple VO), le dernier sera l’application.

MonVO.as : Gestion des données

Pas de difficultés majeur, c’est un VO classique, notez la fonction static getNew() qui est une fonction raccourcis pour faciliter la création de ValueObject à la volée dans l’application.

package
{
	[Bindable]
	public class MonVO
	{
 
		public var title:String;
 
		public static function getNew(title:String):MonVO {
			var instance:MonVO = new MonVO();
			instance.title = title;
			return instance;
		}
 
	}
}

MonItemRenderer.as : Gestion des données

Le composant chargé de gérer l’affichage d’instance MonVO, il se compose d’un simple input pour affiche la propriétés title du VO, et surtout d’un bouton. C’est ce bouton qui va dispatcher des événements de type « supprimerMonVO » que notre application devra intercepter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="30">
 
	<mx:Script>
		<![CDATA[
			[Bindable] public var obj:MonVO;
 
			public override function set data(value:Object):void {
				obj = value as MonVO;
			}
 
			public override function get data() :Object {
				return obj;
			}
		]]>
	</mx:Script>
 
	<mx:Label text="Titre"/>
	<mx:TextInput id="champTitre" text="{obj.title}" change="obj.title=champTitre.text" />
	<mx:Button label="Supprimer" click="dispatchEvent(new Event('supprimerMonVO'))"/>
 
</mx:HBox>

Ecouter l’événement

Et nous voilà à la partie la plus intéressante. La vue se compose d’une Liste que l’on va remplir avec des vo créés à la volé, et surtout d’un écouteur qui se chargera d’intercepter les événement de type supprimerMonVO que les item renderer dispatch dans l’application.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute"
	initialize="initializeHandler()" >
 
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
 
			// Notre souce 'fictive' de données
			[Bindable] public var sourceDT:ArrayCollection = new ArrayCollection([
					MonVO.getNew("Un"),
					MonVO.getNew("Deux"),
					MonVO.getNew("Trois")
			]);
 
			private function initializeHandler() :void {
				addEventListener('supprimerMonVO', capturerSuppression, true);
			}
 
			private function capturerSuppression( e:Event ) :void {
				sourceDT.removeItemAt(sourceDT.getItemIndex(MonItemRenderer(e.target).obj));
			}
		]]>
	</mx:Script>
 
 
	<mx:List id="maListe" itemRenderer="MonItemRenderer" dataProvider="{sourceDT}" />
</mx:Application>

Comme vous pouvez le constater, l’écouteur exploite le 3ème paramètre (useCapture) qui active l’écoute des événements de passage. Si cette notion vous paraît mystérieuse, vous pouvez consulter le billet [a paraitre] consacré à la capture d’événements.