云自无心水自闲

首先在这个版本中，修正了数百个Bug

1. 添加对Mac的支持
2. 支持Eclipse 3.2，而不是仅仅支持3.1
3. 运行时的CSS支持
4. 增加了一个Mercury的插件，支持自动测试
5. 其他一些很棒的功能：包括FlashType的字体和ASDoc的支持。

这个函数只是一个示例函数，演示如何遍历一个Tree。
此函数严格说起来其实是两个函数：上半部分用于回溯父节点，下半部分递归遍历子节点

在Flex的开发过程中，尤其是在使用Cairngorm的时候，总会遇到需要在Model的属性值改变后，需要调用一个指定的函数。传统的解决方法是使用一个Setter方法，在这个方法中首先对属性赋值，然后调用指定的函数，比如：

---------------------------
[ChangeEvent("deleteEnabledChange")]
public function get deleteEnabled() : Boolean {
return _deleteButtonVisible;
}

public function set deleteEnabled(value : Boolean) : Void {
_deleteButtonVisible = value;
SimpleButton(deleteButton)._visible = false;
dispatchEvent(new Event("deleteEnabledChange", this));
}
--------------

但是现在我们有一个更简洁的解决之道
首先添加这样一个类
package com.adobe.ac.util
{
   public class Observe
   {
      public var handler : Function;
 
      public function set source( source : * ) : void
      {
         handler.call();
      }
   }
}
然后就可以使用这个作为标签了。
<util:Observe source="{ model.myProperty }"
              handler="{ this.myFunction }"/>
使用了这样的一个标签后，今后嘦是对model.myProperty进行赋值，就会调用myFunction
这个号称世上最小的标签是不是很好用啊？

现在我们将增加验证、格式化和一些其他的功能。
第四次迭代--添加功能
现在我们回过头来看那个单视图的应用，增加一点真实性，我们模拟一下远程服务有一点延时。我们在Delegate中使用flash.utils.setTimeOut来模拟延时。
通常，当远程服务在处理时，UI会展现一个进度条，禁用一部分控件，让用户明白不能再派发新的请求。在我们的例子中在远程服务在处理的时候，我们会禁用“Get Quote”按钮。完成这一点很容易，只需要在Model对象的StockQuote类中增加一个成员isPending，把它定义为一个bool形，这样可以直接应用于绑定。

[Bindable]
public  var isPending : Boolean;

增加验证
我们现在添加对股票报价的验证功能，对于这一点，我们可以使用mx.validators.StringValidator来完成这一功能。应用中这两个参数共同控制按钮的有效性。这样可以在Model对象中设置一个isValid属性，用于组合这两参数。

private  function validate() :  void
{
    isValid  =  ( isSymbolValid  &&   ! isPending );
}

isSymbolValid是一个属性，存放StringValidator的结果。
在StockMarketPod.mxml中添加mx:StringValidator这个Tag

< mx:StringValidator 
     minLength ="2"  triggerEvent ="change"  
    source ="{ symbolTextInput }"  property ="text"
    valid ="stockQuote.validateSymbol( true );"  
    invalid ="stockQuote.validateSymbol( false );" />

从视图中直接调用Model对象不符合MVC原则，因为视图原则上只能派发事件。但在这个例子中，这样已经足够好了。

增加格式化
我们将股票报价以金额的方式进行展示，在StockMarketPod.mxml中增加一个formatter

< mx:CurrencyFormatter 
     id ="standardEuroFormatter"   
    currencySymbol ="$"  precision ="2" />
将formatter的结果进行绑定
< mx:Label  text ="{ standardEuroFormatter.format( stockQuote.lastStockQuote ) }" />

现在看一下完整的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作为参数传入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这样的全局变量，这样也使用视图重用性更高。

上次介绍了如何在业务逻辑中改变视图，这次讲解一种新方法。我们的股票市场显示图将扩展为多股票报价查询器。我们将看到业务逻辑是怎么调整每个视图的。而且我们还会接触到无状态命令是怎么使得事情变得简单。
第三次迭代--创建业务逻辑管理多视图
我们经常可以发现会有很多个类型一样的视图，其背后的功能也非常类似。每个视图显示一个Model对象。这些视图可以在开始时从管理对象处请求一个Model对象。比如：我们的StockMarketDashboard.mxml可以进行这样的添加：

< view:StockMarketPod 
     quoteId ="quote1"  
    title ="Stockmarket first pod" />
< view:StockMarketPod 
     quoteId ="quote2"  
    title ="Stockmarket second pod" />
< view:StockMarketPod 
     quoteId ="quote3"  
    title ="Stockmarket third pod" />
< view:StockMarketPod 
     quoteId ="quote4"  
    title ="Stockmarket fourth pod" />

注意：视图需要传递一些唯一的标识，我们将这些标识添加到StockQuote类。

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

管理对象StockQuoteManager，在ModelLocator实例中初始化。但是StockQuoteManager会是一个怎样的对象呢？
通常我使用Hashmap来实现，其键值就是视图中的唯一标识符。在构造函数中我们可以初始化这个Hashmap，Flex2中我们使用flash.utils.Dictionary

public  function StockQuoteManager() 
{
    stockQuotes  =   new  Dictionary();
}

getStockQuote方法返回一个stockQuote对象

public  function getStockQuote( quoteId : String ) : StockQuote
{
    var key : String  =  quoteId;
     if ( stockQuotes[ key ]  ==   null  )
     {
        var stockQuote : StockQuote  =   new  StockQuote();
        stockQuotes[ key ]  =  stockQuote;
    }
     return  StockQuote( stockQuotes[ key ] );
}

StockMarketPod.mxml几乎没有什么改动。只需要将那个唯一的标识符发送给命令，因为命令需要从管理对象处取得StockQuote对象。所以GetStockQuoteEvent类多了一个quoteId属性。
在GetStockQuoteCommand中，需要将唯一标识符保存在一个成员变量中

private  var model : ModelLocator  =  ModelLocator.getInstance();
private  var quoteId : String;
         
public  function execute( event : CairngormEvent ) :  void
{
    var stockQuoteEvent : GetStockQuoteEvent  =  GetStockQuoteEvent( event );             
    var symbol : String  =  stockQuoteEvent.symbol;
    quoteId  =  stockQuoteEvent.quoteId;
    var delegate : StockMarketDelegate  =   new  StockMarketDelegate(  this  );
    delegate.getQuoteForSymbol( symbol );
}
        
public  function onResult( event : ResultEvent  =   null  ) :  void
{
     // simulate a result from service
    var lastStockQuote : Number  =  Math.random()  *   50   +   5 ;
    var stockQuote : StockQuote  =  model.stockQuoteManager.getStockQuote( quoteId );
    stockQuote.lastStockQuote  =  lastStockQuote;
    stockQuote.stockQuoteError  =   "" ;
}
        
public  function onFault( event : FaultEvent  =   null  ) :  void
{
    var stockQuote : StockQuote  =  model.stockQuoteManager.getStockQuote( quoteId );
    stockQuote.lastStockQuote  =  NaN;
    stockQuote.stockQuoteError  =   " An error occured. " ;
}

注意一下，在上面的代码中我们使用的是无状态命令，在Cairngorm的说明中，无状态命令是每次Cairngorm事件的响应都创建一个新的命令实例的方式。因此，在这种方式中我们可以放心地把变量存储在成员变量中，而不用担心被其他人改变。

当服务端或者客户端的逻辑变化后，有很多种方法来更新视图。我比较推荐使用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>

看得出: 这个框架与Cairngorm非常的相似, 但是进行了相当的简化.