Flex学习笔记(二)

最新推荐文章于 2025-06-13 15:15:30 发布

tekkenvs11

最新推荐文章于 2025-06-13 15:15:30 发布

阅读量985

点赞数

CC 4.0 BY-SA版权

文章标签： flex encoding swing 程序开发

本文链接：https://blog.youkuaiyun.com/tekkenvs11/article/details/4286538

Flex超炫的视觉效果，相信很多人都为之震撼。因此页面布局就就成为程序开发中重要的一个环节。它直接决定了程序的成败。

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

1） ApplicationControlBar

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

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

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

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

<? xml version="1.0" encoding="utf-8" ?>
2

< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" layout ="absolute" fontSize ="12" >
3

< mx:ApplicationControlBar dock ="true" >
4

< mx:Label text ="dock=true" />
5

< mx:MenuBar labelField ="@label" >
6

< mx:XMLList >
7

< item label ="Country Name" >
8

< node label = "China" />
9

< node label = "America" />
10

</ item >
11

< item label ="City Name" >
12

< node label = "BeiJing" />
13

< node label = "QingDao" />
14

</ item >
15

</ mx:XMLList >
16

</ mx:MenuBar >
17

</ mx:ApplicationControlBar >
18

< mx:Label text ="这个ApplicationControlBar的dock属性设置成了true，所以它永远显示在窗口的最顶端" y ="10" />
19

< mx:ApplicationControlBar x ="66" y ="111" width ="322" >
20

< mx:Label text ="dock=false" />
21

</ mx:ApplicationControlBar >
22

< mx:Label text ="默认的情况下dock的属性值为false，所以它可以出现在程序的任何地方" y ="152" x ="10" />
23

</ mx:Application >

Flex效果：

2） Accordion

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

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

selectedIndex：元素的索引号

selectedChid：元素的 ID

<? xml version="1.0" encoding="utf-8" ?>
2

< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" layout ="absolute" fontSize ="12" >
3

< mx:Accordion id ="simple" x ="10" y ="10" >
4

< mx:Panel label ="Choose panel1" id ="p1" >
5

< mx:Label text ="This is Panel1" />
6

</ mx:Panel >
7

< mx:Panel label ="Choose panel2" id ="p2" >
8

< mx:Label text ="This is panel2" />
9

</ mx:Panel >
10

< mx:Panel label ="Choose panel3" id ="p3" >
11

< mx:Label text ="This is panel3" />
12

</ mx:Panel >
13

</ mx:Accordion >
14

< mx:HBox x ="10" y ="169" >
15

< mx:Label text ="通过selectedIndex访问" />
16

< mx:Button label ="Show Panel1" click ="simple.selectedIndex=0" />
17

< mx:Button label ="Show Panel2" click ="simple.selectedIndex=1" />
18

< mx:Button label ="Show Panel3" click ="simple.selectedIndex=2" />
19

</ mx:HBox >
20

< mx:HBox y ="215" x ="10" >
21

< mx:Label text ="通过selectedChild访问" />
22

< mx:Button label ="Show Panel1" click ="simple.selectedChild=p1" x ="10" y ="201" />
23

< mx:Button label ="Show Panel2" click ="simple.selectedChild=p2" x ="10" y ="201" />
24

< mx:Button label ="Show Panel3" click ="simple.selectedChild=p3" x ="10" y ="201" />
25

</ mx:HBox >
26

</ mx:Application >

Flex效果：

3） Box、 HBox、 VBox

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

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

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

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

<? xml version="1.0" encoding="utf-8" ?>
2

< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" layout ="absolute" fontSize ="12" >
3

< mx:Panel height ="80%" width ="80%" paddingTop ="10" paddingLeft ="10" paddingRight ="10" paddingBottom ="10" >
4

< mx:VDividedBox width ="80%" height ="80%" >
5

< mx:Panel width ="80%" height ="40%" >
6

< mx:Box direction ="horizontal" borderStyle ="solid" >
7

< mx:Label text ="box的direction=horizontal" />
8

< mx:Label text ="这是水平分布，相当于HBox" />
9

< mx:Button label ="Button" />
10

</ mx:Box >
11

< mx:Box direction ="vertical" borderStyle ="solid" >
13

< mx:Label text ="box的direction=vertical" />
14

< mx:Label text ="这是垂直分布，相当于VBox" />
15

< mx:Button label ="Button" />
16

</ mx:Box >
17

</ mx:Panel >
18

< mx:Panel width ="80%" height ="40%" >
20

< mx:HBox borderStyle ="solid" >
21

< mx:Label text ="HBox,是水平分布" />
22

< mx:Label text ="相当于Box的direction=horizontal" />
23

< mx:Button label ="Button" />
24

</ mx:HBox >
25

< mx:VBox borderStyle ="solid" >
26

< mx:Label text ="VBox,是垂直分布" />
27

< mx:Label text ="相当于Box的direction=vertical" />
28

< mx:Button label ="Button" />
29

</ mx:VBox >
30

</ mx:Panel >
31

</ mx:VDividedBox >
32

</ mx:Panel >
33

</ mx:Application >

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。

<? 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

< 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 >

Flex效果：

这块内容太多，所以决定分两张帖子，在下一个章中将会给大家提供一个综合所讲实例的explorer，希望对大家的学习有帮助