处理事件和数据结构

使用外部的xml数据

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

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Model id="groceryInventory"> <groceries> <catName>Dairy</catName> <prodName>Milk</prodName> <imageName>assets/dairy_milk.jpg</imageName> <cost>1.20</cost> <listPrice>1.99</listPrice> <isOrganic>true</isOrganic> <isLowFat>true</isLowFat> <description>Direct from California where cows are happiest!</description> </groceries> </mx:Model> <mx:states> <mx:State name="cartView"> <mx:SetProperty target="{products}" name="width" value="0"/> <mx:SetProperty target="{products}" name="height" value="0"/> <mx:SetProperty target="{cartBox}" name="width" value="100%"/> <mx:AddChild relativeTo="{cartBox}" position="lastChild"> <mx:DataGrid id="dgCart" width="100%"> <mx:columns> <mx:DataGridColumn headerText="Column 1" dataField="col1"/> <mx:DataGridColumn headerText="Column 2" dataField="col2"/> <mx:DataGridColumn headerText="Column 3" dataField="col3"/> </mx:columns> </mx:DataGrid> </mx:AddChild> <mx:AddChild relativeTo="{cartBox}" position="lastChild"> <mx:LinkButton label="Continue Shopping" click="this.currentState=''"/> </mx:AddChild> <mx:RemoveChild target="{linkbutton1}"/> </mx:State> <mx:State name="expanded"> <mx:AddChild> <mx:VBox x="200" width="100%"> <mx:Text text="{groceryInventory.description}" width="50%"/> <mx:Label text="Certified Organic"/> <mx:Label text="Low Fat"/> </mx:VBox> </mx:AddChild> </mx:State> </mx:states> <mx:ApplicationControlBar dock="true" width="100%" height="90"> <mx:Canvas width="100%" height="100%"> <mx:Label x="0" y="0" text="Flex"/> <mx:Label x="0" y="41" text="GROCER"/> <mx:Button label="View Cart" id="btnViewCart" right="90" y="0"/> <mx:Button label="Checkout" id="btnCheckout" right="10" y="0"/> </mx:Canvas> </mx:ApplicationControlBar> <mx:Label text="(c) 2006, FlexGrocer" bottom="10" right="10"/> <mx:HBox x="0" y="0" width="100%" height="100%" id="bodyBox"> <mx:VBox width="100%" height="100%" id="products"> <mx:Label text="Milk" id="prodName"/> <mx:Image source="@Embed('assets/dairy_milk.jpg')" scaleContent="true" mouseOver="this.currentState='expanded'" mouseOut="this.currentState=''"/> <mx:Label text="$1.99" id="price"/> <mx:Button label="Add To Cart" id="add"/> </mx:VBox> <mx:VBox height="100%" id="cartBox"> <mx:Label text="Your Cart Total: $"/> <mx:LinkButton label="View Cart" click="this.currentState='cartView'" id="linkbutton1"/> </mx:VBox> </mx:HBox> </mx:Application>  删除model部分

<mx:Model id="groceryInventory"> <groceries> <catName>Dairy</catName> <prodName>Milk</prodName> <imageName>assets/dairy_milk.jpg</imageName> <cost>1.20</cost> <listPrice>1.99</listPrice> <isOrganic>true</isOrganic> <isLowFat>true</isLowFat> <description>Direct from California where cows are happiest!</description> </groceries> </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，代码如下

package valueObjects { [Bindable] public class Product { public var catID:Number; public var prodName:String; public var unitID:Number; public var cost:Number; public var listPrice:Number; public var description:String; public var isOrganic:Boolean; public var isLowFat:Boolean; public var imageName:String; public function Product (_catID:Number, _prodName:String, _unitID:Number, _cost:Number, _listPrice:Number, _description:String,_isOrganic:Boolean, _isLowFat:Boolean, _imageName:String) { catID = _catID; prodName = _prodName; unitID = _unitID; cost = _cost; listPrice = _listPrice; description = _description; isOrganic = _isOrganic; isLowFat = _isLowFat; imageName = _imageName; } public function toString():String { return "[Product]"+this.prodName; } public static function buildProduct(o:Object):Product { 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); return p; } } }  [Bindable]在类名上面表示绑定这个类，以便于在.mxml文件中的控件可以使用这个类。

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

package valueObjects { public class ShoppingCartItem { public var product:Product; public var quantity:uint; public var subtotal:Number; public function ShoppingCartItem(product:Product, quantity:uint=1) { this.product = product; this.quantity = quantity; this.subtotal = product.listPrice * quantity; } public function recalc():void{ this.subtotal = product.listPrice * quantity; } } }  建立购物车类，新建一个ShoppingCart的ActionScript类，代码如下

package valueObjects { import flash.utils.* public class ShoppingCart { public function addItem(item:ShoppingCartItem):void{ trace(item.product); } } }  控件中使用自定义的ActionScript类数据

先定义类对象

[Bindable]

private var theProduct:Product;

通过prodHandler方法创建该对象。

private function prodHandler(theItems:Object):void { theProduct = Product.buildProduct(theItems); trace(theProduct); }  由于上面直接绑定了，所以在控件中可以直接使用，如下

<mx:VBox x="200" width="100%"> <mx:Text text="{theProduct.description}" width="50%"/> <mx:Label text="Certified Organic" visible="{theProduct.isOrganic}"/> <mx:Label text="Low Fat" visible="{theProduct.isLowFat}"/> </mx:VBox>  添加到添加物品到购物车的方法，如下

<!--[CDATA[ import valueObjects.Product; import valueObjects.ShoppingCartItem; import valueObjects.ShoppingCart; [Bindable] public var cart:ShoppingCart = new ShoppingCart(); [Bindable] private var theProduct:Product; private function addToCart(product:Product):void { var sci:ShoppingCartItem = new ShoppingCartItem(product); cart.addItem(sci); } ]]-->