LLenar y Obtener informacion de un Datagrid (Binding)

Como mi primero ejemplo quiero mostrar lo fácil que puede resultar realizar acciones muy vistosas y utiles en aplicaciones hechas en flex. En este ejemplo se muestra como llenar y obtener información de un DataGrid (que no es mas que una Lista de campos mostrados consecutivamente con ciertas funcionalidades), caber destacar que en este ejemplo se usan muy pocas de las grandiosas funcionalidades que puede ofrecer un DataGrid, pero las iremos publicando en el futuro.


Para llenar un Datagrid debemos asignar en la propiedad DataProvider objetos basados en la clase List de Actionscrip 3.0, tales como XMLList, Array,Colecciones, etc. Por supuesto tambien podemos usar la clase Object (ya que un objeto object puede comportarse como cualquier instancia de cualquier clase) .

Luego de asignar un DataProvider debemos decirle al DataGrid cuales van a ser sus columnas de información DataGridColumn, asignando un dataField con el nombre de la variable a mostrar y un headerText con el nombre de la columna.

Como la variable asignada como DataProvider la colocamos entre llaves le estamos diciendo a flex que es una variable de ActionScript, y hasta si declararamos bindable la variable pudieramos sincronizar la data contenida dentro del XMLList en tiempo real con el datagrid (Excelente, ¿no?), pero de esto hablaremos mas adelante. Cabe destacar que es imposible referirse a variables del codigo actual sin expresarlas entre llaves (ya sea codigo MXML o ActionScript).

Por ultimo le asiganos un identificador (id) al Datagrid para referirnos a el en cualquier parte del codigo, en este caso, para llenar el texto de las labels con la informacion seleccionada en el Datagrid.

Este codigo fue sacado de la página del Flash Component Explorer, para otros códigos de este mismo nivel pueden visitar la página.

Codigo

<?xml version="1.0"?>
<!-- DataGrid control example. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:XMLList id="employees">
      <employee>
          <name>Christina Coenraets</name>
          <phone>555-219-2270</phone>
          <email>ccoenraets@fictitious.com</email>
          <active>true</active>
      </employee>
      <employee>
          <name>Joanne Wall</name>
          <phone>555-219-2012</phone>
          <email>jwall@fictitious.com</email>
          <active>true</active>
      </employee>
      <employee>
          <name>Maurice Smith</name>
          <phone>555-219-2012</phone>
          <email>maurice@fictitious.com</email>
          <active>false</active>
      </employee>
      <employee>
          <name>Mary Jones</name>
          <phone>555-219-2000</phone>
          <email>mjones@fictitious.com</email>
          <active>true</active>
      </employee>
  </mx:XMLList>

  <mx:Panel title="DataGrid Control Example" height="100%" width="100%"
      paddingTop="10" paddingLeft="10" paddingRight="10">

      <mx:Label width="100%" color="blue"
          text="Select a row in the DataGrid control."/>

      <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}">
          <mx:columns>
              <mx:DataGridColumn dataField="name" headerText="Name"/>
              <mx:DataGridColumn dataField="phone" headerText="Phone"/>
              <mx:DataGridColumn dataField="email" headerText="Email"/>
          </mx:columns>
      </mx:DataGrid>

      <mx:Form width="100%" height="100%">
          <mx:FormItem label="Name">
              <mx:Label text="{dg.selectedItem.name}"/>
          </mx:FormItem>
          <mx:FormItem label="Email">
              <mx:Label text="{dg.selectedItem.email}"/>
          </mx:FormItem>
          <mx:FormItem label="Phone">
              <mx:Label text="{dg.selectedItem.phone}"/>
          </mx:FormItem>
      </mx:Form>
    
  </mx:Panel>
</mx:Application>      

Ejemplo