Flex 学习小结（13）

1 区域性图表
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

// 创建数组集合，用于图表数据源
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"一月", Profit:2000, Expenses:1500, Amount:450},
{Month:"二月", Profit:1000, Expenses:200, Amount:600},
{Month:"三月", Profit:1500, Expenses:500, Amount:300}
]);
]]>
</mx:Script>
<mx:Panel title="Area Chart">
<!-- 创建 AreaChart 图表 -->
<mx:AreaChart id="myChart" dataProvider="{expenses}"
showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:AreaSeries
yField="Profit"
displayName="利润"
form="curve"
/>
<mx:AreaSeries
yField="Expenses"
displayName="费用"
form="curve"
/>
</mx:series>
</mx:AreaChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel><![CDATA[
import mx.collections.ArrayCollection;

// 创建数组集合，用于图表数据源
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"一月", Profit:2000, Expenses:1500},
{Month:"二月", Profit:1000, Expenses:200},
{Month:"三月", Profit:1500, Expenses:500}
]);
]]>
</mx:Script>
<mx:Panel>
<!-- 创建 BarChart 图表 -->
<mx:BarChart id="myChart" dataProvider="{expenses}">
<mx:verticalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:verticalAxis>
<mx:series>
<mx:BarSeries
yField="Month"
xField="Profit"
displayName="利润"
/>
<mx:BarSeries
yField="Month"
xField="Expenses"
displayName="费用"
/>
</mx:series>
</mx:BarChart>
<mx:Legend dataProvider="{myChart}"/>

2 BAR类型的图表
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

// 创建数组集合，用于图表数据源
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"一月", Profit:2000, Expenses:1500},
{Month:"二月", Profit:1000, Expenses:200},
{Month:"三月", Profit:1500, Expenses:500}
]);
]]>
</mx:Script>
<mx:Panel>
<!-- 创建 BarChart 图表 -->
<mx:BarChart id="myChart" dataProvider="{expenses}">
<mx:verticalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:verticalAxis>
<mx:series>
<mx:BarSeries
yField="Month"
xField="Profit"
displayName="利润"
/>
<mx:BarSeries
yField="Month"
xField="Expenses"
displayName="费用"
/>
</mx:series>
</mx:BarChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
3 线条型
<![CDATA[
import mx.collections.ArrayCollection;
// 创建一个数组并填充数据
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"1月", Profit:2000, Expenses:1500,

Amount:450},
{Month:"2月", Profit:1000, Expenses:200,

Amount:600},
{Month:"3月", Profit:1500, Expenses:500,

Amount:300}
]);
]]>
</mx:Script>

<mx:Panel title="线型图表">
<!-- 创建 LineChart 图表 -->
<mx:LineChart id="myChart" dataProvider="{expenses}" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{expenses}"

categoryField="Month" />
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries yField="Profit" displayName="利润" />
<mx:LineSeries yField="Expenses" displayName="费用" />
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{myChart}" />
</mx:Panel>
4 设置datachooser控件的中文显示
<mx:Script>
<![CDATA[
private function InitDataChooser():void
{
// 设置月份名称
var arrMonthName:Array =
["一月", "二月", "三月", "四月", "五月", "六月",
"七月", "八月", "九月", "十月", "十一月", "十二月"];

// 设置周名称
var arrWeekName:Array = ["星期日", "星期一", "星期二",
"星期三", "星期四", "星

期五", "星期六"];

dc1.monthNames = arrMonthName;
dc1.dayNames = arrWeekName;
}
]]>
</mx:Script>
<mx:DateChooser id="dc1" x="151" y="86" creationComplete="InitDataChooser()"/>

5 在一个FLEX中访问另外一个FLEX程序，并修改之
child.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label id="lblShow" text="这是已加载的SWF文件中的控件" fontSize="20" x="1" y="0"/>
</mx:Application>

main.mxml:
<mx:Script>
<![CDATA[
import mx.managers.SystemManager;

private var loadedSM:SystemManager;

// 初始化SWF文件，并把其内容赋给 SystemManager 对象
private function InitSWFApp():void
{
loadedSM = SystemManager(myLoader.content);
}

// 获取SWF文件中 Label 控件的 text 属性
private function GetSWFLabel():void
{
lbl.text = loadedSM.application["lblShow"].text;
}

// 修改SWF文件中 Label 控件的 text属性
private function UpdateSWFLabel():void
{
loadedSM.application["lblShow"].text = "这是更新后的文字。";
}
]]>
</mx:Script>

<mx:Label id="lbl" x="203" y="62"/>
<mx:SWFLoader id="myLoader" width="300" source="ChildApp.swf" x="10" y="10"
creationComplete="InitSWFApp();"/>
<mx:Button click="GetSWFLabel();" x="10" y="60" label="获取SWF文件中的Label控件"/>
<mx:Button label="修改SWF文件中的Label控件" click="UpdateSWFLabel();" x="10" y="90"/>
6 对颜色面版自定义
import mx.events.ColorPickerEvent;
import mx.events.DropdownEvent;

// 创建数组，并填充颜色相关数据
[Bindable]
public var complexDPArray:Array = [
{label:"黄色", color:"0xFFFF00",
descript:"黄色"},
{label:"粉色", color:"0xFF66CC",
descript:"粉色"},
{label:"深红色", color:"0x990000",
descript:"深红色"},
{label:"蓝色", color:"0x000066",
descript:"蓝色"},
{label:"深绿色", color:"0x006600",
descript:"深绿色"},
{label:"褐色", color:"0x666666",
descript:"褐色"}];
]]>
</mx:Script>

<mx:ArrayCollection id="complexDP" source="{complexDPArray}"/>
<mx:ColorPicker id="cp" dataProvider="{complexDP}" editable="false" x="23" y="19"/>

7 titlewindow
要弹出的窗口：
import mx.managers.PopUpManager;

// 关闭窗口
private function closeWindow():void
{
// 移除窗口对象
PopUpManager.removePopUp(this);
}
]]>
主窗口：
import mx.managers.PopUpManager;

// 按钮单击事件
private function btnOpenWnd_click():void
{
// 弹出新窗口
PopUpManager.createPopUp(this, MyTitleWindow, false);
}
]]>
在弹出窗体中向主窗体传递数据：
<![CDATA[
import mx.managers.PopUpManager;

// 创建窗体对象
private var pop:MyTitleWindow;
// 按钮单击事件
private function btnLoginWnd_click():void
{
// 创建弹出窗体
pop = MyTitleWindow(PopUpManager.createPopUp(this,

MyTitleWindow, false));
// 设置弹出窗体是否显示关闭按钮
pop.showCloseButton = true;
// 弹出窗体按钮单击事件
pop.btnLogin.addEventListener(MouseEvent.CLICK,

btnLogin_click);
}

// 登录按钮单击事件
private function btnLogin_click(e:MouseEvent):void
{
// 返回登录名并设置文本标签内容
lbUser.text = "登录名：" + pop.userName.text;
// 移除弹出窗体
PopUpManager.removePopUp(pop);
}
]]>

8 在两个不同的viewstack中传递值
首先用一个单例来临时保存数据
public class ViewModelLocator
{
private static var instance:ViewModelLocator;

public function ViewModelLocator()
{
}

public static function getInstance() : ViewModelLocator
{
if (instance == null)
{
instance = new ViewModelLocator();
}

return instance;
}

public var param : String;
第一个viewstack:

<![CDATA[
import mx.controls.Alert;
import mx.containers.ViewStack;

private function btnPass_click():void
{
var modelLocator:ViewModelLocator =

ViewModelLocator.getInstance();
modelLocator.param = txtParam.text;

(ViewStack)(this.parent).selectedChild =
(ViewStack)(this.parent).getChildByName

("viewValue");
}
]]>
第二个viewstack:
<mx:Script>
<![CDATA[
[Bindable]
private var modelLocator:ViewModelLocator =

ViewModelLocator.getInstance();

private function initApp():void
{
lbParam.text = "传递过来的参数值：" + modelLocator.param;
}
]]>
</mx:Script>

9 手工拖放控件
<![CDATA[
import mx.core.DragSource;
import mx.managers.DragManager;
import mx.events.*;
import mx.containers.Canvas;

private function mouseMoveHandler(event:MouseEvent):void
{
// 获取拖放的源组件
var dragInitiator:Canvas = Canvas(event.currentTarget);
// 获取组件的颜色值
var dragColor:int = dragInitiator.getStyle('backgroundColor');
// 创建一个 DragSource 对象.
var ds:DragSource = new DragSource();
// 添加数据到对象中
ds.addData(dragColor, 'color');
// 调用 DragManager 类的 doDrag() 方法
DragManager.doDrag(dragInitiator, ds, event);
}

private function dragEnterHandler(event:DragEvent):void
{
// 判断源的数据格式
if (event.dragSource.hasFormat('color'))
{
// 获取目标对象
var dropTarget:Canvas = Canvas(event.currentTarget);
// 接受拖放
DragManager.acceptDragDrop(dropTarget);
}
}

private function dragDropHandler(event:DragEvent):void
{
var data:Object = event.dragSource.dataForFormat('color');
// 设置颜色.
myCanvas.setStyle("backgroundColor", data);
}
]]>
</mx:Script>
<!-- 可以拖放两种颜色的箱子. -->
<mx:VBox x="29" y="23">
<mx:HBox>
<mx:Canvas
width="30" height="30"
backgroundColor="red"
borderStyle="solid"
mouseMove="mouseMoveHandler(event);"/>
<mx:Canvas
width="30" height="30"
backgroundColor="green"
borderStyle="solid"
mouseMove="mouseMoveHandler(event);"/>
</mx:HBox>
<!-- 使用 dragEnter and dragDrop 事件允许拖放. -->
<mx:Canvas id="myCanvas"
width="100" height="100"
backgroundColor="#FFFFFF"
borderStyle="solid"
dragEnter="dragEnterHandler(event);"
dragDrop="dragDropHandler(event);"/>
<mx:Button id="b1"
label="清空"
click="myCanvas.setStyle('backgroundColor', '0xFFFFFF');"/>
</mx:VBox>
10 创建自定义tooltip
import mx.managers.ToolTipManager;
import mx.controls.ToolTip;

public var myTip:ToolTip;

// 鼠标经过事件
private function createBigTip():void
{
var s:String = "这些按钮可以保存、应用、取消执行的操作。"
// 创建ToolTip对象
myTip = ToolTipManager.createToolTip(s,10,10) as ToolTip;
// 设置ToolTip对象样式
myTip.setStyle("backgroundColor",0xFFCC00);
myTip.setStyle("fontSize",12);
// 设置ToolTip对象宽度和高度
myTip.width = 250;
myTip.height = 30;
}

// 鼠标移除事件
private function destroyBigTip():void
{
// 销毁ToolTip对象
ToolTipManager.destroyToolTip(myTip);
}
]]>

11 FLASH-BRIDGE桥
创建FLEX项目后，选择create ajax bridge，创建flex-ajax桥
FLEX中：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

xmlns:ns1="bridge.*">
<ns1:FABridge bridgeName="b_main"/>
<mx:Image id="imgPhoto" source="assets/1.jpg" effectStart="" effectEnd=""/>
</mx:Application>
HTML页中：
<input type="button" value="第一张" οnclick="btn_click('1')" />
<input type="button" value="第二张" οnclick="btn_click('2')" />
<script type="text/javascript">
function btn_click(num)
{
var initCallback = function()
{
var flexApp = FABridge.b_main.root();
// 设置Flex中控件的值
flexApp.getImgPhoto().setSource("assets/" + num + ".jpg");
}

FABridge.addInitializationCallback("b_main", initCallback);
}
</script>

绿色通道： 好文要顶 关注我 收藏该文 与我联系