Suscribirse a webrecursos.es! rss  
 
Feb
20
     
itemRenderer en Flex
Posted (antoniohernandez) in Flex on Febrero-20-2009

flex3 itemRenderer en Flex En esta ocasión me voy a basar en un ejemplo que he tenido que realizar hace unos dias.  El problema era que queriamos insertar una imagen en una columna de nuestro DataGrid pero no quedaba la cosa ahí. Si la entrada no dispone de imagen, queremos que cargue una imagen  por defecto y si tiene imagen pues que cargue esta. Para ello la columna llamada “Imagen” hace uno de la propiedad itemRenderer. Lo primero es ver como quedaría nuestra columna Imagen:

 

1
2
<mx:DataGridColumn headerText="Imagen" dataField="imagen"
width="80" wordWrap="true" itemRenderer="{new ClassFactory(ImagenNoticias)}"  />

 ImagenNoticias es en nuestro caso, el componente mxml que queremos que aparezca en nuestra columna.  Como todos sabreis dataField=”imagen” es la propiedad del objeto instanciado en la fila dle grid.

Visto esto vamos a ver como quedaría nuestro fichero  ImagenNoticias.mxml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="80"
    horizontalAlign="center" verticalAlign="middle"  creationComplete="init()">
        <mx:Script>
            <![CDATA[
                import mx.events.FlexEvent;
                import mx.controls.Image;  

            public function init() : void {
               
                var value   : NoticiaVO = (data as NoticiaVO);
                var img     : Image = new Image();
                   
                img.width=  75;
                img.height= 75;
               
                   /*realizamos el tratamiento*/
                   
                this.addChild(img);
               
                this.addEventListener(FlexEvent.HIDE,hideme);
                this.addEventListener(FlexEvent.SHOW,showme);
            }
                private function showme(evt:FlexEvent):void{
                    var item:ImagenNoticias = evt.target as ImagenNoticias;
                    var value:NoticiaVO = data as NoticiaVO;
                    var img     : Image = new Image();

                                /*realizamos el tratamiento*/
               
                this.addChild(img);
                }  

                private function hideme(evt:FlexEvent):void{
                   
                                       /*realizamos el tratamiento hide me*/
                    item.removeAllChildren();
                }
   
            ]]>
        </mx:Script>   
</mx:HBox>

 

En nuestra función init() implicitamente el objeto data trae toda la información de la fila que realiza la llamada al componente, en nuestro caso de tipo NoticiaVO.  Es aquí donde podremos realizar el tratamiento a los datos que necesitemos. Las funciones showme() y hideme() son  necesarias en nuestro caso ya que el grid en nuestro polling de objetos solo mantiene los que son visibles. De esta forma tendremos que ir instanciando y eliminando los objetos en función de si se ven o no. Finalmente así quedaría:

up itemRenderer en Flex

No existen posts relacionados.


Deje su comentario :)
Nombre: 
Email: 
URL: 
Comentario: