Search This Blog

2009-11-23

Flex Tutorials 10-Filter Function in Adobe Flex

Create foodlist.xml in Src\assets\categorylist.xml folder
<?xml version="1.0" encoding="utf-8"?>

<list>
<food>

<food_id>1</food_id>
<category_name>Korean</category_name>
<product_name>Kim Chi</product_name>
<product_price>.99</product_price>
<quantity>0</quantity>
</food>
<food>

<food_id>11</food_id>
<category_name>Indian</category_name>
<product_name>Daal</product_name>
<product_price>.99</product_price>
<quantity>0</quantity>

</food>
<food>

<food_id>2</food_id>
<category_name>Indian</category_name>
<product_name>Aloo Gobi</product_name>
<product_price>1.99</product_price>
<quantity>0</quantity>

</food>
<food>
<food_id>3</food_id>
<category_name>Thai</category_name>
<product_name>Pad Thai</product_name>
<product_price>3.99</product_price>
<quantity>0</quantity>
</food>
<food>

<food_id>4</food_id>
<category_name>Japanese</category_name>
<product_name>Tempura</product_name>
<product_price>2.99</product_price>
<quantity>0</quantity>
</food>
<food>

<food_id>5</food_id>
<category_name>Ethiopian</category_name>
<product_name>Flat Bread</product_name>
<product_price>.99</product_price>
<quantity>0</quantity>

</food>
<food>

<food_id>7</food_id>
<category_name>Japanese</category_name>
<product_name>Sashimi</product_name>
<product_price>5.99</product_price>
<quantity>0</quantity>

</food>
</list>

Mxmlcode:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="simpletestCat.send();simpletestFood.send()" >

<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.collections.ArrayCollection;
[Bindable]
public var categoryList:ArrayCollection;
[Bindable]
public var foodList:ArrayCollection;
private function filterByCategory():void{
foodList.filterFunction = catFilter;
foodList.refresh();
}
private function catFilter(item:Object):Boolean{
if(categorySelect.selectedItem == "All") {
return true;
}else{
return item.category_name == categorySelect.selectedItem.category_name;
}

}

]]>
</mx:Script>

<mx:HTTPService id="simpletestCat"
url="assets\categorylist.xml"
result="categoryList = simpletestCat.lastResult.list.category;categoryList.addItemAt('All', 0);categorySelect.selectedIndex=0"/>
<mx:HTTPService id="simpletestFood"
url="assets\foodlist.xml"
result="foodList = simpletestFood.lastResult.list.food"/>

<mx:ComboBox id="categorySelect"
dataProvider="{categoryList}"
labelField="category_name"
change="filterByCategory()"/>
<mx:List id="foodListBox"
dataProvider="{foodList}"
labelField="product_name"
width="200"/>

</mx:Application>

Output:

No comments: