Flex中的HDividedBox和VDividedBox的比较附图

2025-10-25 23:23:02

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：

代码如下:

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

<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中的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://n
Flex中Array的IndexOf 的作用示例介绍

Flex中 Array 的IndexOf 的作用 1.说明 indexOf用于在索引中从小到大查找,如果查得到就返回索引值,查不到就返回-1: 2.实例 (1)设计源码复制代码代码如下: <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://n
使用flex中的httpservice方法与java进行交互

地球已经调至震动状态使用flex中的httpservice方法与java进行交互: 一.写服务器: 1.在myeclipse中建立web项目 2.写一个用来打印xml的servlet 3.当使用httpservice与java进行交互的时候不用改写remoting-config.xml文件 4.web.xml文件中配置servlet的访问地址(一般不用配置,当一个servlet建好之后myeclipse就会自动配置好web.xml文件,不用去改动,但是需要注意的是,当你在导入blazeds开发
Flex中如何动态生成DataGrid以及动态生成表头

在Flex中动态生成表格,并且表格的表头也是动态生成 1.源码复制代码代码如下: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initHandler()" width
js调用Flex中的方法并向flex中传参及flex调用js示例

首先,有了一个swf文件,test.swf,同时也有一个自动生成的html文件,test.html. 然后,在另外一个文件,test.jsp中,通过iframe,引入了test.html,即引入了swf. 现在想要在test.jsp中,向flex传参,并调用flex中的方法,我采用的方法是: 首先,在jsp中写一个调用flex的方法,如下复制代码代码如下: function initSWF(){ //得到swf的object var obj = window.frames["rightfra
Flex中TextInput组件设置限制某些字符的输入的方法

1. 限制某个字符的输入,用符号 ^ 跟上要限制的字符,可跟多个字符  <mx:TextInput id="xxx" restrict="^~" />  <mx:TextInput id="xxx" restrict="^ab" /> 2. 设置只能输入某些字符,
Flex中给按钮添加链接点击链接打开网页的方法

Flex中如何给一个按钮添加链接,点击链接打开一个网页呢? 可以用 navigateToURL 或者 htmlText 实现,请看下面的例子复制代码代码如下: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()"
Flex中对表格某列的值进行数字格式化并求百分比添加%

1.问题背景一般的,需要对表格中某列的数值进行格式化,对该数值乘以100,并保留两位小数,添加"%" 2.实现实例 <?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"
Flex中对表格中某列的值进行数字格式化保留两位小数

1.问题背景一般的,表格中展示的比率,对比率的处理是:保留两位小数,并向上保留 2.实现实例 <?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="libr
Flex中怎么给表格中的滚动条定位避免刷新回到原处

1.问题背景如果表格中的字段过多,会出现滚动条,在将滚动条滚到一定的位置时,重新刷新表格,滚动条会回到原处,原来查看的字段还得继续滚动,才能查看到. 2.实现实例 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/f

Flex中的HDividedBox和VDividedBox的比较附图

相关推荐

随机推荐