Acceder a funciones de un componente desde un itemRenderer

Este es un tip para Flex muy sencillo y util. Nos seria útil en un caso como el siguiente.

Tenemos una lista con un itemRenderer y necesitamos acceder al MXML donde esta esta lista, desde el itemRenderer. Necesitamos esto para acceder a una función, variable o componente.

(Para entender mas fácil todo, copiar el código y probarlo en una aplicación de prueba en flex)

Como solucionamos esto?

En el caso que voy a colocar de ejemplo, hay una lista con un itemRenderer que repite un boton. Necesito que cuando le de click al boton del itemRenderer que se repite en la lista, ejecute una función que se llama funcioncita que esta en el MXML que contiene la lista. ¿Se entiende?

Para solucionar este caso hay 4 formas, pero solo una esta hecha específicamente para este tipo de casos. Mas info ver este link de la documentación de adobe.

Formas de acceder.

1. parentApplication.funcioncita();
2. parentDocument.funcioncita();
3. Application.application.funcioncita();
4. outerDocument.funcioncita();

No es bueno utilizar parentApplication o parentDocument porque cuando se compila no revisa si hay errores o no. Y no queremos eso.
Application.application funciona bien pero es muy laaarrgoo.
outerDocument es la forma adecuada. Viendo el código se entiende mejor. Esta palabra esta poco documentada y tiene la desventaja que no sale en la ayuda contextual de flex. Por eso cada vez que necesites saber como se escribe tendrás que entrar en es post y copiar outerDocument.

Código de ejemplo:

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" xmlns:ns1="*">
<mx:Script>
   <![CDATA[
      import mx.controls.Alert;
      public function funcioncita():void
      {
         Alert.show("Funciona");      
      }
   ]]>
</mx:Script>
    <mx:ArrayCollection id="miArrayCollection">
        <mx:source>
            <mx:Array>
                <mx:Object nombre="carlos"/>
                <mx:Object nombre="juan"/>
                <mx:Object nombre="pepe"/>
                <mx:Object nombre="maria"/>
                <mx:Object nombre="carolina"/>
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>
    
   <mx:List width="406" height="200" dataProvider="{miArrayCollection}">
        <mx:itemRenderer>
            <mx:Component>
            <mx:Canvas width="100%" height="26" >
               <mx:Button left="3" verticalCenter="0" width="100"
                  label="{data.nombre}" 
                  click="outerDocument.funcioncita()"/>
            </mx:Canvas>
            </mx:Component>
        </mx:itemRenderer>
   </mx:List>
</mx:Application>   

Como podrán darse cuenta, si cambiamos click="outerDocument.funcioncita()" por click="funcioncita()" no funciona. Esto se debe a que Flex toma al itemRenderer como un componente externo. Tampoco funcionaria si hiciéramos a funcioncita() como privada porque entonces no se podría acceder a ella. Esto también aplica si creamos un componente personalizado para el itemRenderer.

Espero que les sea útil.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.