Cairngorm的结构及开发使用（4）

ShoppingCart实例被在Tab Navigator 中的wishListCartComp调 用。

首先，wishListCartComp实 例数据绑定到ModelLocator.wishList,接 着wishListModel上的任何改动都会自动影响Shopping Cart组件内部。这是acion中一个大组件重用的好例子。

addProduct事件调用了一个方法，addProductToWishList(),你需要在SideArea.mxml中定义，如下:

private function addProductToWishList( event : Object ) : Void

{      

EventBroadcaster.getInstance().broadcastEvent( 

    ShopController.EVENT_ADD_PRODUCT_TO_WISH_LIST, event );

}

 

这个方法很好地将用户动作翻译成适当的Cairngorm事件；现在，当用户把产品放入ShoppingCart组件中的WishListCartComp实例时，被认为是添加到WishList的用户动作，这个动作被翻译成适当的Cairngorm事件。

我们在ProductDetails MXML组件中使用addProductToWishList()方 法，如下使用：

addProductToWishList="addProductToWishList( event )"

很明显，这要求ProductDetails MXML组件能广播addProductToWishList事件效果就像是按下“添加到WishList”发生的事件一样。这样最后视图部分代码如ProductDetails.mxml

首先，在ProductDetails上 更新MetaData定义要广播的新的事件，如下显示：

<mx:Metadata> 

   [Event("addProduct")] 

   [Event("addProductToWishList")]

</mx:Metadata>

最后，声明新的按钮，将它的点击事件变为更有意义的业务事件，addProductToWishList。声明一个有用的方法来广播addProductToWishList事件及附加的信息：产品被添加 （当前选择的产品）和用户需要的数量：

private function addProductToWishList() : Void

{

var event : Object = new Object();

event.type = "addProductToWishList";

event.product = selectedItem;

event.quantity = quantity;

dispatchEvent( event );

}

你可以加入你一个新的按钮”添加到购物篮”来代替加入到需求列表，代码如下：

<mx:Button label="Add to Cart" click="addProduct();" />

<mx:Button label="Add to WishList" click="addProductToWishList();" />

这是一个很好的示例我们在第三章讨论过：把一个按钮的点击事件转变为一个更有意义的 事件来表示我们的业务领域("addProductToWishList"),轻 松地构建MXML组件。这样ProductDetails和SideArea MXML组件通过被广播，绑定不同的事件。

这就是它了。现在你已经加入了全部代码到MXML来表示用户操作需求列表的流程。通过动态绑定MXML到模型定位器类和将用户动作翻译成Cairngorm事件，视图被绑定在最底层的Cairngorm架构结构上。