Flex学习笔记(二)

striver

个人空间 相册
性别:
来自:拼吾爱
积分:7097
帖子:7009
注册: 2007-04-09

2008-08-06 00:28 | 只看楼主

Flex页面布局（容器类和导航类） Part.1

回顾上一章《 Flex学习笔记(一) 》
Flex超炫的视觉效果，相信很多人都为之震撼。因此页面布局就就成为程序开发中重要的一个环节。它直接决定了程序的成败。

刚开始学习这一块儿的时候，在脑中闪现出以前学习Swing时郁闷的场景。呵呵，这次让我们换一种学习方法，用实例来学习，这样不会空洞的只剩下长篇的理论，也不会枯燥的让我们想睡觉。

1）ApplicationControlBar

对于ApplicationControlBar，我们需要注意的是dock这个属性。

Dock是决定ApplicationControlBar的位置，默认为false。

当dock=true，ApplicationControlBar将始终显示在窗口的顶部，并且自动缩放，适应窗口大小。

当dock=false，它的位置可以随意设定。

Code

Flex效果：

2）Accordion

这个是一个可以收缩的导航控件。

这个我们可以了解一下Accordion的selectedIndex和selectedChild两个属性。

selectedIndex：元素的索引号

selectedChid：元素的ID

Code

Flex效果：

3）Box、HBox、VBox

HBox和VBox是Box的子类，HBox为水平分布，VBox为垂直分布

Box通过设置direction的属性，可以达到HBox，或者VBox的效果。

Box的direction="horizontal"，相当于HBox

Box的direction="vertical"，相当于VBox

Code

Flex效果：

4）DividedBox、HDividedBox、VDividedBox

HDividedBox和VDividedBox是DividedBox的子类，HDividedBox为水平分布，VDividedBox为垂直分布

DividedBox通过设置direction的属性，可以达到HDividedBox，或者VDividedBox的效果。

DividedBox的direction="horizontal"，相当于HDividedBox

DividedBox的direction="vertical"，相当于VDividedBox

需要注意的一点是有个liveDragging属性，

liveDragging=true的时候，元素在拖动的时候就会不断的调整位置。

liveDragging=false的时候，元素只有在鼠标松开的时候才调整位置。默认的情况是false。

Code

[copy to clipboard]

CODE:

1<?xml version="1.0" encoding="utf-8"?>
2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">
3<mx:VDividedBox width="100%" height="100%">
4 <mx:HDividedBox width="100%" height="50%">
5 <mx:Label text="这是DividedBox"/>
6 <mx:Canvas width="40%" height="100%" >
7 <mx:DividedBox direction="horizontal" width="100%" height="100%" liveDragging="true">
8 <mx:Panel height="100%" width="50%" >
9 <mx:Label text="liveDragging=true"/>
10 <mx:Label text="direction=horizontal"/>
11 </mx:Panel>
12 <mx:Panel height="100%" width="50%">
13 <mx:Label text="direction=horizontal"/>
14 </mx:Panel>
15 </mx:DividedBox>
16 </mx:Canvas>
17 <mx:Canvas width="40%" height="100%">
18 <mx:DividedBox direction="vertical" width="100%" height="100%" x="10" liveDragging="false">
19 <mx:Panel height="50%" width="100%">
20 <mx:Label text="liveDragging=false"/>
21 <mx:Label text="direction=vertical"/>
22 </mx:Panel>
23 <mx:Panel height="50%" width="100%">
24 <mx:Label text="direction=vertical"/>
25 </mx:Panel>
26 </mx:DividedBox>
27 </mx:Canvas>
28 </mx:HDividedBox>
29
30 <mx:HDividedBox width="100%" height="50%">
31 <mx:HBox width="40%" height="100%">
32 <mx:Label text="这是HDividedBox"/>
33 <mx:HDividedBox width="100%" height="100%" liveDragging="true">
34 <mx:Panel height="100%" width="50%">
35 <mx:Label text="liveDragging=true"/>
36 </mx:Panel>
37 <mx:Panel height="100%" width="50%"/>
38 </mx:HDividedBox>
39 </mx:HBox>
40 <mx:HBox width="40%" height="100%" >
41 <mx:Label text="这是VDividedBox"/>
42 <mx:VDividedBox width="100%" height="100%" liveDragging="false">
43 <mx:Panel height="50%" width="100%">
44 <mx:Label text="liveDragging=false"/>
45 </mx:Panel>
46 <mx:Panel height="50%" width="100%"/>
47 </mx:VDividedBox>
48 </mx:HBox>
49 </mx:HDividedBox>
50</mx:VDividedBox>
51</mx:Application>