no se como acceder a un componente dentro de un itemrenderer

Hola muchachos, necesito un poco de ayuda con un itemrenderer.

Resulta que necesito mostrar los items de un TileList de manera especial, en el que cada item de la lista contenga 3 labels y un numericstepper, asique cree un componente personalizado para ello:

Lista.mxml:

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:TileList xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mgs="componentes.*">
   <mx:itemRenderer>
   <mx:Component>
      <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" paddingBottom="0" paddingTop="0" width="100%">
               <mx:VBox width="225" verticalScrollPolicy="off" horizontalScrollPolicy="off">
               <mx:Label text="Texto1: {data.nombreV}" />
               <mx:Label text="Texto2: {data.nombreS}" />
            </mx:VBox>
            <mx:VBox width="45" height="100%" horizontalAlign="center">
               <mx:Label text="Ciclos"  fontFamily="Verdana" fontSize="10" fontWeight="bold"/>
               <mx:NumericStepper width="45" minimum="0" value="1" maxChars="2" maximum="99" id="cycles"/>
            </mx:VBox>
      </mx:HBox>
   </mx:Component>
   </mx:itemRenderer>
</mx:TileList>

Este componente lo cargo en mi aplicacion MXML principal mas o menos asi:

Código :

<mgs:Lista id="tileList" columnCount="1" dataProvider="{miniaturas}" />

Ahora bien, desde un action script que cargo al iniciar la aplicacion, no se como acceder a la propiedad "value" del NumericStepper que se llama "cycles", es que necesito que el valor del item seleccionado se reduzca en uno, dada cierta condicion.

Gracias por las sugerencias!

Saludos.

Para obtener la referencia a un item algo así

var t:IListItemRenderer = myList.indexToItemRenderer(index)
t.changeNumber()

Donde changeNumber es un método público de tu renderer que hace lo que necesitas

Jorge

Hola, muchas gracias por la sugerencia...

Ahora mi item renderer se ve asi

Código :

<mx:TileList xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mgs="componentes.*">
   <mx:itemRenderer>
   <mx:Component>
      <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" paddingBottom="0" paddingTop="0" width="100%">
         <mx:Script>
            <![CDATA[
               public function get cyclesValue():uint
               {
                  return cycles.value;
               }         

               public function set cyclesValue(repeat:uint):void
               {
                  cycles.value=repeat;
               }         
            ]]>
         </mx:Script>
            <mx:VBox width="225" verticalScrollPolicy="off" horizontalScrollPolicy="off">
               <mx:Label text="Video: {data.nombreVideo}" />
               <mx:Label text="Sonido: {data.nombreSonido}" />
            </mx:VBox>
            <mx:VBox width="45" height="100%" horizontalAlign="center">
               <mx:Label text="Repetir"  fontFamily="Verdana" fontSize="10" fontWeight="bold"/>
               <mx:NumericStepper width="45" minimum="0" value="1" maxChars="2" maximum="99" id="cycles"/>
            </mx:VBox>
      </mx:HBox>
   </mx:Component>
   </mx:itemRenderer>
</mx:TileList>

El cual referencio de esta manera en mi script principal

Código :

private function up():void
{
       var item:IListItemRenderer = playlist.indexToItemRenderer(playlist.selectedIndex);
      item.cyclesValue(item.cyclesValue()+1);
}

private function down():void
{
       var item:IListItemRenderer = playlist.indexToItemRenderer(playlist.selectedIndex);
      item.cyclesValue(item.cyclesValue()-1);
}

lo cual me da este error...

Código :

1061: Call to a possibly undefined method cyclesValue through a reference with static type mx.controls.listClasses:IListItemRenderer.

Alguna sugerencia?....

PD: Seguro que estoy haciendo algo mal...jajaja

Escribe un método público en tu itemRenderer que cambie el valor de tu stepper y llámalo en vez de hacer una referencia directa al elemento

Jorge

Perdon por mi ignorancia, pero no es o que estoy haciendo?

No entiendo bien como implementar lo que me sugeris.

Gracias por la data!

Vale, miré rápido y de ahí la confución. Aquí hay algo que no entiendo:

item.cyclesValue(item.cyclesValue()-1);

Si cyclesValue es un método que setea el valor y lo devuelve, al no pasarle argumento te dará error de argumento, aunque si le declaras un default puedes evitar el error ... en cualquier caso, confuso. Luego haz un cast para evitar el error de compilación:

tuClase(item).cyclesValue(nro);

Donde tuClase es la clase del itemRenderer

Jorge

Hola, revisando un poco mi estrategia, creo que va a ser mejor si asigno el valor del NumericStepper a travez de un ArrayCollection que ya tengo creado en el codigo, el cual es el datarovider de mi componente personalizado, de ahi es de donde se toman los datos para

Código :

<mx:Label text="Video: {data.nombreVideo}" />
<mx:Label text="Sonido: {data.nombreSonido}" />

Esto me va a servir para luego guardar este ArrayCollection a un archivo para que el usuario pueda cargar/grabar la lista de reproduccion.

Por lo tanto ahora mi item renderer queda mas o menos asi:

Código :

<mx:TileList xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mgs="com.mgscreativa.forms.lineaThumb">
   <mx:itemRenderer>
   <mx:Component>
      <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" paddingBottom="0" paddingTop="0" width="100%">
         <!-- <mx:Image source="{data.bitmap}" toolTip="{data.cuePointTime}" maintainAspectRatio="true" scaleX="0.38" scaleY="0.38" />-->
         <mx:VBox width="220" verticalScrollPolicy="off" horizontalScrollPolicy="off">
            <mx:Label text="Video: {data.nombreVideo}" />
            <mx:Label text="Sonido: {data.nombreSonido}" />
         </mx:VBox>
         <mx:VBox width="50" height="100%" horizontalAlign="center">
            <mx:Label text="Repetir"  fontFamily="Verdana" fontSize="10" fontWeight="bold"/>
            <mx:NumericStepper width="45" minimum="0" value="{data.ciclos}" maxChars="2" maximum="99" id="cycles"/>
         </mx:VBox>
      </mx:HBox>
   </mx:Component>      
   </mx:itemRenderer>
</mx:TileList>

Como veras, la propiedad value de mi numericstepper responde al campo data.ciclos de mi ArrayCollection, el cual cargo mas o menos asi:

Código :

miniaturas.addItem({nombreVideo:nombreVid, nombreSonido:nombreSnd, ciclos:1});

Ahora bien, al agregar un item al ArrayCollection todo funciona de maravilla, aparece un nuevo item con los datos correctos, el problema es que mi itemrenderer no se actualiza.

Por ejemplo, yo creia que al ejecutar este codigo, el valor del repeater cambiaria, pero no:

Código :

private function up():void
{
      var item:Object = miniaturas.getItemAt(playlist.selectedIndex);
      item.ciclos += 1;
}

private function down():void
{
      var item:Object = miniaturas.getItemAt(playlist.selectedIndex);
      item.ciclos -= 1;
}

El campo ciclos del item seleccionado se actualiza en el arraycollection miniaturas, pero el valor del numericstepper del itemrenderer sigue siendo el que le pase al crearlo, a pesar de poner la propiedad con value="{data.ciclos}"

Perdon por tantas vueltas, pero estoy realmente trabado con esto.

Gracias!

Si quieres que un componente atado por data binding actualice, la fuente tiene que estar marcada como Bindable

[Bindable]
private var miniaturas:ArrayCollection;

Jorge

Hola, ya tengo mi arraycollection como bindable, puedo cambiar el valor del campo ciclos desde el numericstepper escuchando al evento change, pero no puedo cambiar el valor del stepper desde el codigo de mi aplicacion principal. Por lo menos es un avance...jeje.

Ahora mi componente quedo asi

Código :

<mx:TileList xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mgs="com.mgscreativa.forms.lineaThumb">
   <mx:itemRenderer>
      <mx:Component>
         <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" paddingBottom="0" paddingTop="0" width="100%">
            <mx:Script>
               <![CDATA[
                  import mx.events.NumericStepperEvent;
                  import mx.events.FlexEvent;
                  
                  private function cyclesChange(e:mx.events.NumericStepperEvent):void
                  {
                     data.ciclos=cycles.value;
                     trace ("Ciclos: " + data.ciclos);
                  }   

                  private function cyclesDataChange(e:mx.events.FlexEvent):void
                  {
                     cycles.value=e.target.ciclos;
                     trace ("Ciclos: " + data.ciclos);
                  }   
               ]]>
            </mx:Script>
            <!-- <mx:Image source="{data.bitmap}" toolTip="{data.cuePointTime}" maintainAspectRatio="true" scaleX="0.38" scaleY="0.38" />-->
            <mx:VBox width="220" verticalScrollPolicy="off" horizontalScrollPolicy="off">
               <mx:Label text="Video: {data.nombreVideo}" />
               <mx:Label text="Sonido: {data.nombreSonido}" />
            </mx:VBox>
            <mx:VBox width="50" height="100%" horizontalAlign="center">
               <mx:Label text="Repetir"  fontFamily="Verdana" fontSize="10" fontWeight="bold"/>
               <mx:NumericStepper width="45" minimum="0" value="{data.ciclos}" maxChars="2" maximum="99" id="cycles" dataChange="cyclesDataChange(event)" change="cyclesChange(event)"/>
            </mx:VBox>
         </mx:HBox>
      </mx:Component>
   </mx:itemRenderer>
</mx:TileList>

Escucho en dos eventos, el dataChange y el change del numericstepper, el evento change actualiza el valor de ciclos en mi arraycollection si apreto las flechas o cambio manualmente el valor, eso esta bien, me gusta, pero no puedo cambiar el valor del stepper desde mi aplicacion principal, por ejemplo, si ejecuto este codigo desde mi aplicacion principal, el valor de ciclos se actualiza pero el numericstepper no y tampoco dispara el evento dataChange

Código :

private function down():void
{
      var item:Object = miniaturas.getItemAt(playlist.selectedIndex);
      item.ciclos=10;
      trace ("Ciclos: " + item.ciclos);
}

jajaja, me confundo cada vez mas, pero parece que vamos avanzando.

Pero miniatura está en la propiedad data, que ya es un binding, no se si esa forma funcione, yo siempre he usado indexToItemRenderer o itemToItemRenderer para acceder y manipular contenido en un itemRenderer

Jorge

Hola...1000 gracias por toda la data, pero sigo sin poder hacer una de las operaciones que quiero.

Repasemos, tengo un itemrenderer que a su vez, entre otras cosas, tiene un numericstepper, el cual esta bindeado a un campo de una variable del tipo arraycollection que tengo en mi aplicacion principal. Cuando cambio el valor del numericstepper, se bindea todo bien y el valor del campo de mi array collection en el indice seleccionado cambia, pero cuando desde el codigo cambio el valor del campo de mi arraycollection en el indice seleccionado, el numero que aparece en el numericstepper no cambia.

Mi componente itemrenderer es este:

Código :

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" paddingBottom="0" paddingTop="0" width="100%">
   <mx:Script>
      <![CDATA[
         import mx.events.NumericStepperEvent;
            import mx.events.FlexEvent;

            private function cyclesChange(e:mx.events.NumericStepperEvent):void
            {
               data.ciclos=cycles.value;
                trace ("Ciclos: " + data.ciclos);
            }   
      ]]>
   </mx:Script>
   <!-- <mx:Image source="{data.bitmap}" toolTip="{data.cuePointTime}" maintainAspectRatio="true" scaleX="0.38" scaleY="0.38" />-->
   <mx:VBox width="220" verticalScrollPolicy="off" horizontalScrollPolicy="off">
      <mx:Label text="Video:  {data.nombreVideo}" />
      <mx:Label text="Sonido: {data.nombreSonido}" />
   </mx:VBox>
   <mx:VBox width="50" height="100%" horizontalAlign="center">
      <mx:Label text="Repetir"  fontFamily="Verdana" fontSize="10" fontWeight="bold"/>
      <mx:NumericStepper width="45" minimum="0" value="{data.ciclos}" maxChars="2" maximum="99" id="cycles" change="cyclesChange(event)"/>
   </mx:VBox>
</mx:HBox>

Repito, necesito que al cambiar el valor del campo de mi arraycollection en el indice seleccionado, desde el codigo, el numero que aparece en el numericstepper cambie.

Agradeceria algun ejemplo, puesto que hace ya 2 dias que estoy con esto y he leido de todo, desde sobreescribir el data setter y getter y las 4 partes del item renderer en adobe docs.

Gracias!

Te entendí, no creo que funcione de esa forma, a mi me ha funcionado con indexToItemRenderer. Si tengo un rato te armo el ejemplo o busco los proyectos en que los usé

Jorge

solisarg escribió:

Uyyy...1000 gracias! me vendria al pelo! por que estoy con esto hace 2 dias! De hecho com opodras ver, estuve todo el dia con esto...jajaja

listo, la solucion es esta:

Código :

    var item:playlistItem = playlist.indexToItemRenderer(playlist.selectedIndex) as playlistItem;
    item.cyclesValue=c;

no puedo acceder como item.cyclesValue() por que defini las funciones como setter/getter

Código :

public function set cyclesValue(v:uint):void
{
     cycles.value=v;
}
public function get cyclesValue():uint
{
     return cycles.value;
}

Gracias por toda la data, espero que sirva para proximos neofitos como yo Jajaja

Saludos, gracias por compartir este sobre este tema, he afirmado algunos conceptos con este ejemplo.
En mi caso estoy teniendo problemas en poder recorrer todos los elementos seleccionados de un TileList, me he fijado que el TileList puede mostrar a la vez 12 elementos (4 columnas y 3 filas) y se está dando el caso que me marca error de null cuando en el TileList pasa de ese número de elementos (en este caso 44) .

Con este código estoy tratando de sacar los elementos seleccionados:

Código ActionScript :

public function regresarItemsSeleccionados():Array{
                var arr:Array = new Array();
                trace("(dataProvider as ArrayCollection).length = " + (dataProvider as ArrayCollection).length);
                for(var i:int = 0; i < (dataProvider as ArrayCollection).length; i++){
                    if(arrCollectionSeleccionados.contains((indexToItemRenderer(i) as renderTileListSeleccionado).key)){
                        arr.push((indexToItemRenderer(i) as renderTileListSeleccionado).data);
                    }
                }
                return arr;
            }

Muchas gracias.

Saludos, Tmeister me recomendó leer este artículo :
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postid=10403&loc=en_US&productid=2
y Zguillez este:
http://www.cristalab.com/tips/acceder-a-los-itemrenderer-de-un-componente-lista-en-flex-c70477l/

ya les diré cómo me va ,muchas gracias!.