Modificar datos en componentes Flex con ItemEditors

En este tip, 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:

Código :

<mx:DataGrid 
   horizontalCenter="0" verticalCenter="0" 
   width="200" height="200" 
   dataProvider="{listado}">
         
   <mx:columns>
      <mx:DataGridColumn headerText="Claber" dataField="label"/>
      <mx:DataGridColumn headerText="Clablevel" dataField="level">            
      </mx:DataGridColumn>      
   </mx:columns>      
</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".

Código :

<mx:DataGrid 
   horizontalCenter="0" verticalCenter="0" 
   width="200" height="200" 
   dataProvider="{listado}" 
   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.

Código :

<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.

Código :

<mx:columns>
   <mx:DataGridColumn headerText="Claber" dataField="label" editable="false"/>
   <mx:DataGridColumn headerText="Clablevel" dataField="level" editorDataField="value">         
      <mx:itemEditor>
         <mx:Component>
            <mx:NumericStepper minimum="0" maximum="99999" stepSize="1"/>
         </mx:Component>
      </mx:itemEditor>            
   </mx:DataGridColumn>      
</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.

Código :

<mx:DataGridColumn headerText="Clablevel" dataField="level" rendererIsEditor="true" editorDataField="value">         
   <mx:itemRenderer>
      <mx:Component>
         <mx:NumericStepper minimum="0" maximum="99999" stepSize="1"/>
      </mx:Component>
   </mx:itemRenderer>            
</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:

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="absolute">
   
   <mx:Script>
      <![CDATA[
      ]]>
   </mx:Script>
   
   <mx:ArrayCollection id="listado">
      <mx:Object label="Freddie" level="43458"/>
      <mx:Object label="Elecash" level="7289"/>
      <mx:Object label="_Conejo" level="7203"/>
      <mx:Object label="XKlibur" level="4713"/>
      <mx:Object label="Zguillez" level="4120"/>
      <mx:Object label="Eldervaz" level="3123"/>
      <mx:Object label="Mariux" level="2921"/>
      <mx:Object label="Zah" level="2906"/>
      <mx:Object label="Bleend" level="2016"/>
      <mx:Object label="Carmen Vivas" level="610"/>
   </mx:ArrayCollection>
         
   <mx:DataGrid 
      horizontalCenter="0" verticalCenter="0" 
      width="200" height="200" 
      editable="true"
      dataProvider="{listado}">
            
      <mx:columns>
         <mx:DataGridColumn headerText="Claber" dataField="label" editable="false"/>
         <mx:DataGridColumn headerText="Clablevel" dataField="level" editorDataField="value">         
            <mx:itemEditor>
               <mx:Component>
                  <mx:NumericStepper minimum="0" maximum="99999" stepSize="1"/>
               </mx:Component>
            </mx:itemEditor>            
         </mx:DataGridColumn>      
      </mx:columns>      
   </mx:DataGrid>
  
</mx:Application>

¿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.