flex使用简单的控件



使用简单的控件。

显示图片

 

 

 

 

 

 

 

 

 

 

 

 

 

打开前面完成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:states>
  4.         <mx:State name=”cartView”>
  5.             <mx:SetProperty target=”{products}” name=”width” value=”0″/>
  6.             <mx:SetProperty target=”{products}” name=”height” value=”0″/>
  7.             <mx:SetProperty target=”{cartBox}” name=”width” value=”100%”/>
  8.             <mx:AddChild relativeTo=”{cartBox}” position=”lastChild”>
  9.                 <mx:DataGrid id=”dgCart” width=”100%”>
  10.                     <mx:columns>
  11.                         <mx:DataGridColumn headerText=”Column 1″ dataField=”col1″/>
  12.                         <mx:DataGridColumn headerText=”Column 2″ dataField=”col2″/>
  13.                         <mx:DataGridColumn headerText=”Column 3″ dataField=”col3″/>
  14.                     </mx:columns>
  15.                 </mx:DataGrid>
  16.             </mx:AddChild>
  17.             <mx:AddChild relativeTo=”{cartBox}” position=”lastChild”>
  18.                 <mx:LinkButton label=”Continue Shopping” click=”this.currentState=””/>
  19.             </mx:AddChild>
  20.             <mx:RemoveChild target=”{linkbutton1}”/>
  21.         </mx:State>
  22.     </mx:states>
  23.     <mx:ApplicationControlBar dock=”true” width=”100%” height=”90″>
  24.         <mx:Canvas width=”100%” height=”100%”>
  25.             <mx:Label x=”0″ y=”0″ text=”Flex”/>
  26.             <mx:Label x=”0″ y=”41″ text=”GROCER”/>
  27.             <mx:Button label=”View Cart” id=”btnViewCart” right=”90″ y=”0″/>
  28.             <mx:Button label=”Checkout” id=”btnCheckout” right=”10″ y=”0″/>
  29.         </mx:Canvas>
  30.     </mx:ApplicationControlBar>
  31.     <mx:Label text=”(c) 2006, FlexGrocer” bottom=”10″ right=”10″/>
  32.     <mx:HBox x=”0″ y=”0″ width=”100%” height=”100%” id=”bodyBox”>
  33.         <mx:VBox width=”100%” height=”100%” id=”products”>
  34.             <mx:Label text=”Milk” id=”prodName”/>
  35.             <mx:Label text=”$1.99″ id=”price”/>
  36.             <mx:Button label=”Add To Cart” id=”add”/>
  37.         </mx:VBox>
  38.         <mx:VBox height=”100%” id=”cartBox”>
  39.             <mx:Label text=”Your Cart Total: $”/>
  40.             <mx:LinkButton label=”View Cart” click=”this.currentState=’cartView’” id=”linkbutton1″/>
  41.         </mx:VBox>
  42.     </mx:HBox>
  44. </mx:Application>

往Milk对应的Lable下面添加图片控件，设置属性为：Source：”assets/dairy_milk.jpg”，Scale Content：true。

 

 

对应的代码为

 

<mx:Image source=”assets/dairy_milk.jpg” scaleContent=”true”/>

修改代码如下

<mx:Image source=”@Embed(‘assets/dairy_milk.jpg’)” scaleContent=”true”/>

Embed使编译时就把.jpg文件嵌入到swf文件中，在运行时，加载图片会更快，也无需访问网络，不过会增加swf文件的大小。

运行结果如下

建立详细的信息视图

在页面的源码模式下，给image控件加上mouseOut和mouseOver事件

<mx:Image source=”@Embed(‘assets/dairy_milk.jpg’)” scaleContent=”true”

              mouseOver=”this.currentState=’expanded’” mouseOut=”this.currentState=””/>

当鼠标移入图片是，切换到expanded视图，当鼠标移出图片时，回到默认视图。

建立expanded视图，代码如下

[xhtml] view plaincopy

  1. <mx:State name=”expanded”>
  2.     <mx:AddChild>
  3.         <mx:VBox x=”200″ width=”100%”>
  4.             <mx:Text text=”Text” width=”50%”/>
  5.             <mx:Label text=”Certified Organic”/>
  6.                 <mx:Label text=”Low Fat”/>
  7.         </mx:VBox>
  8.     </mx:AddChild>
  9. </mx:State>

 运行页面如下：当鼠标进入图片，将会显示详细信息视图

 

使用数据绑定将数据结构链接到简单的控件

在前面完成的EComm.mxml文件中，在<mx:Application>下面添加如下xml格式的代码，即是添加一个简单的数据结构

 

[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>  

 修改Text组件的text属性，使之绑定到数据结构中

 

 

<mx:Text text=”{groceryInventory.description}” width=”50%”/>

其中groceryInventory是Model中的id，description是其中的一个属性，

运行页面，如下

上面显示的信息是在model中定义的。

使用Form布局容器布置简单的控件

新建DataEntry.mxml文件，编写代码如下


 

 

 

[xhtml] view plaincopy

  1. <?xml version=”1.0″ encoding=”utf-8″?>
  2. <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
  3.     layout=”absolute”>
  5.     <mx:Model id=”prodModel”>
  6.         <groceries>
  7.             <catName>Dairy</catName>
  8.             <prodName>Milk</prodName>
  9.             <imageName>assets/dairy_milk.jpg</imageName>
  10.             <cost>1.20</cost>
  11.             <listPrice>1.99</listPrice>
  12.             <isOrganic>true</isOrganic>
  13.             <isLowFat>true</isLowFat>
  14.             <description>Direct from California where cows are happiest!</description>
  15.         </groceries>
  16.     </mx:Model>
  17.     <mx:Script>
  18.         <!–[CDATA[
  19.             import flash.net.FileReference;
  21.             public function fileBrowse():void{
  22.                 var myFileRef:FileReferenceList = new FileReferenceList();
  23.                 myFileRef.browse();
  24.             }
  25.         ]]–>
  26.     </mx:Script>
  27.     <mx:Form>
  28.         <mx:FormHeading label=”{prodModel.catName}”/>
  29.         <mx:FormItem label=”Product Name”>
  30.             <mx:TextInput id=”product” text=”{prodModel.prodName}”/>
  31.         </mx:FormItem>
  32.         <mx:FormItem label=”ProductNameUnit” direction=”horizontal”>
  33.             <mx:ComboBox/>
  34.             <mx:TextInput/>
  35.         </mx:FormItem>
  36.         <mx:FormItem label=”Cost”>
  37.             <mx:TextInput id=”cost” text=”{prodModel.cost}”/>
  38.         </mx:FormItem>
  39.         <mx:FormItem label=”List Price”>
  40.             <mx:TextInput id=”listPrice” text=”{prodModel.listPrice}”/>
  41.         </mx:FormItem>
  42.         <mx:FormItem label=”Description”>
  43.             <mx:TextInput id=”Description” text=”{prodModel.description}”/>
  44.         </mx:FormItem>
  45.         <mx:FormItem label=”Organic”>
  46.             <mx:CheckBox id=”isOrganic” selected=”{prodModel.isOrganic}”/>
  47.         </mx:FormItem>
  48.         <mx:FormItem label=”Is Low Fat?”>
  49.             <mx:CheckBox id=”isLowFat” selected=”{prodModel.isLowFat}”/>
  50.         </mx:FormItem>
  51.         <mx:FormItem label=”Image Path”>
  52.             <mx:TextInput id=”imageName” text=”{prodModel.imageName}”/>
  53.             <mx:Button label=”Browse” click=”fileBrowse()”/>
  54.         </mx:FormItem>
  55.         <mx:FormItem>
  56.             <mx:HBox>
  57.             <mx:Button label=”Update”/>
  58.             <mx:Button label=”Delete”/>
  59.             </mx:HBox>
  60.         </mx:FormItem>
  61.     </mx:Form>
  63. </mx:Application>

运行页面，如下

 

 

 

 

 

 

将单选按钮和数据字段添加到Dashboard

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

[xhtml] view plaincopy

  1. <?xml version=”1.0″ encoding=”utf-8″?>
  2. <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”horizontal”>
  3.     <mx:ApplicationControlBar dock=”true”>
  4.         <mx:LinkButton label=”All”
  5.             click=”this.currentState=””/>
  6.         <mx:LinkButton label=”Sales”
  7.             click=”this.currentState=’fullSales’”/>
  8.         <mx:LinkButton label=”Categories”
  9.             click=”this.currentState=’fullType’”/>
  10.         <mx:LinkButton label=”Comparison”
  11.             click=”this.currentState=’fullComp’”/>
  12.     </mx:ApplicationControlBar>
  13.     <mx:states>
  14.         <mx:State name=”fullSales”>
  15.             <mx:SetProperty target=”{rightCharts}”
  16.                 name=”width” value=”0″/>
  17.             <mx:SetProperty target=”{rightCharts}”
  18.                 name=”height” value=”0″/>
  19.         </mx:State>
  20.         <mx:State name=”fullType”>
  21.             <mx:SetProperty target=”{sales}”
  22.                 name=”width”
  23.                 value=”0″/>
  24.             <mx:SetProperty target=”{sales}”
  25.                 name=”height”
  26.                 value=”0″/>
  27.             <mx:SetProperty target=”{comp}”
  28.                 name=”width”
  29.                 value=”0″/>
  30.             <mx:SetProperty target=”{comp}”
  31.                 name=”height”
  32.                 value=”0″/>
  33.         </mx:State>
  34.         <mx:State name=”fullComp”>
  35.             <mx:SetProperty target=”{sales}”
  36.                 name=”width”
  37.                 value=”0″/>
  38.             <mx:SetProperty target=”{sales}”
  39.                 name=”height”
  40.                 value=”0″/>
  41.             <mx:SetProperty target=”{type}”
  42.                 name=”width”
  43.                 value=”0″/>
  44.             <mx:SetProperty target=”{type}”
  45.                 name=”height”
  46.                 value=”0″/>
  47.         </mx:State>
  48.     </mx:states>
  49.     <mx:Panel id=”sales”
  50.         width=”100%” height=”100%”
  51.         title=”Sales Chart”>
  52.         <mx:ControlBar>
  53.         </mx:ControlBar>
  54.     </mx:Panel>
  55.     <mx:VBox id=”rightCharts”
  56.         width=”100%” height=”100%” >
  57.         <mx:Panel id=”type”
  58.             width=”100%” height=”100%”
  59.             title=”Category Chart”>
  60.             <mx:ControlBar>
  61.             </mx:ControlBar>
  62.         </mx:Panel>
  63.         <mx:Panel id=”comp”
  64.             width=”100%” height=”100%”
  65.             title=”Comparison Chart”>
  66.             <mx:ControlBar>
  67.             </mx:ControlBar>
  68.         </mx:Panel>
  69.     </mx:VBox>
  70. </mx:Application>

界面如下

 

在<mx:ApplicationControlBar>内部的最后面添加一个spacer

<mx:Spacer width=”100%”/>

为了增加前四个linkbutton和后面控件的空间。

在spacer后面添加如下控件

[xhtml] view plaincopy

  1. <mx:Label text=”Start Date”/>
  2. <mx:DateField id=”startDate”/>
  3. <mx:Label text=”End Date”/>
  4. <mx:DateField id=”endDate”/>
  5. <mx:RadioButtonGroup id=”grossOrNetGroup”/>
  6. <mx:RadioButton id=”gross” groupName=”grossOrNetGroup” label=”Gross Sales”
  7.             data=”GROSS” selected=”true”/>
  8. <mx:RadioButton id=”net” groupName=”grossOrNetGroup” label=”Net Sales”  data=”NET”/>

运行页面，如下