flex 小结1

原创

mb5c80f4c73b73a 2022-12-06 10:12:00 博主文章分类：ajax/web相关 ©著作权

文章标签 Flex Nokia Apple AIR Flash 文章分类 云平台云计算

©著作权归作者所有：来自51CTO博客作者mb5c80f4c73b73a的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

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