martes, mayo 26, 2009

Conociendo Flex X: Buscar cadenas en un arreglo

.
Flex posee una poderosa función de búsqueda de cadenas de texto denominada "search". En este ejemplo (original de Boyzoid) se define un arreglo, que se carga automáticamente cuando se define la interfase, y sobre éste se pueden hacer consultas con resultados tipo filtro sobre la columna "club".


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="cargaDatos()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var lista:ArrayCollection ;

private function cargaDatos():void{
lista= new ArrayCollection([
{club:"Defensores Unidos", ciudad:"Quilmes"},
{club:"Gimnasia", ciudad:"Paraná"},
{club:"Jóvenes Unidos", ciudad:"Paraná"},
{club:"Club Amanecer", ciudad:"Mercedes"},
{club:"Gimnasia", ciudad:"Mercedes"},
{club:"Club Unidos", ciudad:"Pilar"},
{club:"Defensores", ciudad:"Paraná"},
{club:"Saladero", ciudad:"Paraná"},
{club:"Sacachispas", ciudad:"Pilar"},
{club:"Juventud Palermitana", ciudad:"Paraná"},
])
}


private function filterDemo():void{
lista.filterFunction = searchDemo;
lista.refresh();
}

private function searchDemo(item:Object):Boolean{
var isMatch:Boolean = false
if(item.club.toLowerCase().search(search.text.toLowerCase()) != -1){
isMatch = true
}
return isMatch;

}


private function clearSearch():void{
lista.filterFunction = null;
lista.refresh();
search.text = '';
}
]]>

</mx:Script>
<mx:Form>
<mx:FormItem label="Buscar" direction="horizontal">
<mx:TextInput id="search" change="filterDemo()" />
<mx:Button label="Limpiar" click="clearSearch()" />
</mx:FormItem>
</mx:Form>
<mx:DataGrid dataProvider="{lista}" width="300" height="300">
<mx:columns>
<mx:DataGridColumn headerText="Club" dataField="club" />
<mx:DataGridColumn headerText="Ciudad" dataField="ciudad" />
</mx:columns>
</mx:DataGrid>


</mx:Application>



No hay comentarios.: