云自無心水自閑

          天平山上白云泉,云自無心水自閑。何必奔沖山下去,更添波浪向人間!
          posts - 288, comments - 524, trackbacks - 0, articles - 6
            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理

          當服務端或者客戶端的邏輯變化后,有很多種方法來更新視圖。我比較推薦使用ModelLocator策略,主要是使用Flex的綁定功能。
          通常你的視圖與ModelLocator的屬性綁定,這些屬性可以由命令或者其他的業務邏輯或者其他視圖所改變。而一旦這些屬性發生了變化,所有與它們綁定的視圖都隨之變化。
          因為很多的Cairngorm的例子都想做得淺顯易懂,因此經常是簡單地將這些屬性做為ModelLocator中的一個暴露給外界的成員變量。而當Cairngorm的應用變得龐大的時候,這往往是不夠的。在此我將會專門針對這個問題展示一個例子。這個例子是一個股票市場的顯示表。
          第一次迭代:將應用運轉起來
          首先看一下Cairngorm所主張的MVC模式。目前股票市場顯示表將只包含一些簡單的UI控制。點擊“GetQuote”來派發Cairngorm事件,調用命令來請求一個新報價。StockMarketPod.mxml中在Button的Click事件中派發Cairngorm事件。

          < mx:Button? label ="Get?Quote" ?click ="getQuoteForSymbol();" />

          相應的腳本代碼:

          ?
          import?org.nevis.cairngorm.samples.dashboard.events.GetStockQuoteEvent;????????????????????????????????????
          private?function?getQuoteForSymbol()?:?void
          {
          ????var?event?:?GetStockQuoteEvent?
          =?new?GetStockQuoteEvent(?symbolTextInput.text?);
          ????dispatchEvent(?event?);
          }

          GetStockQuoteCommand響應并處理這個Cairngorm事件,請求一個業務代理類來報價。

          public?function?execute(?event?:?CairngormEvent?)?:?void
          {
          ????var?symbol?:?String?
          =?GetStockQuoteEvent(?event?).symbol;
          ????var?delegate?:?StockMarketDelegate?
          =?new?StockMarketDelegate(?this?);
          ????delegate.getQuoteForSymbol(?symbol?);
          }


          在實際情況中,需要進行一個遠程的服務器端的調用,在Demo中,為簡化起見,我注釋掉了遠程調用的相關代碼。這里StockMarketDelegate.as只是對命令進行回調。

          public?function?StockMarketDelegate(?responder?:?Responder?)
          {
          ????
          //disabled?for?demo
          ????
          //this.service?=?ServiceLocator.getInstance().getService(?"stockMarketDelegate"?);
          ????this.responder?=?responder;
          }

          ????????
          public?function?getQuoteForSymbol(?symbol?:?String?)?:?void
          {
          ????
          //disabled?for?demo
          ????
          //var?call?:?AsyncToken?=?service.getQuoteForSymbol(?symbol?);
          ????
          //call.resultHandler?=?responder.onResult;
          ????
          //call.faultHandler?=?responder.onFault;
          ????if(?symbol?==?"fail"?)
          ????
          {
          ????????responder.onFault();
          ????}

          ????
          else
          ????
          {
          ????????responder.onResult();
          ????}

          }

          我們的StockMarketPod視圖只需要兩條消息,
          1. 股票的報價
          2. 錯誤消息
          因為現在是第一次迭代過程中,處理比較簡單,因此使用ModelLocator的成員來解決。

          public?var?lastStockQuote?:?Number;
          public?var?stockQuoteError?:?String;


          在此Demo中,GetStockQuoteCommand命令模擬返回相應的結果。

          public?function?onResult(?event?:?ResultEvent?=?null?)?:?void
          {
          ????
          //simulate?a?result?from?service
          ????var?stockQuote?:?Number?=?Math.random()?*?50?+?5;
          ????model.lastStockQuote?
          =?stockQuote;
          ????model.stockQuoteError?
          =?"";
          ?}

          ????????
          public?function?onFault(?event?:?FaultEvent?=?null?)?:?void
          {
          ????model.lastStockQuote?
          =?NaN;
          ????model.stockQuoteError?
          =?"An?error?occured.";
          }

          StockMarketPod視圖綁定這些成員并進行一些格式化的處理。

          <mx:FormItem?label="Symbol">
          ????
          <mx:Label?text="{?formatQuote(?model.lastStockQuote?)?}"/>
          </mx:FormItem>
          <mx:FormItem>
          ????
          <mx:Label?text="{?model.stockQuoteError?}"/>
          </mx:FormItem>

          格式化函數的腳本

          private?function?formatQuote(?quote?:?Number?)?:?String
          {
          ????
          return?(?isNaN(?quote?)?)???""?:?String(?quote?);
          }


          現在我們來進行重構并將一些功能從視圖中抽取出來到一個可以進行單元測試的工具類中。

          第二次迭代,創建符合需求的業務邏輯
          現在我們已經有一個可以運行的最簡單的應用。當你的應用變得龐大后,將會有很多的限制。你會發現你的ModelLocator非常的臃腫,以致于有時候,你都找不到你所要的成員。甚至會有命名沖突的事情發生。
          一個普通的重構方法是封裝你的用例圖中的成員成為一個業務對象。這個業務對象能夠表達業務上下文中需要的視圖信息。你可以把業務對象設計得最適合用例圖的粒度。在一個大型的應用中,你可能會設計一系列的業務對象來表達你的用例。你的視圖將會綁定這些對象或者這些對象的屬性上。通過這種方法,ModelLocator與其目標之間的聯系更容易,開發者更容易掌握業務邏輯所包含的內容。
          在這個Demo中,我們可以把astStockQuote和stockQuoteError這兩個成員封裝到一個業務對象中。

          package?org.nevis.cairngorm.samples.dashboard.model
          {
          ????
          public?class?StockQuote
          ????
          {
          ????????[Bindable]
          ????????
          public?var?lastStockQuote?:?Number;
          ????????[Bindable]
          ????????
          public?var?stockQuoteError?:?String;
          ????}

          }


          這樣在ModelLocator中,我們只需要定義一個成員
          public var stockQuote : StockQuote = new StockQuote ();
          我們的視圖也相應修改為:

          <mx:FormItem?label="Symbol">
          ????
          <mx:Label?text="{?formatQuote(?model.stockQuote.lastStockQuote?)?}"/>
          </mx:FormItem>
          <mx:FormItem>
          ????
          <mx:Label?text="{?model.stockQuote.stockQuoteError?}"/>
          </mx:FormItem>


          主站蜘蛛池模板: 仙游县| 石棉县| 高邑县| 镇康县| 六盘水市| 富平县| 罗江县| 安新县| 洛浦县| 广水市| 南宫市| 新兴县| 泽普县| 昆明市| 武山县| 攀枝花市| 望奎县| 土默特右旗| 武川县| 永和县| 博罗县| 措美县| 望奎县| 三原县| 章丘市| 永和县| 合川市| 东乡族自治县| 休宁县| 金华市| 武乡县| 册亨县| 盘山县| 兴山县| 调兵山市| 临朐县| 四会市| 广汉市| 巴中市| 楚雄市| 南宁市|