itemRenderer : Ecouter les événements

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 :P 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.

<mx:hbox height="30" width="100%" xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:script>
        <!--[CDATA[
            [Bindable]-->
    </mx:script>

    <mx:label text="Titre">
    <mx:textinput change="obj.title=champTitre.text" id="champTitre" text="{obj.title}">
    <mx:button click="dispatchEvent(new Event('supprimerMonVO'))" label="Supprimer">
    
</mx:button>
</mx:textinput></mx:label></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.

<mx:application initialize="initializeHandler()" layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:script>
        <!--[CDATA[
            import mx.collections.ArrayCollection;
           
            // Notre souce 'fictive' de données
            [Bindable]-->
    </mx:script>


    <mx:list dataprovider="{sourceDT}" id="maListe" itemrenderer="MonItemRenderer">
</mx:list>
</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.