Conociendo Flex XII: Usando filtros dinámicos

.

Los filtros dinámicos son elementos de suma utilidad a la hora de construir interfaces interactivas. En este ejemplo se usa un slider horizontal que determina el rango de valores de stock a mostrar para el depósito seleccionado por el usuario.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="inicio();">
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;

private function inicio():void {
if (checkBox.selected) {
arreglo.filterFunction = sliderFilterFunc;
arreglo.refresh();
}
}

private var comb : Array =
[{label:"Deposito A",data:0},
{label:"Deposito B",data:1},
{label:"Deposito C",data:2}];

private function checkBox_change(evt:Event):void {
if (checkBox.selected) { arreglo.filterFunction = sliderFilterFunc;}
else { arreglo.filterFunction = null; }
arreglo.refresh();
}

private function slider_change(evt:SliderEvent):void {arreglo.refresh();}

private function sliderFilterFunc(item:Object):Boolean {
var bool:Boolean;
switch(vx.selectedItem.data){
case 0:
bool = checkData(item.Stock_Deposito_A);
break;
case 1:
bool = checkData(item.Stock_Deposito_B);
break;
case 2:
bool = checkData(item.Stock_Deposito_C);
break;
}
return bool;
}


private function checkData(num:Number):Boolean{
var minSlider:Number = slider.values[0];
var maxSlider:Number = slider.values[1];
if ((num >= minSlider)&&(num <= maxSlider))
return true;
else
return false;
}

]]>
</mx:Script>

<mx:ArrayCollection id="arreglo">
<mx:source>
<mx:Array>
<mx:Object elemento="Tornillo 3/4" Stock_Deposito_A="11" Stock_Deposito_B="120" Stock_Deposito_C="33"/>
<mx:Object elemento="Tornillo 1/2" Stock_Deposito_A="22" Stock_Deposito_B="10" Stock_Deposito_C="98"/>
<mx:Object elemento="Lima" Stock_Deposito_A="433" Stock_Deposito_B="17" Stock_Deposito_C="30"/>
<mx:Object elemento="Escofina" Stock_Deposito_A="54" Stock_Deposito_B="40" Stock_Deposito_C="11"/>
<mx:Object elemento="Serrucho" Stock_Deposito_A="50" Stock_Deposito_B="23" Stock_Deposito_C="89"/>
<mx:Object elemento="Sierra" Stock_Deposito_A="122" Stock_Deposito_B="130" Stock_Deposito_C="80"/>
<mx:Object elemento="Martillo" Stock_Deposito_A="70" Stock_Deposito_B="66" Stock_Deposito_C="30"/>
<mx:Object elemento="Maza" Stock_Deposito_A="34" Stock_Deposito_B="50" Stock_Deposito_C="120"/>
<mx:Object elemento="Tenaza" Stock_Deposito_A="19" Stock_Deposito_B="92" Stock_Deposito_C="35"/>
<mx:Object elemento="Pinza" Stock_Deposito_A="15" Stock_Deposito_B="10" Stock_Deposito_C="89"/>
</mx:Array>
</mx:source>
</mx:ArrayCollection>

<mx:ApplicationControlBar dock="true">
<mx:HBox width="100%">
<mx:Label text="filtro activo" />
<mx:CheckBox id="checkBox" selected="true" change="checkBox_change(event);" />
<mx:Label text="filtrar por" />
<mx:ComboBox id="vx" dataProvider="{comb}"/>
<mx:Label text="Defina rango de valores" />
<mx:HSlider id="slider"
minimum="0" maximum="200"
values="[0,200]" labels="[0,100,200]"
thumbCount="2" showTrackHighlight="true"
snapInterval="1" tickInterval="25"
liveDragging="true" change="slider_change(event);" />
</mx:HBox>
</mx:ApplicationControlBar>

<mx:Panel status="{arreglo.length}/{arreglo.source.length} objetos">
<mx:DataGrid id="grilla" dataProvider="{arreglo}" verticalScrollPolicy="on" width="600"/>
</mx:Panel>

</mx:Application>