Skip to main content

[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" 即可下載喔!

Comments

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

    多謝你這篇ˋ
    原來他的程式碼可以下載!!!
    我也正在學flex
    這網站很炫!!!

    ReplyDelete

Post a Comment

Popular posts from this blog

[AIR] JoSiResize - Mobile 開發小工具

JoSiResizev0.6.0,Adobe AIR 3 runtime之前開發 tool app 的時候並沒有很深刻的體認到圖片素材的 resize 是一個很麻煩的事情...畢竟圖片使用量並不大,等到開發遊戲類的 app 才發現光處理不同螢幕尺寸的圖片素材是一個相當折磨人的工作。
因此 JoSiResize app 誕生了~~~原理是採用最小 scale 長寬比例不變的方式進行放大縮小。使用方法非常簡單,設定好變更的尺寸,接下來,將需要處理的圖片檔案全選直接拖曳到視窗內,畫面即會跳出預備儲存的檔案夾選擇畫面,確認後即開始轉檔。

PureMVC for Titanium Mobile

為了秉持著哪裡都要用 PureMVC 的想法,試著修改 PureMVC 官網上提供的 Javascript 版本給 Titanium 使用。
**source code**
有任何問題請上:Titanium Mobile 中文開發者論壇

建立 instance 的方法:使用 Puremvc 為 namespace
Ti.include('puremvc-js-1.0.js');
var c = Puremvc.clone( Puremvc.SimpleCommand );
var p = Puremvc.clone( Puremvc.Proxy, "TestProxy", "This is TestProxy's data" );
var m = Puremvc.clone( Puremvc.Mediator , "MainMediator" );

[Unity] erinylin.lazylib - Cookie for PlayerPrefs

有鑑於 PlayerPrefs 測試與版本更新問題,將大家都愛用的 PreviewLabs.PlayerPrefs 打包起來,製作重點還是以懶人為主,基本上 PlayerPrefs 資料更新與數量並不可能會有強烈衝擊效能的狀況產生,所以為了方便開發,就弄了一個視覺化工具,方便除錯用。

雖然 PreviewLabs.PlayerPrefs 作者都宣告放棄他們的版權,不過為了尊重程式,僅僅加入了兩個公用函式,其他並無更改。

內有:
Cookie ManagerCookie 用 DataObject 混合編輯 ScriptableObject執行階段除錯視窗工具當然還是有懶人常數檔案輸出資料版本控制,方便更新版後儲存資料更新功能其實很多,有興趣的請自行到 Github 下載並參考範例吧!