flex处理事件和数据结构



flex处理事件和数据结构

使用外部的xml数据

打开前面完成的EComm.mxml文件，代码如下

 

[xhtml] view plaincopy

  1. <?xml version=”1.0″ encoding=”utf-8″?>
  2. <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
  3.     <mx:Model id=”groceryInventory”>
  4.         <groceries>
  5.             <catName>Dairy</catName>
  6.             <prodName>Milk</prodName>
  7.             <imageName>assets/dairy_milk.jpg</imageName>
  8.             <cost>1.20</cost>
  9.             <listPrice>1.99</listPrice>
  10.             <isOrganic>true</isOrganic>
  11.             <isLowFat>true</isLowFat>
  12.             <description>Direct from California where cows are happiest!</description>
  13.         </groceries>
  14.     </mx:Model>
  15.     <mx:states>
  16.         <mx:State name=”cartView”>
  17.             <mx:SetProperty target=”{products}” name=”width” value=”0″/>
  18.             <mx:SetProperty target=”{products}” name=”height” value=”0″/>
  19.             <mx:SetProperty target=”{cartBox}” name=”width” value=”100%”/>
  20.             <mx:AddChild relativeTo=”{cartBox}” position=”lastChild”>
  21.                 <mx:DataGrid id=”dgCart” width=”100%”>
  22.                     <mx:columns>
  23.                         <mx:DataGridColumn headerText=”Column 1″ dataField=”col1″/>
  24.                         <mx:DataGridColumn headerText=”Column 2″ dataField=”col2″/>
  25.                         <mx:DataGridColumn headerText=”Column 3″ dataField=”col3″/>
  26.                     </mx:columns>
  27.                 </mx:DataGrid>
  28.             </mx:AddChild>
  29.             <mx:AddChild relativeTo=”{cartBox}” position=”lastChild”>
  30.                 <mx:LinkButton label=”Continue Shopping” click=”this.currentState=””/>
  31.             </mx:AddChild>
  32.             <mx:RemoveChild target=”{linkbutton1}”/>
  33.         </mx:State>
  34.         <mx:State name=”expanded”>
  35.             <mx:AddChild>
  36.                 <mx:VBox x=”200″ width=”100%”>
  37.                     <mx:Text text=”{groceryInventory.description}” width=”50%”/>
  38.                     <mx:Label text=”Certified Organic”/>
  39.                     <mx:Label text=”Low Fat”/>
  41.                 </mx:VBox>
  42.             </mx:AddChild>
  43.         </mx:State>
  44.     </mx:states>
  45.     <mx:ApplicationControlBar dock=”true” width=”100%” height=”90″>
  46.         <mx:Canvas width=”100%” height=”100%”>
  47.             <mx:Label x=”0″ y=”0″ text=”Flex”/>
  48.             <mx:Label x=”0″ y=”41″ text=”GROCER”/>
  49.             <mx:Button label=”View Cart” id=”btnViewCart” right=”90″ y=”0″/>
  50.             <mx:Button label=”Checkout” id=”btnCheckout” right=”10″ y=”0″/>
  51.         </mx:Canvas>
  52.     </mx:ApplicationControlBar>
  53.     <mx:Label text=”(c) 2006, FlexGrocer” bottom=”10″ right=”10″/>
  54.     <mx:HBox x=”0″ y=”0″ width=”100%” height=”100%” id=”bodyBox”>
  55.         <mx:VBox width=”100%” height=”100%” id=”products”>
  56.             <mx:Label text=”Milk” id=”prodName”/>
  57.             <mx:Image source=”@Embed(‘assets/dairy_milk.jpg’)” scaleContent=”true”
  58.                 mouseOver=”this.currentState=’expanded’”
  59.                 mouseOut=”this.currentState=””/>
  60.             <mx:Label text=”$1.99″ id=”price”/>
  61.             <mx:Button label=”Add To Cart” id=”add”/>
  62.         </mx:VBox>
  63.         <mx:VBox height=”100%” id=”cartBox”>
  64.             <mx:Label text=”Your Cart Total: $”/>
  65.             <mx:LinkButton label=”View Cart” click=”this.currentState=’cartView’” id=”linkbutton1″/>
  66.         </mx:VBox>
  67.     </mx:HBox>
  69. </mx:Application>

删除model部分

 

 

[xhtml] view plaincopy

  1. <mx:Model id=”groceryInventory”>
  2.     <groceries>
  3.         <catName>Dairy</catName>
  4.         <prodName>Milk</prodName>
  5.         <imageName>assets/dairy_milk.jpg</imageName>
  6.         <cost>1.20</cost>
  7.         <listPrice>1.99</listPrice>
  8.         <isOrganic>true</isOrganic>
  9.         <isLowFat>true</isLowFat>
  10.         <description>Direct from California where cows are happiest!</description>
  11.     </groceries>
  12. </mx:Model>

使用外部的xml文件提供数据

 

 

使用如下代码引入外部xml文件

<mx:Model id=”groceryInventory” source=”assets/inventory.xml”/>

creationComplete事件

在<mx:Application>上添加creationComplete事件，代码如下

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”

       layout=”absolute” creationComplete=”prodHandler(groceryInventory)”>

当程序中所有的子控件、子容器都建立好以后，就会回到creationComplete这个事件。

编写prodHandler（）方法

private function prodHandler(theItems:Object):void {

       trace(theItems.prodName);

}

执行prodHandler方法时，接收参数groceryInventory，groceryInventory是上面model定义的外部xml数据结构，trace(theItems.prodName)，是在控制台上打印出groceryInventory的prodName信息。

建立一个自定义的ActionScript类

新建一个Product的ActionScript class，代码如下

  1. package valueObjects
  2. {
  3.     [Bindable]
  4.     public class Product
  5.     {
  6.         public var catID:Number;
  7.         public var prodName:String;
  8.         public var unitID:Number;
  9.         public var cost:Number;
  10.         public var listPrice:Number;
  11.         public var description:String;
  12.         public var isOrganic:Boolean;
  13.         public var isLowFat:Boolean;
  14.         public var imageName:String;
  16.         public function Product (_catID:Number, _prodName:String, _unitID:Number, _cost:Number, _listPrice:Number, _description:String,_isOrganic:Boolean,  _isLowFat:Boolean, _imageName:String)
  17.         {
  18.             catID = _catID;
  19.             prodName = _prodName;
  20.             unitID = _unitID;
  21.             cost = _cost;
  22.             listPrice = _listPrice;
  23.             description = _description;
  24.             isOrganic = _isOrganic;
  25.             isLowFat = _isLowFat;
  26.             imageName = _imageName;
  27.         }
  28.         public function toString():String
  29.         {
  30.             return ”[Product]“+this.prodName;
  31.         }
  33.         public static function buildProduct(o:Object):Product
  34.         {
  35.             var p:Product = new Product(o.catID, o.prodName, o.unitID, o.cost, o.listPrice, o.description, Boolean(o.isOrganic), Boolean(o.isLowFat), o.imageName);
  36.             return p;
  37.         }
  38.     }
  39. }

[Bindable]在类名上面表示绑定这个类，以便于在.mxml文件中的控件可以使用这个类。


 

新建一个ShoppingCartItem的ActionScript类，代码如下

  1. package valueObjects
  2. {
  3.     public class ShoppingCartItem
  4.     {
  5.         public var product:Product;
  6.         public var quantity:uint;
  7.         public var subtotal:Number;
  9.         public function ShoppingCartItem(product:Product, quantity:uint=1)
  10.         {
  11.             this.product = product;
  12.             this.quantity = quantity;
  13.             this.subtotal = product.listPrice * quantity;
  14.         }
  16.         public function recalc():void{
  17.             this.subtotal = product.listPrice * quantity;
  18.         }
  19.     }
  20. }

建立购物车类，新建一个ShoppingCart的ActionScript类，代码如下

 

  1. package valueObjects
  2. {
  3.     import flash.utils.*
  4.     public class ShoppingCart
  5.     {
  6.         public function addItem(item:ShoppingCartItem):void{
  7.             trace(item.product);
  8.         }
  9.     }
  10. }

控件中使用自定义的ActionScript类数据

 

先定义类对象

[Bindable]

private var theProduct:Product;

通过prodHandler方法创建该对象。

 

[javascript] view plaincopy

  1. private function prodHandler(theItems:Object):void {
  2.     theProduct = Product.buildProduct(theItems);
  3.     trace(theProduct);
  4. }

由于上面直接绑定了，所以在控件中可以直接使用，如下

 

 

[xhtml] view plaincopy

  1. <mx:VBox x=”200″ width=”100%”>
  2.     <mx:Text text=”{theProduct.description}” width=”50%”/>
  3.     <mx:Label text=”Certified Organic” visible=”{theProduct.isOrganic}”/>
  4.     <mx:Label text=”Low Fat” visible=”{theProduct.isLowFat}”/>
  5. </mx:VBox>

添加到添加物品到购物车的方法，如下

 

 

[javascript] view plaincopy

  1. <!–[CDATA[
  2.     import valueObjects.Product;
  3.     import valueObjects.ShoppingCartItem;
  4.     import valueObjects.ShoppingCart;
  5.     [Bindable]
  6.     public var cart:ShoppingCart = new ShoppingCart();
  8.     [Bindable]
  9.     private var theProduct:Product;
  10.     private function addToCart(product:Product):void {
  11.         var sci:ShoppingCartItem = new ShoppingCartItem(product);
  12.         cart.addItem(sci);
  13.     }
  14. ]]–>