• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Flex中的HDividedBox和VDividedBox的比较附图

    1、HDividedBox

    (1)源码

    HVD.mxml:

    复制代码 代码如下:

    ?xml version="1.0" encoding="utf-8"?>
    s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    width="100%" height="100%">
    s:layout>
    s:BasicLayout/>
    /s:layout>
    fx:Declarations>
    !-- 将非可视元素(例如服务、值对象)放在此处 -->
    /fx:Declarations>
    fx:Script>
    ![CDATA[
    import mx.collections.ArrayCollection;

    [Bindable]
    //图表数据绑定
    private var gridArray:ArrayCollection = new ArrayCollection([
    {month:"一月",Mon:"45",Tus:"23",Wed:"64",Thu:"42",Fri:"20",Sat:"54",Sun:"42"},
    {month:"二月",Mon:"12",Tus:"52",Wed:"25",Thu:"45",Fri:"41",Sat:"54",Sun:"25"},
    {month:"三月",Mon:"56",Tus:"42",Wed:"24",Thu:"45",Fri:"31",Sat:"45",Sun:"14"},
    {month:"四月",Mon:"45",Tus:"40",Wed:"21",Thu:"75",Fri:"20",Sat:"15",Sun:"45"},
    {month:"五月",Mon:"23",Tus:"51",Wed:"20",Thu:"45",Fri:"15",Sat:"56",Sun:"43"},
    {month:"六月",Mon:"30",Tus:"20",Wed:"23",Thu:"95",Fri:"42",Sat:"58",Sun:"13"},
    {month:"七月",Mon:"20",Tus:"52",Wed:"29",Thu:"45",Fri:"12",Sat:"45",Sun:"32"},
    {month:"八月",Mon:"12",Tus:"65",Wed:"28",Thu:"25",Fri:"12",Sat:"96",Sun:"12"},
    {month:"九月",Mon:"30",Tus:"45",Wed:"27",Thu:"51",Fri:"45",Sat:"56",Sun:"35"},
    {month:"十月",Mon:"33",Tus:"54",Wed:"25",Thu:"34",Fri:"25",Sat:"76",Sun:"44"},
    {month:"十一月",Mon:"84",Tus:"84",Wed:"20",Thu:"32",Fri:"15",Sat:"85",Sun:"13"},
    {month:"十二月",Mon:"25",Tus:"25",Wed:"30",Thu:"21",Fri:"45",Sat:"45",Sun:"13"}
    ]);
    ]]>
    /fx:Script>

    mx:HDividedBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
    mx:DataGrid dataProvider="{gridArray}" width="50%" height="100%" verticalAlign="middle" textAlign="center">
    mx:columns>
    mx:DataGridColumn headerText="月份" dataField="month"/>
    mx:DataGridColumn headerText="星期一" dataField="Mon"/>
    mx:DataGridColumn headerText="星期二" dataField="Tus"/>
    mx:DataGridColumn headerText="星期三" dataField="Wed"/>
    mx:DataGridColumn headerText="星期四" dataField="Thu"/>
    mx:DataGridColumn headerText="星期五" dataField="Fri"/>
    mx:DataGridColumn headerText="星期六" dataField="Sat"/>
    mx:DataGridColumn headerText="星期日" dataField="Sun"/>
    /mx:columns>
    /mx:DataGrid>
    mx:VBox width="50%" height="100%">
    mx:ColumnChart id="column" dataProvider="{gridArray}" width="100%" height="98%">
    mx:horizontalAxis>
    mx:CategoryAxis categoryField="month" displayName="月份"/>
    /mx:horizontalAxis>
    mx:series>
    mx:ColumnSeries displayName="星期一" yField="Mon" xField="month"/>
    mx:ColumnSeries displayName="星期二" yField="Tus" xField="month"/>
    mx:ColumnSeries displayName="星期三" yField="Wed" xField="month"/>
    mx:ColumnSeries displayName="星期四" yField="Thu" xField="month"/>
    mx:ColumnSeries displayName="星期五" yField="Fri" xField="month"/>
    mx:ColumnSeries displayName="星期六" yField="Sat" xField="month"/>
    mx:ColumnSeries displayName="星期日" yField="Sun" xField="month"/>
    /mx:series>
    /mx:ColumnChart>
    mx:Legend dataProvider="{column}" height="30"/>
    /mx:VBox>
    /mx:HDividedBox>
    /s:Application>

    (2)结果

    a 初始化
     
    b 向左移动
     
    c 向右移动
     
    2、VDividedBox

    (1)源码

    VBD.mxml:
    复制代码 代码如下:

    ?xml version="1.0" encoding="utf-8"?>
    s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    width="100%" height="100%">
    s:layout>
    s:BasicLayout/>
    /s:layout>
    fx:Declarations>
    !-- 将非可视元素(例如服务、值对象)放在此处 -->
    /fx:Declarations>

    fx:Script>
    ![CDATA[
    import mx.collections.ArrayCollection;

    [Bindable]
    //图表数据绑定
    private var gridArray:ArrayCollection = new ArrayCollection([
    {month:"一月",Mon:"45",Tus:"23",Wed:"64",Thu:"42",Fri:"20",Sat:"54",Sun:"42"},
    {month:"二月",Mon:"12",Tus:"52",Wed:"25",Thu:"45",Fri:"41",Sat:"54",Sun:"25"},
    {month:"三月",Mon:"56",Tus:"42",Wed:"24",Thu:"45",Fri:"31",Sat:"45",Sun:"14"},
    {month:"四月",Mon:"45",Tus:"40",Wed:"21",Thu:"75",Fri:"20",Sat:"15",Sun:"45"},
    {month:"五月",Mon:"23",Tus:"51",Wed:"20",Thu:"45",Fri:"15",Sat:"56",Sun:"43"},
    {month:"六月",Mon:"30",Tus:"20",Wed:"23",Thu:"95",Fri:"42",Sat:"58",Sun:"13"},
    {month:"七月",Mon:"20",Tus:"52",Wed:"29",Thu:"45",Fri:"12",Sat:"45",Sun:"32"},
    {month:"八月",Mon:"12",Tus:"65",Wed:"28",Thu:"25",Fri:"12",Sat:"96",Sun:"12"},
    {month:"九月",Mon:"30",Tus:"45",Wed:"27",Thu:"51",Fri:"45",Sat:"56",Sun:"35"},
    {month:"十月",Mon:"33",Tus:"54",Wed:"25",Thu:"34",Fri:"25",Sat:"76",Sun:"44"},
    {month:"十一月",Mon:"84",Tus:"84",Wed:"20",Thu:"32",Fri:"15",Sat:"85",Sun:"13"},
    {month:"十二月",Mon:"25",Tus:"25",Wed:"30",Thu:"21",Fri:"45",Sat:"45",Sun:"13"}
    ]);
    ]]>
    /fx:Script>

    mx:VBox width="100%" height="100%" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20">
    mx:VDividedBox width="100%" height="100%">
    mx:DataGrid dataProvider="{gridArray}" width="100%" height="50%" verticalAlign="middle" textAlign="center">
    mx:columns>
    mx:DataGridColumn headerText="月份" dataField="month"/>
    mx:DataGridColumn headerText="星期一" dataField="Mon"/>
    mx:DataGridColumn headerText="星期二" dataField="Tus"/>
    mx:DataGridColumn headerText="星期三" dataField="Wed"/>
    mx:DataGridColumn headerText="星期四" dataField="Thu"/>
    mx:DataGridColumn headerText="星期五" dataField="Fri"/>
    mx:DataGridColumn headerText="星期六" dataField="Sat"/>
    mx:DataGridColumn headerText="星期日" dataField="Sun"/>
    /mx:columns>
    /mx:DataGrid>
    mx:VBox width="100%" height="50%" borderColor="0x000000" borderVisible="true">
    mx:ColumnChart id="column" dataProvider="{gridArray}" showDataTips="true" width="100%" height="98%">
    mx:horizontalAxis>
    mx:CategoryAxis categoryField="month" displayName="月份"/>
    /mx:horizontalAxis>
    mx:series>
    mx:ColumnSeries displayName="星期一" yField="Mon" xField="month"/>
    mx:ColumnSeries displayName="星期二" yField="Tus" xField="month"/>
    mx:ColumnSeries displayName="星期三" yField="Wed" xField="month"/>
    mx:ColumnSeries displayName="星期四" yField="Thu" xField="month"/>
    mx:ColumnSeries displayName="星期五" yField="Fri" xField="month"/>
    mx:ColumnSeries displayName="星期六" yField="Sat" xField="month"/>
    mx:ColumnSeries displayName="星期日" yField="Sun" xField="month"/>
    /mx:series>
    /mx:ColumnChart>
    mx:HBox width="100%" height="30">
    s:Label width="35%"/>
    mx:Legend dataProvider="{column}" height="30"/>
    /mx:HBox>
    /mx:VBox>
    /mx:VDividedBox>
    /mx:VBox>

    /s:Application>

    (2)运行结果

    a、初始化
     
    b、向上移动
     
    c、向下移动

    上一篇:Flex中如何动态生成DataGrid以及动态生成表头
    下一篇:Flex中AdvancedDataGrid的用法示例介绍
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Flex中的HDividedBox和VDividedBox的比较附图 Flex,中的,HDividedBox,和,VDividedBox,