在之前的Flash Builder 4 教學 : 初探系列其之五 裏, 你已經定義了一個應用程序的一部分使用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" >
- <fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
- </fx:Declarations>
- <s:controlBarLayout>
- <s:BasicLayout/>
- </s:controlBarLayout>
- <s:controlBarContent>
- <s:Button id="btnCheckOut" y="10" label="Checkout" right="10"/>
- <s:Button id="btnCartView" y="10" label="View Cart" right="90"/>
- <s:Button label="Flex" x="5" y="5"/>
- </s:controlBarContent>
- <s:Label text="(c) 2009, FlexGrocer" right="10" bottom="10"/>
- <s:Group x="0" y="0" width="100%" height="100%" id="bodyGroup">
- <s:layout>
- <s:HorizontalLayout/>
- </s:layout>
- <s:Group width="100%" height="150" id="products">
- <s:layout>
- <s:VerticalLayout/>
- </s:layout>
- <s:Label text="Milk" id="prodName"/>
- <s:Label text="$1.99" id="Price"/>
- <s:Button label="AddToCart" id="add"/>
- </s:Group>
- <s:Group id="cartGroup" height="100%">
- <s:layout>
- <s:VerticalLayout/>
- </s:layout>
- <s:Label text=" Your Cart Total: $"/>
- <s:Button label="ViewCart"/>
- </s:Group>
- </s:Group>
- </s:Application>
那麼, 怎麼進入 Design View 設計視圖,請按照底下的圖片操作吧,按下Design View 的圖示.
按下Design View的圖示後,你會看到你所設計的應用程式的外觀.在這兒我們將會學習到為每一個元件設定它的屬性及相關的程式設定.
注意看到左下角的 Components 組件視圖,你可以從這兒拖曳你想要使用的組件,像是Button按鍵到你的應用程式去
也就是可以連一行程式都不用寫,只要再自行調整它的位置或設定它的程式行為,可以大大的節程式開發的時間
及左下角的 OUTLINE 大綱視圖,這兒可以很方便的檢視應用程式內各元件的排列
如果你所做的練習不同上面的範例,試著去熟用Design Mode 設計模式,讓它跟上面的範例一模一樣.
在Flash Builder 中,我們可以使用containers (容器)跟layout objects.(版面物件)來做幾乎是全部的版面排版,之前提到Flash Builder 可以輕鬆的用來為您的應用程式製做UI(使用者界面),也是因為它在這方面提供了便利又強大的功能.
在技術層面上，容器只是一種特殊類型的組件，它包含和Group 群組和其他項目。Group群組內包括的這些項目我們統稱為子元件，或者更明白地說，LayoutElements 版面元件（這僅僅是一個廣泛的術語元件如按鈕，複選框和等）和GraphicalElements 圖形元件如正方形，圓形等。雖然group 群組將它們收納在在一起，但它們不會知道
這些項目在螢幕上的位置或順序。
當您選擇一個容器來使用，你基本上要做的是設置他們精確的座標位置,然而容器最廣泛應用的功能是它能夠被
skinning殖皮或換膚(內地的翻譯是翻成:"蒙皮". 總之就像你把你的手機拿去做封膜一樣,容器的外觀是可以被改變成你想要的樣子。
skinning 植皮/換膚 是定義視覺外觀組件的處理步驟。在一個容器上，你能想到的外觀包括如背景，邊框，陰影，等等。一些Flex的容器可以植皮，這意味著你可以定義它們在屏幕上顯示的樣子。其他容器存在只是為了確保聚攏它們的子元件，他們自己沒有一個視覺外觀。也就是說不是所有容器都可以植皮,能夠植皮的條件是至少它們必需是一個視覺外觀組件.
容器的類別有下述幾種:
Group 群組容器: 在Flex 4 中最簡單的類別,一個群組可以用來包括子元件,但它們沒有自己的視覺外觀..
SkinnableContainer 可植皮/換膚的容器: 一個可以換膚的容器的功能等同Group群組並且能夠用來定義營幕 上的視覺外觀 .
BorderContainer 外框容器: 也是一種可植皮/換膚的容器,它可以用來將子元件包覆在框內 .
Panel 平面容器: 也是一種可植皮/換膚的容器,它有個邊框包覆,它可以有一個控制橫列(Control bar),可設置標題列及控制區域 .
Application 應用容器:也是一種可植皮/換膚的容器,它通常應用在你的應用程式的根本層,像是Panel容器,它也可以擁有控制橫列(Control Bar) .
NavigationContent 導引欄容器: 也是一種可植皮換膚的容器.通常用ViewStack來控制,稍後會再提及它
介紹到這裏,接下來要提的是 Layout Object版面物件.
版面物件是與容器一起運作的,用來決定如何容器群組內的子元件如何顯示在螢幕上,flex 4 提供了幾種
版面物件你可以自由應用它來定義你想要展示的版面.
底下介紹幾種版面物件的用途
BasicLayout: basic layout基本版面配置,用來做為絕對定位用,你必需為每一個版面元件定義x 跟 y 的座標 .
HorizontalLayout: horizontal layout 水平版面配置,水平排列每一個子元件一個緊接另一個橫向排列 .
VerticalLayout: vertical layout 垂直版面配置,垂直排列每一個子元件一個緊接一個縱向排列 .
TileLayout: tile layout瓦狀版面配置,可視需求任意排列子元件成水平或垂直布置
底下分別列出兩個範例: 請你解釋給我聽這樣版面配置是怎麼組成的?
範例1:
- <s:Group>
- <s:layout>
- <s:HorizontalLayout/>
- </s:layout>
- <s:Button label="1"/>
- <s:Button label="2"/>
- <s:Button label="3"/>
- </s:Group>
範列 2
- <s:Group>
- <s:layout>
- <s:VerticalLayout/>
- </s:layout>
- <s:Button label="1"/>
- <s:Button label="2"/>
- <s:Button label="3"/>
- </s:Group>
