Flex 学习小结（7）

1 日历控件中，格式化日期：
DateField.dateToString(birthday_dtf.selectedDate,"YYYY年MM月DD日")
<mx:DateField id="birthday_dtf" yearNavigationEnabled="true" formatString="YYYY年MM月DD日"/>

2 popupmenu自定义弹出菜单的使用
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
//导入需要的包
import mx.controls.Menu;
import mx.events.MenuEvent;
import mx.controls.Alert;
import flash.geom.Point;
import flash.events.MouseEvent;
//声明一个标明鼠标位置的类
private var point1:Point = new Point();
//声明菜单
private var myMenu:Menu;
//定义弹出菜单函数
private function showMenu(event:MouseEvent):void {
//创建弹出菜单，指明弹出菜单得内容
myMenu= Menu.createMenu(panel, myMenuData, false);
//指明弹出菜单，显示的字段
myMenu.labelField="@label"
//指明点击菜单项时响应的函数
myMenu.addEventListener("itemClick", menuHandler);
//得到鼠标的位置并弹出菜单
point1.x=event.stageX;
point1.y=event.stageY;
myMenu.show(point1.x , point1.y);
}
//定义函数响应点击菜单事件
private function menuHandler(event:MenuEvent):void {
//定义一个连接请求URLRequest对象实例
var searchRequest:URLRequest;
//如果点击删除菜单
if(mailto:event.item.@eventName==%22delete")
{
//清空source_txa内容
source_txa.text="";
}
//如果点击百度搜索菜单
else if(mailto:event.item.@eventName==%22baidu")
{
//使用百度搜索source_txa.text内容
searchRequest = new URLRequest("http://www.baidu.com/baidu?word="+source_txa.text);
//打开搜索结果页面
navigateToURL(searchRequest);
}
//如果点击Google搜索菜单
else if(mailto:event.item.@eventName==%22google")
{
//使用Google搜索source_txa.text内容
searchRequest = new URLRequest("http://www.google.cn/search?q="+source_txa.text);
//打开搜索结果页面
navigateToURL(searchRequest);
}
}
//初始化函数
private function init():void{
//设定监听source_txa组件的点击函数
source_txa.addEventListener(MouseEvent.CLICK,showMenu);
}
]]>
</mx:Script>
<!-- 设定菜单内容的数据-->
<mx:XML id="myMenuData">
<root>
<menuitem label="删除" eventName="delete"/>
<menuitem label="搜索" eventName="search">
<menuitem label="使用百度" eventName="baidu"/>
<menuitem label="使用google" eventName="google"/>
</menuitem>
</root>
</mx:XML>
<!--定义Panel作为菜单的容器 -->
<mx:Panel id="panel" width="60%" height="60%" layout="horizontal" horizontalCenter="0" verticalCenter="0" title="弹出菜单">
<mx:Form width="50%">
<mx:FormHeading label="弹出菜单演示"/>
<mx:FormItem label="说明">
<!--定义TextArea组件响应点击事件 -->
<mx:TextArea id="source_txa" editable="false" selectable="false" text="Flex入门"/>
</mx:FormItem>
</mx:Form>
</mx:Panel>
</mx:Application>

3 响应tree的点击事件

比如有个tree，数据的提供者为xml，要点树的某项，然后在datagrid中显示树的内容，则可以这样：

<mx:XML id="treeNode_xml">
<folder label="邮件" data="Mail">
<folder label="收件箱" data="Inbox"/>
<folder label="个人文件夹" data="Person">
<Pfolder label="商务信件" data="Business" />
<Pfolder label="私人信件" data="Private"/>
<Pfolder label="其他" data="Other"/>
</folder>
<folder label="已删除" data="Delete" />
</folder>
</mx:XML>

//定义函数响应Tree组件改变节点的属性
private function ListMailCatelog():void{
//得到mail_arrclo当中的数据
var allArray:Array=mail_arrclo.toArray();
//通过过滤函数过滤出符合条件的数据
var curArray:Array=allArray.filter(CateLogFilter);
mail_dg.dataProvider=curArray;
}
//定义回调函数处理Array的数据过滤
private function CateLogFilter(element:*, index:int, arr:Array):Boolean {
return (element.Catelog == mail_tree.selectedItem.@data);
}

]]>
</mx:Script>
<mx:ArrayCollection id="mail_arrclo">
<mx:Object>
<mx:Sender>郭靖</mx:Sender>
<mx:Title>升职报告</mx:Title>
<mx:Date>2007-07-07</mx:Date>
<mx:Catelog>Business</mx:Catelog>
</mx:Object>

4 advanced datagrid组件
<mx:Array id="People">
<mx:Object Name="郭靖" sex="男"
neigong="95" zhaoshu="90" bingqi="80" email="mailto:gj@shediao.com%22/>
<mx:Object Name="杨过" sex="男"
neigong="95" zhaoshu="90" bingqi="90" email="mailto:yg@shendiao.com%22/>
<mx:Object Name="小龙女" sex="女"
neigong="80" zhaoshu="85" bingqi="85" email="mailto:xln@shediao.com%22/>
</mx:Array>
<mx:AdvancedDataGrid dataProvider="{People}" horizontalCenter="0" verticalCenter="0" variableRowHeight="true" editable="true">
<mx:groupedColumns>
<mx:AdvancedDataGridColumn headerText="姓名" dataField="Name" textAlign="center" editable="true"/>
<mx:AdvancedDataGridColumn headerText="性别" dataField="sex" textAlign="center" editorDataField="text">
<mx:itemEditor>
<mx:Component>
<mx:ComboBox>
<mx:dataProvider>
<mx:ArrayCollection>
<mx:String>男</mx:String>
<mx:String>女</mx:String>
</mx:ArrayCollection>
</mx:dataProvider>
</mx:ComboBox>
</mx:Component>
</mx:itemEditor>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumnGroup headerText="成绩" textAlign="center">
<mx:AdvancedDataGridColumn headerText="内功" dataField="neigong" textAlign="center" editorDataField="value">
<mx:itemEditor>
<mx:Component>
<mx:NumericStepper stepSize="1" maximum="100"/>
</mx:Component>
</mx:itemEditor>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn headerText="招数" dataField="zhaoshu" textAlign="center" editorDataField="value">
<mx:itemEditor>
<mx:Component>
<mx:NumericStepper stepSize="1" maximum="100"/>
</mx:Component>
</mx:itemEditor>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn headerText="兵器" dataField="bingqi" textAlign="center" editorDataField="value">
<mx:itemEditor>
<mx:Component>
<mx:NumericStepper stepSize="1" maximum="100"/>
</mx:Component>
</mx:itemEditor>
</mx:AdvancedDataGridColumn>
</mx:AdvancedDataGridColumnGroup>
<mx:AdvancedDataGridColumn width="150" headerText="电子邮件" dataField="email" textAlign="center" editable="false" >
</mx:AdvancedDataGridColumn>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
注意，advanceddatagrid组件里，可以用advanceddatagridgroup来对其进行分组管理
5 简单播放器
<mx:Script>
<![CDATA[
//声明一个标志变量标示但前播放状态，用于按钮内容的切换
private var playFlag:Boolean=false;
//定义函数响应VideoDisplay组件的ready事件
private function content_load():void{
//设定显示内容进度滑动条的最小值
content_hsl.minimum=0;
//设定显示内容进度滑动条的最大值为视频的时间长度
content_hsl.maximum=content_vd.totalTime;
//设定声音大小的初始值
content_vd.volume=sound_hsl.value;
}
//定义函数响应播放控制按钮的click事件
private function playORpause():void{
//如果当前为暂停状态
if(playFlag){
//视频内容播放
content_vd.play();
//设定状态
playFlag=false;
//设定按钮标识
palyOrPause_btn.label="||";
}
else{
//视频内容暂停
content_vd.pause();
//设定状态
playFlag=true;
//设定按钮标识
palyOrPause_btn.label=">";
}
}
//设定函数响应VideoDisplay组件的playheadUpdate事件
private function playVideoProgress():void{
//设定滚动条的位置
content_hsl.value=content_vd.playheadTime;
//设定显示内容的文本
contentPro_lab.text=int(content_vd.playheadTime)+"/"+int(content_vd.totalTime);
}
//设定函数响应HSlider组件的change事件，响应改变视频播放的位置
private function setPlayPos():void{
//设定当前视频播放的位置
content_vd.playheadTime=content_hsl.value;
}
//设定函数响应HSlider组件的change事件，响应改变声音大小
private function setSound():void{
//设定声音大小
content_vd.volume=sound_hsl.value;
}
]]>
</mx:Script>
<mx:VideoDisplay id="content_vd" progressInterval="250" horizontalCenter="0" verticalCenter="0" width="232" height="178" source="test.flv"

playheadUpdate="playVideoProgress()" ready="content_load()"/>
<mx:Button label="■" horizontalCenter="-88" verticalCenter="123" click="content_vd.stop();"/>
<mx:Button id="palyOrPause_btn" label="||" horizontalCenter="-37" verticalCenter="122" click="playORpause()"/>
<mx:HSlider id="content_hsl" width="232" height="31" horizontalCenter="0" verticalCenter="102.5" change="setPlayPos()"/>
<mx:HSlider id="sound_hsl" width="77" height="22" horizontalCenter="78" verticalCenter="122" minimum="0" maximum="1" change="setSound()"

value="0.618"/>
<mx:Label id="contentPro_lab" text="0/0" horizontalCenter="87" verticalCenter="113" width="59"/>
<mx:Label text="声音" fontSize="12" horizontalCenter="29" verticalCenter="126"/>

 

 

viewstack的用法：
<mx:Panel horizontalCenter="0" verticalCenter="0" width="468" height="349" title="射雕英雄传人物简介">
<mx:Text width="100%" color="blue" text="通过点击按钮查看人物信息" fontSize="12"/>
<mx:HBox borderStyle="solid" width="100%"
paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
<!-- 通过button的click事件来控制子容器的切换 -->
<mx:Button id="ouyangfen_Button" label="欧阳风"
click="myViewStack_vs.selectedChild=ouyangfeng_cvs;"/>
<mx:Button id="yidengdashi_Button" label="一灯大师"
click="myViewStack_vs.selectedChild=yidengdashi_cvs;"/>
<mx:Button id="hongqigong_Button" label="洪七公"
click="myViewStack_vs.selectedChild=hongqigong_cvs;"/>
<mx:Button id="huanglaoxie_Button" label="黄老邪"
click="myViewStack_vs.selectedChild=huanglaoxie_cvs;"/>
</mx:HBox>
<mx:ViewStack id="myViewStack_vs" width="100%" height="242">
<!-- 为ViewStack容器添加子容器 -->
<mx:Canvas id="ouyangfeng_cvs" label="欧阳风" backgroundColor="#00ffcc"

width="100%" height="100%">
<!-- label中text的属性就是我们显示的信息内容 -->
<mx:Label text="射雕英雄传中的西毒" fontSize="14"/>
</mx:Canvas>
<mx:Canvas id="yidengdashi_cvs" label="一灯大师" backgroundColor="#FFCCEE"

width="100%" height="100%">
<mx:Label text="射雕英雄传中的南帝" fontSize="14"/>
</mx:Canvas>
<mx:Canvas id="hongqigong_cvs" label="洪七公" backgroundColor="#00ccff"

width="100%" height="271">
<mx:Label text="射雕英雄传中的北丐" fontSize="14"/>
</mx:Canvas>
<mx:Canvas id="huanglaoxie_cvs" label="黄老邪" backgroundColor="#0022dd"

width="100%" height="252">
<mx:Label text="射雕英雄传中的东邪" fontSize="14"/>
</mx:Canvas>
</mx:ViewStack>
</mx:Panel>
8 TAB控件：
<!-- 为TabNavigator容器添加子容器 -->
<mx:Canvas label="洪七公" width="250" height="100%">
<!-- label中text的属性就是我们显示的信息内容 -->
<mx:Label text="abc" fontSize="14"></mx:Label>
</mx:Canvas>
<mx:Canvas label="def" width="247" height="100%">
<mx:Label text="dddd" fontSize="14"/>
</mx:Canvas>