flex 小结1

    摘录最近学FLEX的一些读书笔记小结

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>