FlexLearnSecond

Flex专题二

 

     我现在可以将不断学习的感受靠意志控制成是在手里拿着大把的钞票在数，这种精神还是可以继

续提倡一段时间，可是不知当我能有大把钞票在数的时候，我能将意志控制到哪里去呢，如果能

将学习作为快乐的源泉，我以为是一个方向。人往高处走，水往低处流。对于我来说，这没有任

何原因，是自然的事。借着今日的雄心，继续入门下Flex的运用，比上一篇简单的页面多了些些

的绕——交互。

Flex、ActionScript与XML的数据交互

1.DataEntry.mxml页面

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 //定义XML数据文件。
 <mx:Model id="prodModel">
  <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>
 
 //ActionScript脚本，打开浏览文件窗口
 <mx:Script>
  <![CDATA[
   import flash.net.FileReferenceList;
   
   public function fileBrowse():void{
    var myFileBrowse:FileReferenceList=new

FileReferenceList();
    myFileBrowse.browse();
   }
  ]]>
 </mx:Script>
 
 //表单控件
 <mx:Form>
  //表单头标签和XML数据绑定，使用大括号。
  <mx:FormHeading label="{prodModel.catName}"/>
  //表单项
  <mx:FormItem label="Product Name">
   //文本框，初始数据和XML数据绑定
   <mx:TextInput id="product" text="{prodModel.prodName}"/>
  </mx:FormItem>
  <mx:FormItem label="ProductNameUnit" direction="horizontal">
   //下拉菜单
   <mx:ComboBox/>
   <mx:TextInput />
  </mx:FormItem>
  <mx:FormItem label="Cost">
   <mx:TextInput id="cost" text="{prodModel.cost}"/>
  </mx:FormItem>
  <mx:FormItem label="List Price">
   <mx:TextInput id="listPrice" text="{prodModel.listPrice}"/>
  </mx:FormItem>
  <mx:FormItem label="Description">
   <mx:TextInput id="description"

text="{prodModel.description}"/>
  </mx:FormItem>
  <mx:FormItem label="isOrganic">
   //复选框
   <mx:CheckBox id="isOrganic" selected="{prodModel.isOrganic}"

/>
  </mx:FormItem>
  <mx:FormItem label="isLowFat">
   <mx:CheckBox id="isLowFat" selected="{prodModel.isLowFat}" />
  </mx:FormItem>
  <mx:FormItem label="ImagePath">
   <mx:TextInput id="imagePath" text="{prodModel.imageName}"/>
   <mx:Button label="Browse" click="fileBrowse()"/>
  </mx:FormItem>
  <mx:FormItem>
   <mx:HBox>
    <mx:Button label="Update"/>
    <mx:Button label="Delete"/>
   </mx:HBox>
  </mx:FormItem>
 </mx:Form>
</mx:Application>

2.EComm.mxml页面

 

<?xml version="1.0" encoding="utf-8"?>

//当页面加载完成后执行prodHandler方法
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="absolute" creationComplete="prodHandler(groceryInventory)">
 //引入外部xml文件
 <mx:Model id="groceryInventory" source="assets/inventory.xml" />
  
 
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   
   //导入自定义ActionScript类
   import valueObjects.ShoppingCart;
   import valueObjects.ShoppingCartItem;
   import valueObjects.Product;
   
   //将theProduct对象绑定到页面，供页面调用
   [Bindable]
   private var theProduct:Product;
   
   //将cart对象绑定到页面，供页面调用
   [Bindable]
   public var cart:ShoppingCart = new ShoppingCart();
  
   private function prodHandler(theItem:Object):void{
    theProduct=Product.buildProduct(theItem);
    Alert.show(theProduct.toString());
   }
   
   public function addToCart(product:Product):void{
    
    var sci:ShoppingCartItem=new ShoppingCartItem

(product);
    cart.addItem(sci);
    
   }
  ]]>
 </mx:Script>
 
 <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:LinkButton label="Continue Shopping"

click="this.currentState=''" id="linkbutton2"/>
   </mx:AddChild>

   //在该视图下删除标签
   <mx:RemoveChild target="{linkbutton1}"/>
   <mx:AddChild relativeTo="{linkbutton2}" position="before">
    
    //数据表标签
    <mx:DataGrid 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:State>
  <mx:State name="expanded">
   <mx:AddChild>
    <mx:VBox x="200" width="100%">
     <mx:Text

text="{groceryInventory.description}" width="50%"/>
     <mx:Label text="Centified Organic"

visible="{theProduct.isOrganic}"/>
     <mx:Label text="Low Fat"

visible="{theProduct.isLowFat}"/>
    </mx:VBox>
   </mx:AddChild>
  </mx:State>
 </mx:states>
 <mx:ApplicationControlBar x="174" y="41" dock="true" 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 y="10" label="View Cart" id="btnViewCart"

right="90"/>
   <mx:Button y="10" label="Checkout" id="btnCheckout"

right="10"/>
  </mx:Canvas>
 </mx:ApplicationControlBar>
 <mx:Label x="353" y="229" text="(C)2006,FlexGrocer"/>
 <mx:HBox x="10" y="10" width="100%" height="100%">
  <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" click="addToCart

(theProduct)"/>
  </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>

 

3.valueObjects.Product.as ActionScript类文件

ActionScript是面向对象语言，类似于Java，但其主要功能是对页面数据的操作，而在对数据库

的操作方面显得力不从心。

 

//包，和java一样，存放类文件
package valueObjects
{
 //引用类
 import flash.sampler.Sample;
 
 //将其和页面绑定
 [Bindable]
 public class Product
 {
  //定义变量的方式：以"var"声明变量，在变量名后以":"确定变量的类型
  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;
   
  //定义方法的方式：以"function"声明方法，在方法名后以":"确定方法的返回值
  public function Product(_catID:Number, _prodName:String, _unitID:Number, _cost:Number, _listPrice:Number, _description:String,   _isOrganic:Boolean, _isLowFat:Boolean, _imageName:String):void
  {
   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;
  }

 }
}