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>