Flex 4: Acceder al contenedor padre de un Itemrenderer

Calling parent container from ItemRendere.

Pre-requisitos: Conocimientos básicos de Flex 4 (funcionamiento de un Itemrenderer) y Action Script 3.

Una de las mejores características de flex es que te permite crear listas de objetos, con la particularidad de que podemos crear diseños e interfaces muy visuales de estos objetos gracias a los Itemrederers. Por ejemplo, una lista botones donde cada botón tiene un diseño similar con funcionalidad similar.

Pero puede que tengamos la necesidad de acceder, no sólo a la lista que contiene al itemrenderer sino también a la vista que contiene a esta lista para acceder a alguno de sus objetos declarados o funciones.

La parte negativa de esto es que el Itemrenderer que lo utilice quedará totalmente acoplado a la vista padre a la que hacemos referencia y no podrá ser un elemento independiente y reutilizable por otras listas.

El propio itemrenderer ya nos trae distintas propiedades rellenas con la información de los datos con lo que hemos rellenado la lista.


data: Contiene la información del elemento de la lista al que representa el itemrenderer.
parentDocument: hace referencia a algún objetos padre que contiene al itemrederer.

También se puede sobre-escribir funciones  como set data() que se ejecutará para de asignar el valor de uno de los elementos de la lista al itemrenderer.

Para acceder a la vista padre lo que debemos utilizar es parentDocument.parentDocument que nos devolverá un objeto del tipo de contiene a lista.


El ejemplo que os pongo a continuación es una mxml principal(MainApp.mxml) con una lista y el itemrender utilizado (ServiceIR.mxml). Se supone que ambos están en el mismo paquete de la aplicación.


MainApp.mxml

<s:Application

................

<s:Group width="100%">

                              <s:HGroup left="40" top="40">

                                        <s:List width="100%" dataProvider="{items}"

                                                            itemRenderer="ServicesIR"

                                                            contentBackgroundColor="#E6E7E8" borderVisible="false">

                                                  <s:layout>

                                                            <s:HorizontalLayout columnWidth="50" gap="5"/>

                                                  </s:layout>

                                        </s:List>

.....

</Application>

El objeto items del data provider podría ser un arrayCollections de Strings por ejemplo.

ServicesIR.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                                        xmlns:s="library://ns.adobe.com/flex/spark"

                                        xmlns:mx="library://ns.adobe.com/flex/mx"

                                        autoDrawBackground="true">

...

<fx:Script>

                    <![CDATA[

              override public function set data(value:Object):void

              {

              var parent:MainApp =  parentDocument.parentDocument; //Instance of MainApp.mxml

                    ............................

              }

]]>

</fx:Script>

     ..............

  }

<s:ToggleButton id="tab"  label="{data}" horizontalCenter="0" verticalCenter="0"/>

</s:ItemRenderer>

Utilizo la función set data para asignar para recuperar al objeto padre y acceder a lo que necesite para modificar los datos como sea necesario.