對(duì)于一個(gè)擁有豐富組件的GUI設(shè)計(jì)工具來說，界面的布局技術(shù)成為界面美化的一個(gè)重要方面。Flex從控件的功能上大致提供了兩種方法：容器（控制布局），組件（提供GUI實(shí)質(zhì)功能處理）。使用容器分層次管理GUI是當(dāng)前的趨勢(shì),Flex也使用了此種方式,主觀上我們認(rèn)為它把我們界面上的組件通過容器進(jìn)行了分組或分類布局管理。 
接下來，我將通過簡(jiǎn)單的示例逐個(gè)介紹各種界面布局的設(shè)計(jì)。
Canvas layout 容器
Canvas的界面布局，它定義了一個(gè)矩形框架的區(qū)域，用來放置用戶的容器和控件。不像其他的組件，你不能放任Flex的控件。你必須指定absolute或者constraint-based來指定組件的位置。Absolute模式必須指定x,y坐標(biāo)。 Constrain-based必須指定side, baseline,或者center anchors. 接下來具體介紹兩種布局方式：
Absolute模式：你可以指定x,y坐標(biāo)來指定每個(gè)組件的在容器的位置。坐標(biāo)的是相對(duì)canvas 容器的左上角來設(shè)計(jì)的。即容器的左上角坐標(biāo)為(0,0). X.y可以為正負(fù)值，如果是負(fù)值的話，組件就會(huì)放在超出容器可是范圍的位置。當(dāng)然可以利用Actionscript來完成移動(dòng)的操作，這就涉及到的event事件。
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" width="219" height="230">
<mx:Canvas id="mycanvas" height="182" width="200"
borderStyle="solid" backgroundColor="white">
<mx:Button x="10" y="10" label="button1"/>
<mx:Button x="50" y="67" label="Button2"/>
<mx:Button x="92" y="129" label="Button3"/>
</mx:Canvas>
</mx:WindowedApplication>
|
效果如下圖：
constraint-based模式：這個(gè)分別介紹canvas 的Vbox以及Hbox的兩種組合。Canvas通常有x,y指定組件的位置，x,y默認(rèn)的應(yīng)該是0.所以你如果不指定x,那么將把組件放在x=0,的位置。這樣有可能出現(xiàn)重疊現(xiàn)象。當(dāng)然也可以指定其他模式的布局，比如Vbox,或者Hbox。這樣就可以不指定x,y了。
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Canvas
width="340" height="247"
backgroundColor="#FFFFFF">
<mx:VBox id="vb"
left="10"
right="248"
y="26"
height="153"
backgroundColor="#A9C0E7">
<mx:Button label="button1" width="74"/>
<mx:Button label="Button2"/>
<mx:Button label="Button3"/>
</mx:VBox>
<mx:HBox id="hBox2"
left="100"
right="27"
y="26"
height="153"
backgroundColor="#A9C0E7">
<mx:Button label="button4" />
<mx:Button label="Button5"/>
<mx:Button label="Button6"/>
</mx:HBox>
<mx:Button label="Button8" y="200"/>
<mx:Button label="Button7" y="190"/>
</mx:Canvas>
</mx:WindowedApplication>
|
效果如下圖：
Vbox或者Hbox 布局
前面介紹的把Vbox或者Hbox嵌入Canvas。其實(shí)他們本身都是一個(gè)容器，可以獨(dú)立使用的。效果跟上面圖中顯示的是一樣的。所以關(guān)于VBox，HBox就不再加以介紹了。舉個(gè)例子好了：
<?xml version="1.0"?>
<!-- containers/layouts/VBoxSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:VBox borderStyle="solid"
paddingTop="10"
paddingBottom="10"
paddingLeft="10"
paddingRight="10">
<mx:Button id="fname" label="Button 1"/>
<mx:Button id="lname" label="Button 2"/>
<mx:Button id="addr1" label="Button 3"/>
<mx:ComboBox id="state">
<mx:ArrayCollection>
<mx:String>ComboBox 1</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
</mx:VBox>
</mx:Application>
|
效果圖如下：
ControlBar layout 容器
你可以把controlbar和panel 或者titlewindow容器組合起來使用。這樣做的好處容器里的組件可以被panel或者titlewindow里的組件共用。（原文：You use the ControlBar container with a Panel or TitleWindow container to hold components that can be shared by the other children in the Panel or TitleWindow container.）舉個(gè)例子：
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private function addToCart():void {
// Handle event.
}
]]>
</mx:Script>
<mx:Panel title="My Application"
paddingTop="10" paddingBottom="10"
paddingLeft="10" paddingRight="10">
<mx:HBox width="250" height="200">
<!-- Area for your catalog. -->
</mx:HBox>
<mx:ControlBar width="250">
<mx:Label text="Quantity"/>
<mx:NumericStepper/>
<!-- Use Spacer to push Button control to the right. -->
<mx:Spacer width="100%"/>
<mx:Button label="Add to Cart"
click="addToCart();"/>
</mx:ControlBar>
</mx:Panel>
</mx:WindowedApplication>
|
效果圖：
ApplicationControlBar 容器
這個(gè)主要用來做界面頂部的導(dǎo)航條。這個(gè)容器menubar, combox button等組件。舉個(gè)例子：
<?xml version="1.0"?>
<!-- containers/layouts/AppCBarSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</mx:Script>
<mx:XMLList id="menuXML">
<menuitem label="File">
<menuitem label="New" data="New"/>
<menuitem label="Open" data="Open"/>
<menuitem label="Save" data="Save"/>
<menuitem label="Exit" data="Exit"/>
</menuitem>
<menuitem label="Edit">
<menuitem label="Cut" data="Cut"/>
<menuitem label="Copy" data="Copy"/>
<menuitem label="Paste" data="Paste"/>
</menuitem>
<menuitem label="View"/>
</mx:XMLList>
<mx:Array id="cmbDP">
<mx:String>Item 1</mx:String>
<mx:String>Item 2</mx:String>
<mx:String>Item 3</mx:String>
</mx:Array>
<mx:ApplicationControlBar id="dockedBar"
dock="true">
<mx:MenuBar height="100%"
dataProvider="{menuXML}"
labelField="@label"
showRoot="true"/>
<mx:HBox paddingBottom="5"
paddingTop="5">
<mx:ComboBox dataProvider="{cmbDP}"/>
<mx:Spacer width="100%"/>
<mx:TextInput id="myTI" text=""/>
<mx:Button id="srch1"
label="Search"
click="Alert.show('Searching')"/>
</mx:HBox>
</mx:ApplicationControlBar>
<mx:TextArea width="300" height="200"/>
</mx:Application>
|
效果圖：
DividedBox, HDividedBox 和VDividedBox 布局
其實(shí)呢，DividedBox,與Box 是非常類似的，唯一不同的在于它子Box板塊自建加入了一條分隔條，用戶可以更具自己需要來調(diào)整各個(gè)子Box板塊的大小。子Box板塊的分布可以分成兩種，水平以及垂直的。比如：
實(shí)現(xiàn)的代碼如下：
<?xml version="1.0"?>
<!-- containers/layouts/HDivBoxSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function myGrid_initialize():void {
myGrid.dataProvider = [
{Artist:'Pavement', Album:'Slanted and Enchanted',
Price:11.99, Comment:'One of their best. 4 Stars.'},
{Artist:'Pavement', Album:'Brighten the Corners',
Price:11.99, Comment:'My favorite.'}
];
}
]]>
</mx:Script>
<mx:HDividedBox width="100%" height="100%">
<mx:Tree id="tree1"
width="30%" height="100%"
labelField="@label"
showRoot="true">
<mx:XMLList>
<menuitem label="Products">
<menuitem label="Posters" isBranch="true"/>
<menuitem label="CDs">
<menuitem label="Pavement"/>
<menuitem label="Pavarotti"/>
<menuitem label="Phish"/>
</menuitem>
<menuitem label="T-shirts" isBranch="true"/>
<menuitem label="Tickets" isBranch="true"/>
</menuitem>
</mx:XMLList>
</mx:Tree>
<mx:VDividedBox width="70%" height="100%">
<mx:DataGrid id="myGrid"
width="100%" height="100%"
initialize="myGrid_initialize();"
change="currentMessage.text=
event.currentTarget.selectedItem.Comment;"/>
<mx:TextArea id="currentMessage"
width="100%"
height="60"
text="One of their best. 4 Stars."/>
</mx:VDividedBox>
</mx:HDividedBox>
</mx:Application>
|
