Home » Flex »Tutoriales » Currently Reading:

Modificar datos en componentes Flex con ItemEditors

julio 30, 2008 Flex, Tutoriales 3 Comments
Modificar datos en componentes Flex con ItemEditors

En este =http://www.cristalab.com/tipstip[/url], siguiendo un poco el ejemplo visto en el tip anterior, mostraré el uso de itemRenderes e itemEditors para mostrar y editar datos dentro de componentes basados en listas, como el componente List, el DataGrid o el TileList

Como se vió en el tip anterior los itemRenderer (y los itemEditors) nos permiten incrustar otros componentes Flex dentro de los listados de los componentes basados en listas, para poder mostrar la información de manera más compleja. Pudiendo de esta manara mostrar imágenes dentro de un DataGrid o fichas de productos dentro de un TileList.

Hay muchos casos en que esta información mostrada en los componentes nos interesa que sea modificable. Por ejemplo, siguiendo el ejemplo anterior, imaginemos que tenemos un DataGrid que nos muestra un listado de usuarios y su nivel de ClabLevel. El código básico para visualizar este componente sería el siguiente:

  1. <mx:DataGrid
  2.     horizontalCenter="0" verticalCenter="0"
  3.     width="200" height="200"
  4.     dataProvider="{listado}">
  5.            
  6.     <mx:columns>
  7.         <mx:DataGridColumn headerText="Claber" dataField="label"/>
  8.         <mx:DataGridColumn headerText="Clablevel" dataField="level">               
  9.         </mx:DataGridColumn>       
  10.     </mx:columns>      
  11. </mx:DataGrid>

Este sería el resultado:

Para nuestro ejemplo lo que nos interesa es que estos valores de ClabLevel sean modificables. Para poder realzar esta función únicamente deberemos añadirle a las propiedades del DataGrid la opción de “editable”.

  1. <mx:DataGrid
  2.     horizontalCenter="0" verticalCenter="0"
  3.     width="200" height="200"
  4.     dataProvider="{listado}"
  5.     editable="true">

Con solo realizar esta acción tendremos la opción de dar doble-clic sobre los campos del DataGrid para modificar los valores.

Hay que tener en cuenta de que todas las columnas del DataGrid ahora son modificables. En el caso de que no queramos que alguna lo sea, por ejemplo la columna que muestra los nombres, deberemos añadir esa propiedad “editable” a la columna pero con valor false.

  1. <mx:DataGridColumn headerText="Claber" dataField="label" editable="false"/>

Ahora bien, supongamos que nos interesa tener una opción contreta a la hora de modificar estos valores. Por ejemplo con un componente NumericStepper, para ir modificando estos valores uno a uno. De manera de que al hacer doble-clic para modificar ese valor numérico apareciese el componente que nos permitiera tener esa función:

Para hacer esto delegaremos la función de editaje a un componente NumericStepper a través de un itemEditor.

  1. <mx:columns>
  2.     <mx:DataGridColumn headerText="Claber" dataField="label" editable="false"/>
  3.     <mx:DataGridColumn headerText="Clablevel" dataField="level" editorDataField="value">           
  4.         <mx:itemEditor>
  5.             <mx:Component>
  6.                 <mx:NumericStepper minimum="0" maximum="99999" stepSize="1"/>
  7.             </mx:Component>
  8.         </mx:itemEditor>               
  9.     </mx:DataGridColumn>       
  10. </mx:columns>

Este es el resultado:

Visto esto, también hay que decir que con un ItemRenderer también podemos hacer que estos datos sean modificables. En este caso haremos que toda la columna de datos se visualicen con el componente NumericStepper indicando que este sea el itemRenderer para esa columna.

  1. <mx:DataGridColumn headerText="Clablevel" dataField="level" rendererIsEditor="true" editorDataField="value">           
  2.     <mx:itemRenderer>
  3.         <mx:Component>
  4.             <mx:NumericStepper minimum="0" maximum="99999" stepSize="1"/>
  5.         </mx:Component>
  6.     </mx:itemRenderer>             
  7. </mx:DataGridColumn>

Fijémonos que hemos añadido el parámetro rendererIsEditor para indicar que el componente añadido como itemRenderer funciona como editor, de manera que al modificar un valor con el componente NumericStepper en cualquiera de los registros este nuevo valor queda registrado.

Este es el código completo con el ItemEditor:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.     layout="absolute">
  4.    
  5.     <mx:Script>
  6.         <![CDATA[
  7.         ]]>
  8.     </mx:Script>
  9.    
  10.     <mx:ArrayCollection id="listado">
  11.         <mx:Object label="Freddie" level="43458"/>
  12.         <mx:Object label="Elecash" level="7289"/>
  13.         <mx:Object label="_Conejo" level="7203"/>
  14.         <mx:Object label="XKlibur" level="4713"/>
  15.         <mx:Object label="Zguillez" level="4120"/>
  16.         <mx:Object label="Eldervaz" level="3123"/>
  17.         <mx:Object label="Mariux" level="2921"/>
  18.         <mx:Object label="Zah" level="2906"/>
  19.         <mx:Object label="Bleend" level="2016"/>
  20.         <mx:Object label="Carmen Vivas" level="610"/>
  21.     </mx:ArrayCollection>
  22.            
  23.     <mx:DataGrid
  24.         horizontalCenter="0" verticalCenter="0"
  25.         width="200" height="200"
  26.         editable="true"
  27.         dataProvider="{listado}">
  28.                
  29.         <mx:columns>
  30.             <mx:DataGridColumn headerText="Claber" dataField="label" editable="false"/>
  31.             <mx:DataGridColumn headerText="Clablevel" dataField="level" editorDataField="value">           
  32.                 <mx:itemEditor>
  33.                     <mx:Component>
  34.                         <mx:NumericStepper minimum="0" maximum="99999" stepSize="1"/>
  35.                     </mx:Component>
  36.                 </mx:itemEditor>               
  37.             </mx:DataGridColumn>       
  38.         </mx:columns>      
  39.     </mx:DataGrid>
  40.  
  41. </mx:Application>

Compártelo:

Modificar datos en componentes Flex con ItemEditors
Visto 11.058 veces

Currently there are "3 comments" on this Article:

  1. con el trabajo que me costo realizar eso mismo en as 2.0 y flash en
    mi portal inmobiliario

    http://www.cordobaguapa.com/indexflash.php

    eso se podría hacer hoy con flex en un momento

    Muy Bueno

  2. Shadonwk dice:

    hola esta exelente me gusta mucho voy a modificarlo y aver que tal me queda porque yo quiero que se conecte a una bd tengo unas ideas locas aver que sale

  3. Daniel dice:

    Muchas Gracias,
    Estoy empezando con esta tecnología y tu ayuda me ha sido muuuuy útil.Saludos.

Comment on this Article:








Twitter: zguillez

AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com