flex 小结1

1 使用VIDEODISPLAY组件
   <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
 <![CDATA[
  
  import flash.media.Camera;
  public var cam:Camera;
  public function initCamera():void
  {
   cam=Camera.getCamera();
  myVideo.attachCamera(cam); 
  } 3
 ]]>
</mx:Script>
 <mx:VideoDisplay x="404" y="76" width="199" height="112" id="myVideo" creationComplete="initCamera();"/>

2 MENUBAR组件
  <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Panel height="166" title="MenuBar组件" fontSize="12">
 <mx:MenuBar id="myMenuBar" labelField="@label" fontSize="12">
  <mx:XMLList>
   <menuitem label="文件">
    <menuitem label="新建" enabled="false"/>
    <menuitem label="打开..."/>
    <menuitem label="保存"/>
    <menuitem label="另存为..."/>
    <menuitem type="separator"/>
    <menuitem label="退出"/>
   </menuitem>
   <menuitem label="编辑">
    <menuitem label="剪贴"/>
    <menuitem label="复制"/>
    <menuitem label="粘贴"/>
   </menuitem>
   <menuitem label="查看">
    <menuitem label="状态栏" type="checkbox"/>
   </menuitem>
   <menuitem label="帮助"> 
    <menuitem label="帮助"/>l
    <menuitem label="关于"/>
   </menuitem>
  </mx:XMLList>
 </mx:MenuBar>
</mx:Panel>
</mx:Application>

3 List组件
  <![CDATA[
import flash.events.Event;
public function handleChange(event:Event):void {
 forChange.text="";
 for(var i:int;i<event.currentTarget.selectedItems.length;i++)
 {
  forChange.text += event.currentTarget.selectedItems[i].data + " "
  +event.currentTarget.selectedIndices[i] + "   ";
 }
 //显示选中List条目的data属性和index
}
]]>
</mx:Script>

<mx:Panel title="List组件" height="211" fontSize="12" width="398">
 <mx:List allowMultipleSelection="true" change="handleChange(event)"  fontSize="12"  width="377" height="90">
  <mx:Object label="北京" data="beijing"/>
  <mx:Object label="上海" data="shanghai"/>
  <mx:Object label="广州" data="guangzhou"/>
 </mx:List>
4 很好用的titlelist组件
   <![CDATA[
import mx.controls.Button;
import mx.collections.*;

private static var phone:Array = [
  "./pic/Nokia_3100_blue.gif",
  "./pic/Nokia_3100_pink.gif",
  "./pic/Nokia_3120.gif",
  "./pic/Nokia_3220.gif",
  "./pic/Nokia_3230_black.gif",
  "./pic/Nokia_3230_bronze.gif",
  "./pic/Nokia_3595.gif"
 ];
public var tileListdp:ArrayCollection;
private function initData(items:Array):void {
 tileListdp = new ArrayCollection(phone);
 myTileList.dataProvider=tileListdp;
}
]]>
</mx:Script>
<mx:TileList id="myTileList" rowCount="2" columnCount="4" rowHeight="100" columnWidth="100" itemRenderer="mx.controls.Image" creationComplete ="initData(phone)"/>
</mx:Application>
  这个其实是个平铺组件，可以看出这个是个2行4列的平铺。

5 DATGRID控件
   <mx:DataGrid fontSize="12">
 <mx:ArrayCollection>
  <mx:Object product="Thinkpad" type="X300" price="24000"/>
  <mx:Object product="Thinkpad" type="T61" price="16000" />
  <mx:Object product="Apple" type="MacBook AIR" price="16000" />
  <mx:Object product="Apple" type="MacBook Pro" price="22000" />
 </mx:ArrayCollection>
 <mx:columns>
  <mx:DataGridColumn dataField="product" headerText="产品"/>
  <mx:DataGridColumn dataField="type" headerText="型号"/>
  <mx:DataGridColumn dataField="price" headerText="价格(RMB)"/>
 </mx:columns>
</mx:DataGrid>
6 DATAGRID的排序
    import mx.events.DataGridEvent;
 import mx.collections.*;
 private var myDPColl:ArrayCollection;
 [Bindable]
 //Sort对象处理排序
 private var sortA:Sort;
 
 // 可进行排序的类别
 private var sortByProductName:SortField;
 private var sortByProductType:SortField;
 private var sortByProductPrice:SortField;
 // Data Provider
 private var myDP:Array = [
  {product:'Thinkpad', type:'T61',price:22000},
  {product:'Thinkpad', type:'T61P',price:26000},
  {product:'Thinkpad', type:'X61',price:14000},
  {product:'Apple', type:'MacBook AIR',price:16000},
  {product:'Apple', type:'MacBook Pro',price:23000}
  ];
 //初始化排序的Data Grid组件
 private function initDP():void {
 
  myDPColl = new ArrayCollection(myDP);
  //通过ArrayCollection构建排序
  sortA = new Sort();
  sortByProductName = new SortField("product",true);
  sortByProductType = new SortField("type", true);
  sortByProductPrice = new SortField("price", true);
  sortA.fields = [sortByProductName, sortByProductType,       sortByProductPrice];
  myDPColl.sort=sortA;
  //刷新集合，是排序生效
  myDPColl.refresh();

7 TREE组件和有关事件
  <![CDATA[
 import flash.events.*;
 import mx.events.*;
 import mx.controls.*;
 private function changeEvt(event:Event):void {
  var theData:String = ""
  if (event.currentTarget.selectedItem.@data) {
  theData = " Data: " + event.currentTarget.selectedItem.@data;
  }
  forChange.text = event.currentTarget.selectedItem.@label + theData;
 }
 private function itemOpenEvt(event:TreeEvent):void {
  forOpen.text = event.item.@label;
 }
]]>
</mx:Script>
<mx:Tree id="XMLtree1" fontSize="12" width="300" height="200" labelField= "@label" itemOpen="itemOpenEvt(event);" change="changeEvt(event);">
<mx:XMLListCollection id="myDocument">
<mx:XMLList>
 <folder label="我的文档" data="doc">
  <folder label="我的图片" data="pic"/>
  <folder label="我的音乐" data="music">
   <Pfolder label="PlaceNearBy.mp3" />
   <Pfolder label="solo.mp3" />
   <Pfolder label="流行乐" isBranch="true" data="pop"/>
  </folder>
  <folder label="我的应用程序" data="app"/>
  <folder label="我的视频" data="video"/>
 </folder>
</mx:XMLList>
</mx:XMLListCollection>
</mx:Tree>
<mx:Form fontSize="12">
 <mx:FormItem label="Change 事件:">
  <mx:Label id="forChange" width="150"/>
 </mx:FormItem>
 <mx:FormItem label="Open 事件:">
  <mx:Label id="forOpen" width="150"/>
 </mx:FormItem>
</mx:Form>

8 FORM表单组件
  表单的布局例子：
  <mx:Form id="myForm" defaultButton="{mySubmit}" fontSize="12">
 <mx:FormItem label="用户名">
  <mx:TextInput id="userName"/>
 </mx:FormItem>
 <mx:FormItem label="密码">
  <mx:TextInput id="password" displayAsPassword="true"/>
 </mx:FormItem>
 <mx:FormItem>
  <mx:Button label="登录" id="mySubmit"/>
 </mx:FormItem>
</mx:Form>
  为了保存表单提交保存的数据，可以用模型来保存数据
  <mx:Model id="myLoginModel">
  <login>
  <username>{userName.text}</username>
  <password>{password.text}</password>
  </login>
 </mx:Model>
 表单数据验证流程：
  <![CDATA[
  import mx.controls.Alert;
  public function isValid():void
  {
   if(userName.text.length<3)
   {
    Alert.show("用户名长度不合法！");
   }
  }
 ]]>
  <mx:Button label="登录" id="mySubmit" click="isValid();"/>
9 tabnavigator组件
   <mx:TabNavigator borderStyle="inset" width="300" height="200" fontSize="12">
 <!-- 使用VBox组件作为子容器组件 -->
 <mx:VBox id="info" label="个人信息">
  <mx:Label text="用户名：User36"/>
  <mx:Label text="姓名：Ian Yang"/>
 </mx:VBox>
 <mx:VBox id="stat" label="登录统计">
  <mx:Label text="8.5小时/天"/>
 </mx:VBox>
 <mx:VBox id="history" label="浏览记录">
  <mx:Label text="Adobe"/>
  <mx:Label text="IBM"/>
  <mx:Label text="Microsoft"/>
 </mx:VBox>
</mx:TabNavigator>
10 FLEX里的视图切换.就是FLEX里的STATE
  <mx:states>
 <mx:State name="Register">
  <mx:AddChild relativeTo="{loginForm}" position="lastChild">
   <mx:FormItem id="confirm" label="确认密码:">
    <mx:TextInput/>
   </mx:FormItem>
  </mx:AddChild>
  <mx:SetProperty target="{loginPanel}" name="title" value="注册"/>
  <mx:SetProperty target="{loginButton}" name="label" value="注册"/>
  <mx:RemoveChild target="{registerLink}"/>
  <mx:AddChild relativeTo="{spacer1}" position="before">
   <mx:LinkButton label="返会到登录" click="currentState=''"/>
  </mx:AddChild>
 </mx:State>
</mx:states>

<mx:Panel id="loginPanel" title="登录" fontSize="12" horizontalScrollPolicy ="off" verticalScrollPolicy="off">
 <mx:Form id="loginForm">
  <mx:FormItem label="用户名：">
   <mx:TextInput/>
  </mx:FormItem>
  <mx:FormItem label="密码：">
   <mx:TextInput/>
  </mx:FormItem>
 </mx:Form>
 <mx:ControlBar>
 <mx:LinkButton id="registerLink" label="还未注册？" click="currentState=  'Register'"/>
 <mx:Spacer width="100%" id="spacer1"/>
 <mx:Button label="登录" id="loginButton"/>
 </mx:ControlBar>
</mx:Panel>