Cuando se desarrollan aplicaciones que deben mostrar un gran número de datos al usuario, es necesario que estén organizados de la mejor manera posible, de modo que el usuario invierta el menor tiempo posible en encontrarlos. La arquitectura de los componentes de Flex y el lenguaje ActionScript 3 pueden ayudarnos en esta tarea.
En primer lugar, veamos cómo funcionan los dataProvider de los componentes de Flex: tanto el dataProvider de un componente relativamente sencillo, como List, como el de un componente bastante más avanzado, como el DataGrid, es una función getter/setter que convierte los datos que le pasamos en cualquier formato a un objeto que extiende a la clase ListCollectionView (básicamente XMLListCollection si proviene de datos con formato XML y ArrayCollection en otro caso), que proporciona funcionalidades muy interesantes para manejar los datos. Por tanto, si tengo en Flex algo como esto:
Código :
<mx:List id="lista" width="205"> <mx:dataProvider> <mx:Array> <mx:String>unoZ</mx:String> <mx:String>dosY</mx:String> <mx:String>tresX</mx:String> <mx:String>cuatroW</mx:String> <mx:String>cincoV</mx:String> <mx:String>seisU</mx:String> <mx:String>sieteT</mx:String> <mx:String>ochoS</mx:String> <mx:String>nueveR</mx:String> </mx:Array> </mx:dataProvider> </mx:List>
Código :
private function funcionParaFiltrar (itemParaFiltrar : Object) : Boolean
Código :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:Script>
<![CDATA[
private function filtrar (ev : Event) : void
{
lista.dataProvider.filterFunction = filtroTexto;
lista.dataProvider.refresh();
}
//
//
private function filtroTexto (item : Object) : Boolean
{
//Conviene utilizar siempre la función toString() y poner el data type de item a Object aunque sepamos que
//se trata de una cadena, ya que así podremos utilizar la misma función con cualquier otro tipo de datos.
return item.toString().substr(0, filtro_txt.text.length).toLowerCase() == filtro_txt.text.toLowerCase()
}
]]>
</mx:Script>
<mx:VBox height="100%">
<mx:HBox width="100%">
<mx:Label text="Filtro:"/>
<mx:TextInput id="filtro_txt" change="filtrar (event)"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:List id="lista" width="205">
<mx:dataProvider>
<mx:Array>
<mx:String>unoZ</mx:String>
<mx:String>dosY</mx:String>
<mx:String>tresX</mx:String>
<mx:String>cuatroW</mx:String>
<mx:String>cincoV</mx:String>
<mx:String>seisU</mx:String>
<mx:String>sieteT</mx:String>
<mx:String>ochoS</mx:String>
<mx:String>nueveR</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:List>
</mx:VBox>
</mx:Application>
Código :
private function funcionParaOrdenar (item1 : Object , item2 : Object , camposQueEntranEnElOrden : Array = null) : int
{
//Devuelve -1 si item1 va primero.
//Devuelve 1 si item2 va primero.
//Devuelve 0 si da igual.
}
Código :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:Script>
<![CDATA[
import mx.collections.Sort;
private function filtrar (ev : Event) : void
{
lista.dataProvider.filterFunction = filtroTexto;
lista.dataProvider.refresh();
}
private function ordenar (ev : Event) : void
{
// lista.dataProvider.sdsadfd;
var sort : Sort = new Sort ()
if (ev.target == ordenarUltimo_btn)
{
sort.compareFunction = ordenUltimaLetra;
}else if (ev.target == ordenarRandom_btn)
{
sort.compareFunction = ordenAleatorio;
}
lista.dataProvider.sort = sort;
lista.dataProvider.refresh ();
}
private function filtroTexto (item : Object) : Boolean
{
return item.toString().substr(0, filtro_txt.text.length).toLowerCase() == filtro_txt.text.toLowerCase()
}
private function ordenUltimaLetra (a : Object , b : Object , fields : Array = null) : int
{
var lastChar1 : String = a.toString().charAt(a.toString().length-1)
var lastChar2 : String = b.toString().charAt(b.toString().length-1);
if (lastChar1 > lastChar2)
{
return 1;
}else if (lastChar1 < lastChar2)
{
return -1;
}else {
return 0;
}
}
private function ordenAleatorio (a : Object , b : Object , fields : Array = null) : int
{
//Esto devuelve siempre -1 o 1 ya que Math.round(Math.random() es 0 o 1 al 50%
return (Math.round(Math.random()) * 2) - 1;
}
]]>
</mx:Script>
<mx:VBox height="100%">
<mx:HBox width="100%">
<mx:Label text="Filtro:"/>
<mx:TextInput id="filtro_txt" change="filtrar (event)"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:List id="lista" width="205">
<mx:dataProvider>
<mx:Array>
<mx:String>unoZ</mx:String>
<mx:String>dosY</mx:String>
<mx:String>tresX</mx:String>
<mx:String>cuatroW</mx:String>
<mx:String>cincoV</mx:String>
<mx:String>seisU</mx:String>
<mx:String>sieteT</mx:String>
<mx:String>ochoS</mx:String>
<mx:String>nueveR</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:List>
<mx:VBox height="100%">
<mx:Button id="ordenarUltimo_btn" label="Orden por última letra" click="ordenar (event)" width="100%"/>
<mx:Button id="ordenarRandom_btn" label="Orden aleatorio" click="ordenar (event)" width="100%"/>
</mx:VBox>
</mx:HBox>
</mx:VBox>
</mx:Application>
