DataGrid Expandilble - Componente Flex

Continuando con el desarrollo de los componentes de flex, les presento mi ultima creación. Lo hice puramente con fines esteticos, y porque hay veces que los formularios mostrados estan saturados de informacion y es mejor no mostrarla toda a menos que el usuario lo desee, para eso cree el Datagrid Expandible, que no es mas que un componente Datagrid que tiene dos propiedades nuevas: rowNumber que dice el numero de filas que se desean visualizar cuando el datagrid esta contraido (esto no quiere decir que no se puedan pasar las filas con el scrollBar, que es la diferencia con la propiedad rowCount que ya viene incluida dentro del datagrid del Framework de flex).

Otra cosa que le agregue fue la opcion de colocar un efecto visual a la hora de expandir y contraer, para volverlo mucho mas estetico y agradable para el usuario.

Bueno para no quitarles mas tiempo aqui les coloco el codigo fuente del componente:

Codigo

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
<mx:Script>
<![CDATA[

/**
* Componente DataGrid que permite especificar el numero de filas mostrar,
* colocando un scrollbara las demas filas para irlas pasando,
* tambien permite colocar un efecto de expansion y reduccion de las filas
* @version 1.0, 01/9/2008
* @author Alejandro Sánchez
*/

 import mx.effects.Resize;
 import mx.effects.Move;

 import mx.collections.ArrayCollection;
 import mx.collections.IList;
    // Define the default property.
    [DefaultProperty("columns")]

  [Bindable]
  public var _rowNumber : int = 0;

  [Bindable]
  private var _dataProvider : Object;

  [Bindable]
  private var _expanded : Boolean;

  [Bindable]
  private var _columns : Array;

  [Bindable]
  public var _effecto : Boolean = false;

    private var _slow : Boolean = false;

  private var timer : Timer;

  /**
   * Inicializa las variables por debecto y visializa el componenete
   * por primera vez
   */
 
  private function init() : void
  {
   if(_expanded) expand();
   else collapse();
  }

  /**
   * Permite setear la variable booleana que dice si el datagrid esta
   * espandido o no
   */

  public function set expanded(value : Boolean) : void
  {
   if(value!=_expanded)
   {
    _expanded = value;
  
    invalidateSize();
    invalidateProperties();
    invalidateDisplayList();
   }
  }

  public function get expanded() : Boolean
  {
   return _expanded;
  }

  /**
   * La Default Property que recibe el datagrid para que se comporte como un
   * datagrid comun y corriente
   */

  public function set columns(value : Array) : void
  {
   if(value!=_columns)
    _columns = value;
  
  
  }

  public function get columns() : Array
  {
   return _columns;
  }

  /**
   * El datagrid debe cargarse de cualquier dataprovider que herede
   * de la clase List
   */

  public function set dataProvider(value : Object) : void
  {
   if(this._dataProvider!=value)
   {
    _dataProvider = value;

    invalidateSize();
    invalidateProperties();
    invalidateDisplayList();
   }
  }

  /**
   * Determina el numero de filas a mostrar inicialmente
   */

  public function set rowNumber(value : int) : void
  {
   if(_rowNumber!=value)
   {
    _rowNumber = value;
  
    invalidateSize();
    invalidateProperties();
    invalidateDisplayList();
   }
  }

  public function get rowNumber() : int
  {
  return _rowNumber;
  }

  public function get dataProvider() : Object
  {
  return _dataProvider;
  }

  /**
   * Funcion que permite expandir el DataGrid
   */

  public function expand() : void
  {
   _slow = true;
   botonCollapse.visible = true;
   boton.visible = false;

  var cont : int = 0;
  for each(var num : Object in _dataProvider)
   cont++;

   _rowNumber = cont;
 
   invalidateSize();
   invalidateProperties();
   invalidateDisplayList();
  }

  /**
   * Funcion que permite reducir el datagrid
   */

  public function collapse() : void
  {
   _slow = true;
   botonCollapse.visible = false;
   boton.visible = true;
 
     _rowNumber = 1;
   
     invalidateSize();
  invalidateProperties();
  invalidateDisplayList();

  }

  /**
   * Para realizar el binding con las principales propiedades
   */

 override protected function commitProperties():void
 {
  super.commitProperties();

  var cont : int = 0;
  for each(var num : Object in _dataProvider)
   cont++;

  this.setChildIndex(boton, this.numChildren-1);
  this.setChildIndex(botonCollapse, this.numChildren-1);

  if(cont > 1)
  {
    boton.visible = true;
   }
   else
   {
    boton.visible = false;
   }

 }

 override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
 {
  super.updateDisplayList(unscaledWidth, unscaledHeight);

  if((_slow)&&(unscaledHeight!=dataGrid.height + boton.height))
  {
   var eff : Resize = new Resize(this);
   eff.widthTo = dataGrid.width;
   eff.heightTo = dataGrid.height + boton.height;
   eff.duration = 400;
 
   var eff2 : Move = new Move(boton);
   eff2.yTo = dataGrid.height;
   eff2.duration = 400;
 
   var eff3 : Move = new Move(botonCollapse);
   eff3.yTo = dataGrid.height;
   eff3.duration = 400;

   eff2.play();
   eff3.play();
   eff.play();

  }
  else
  {
   dataGrid.width = unscaledWidth;
   this.height = dataGrid.height + boton.height;
 
   boton.x = dataGrid.width - boton.width;
   boton.y = dataGrid.height;
   botonCollapse.x = dataGrid.width - boton.width;
   botonCollapse.y = dataGrid.height;
  }

  }

]]>
</mx:Script>
<mx:Button id="boton" cornerRadius="0" width="18" height="18" click="expand()">
  <mx:icon>@Embed(source='../../../assets/button_expand.PNG')</mx:icon>
</mx:Button>
<mx:Button id="botonCollapse" cornerRadius="0" width="18" height="18" click="collapse()">
  <mx:icon>@Embed(source='../../../assets/button_collapse.PNG')</mx:icon>
</mx:Button>
      <mx:DataGrid id="dataGrid" dataProvider="{_dataProvider}"  rowCount="{_rowNumber}" columns="{_columns}">
      </mx:DataGrid>
</mx:Canvas>

Ejemplo