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

将需求列表加入到视图

我将替换屏幕的一部分，只用包含两个ShoppingCart MXML组件的Tab Navigator显示ShoppingCart MXML组件。第一个实例是我们原始的ShoppingCart,而 第二个则是需求列表。

当用户发出添加产品到需求列表的动作时，你将改变ProductDetails组件来截获，就像添加产品到ShoppingCart一样。这就需要ProductDetails MXML组件要有一个addProductToWishList事件，下面是代码：

这个简单的需求，只要改动一下SideArea.mxml，如下：

<details:ProductDetails 

        id="productDetailsComp" 

        width="100%" height="325" 

        currencyFormatter="{ ModelLocator.currencyFormatter }" 

        selectedItem="{ ModelLocator.selectedItem }"           

        addProduct="addProductToShoppingCart( event )" 

        addProductToWishList="addProductToWishList( event )" />                   

 

<mx:TabNavigator width="100%" height="100%">

 

<!-- the Shopping Cart -->         

<cart:ShoppingCart 

        id="shoppingCartComp" 

        label="Shopping Cart" 

        width="100%" height="100%" 

        shoppingCart="{ ModelLocator.shoppingCart }" 

        selectedItem="{ ModelLocator.selectedItem }" 

        select="ModelLocator.selectedItem = event.target.selectedItem" 

        currencyFormatter="{ ModelLocator.currencyFormatter }" 

        addProduct="addProductToShoppingCart( event );" 

        deleteProduct="deleteProductFromShoppingCart( event );" 

        gotoCheckout="ModelLocator.workflowState = 

                      ModelLocator.VIEWING_CHECKOUT;" />   

 

<!-- the Wish List -->

<cart:ShoppingCart 

        id="wishListCartComp" 

        label="Wish List" 

        width="100%" height="100%" 

        shoppingCart="{ ModelLocator.wishList }" 

        selectedItem="{ ModelLocator.selectedItem }" 

        select="ModelLocator.selectedItem = event.target.selectedItem" 

        currencyFormatter="{ ModelLocator.currencyFormatter }" 

        addProduct="addProductToWishList( event );" 

        deleteProduct="deleteProductFromShoppingCart( event );" 

        gotoCheckout="ModelLocator.workflowState = 

                      ModelLocator.VIEWING_CHECKOUT;" />

 

</mx:TabNavigator>