[Flex] flexstore 的 find 功能補完

關於 Adobe flexstore 這個範例應該對學習過 Flex 的人是無人不知無人不曉，剛好有人問我如何將範例中的 Products / Find 功能補上，以下就是一個簡單改法：
1. 修改 samples.flexstore.ProductFilter.as
先加入一個公開屬性 searchText:String

public var searchText:String;


補上 find function

public function find(product:Product):Boolean
{
var str:RegExp=new RegExp(searchText, "i");
return (searchText == "") ? true :
(str.test(String(product.name))) ||
(str.test(String(product.price))) ||
(str.test(String(product.series))) ||
(str.test(product.description)) ||
(str.test(product.highlight1)) ||
(str.test(product.highlight2)) ||
(str.test( "Tri-band" )) ||
(str.test("Camera")) ||
(str.test("Video"));
}


2. 修改 ProductFilterPanel.mxml
加入 callFind event function

private function callFind(event:Event):void{
var filter:ProductFilter = new ProductFilter();
filter.searchText = searchText.text;
var e:ProductFilterEvent =
new ProductFilterEvent( filter, false);
dispatchEvent(e);
currentState = "showingThumbnails";
}
在 Go 的按鈕加上 click = "callFind(evenr)"，並對 search input field 命名

<mx:HBox width="100%">
<mx:TextInput styleName="glass" width="100%" id="searchText"/>
<mx:Button styleName="glass" label="Go" click="callFind(event)"/>
</mx:HBox>
<code>


3. 修改 ProductCatalogPanel.mxml
在 filter function 內加上 find 的判定，其他直接照貼...

if (productFilter.searchText)
{
if (productFilter.find(product))
{
accepted[product]=true;
thumb.alpha=1;
count++;
}else
{
accepted[product]=false;
if (thumb.alpha == 1) //only fade if we hadn't started
{
targets.push(thumb);
}
}
}

完整的 filter function:

public function filter(productFilter:ProductFilter, live:Boolean):void
{
currentState="browse";
thumbnailState="browse";
var count:int=0;
var n:int=thumbnails.length;
var fadeOut:Fade=new Fade();
fadeOut.alphaFrom=1;
fadeOut.alphaTo=.1;
var targets:Array=[];
for (var i:int=0; i < n; i++)
{
var thumb:ProductCatalogThumbnail=thumbnails[i];
var product:Product=thumb.product;
//if FIND ------
if (productFilter.searchText)
{
if (productFilter.find(product))
{
accepted[product]=true;
thumb.alpha=1;
count++;
}else
{
accepted[product]=false;
if (thumb.alpha == 1) //only fade if we hadn't started
{
targets.push(thumb);
}
}
} //---------
else
{
if (productFilter.accept(product))
{
accepted[product]=true;
thumb.alpha=1;
count++;
}
else
{
accepted[product]=false;
if (live)
{
thumb.alpha=.1;
}
else if (thumb.alpha == 1) //only fade if we hadn't started
{
targets.push(thumb);
}
}
}
}
productFilter.count=count;
filterCount=count;

if (targets.length > 0)
{
fadeOut.targets=targets;
fadeOut.play();
fadeOut.addEventListener(EffectEvent.EFFECT_END, function(event:EffectEvent):void
{
layoutCatalog();
});
}
else if (!live)
{
layoutCatalog();
}
}


flexstore 的 source 在 live demo 頁面上點選滑鼠右鍵 "view source" 即可下載喔！