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="第一张" onclick="btn_click('1')" />
 <input type="button" value="第二张" onclick="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>