Flex各组件功能展示.doc

1. ApplicationControlBar
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" layout="absolute" horizontalAlign="left" verticalAlign="top" height="100%" width="100%"
horizontalGap="0" verticalGap="0" paddingTop="0">
<!--ApplicationContolBar是和Application相关的一个容器，
通常用来提供全局导航。有水平（默认）和垂直方向选择。它的dock属性，表示是否强行停靠在Application的顶部。默认false，
被当作一个普通的组件。true，始终在顶部，宽度为100%。 -->
<mx:ApplicationControlBar dock="true">
<mx:Label text="这里是顶部导航" width="93" height="20"/>
</mx:ApplicationControlBar>
<mx:Button label="Button1" height="120" x="24" y="0"/>
<mx:Button label="Button2" top="0" bottom="30" width="72" horizontalCenter="-72"/>
<mx:Button label="Button3" width="240" x="168" y="0"/>

</mx:Application>

2.回车事件
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
layout="absolute">
<mx:HBox xmlns:mx="
width="400"
height="300"
backgroundColor="#0000ff" addedToStage="stage.addEventListener(KeyboardEvent.KEY_DOWN, keyHandler)">
<mx:Script>
<![CDATA[
import flash.events.KeyboardEvent;
import mx.controls.Alert;
private function keyHandler(event:KeyboardEvent):void
{
switch (event.keyCode)
{
case 13:
Alert.show("Enterpressed");
break;
case 32:
trace("SpaceBarpressed");
Alert.show("SpaceBarpressed");
break;
case 16:
trace("ShiftKeypressed");
Alert.show("ShiftKeypressed");
break;
case 112:
trace("F1pressed");
Alert.show("F1pressed");
break;
case 8:
trace("Deletepressed");
Alert.show("Deletepressed");
break;
}
}
]]>
</mx:Script>
</mx:HBox>
</mx:Application>

3.报表功能
<?xml version="1.0"?>
<mx:Application xmlns:mx=" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="//createFilters()">

<mx:Script>
<![CDATA[
import mx.charts.CategoryAxis;
import mx.charts.chartClasses.IAxis;

[Bindable]
private var _DropShadowFilter:DropShadowFilter = new DropShadowFilter(2, 45, 0x000000, 0.7, 2, 2, 0.65, 3, false, false);

private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
return currFormatter.format(item);
}
private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String {
return String(item);
}
]]>
</mx:Script>

<mx:CurrencyFormatter id="currFormatter" precision="2" />

<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>

<mx:XMLListCollection id="dp">
<mx:source>
<mx:XMLList>
<quote currency_code="AUD" bbamount="924478" tbamount="888888" />
<quote currency_code="CAD" bbamount="23334" tbamount="53232" />
<quote currency_code="CHF" bbamount="200473" tbamount="200000" />
<quote currency_code="EUR" bbamount="1878" tbamount="340688" />
<quote currency_code="GBP" bbamount="1434" tbamount="24234" />
<quote currency_code="HKD" bbamount="1764497" tbamount="6324908" />
<quote currency_code="JPY" bbamount="72222" tbamount="434355" />
<quote currency_code="MXN" bbamount="40370751" tbamount="35334" />
<quote currency_code="NZD" bbamount="1761075" tbamount="344322"/>
<quote currency_code="RMB" bbamount="0" tbamount="53453453"/>
<quote currency_code="SGD" bbamount="1677597" tbamount="646343" />
<quote currency_code="USD" bbamount="40354" tbamount="117853" />

</mx:XMLList>
</mx:source>
</mx:XMLListCollection>

<!-- Define Strokes -->
<mx:Stroke id = "s1" color="#2E95BF" weight="1"/>
<mx:Stroke id = "s2" color="#62C426" weight="1"/>
<mx:Stroke id = "s3" color="#FF8C31" weight="1"/>
<mx:Stroke id="vSolid" weight="1" color="#333333" alpha="0.1" />
<mx:Stroke id="hSolid" weight="1" color="#ff0000" alpha="0.1" />
<mx:SolidColor id="vFill" color="#D6DECE" alpha=".3" />
<mx:SolidColor id="hFill" color="#F9E0E0" alpha=".3" />
<mx:SolidColor id="tFill" color="#ffffff" alpha=".3" />
<!--
id:不用说，关键中的关键
showDataTips:是否显示提示
dataProvider:非常关键的属性，指向XML数据源
seriesFilters:值为数组，边线的阴影等
-->
<mx:LineChart id="lineChart" showDataTips="true" dataProvider="{dp}" width="100%" height="100%" seriesFilters="[]">

<!--
direction:顾名思义为表格线的方向，一般设置both
verticalStroke:垂直边线样式，指向id为vSolid的horizontalStroke:水平边线样式
verticalFill:垂直填充样式
horizontalFill:水平填充样式
verticalAlternateFill与horizontalAlternateFill:指的是间隔颜色，近似grid斑马线效果
-->

<mx:backgroundElements>
<mx:GridLines horizontalTickAligned="true" verticalTickAligned="false"
verticalStroke="{vSolid}" horizontalStroke="{hSolid}"
verticalFill="{vFill}" horizontalFill="{hFill}"
verticalAlternateFill="{tFill}" horizontalAlternateFill="{tFill}"
/>
</mx:backgroundElements>

<!--
mx:verticalAxis，设置Y轴线。先来看下其属性含义
baseAtZero:Y轴线的起点是否强制从0开始。
title:Y轴线的标题
labelFunction:每一格标签的处理函数，categoryAxis_labelFunc函数将格式化数字
mx:horizontalAxis，设置X轴线（只是设置，真正的指派运行是其下mx:horizontalAxisRenderers ）。
mx:CategoryAxis将指定Y轴标签所对应得数据源，以及对标签数据的格式化函数，categoryAxis_labelFunc这个函数将数字日期后面都加上字符串“日”

-->
<mx:verticalAxis>
<mx:LinearAxis baseAtZero="false" title="外汇敞口" labelFunction="linearAxis_labelFunc" />
</mx:verticalAxis>

<mx:horizontalAxis>
<mx:CategoryAxis id="ca" categoryField="@currency_code" title="敞口类型" labelFunction="categoryAxis_labelFunc" />
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{ca}" canDropLabels="true" />
</mx:horizontalAxisRenderers>

<!--mx:LineSeries代表的就是一条折线，来看下其属性
id：地球人都知道就不说了
yField：对应xml数据源的属性名
displayName：显示的名字
lineStroke：线条样式
showDataEffect：鼠标到线条点上出现数据提示的时候的动画效果
hideDataEffect：鼠标离开线条点上隐藏数据提示的时候的动画效果
filters：这里显示边线阴影 -->
<mx:series>
<mx:LineSeries id="L1" yField="@bbamount" displayName="BB外汇敞口：" lineStroke="{s1}" showDataEffect="{fadeIn}" hideDataEffect="{fadeOut}" filters="{[_DropShadowFilter]}"/>
<mx:LineSeries yField="@tbamount" displayName="TB外汇敞口" lineStroke="{s2}" showDataEffect="{fadeIn}" hideDataEffect="{fadeOut}" filters="{[_DropShadowFilter]}"/>
</mx:series>
</mx:LineChart>
</mx:Application>

4.报表拖拽
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" horizontalAlign="center" layout="vertical" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.controls.DataGrid;
import mx.events.DragEvent;
import mx.core.UIComponent;
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.collections.ArrayCollection;

//DataGrid的数据源
[Bindable]
private var medalsAC:ArrayCollection = new ArrayCollection( [
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);

//ColumnChart的数据源, 默认为空
[Bindable]
private var chartData:ArrayCollection = new ArrayCollection()

private function init():void{

//让columnChart监听拖拽事件
column.addEventListener(DragEvent.DRAG_ENTER,dragEnterHandle)
column.addEventListener(DragEvent.DRAG_DROP,dragdropHandle)
}

//因为只有DataGrid推拽，所以直接允许，如果界面上有多个控件监听拖拽事件，需要判断后允许正确的数据进入
private function dragEnterHandle(e:DragEvent):void{
DragManager.acceptDragDrop(e.currentTarget as UIComponent)
}

//拖拽放开后处理
private function dragdropHandle(e:DragEvent):void{
//如果Column Chart中已经存在相同数据，报错返回
if(chartData.contains((e.dragInitiator as DataGrid).selectedItem)){
Alert.show("数据已经存在");
return;
}
//往column chart的dataprovider中添加拖拽数据。
//如果只需要特定的数据进入column chart，可以先做数据筛选。
chartData.addItem((e.dragInitiator as DataGrid).selectedItem)
}

]]>
</mx:Script>

<!--允许Grid拖拽数据-->
<mx:DataGrid dragEnabled="true" dataProvider="{medalsAC}" >
<mx:columns>

<mx:DataGridColumn dataField="Country" />
<mx:DataGridColumn dataField="Gold" />
<mx:DataGridColumn dataField="Silver" />
<mx:DataGridColumn dataField="Bronze" />

</mx:columns>

</mx:DataGrid>

<!-- 定义颜色 -->
<mx:SolidColor id="sc1" color="yellow" alpha=".8"/>
<mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".6"/>
<mx:SolidColor id="sc3" color="0xFFCC66" alpha=".6"/>

<!-- 定义颜色 -->
<mx:Stroke id="s1" color="yellow" weight="2"/>
<mx:Stroke id="s2" color="0xCCCCCC" weight="2"/>
<mx:Stroke id="s3" color="0xFFCC66" weight="2"/>

<!--Column chart设置成能解析Country: "Russia", Gold: 27, Silver:27, Bronze: 38这样的数据项-->
<mx:ColumnChart id="column"
height="200"
width="300"
paddingLeft="5"
paddingRight="5"
showDataTips="true"
dataProvider="{chartData}"
>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Country"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
xField="Country"
yField="Gold"
displayName="Gold"
fill="{sc1}"
stroke="{s1}"
/>
<mx:ColumnSeries
xField="Country"
yField="Silver"
displayName="Silver"
fill="{sc2}"
stroke="{s2}"
/>
<mx:ColumnSeries
xField="Country"
yField="Bronze"
displayName="Bronze"
fill="{sc3}"
stroke="{s3}"
/>
</mx:series>
</mx:ColumnChart>

</mx:Application>

5. HDividedBox
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" layout="absolute">
<!--
DividedBox继承自Box类，它有两个子类：HDividedBox和VDividedBox。类似于HBox和VBox，
多了在子级元素之间增加了可以拖动的分割块。拖动分割块可以动态的调整分割块附近元素的长宽。
borderStyle是组件的样式之一，表示边框样式，默认：none，表示无边框。solid为实心线条。
liveDragging：true 表示在拖动时，在松开鼠标后，调整位置。false 拖动时调整
-->
<mx:HDividedBox width="90%" height="90%" liveDragging="false" borderStyle="solid"
x="10" y="10">
<mx:Canvas width="200" height="246">
<mx:Label x="33" y="10" text="一个Canvas容器"/>
</mx:Canvas>
<mx:HBox width="50%" height="50%">
<mx:Label text="HBox容器" width="140"/>
<mx:HBox width="50%" height="50%">
<mx:Label text="HBox内的HBox" width="140"/>
</mx:HBox>
</mx:HBox>
</mx:HDividedBox>
</mx:Application>

6.grid 动态修改

<mx:Application xmlns:mx=" layout="horizontal">
<mx:Panel width="458" height="313" layout="absolute">
<mx:Label id="lbl" x="19" y="10" text="" width="171" height="20"/>
<mx:DataGrid id="dg" x="19" y="58" dataProvider="{arr}" editable="true" itemEditEnd="editHandle(event)"
horizontalGridLines="true" horizontalGridLineColor="#B9F2C9" verticalGridLineColor="#B9F2C9">
<mx:columns>
<mx:DataGridColumn headerText="year" dataField="year" editable="false"/>
<mx:DataGridColumn headerText="city" dataField="city" editable="false"/>
<mx:DataGridColumn headerText="provice" dataField="provice" editable="false" sortable="false"/>
<mx:DataGridColumn headerText="total" dataField="total"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.events.DataGridEvent;
import mx.controls.Alert;
import mx.collections.ArrayCollection;

[Bindable]
private var arr:ArrayCollection=new ArrayCollection([
{year:2009,city:"Shanghai",provice:"上海",total:580000},
{year:2009,city:"Beijing",provice:"河北省",total:7852020},
{year:2009,city:"Nanjing",provice:"江苏省",total:895145},
{year:2009,city:"Hangzhou",provice:"浙江省",total:4132415}]);

private function editHandle(event:DataGridEvent):void{
if(event.dataField=="total"){
var cols:DataGridColumn=dg.columns[event.columnIndex];
///编辑前的值,没用到，只是想获得一下
var s:String=event.itemRenderer.data.total;
//编辑后新的值
var newValue:String=dg.itemEditorInstance[cols.editorDataField];
var tt:String;
var num:Number=Number(tt);
if(isNaN(num)){
event.preventDefault();//恢复本来数据
lbl.text="this is not num!";
}else{
lbl.text=tt;
/*=======操作数据和数据库打交道=========*/
/*省略*/
}
}
}
]]>

</mx:Script>
</mx:Application>