云自無心水自閑

天平山上白云泉，云自無心水自閑。何必奔沖山下去，更添波浪向人間！

posts - 288, comments - 524, trackbacks - 0, articles - 6

Cairngorm示例--業(yè)務(wù)邏輯如何管理視圖（III）

Posted on 2006-12-29 00:36 云自無心水自閑閱讀(913) 評論(0) 編輯收藏所屬分類: Flex 、Cairngorm 、Flex2

現(xiàn)在我們將增加驗證、格式化和一些其他的功能。
第四次迭代--添加功能
現(xiàn)在我們回過頭來看那個單視圖的應(yīng)用，增加一點真實性，我們模擬一下遠(yuǎn)程服務(wù)有一點延時。我們在Delegate中使用flash.utils.setTimeOut來模擬延時。
通常，當(dāng)遠(yuǎn)程服務(wù)在處理時，UI會展現(xiàn)一個進(jìn)度條，禁用一部分控件，讓用戶明白不能再派發(fā)新的請求。在我們的例子中在遠(yuǎn)程服務(wù)在處理的時候，我們會禁用“Get Quote”按鈕。完成這一點很容易，只需要在Model對象的StockQuote類中增加一個成員isPending，把它定義為一個bool形，這樣可以直接應(yīng)用于綁定。

[Bindable]

public ?var?isPending?:?Boolean;

增加驗證
我們現(xiàn)在添加對股票報價的驗證功能，對于這一點，我們可以使用mx.validators.StringValidator來完成這一功能。應(yīng)用中這兩個參數(shù)共同控制按鈕的有效性。這樣可以在Model對象中設(shè)置一個isValid屬性，用于組合這兩參數(shù)。

private ?function?validate()?:? void

{

????isValid? = ?(?isSymbolValid? && ? ! isPending?);

}

isSymbolValid是一個屬性，存放StringValidator的結(jié)果。
在StockMarketPod.mxml中添加mx:StringValidator這個Tag

< mx:StringValidator?

???? minLength ="2" ?triggerEvent ="change" ?

????source ="{?symbolTextInput?}" ?property ="text"

????valid ="stockQuote.validateSymbol(?true?);" ?

????invalid ="stockQuote.validateSymbol(?false?);" />

從視圖中直接調(diào)用Model對象不符合MVC原則，因為視圖原則上只能派發(fā)事件。但在這個例子中，這樣已經(jīng)足夠好了。

增加格式化
我們將股票報價以金額的方式進(jìn)行展示，在StockMarketPod.mxml中增加一個formatter

< mx:CurrencyFormatter?

???? id ="standardEuroFormatter" ??

????currencySymbol ="$" ?precision ="2" />

將formatter的結(jié)果進(jìn)行綁定

< mx:Label? text ="{?standardEuroFormatter.format(?stockQuote.lastStockQuote?)?}" />

現(xiàn)在看一下完整的StockQuote類

package ?com.adobe.cairngorm.samples.dashboard.model

{

???? public ? class ?StockQuote

???? {

????????[Bindable]

???????? public ?var?lastStockQuote?:?Number;

????????[Bindable]

???????? public ?var?isValid?:?Boolean;

????????[Bindable]

???????? public ?var?statusMessage?:?String;

????????????????

???????? private ?var?_isPending?:?Boolean;

???????? private ?var?isSymbolValid?:?Boolean;

????????????????

????????[Bindable]

???????? public ?function?get?isPending()?:?Boolean

???????? {

???????????? return ?_isPending;

????????}

????????

???????? public ?function?set?isPending(?value?:?Boolean?)?:? void

???????? {

????????????_isPending? = ?value;

????????????validate();

????????}

????????????

???????? public ?function?validateSymbol(?isValid?:?Boolean?)?:? void

???????? {

????????????isSymbolValid? = ?isValid;

????????????validate();

????????}

????????

???????? private ?function?validate()?:? void

???????? {

????????????isValid? = ?(?isSymbolValid? && ? ! isPending?);

????????} ????????

????}

}

其中isPending屬性的值由GetStockQuoteCommand控制

private ?var?model?:?ModelLocator? = ?ModelLocator.getInstance();

private ?var?stockQuote?:?StockQuote? = ?model.stockQuote;

?????????

public ?function?execute(?event?:?CairngormEvent?)?:? void

{

????stockQuote.isPending? = ? true ;

?????????????

????var?stockQuoteEvent?:?GetStockQuoteEvent? = ?GetStockQuoteEvent(?event?);??????????

????var?symbol?:?String? = ?stockQuoteEvent.symbol;

????var?delegate?:?StockMarketDelegate? = ? new ?StockMarketDelegate(? this ?);

????delegate.getQuoteForSymbol(?symbol?);????

}

????????

public ?function?onResult(?event?:? * ? = ? null ?)?:? void

{

???? // for?demo?purpose:?event?would?normally?be?an?event?object?of?remote?service?result.????????????

????stockQuote.lastStockQuote? = ?event?as?Number;????????????

????stockQuote.isPending? = ? false ;

????stockQuote.statusMessage? = ? "" ;

}

????????

public ?function?onFault(?event?:? * ? = ? null ?)?:? void

{

????stockQuote.lastStockQuote? = ?NaN;

????stockQuote.statusMessage? = ? " Quote?retrieval?error. " ;

????stockQuote.isPending? = ? false ;

}

最后看一下StockMarketPod.mxml的全部代碼

<? xml?version="1.0"?encoding="utf-8" ?>

< mx:Panel?

???? xmlns:mx ="http://www.adobe.com/2006/mxml"

????xmlns:util ="com.adobe.cairngorm.samples.dashboard.util.*" >

????????

???? < mx:Script >

???????? <![CDATA[

????????????import?com.adobe.cairngorm.control.CairngormEventDispatcher;

????????????import?com.adobe.cairngorm.samples.dashboard.model.StockQuote;

????????????import?com.adobe.cairngorm.samples.dashboard.events.GetStockQuoteEvent;????

????????????

????????????[Bindable]

????????????public?var?stockQuote?:?StockQuote;

????????????

????????????private?function?getQuoteForSymbol()?:?void

????????????{

????????????????var?event?:?GetStockQuoteEvent?=?new?GetStockQuoteEvent(?symbolTextInput.text?);

????????????????CairngormEventDispatcher.getInstance().dispatchEvent(?event?);

????????????}

???????? ]]>

???? </ mx:Script >

????

???? < mx:CurrencyFormatter?

???????????????? id ="standardEuroFormatter" ??

????????currencySymbol ="$" ?precision ="2" />

????????

???? < mx:StringValidator?

???????? minLength ="2" ?triggerEvent ="change" ?

????????source ="{?symbolTextInput?}" ?property ="text"

????????valid ="stockQuote.validateSymbol(?true?);" ?

????????invalid ="stockQuote.validateSymbol(?false?);" />

????

???? < mx:Form >

????

???????? < mx:FormItem? label ="Symbol" >

???????????? < mx:TextInput?

???????????????? id ="symbolTextInput" />

???????????? < mx:Button?

???????????????? label ="Get?Quote" ?

????????????????enabled ="{?stockQuote.isValid?}" ?

????????????????click ="getQuoteForSymbol();" />

???????? </ mx:FormItem >

????????????????

???????? < mx:FormItem? label ="Price?Quote" >

???????????? < mx:Label? text ="{?standardEuroFormatter.format(?stockQuote.lastStockQuote?)?}" />

???????????? < mx:Label? text ="{?stockQuote.statusMessage?}" />

???????? </ mx:FormItem >

????????

???? </ mx:Form > ????

</ mx:Panel >

此視圖中我們不需要使用ModelLocator，而是使用StockQuote作為參數(shù)傳入StockMarketPod.mxml
引用視圖的代碼

< mx:Script >

???? <![CDATA[

????????import?com.adobe.cairngorm.samples.dashboard.model.ModelLocator;

????????import?com.adobe.cairngorm.samples.dashboard.model.StockQuote;

????????????????????????????????????

????????[Bindable]

????????private?var?model?:?ModelLocator?=?ModelLocator.getInstance();

????????[Bindable]

????????private?var?stockQuote?:?StockQuote?=?model.stockQuote;????

???? ]]>

</ mx:Script >

< view:StockMarketPod?

???? stockQuote ="{?stockQuote?}" ?

????title ="Stockmarket?Pod" />

只傳遞需要的信息給視圖是一個比較好的做法，而盡量少使用ModelLocator這樣的全局變量，這樣也使用視圖重用性更高。

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發(fā)表評論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: 象創(chuàng)建JSF組件一樣創(chuàng)建Flex組件 Adobe Flex3正式發(fā)布了 ViewStack的大小問題 amfphp 1.9 beta 介紹 Flex應(yīng)用啟動背后的故事 Flex中一個動態(tài)修改Tree節(jié)點標(biāo)簽的例子整理了一下Cairngorm 2.1版本的新變化 FDS（Flex Data Service）改名為LiveCycle Data Service Flex.org正式改版了 Flex lib 出了新版本

云自無心水自閑

Cairngorm示例--業(yè)務(wù)邏輯如何管理視圖（III）

日歷

留言簿(3)

隨筆分類

隨筆檔案

最新隨筆

積分與排名

最新評論

閱讀排行榜

評論排行榜