Flex FAQ #11: Spark Layout Basics

o係 Flex 裡面我地用得最多o既 control 係乜呢?
Label? TextInput? Button? DataGrid?
我覺得答案應該係 VBox 同 HBox

無論係 Application layout, custom item renderer, form layout, padding...
好多地方都要用 VBox 同 HBox
所以第一個 Spark 要學o既o野就係 VBox 同 HBox o既 alternatives - Group 同 LayoutBase

顧名思意 Group 係用黎將唔同o既 components group 埋一齊
呢 d components 可以係 control 亦可以係 containers
可以係 Spark component 亦可以係 Halo component
Group 基本上係取代左 Halo o既 Box container
同 Box 一樣~ Group 本身 by default 係 absolute layout
Absolute layout 者係所有 child component 都係 position o係 x 0 y 0
所以下面o既 example 所有 component 都會重疊左

Box 有兩種 subclass~ HBox 同 VBox
HBox 會將所有 child 跟據每一個 child o既 width 打橫放而且唔會重疊
VBox 同 HBox 一樣~ 不過係打直放

Group 同 Box 都有 similar o既 subclass HGroup 同 VGroup
原理一樣~ HGroup 打橫~ VGroup 打直~

下面呢個 example 將 Spark Group 同 Halo Box 放埋一齊做對比
Compile 完之後睇落其實係無分別

Spark Group 比 Halo Box 厲害o既地方就係除左 absolute, horizontal 同 vertical 之外
仲可以 custom define 其他o既 layout
就算係圓形都可以... 只要你識計數~ 哈哈

但係要用 custom layout 就唔可以再用 HGroup 同 VGroup
要用另一種方法可以 set layout...
就係用 Group o既 layout properties 同埋 layoutBase class
layoutBase class 係 Group 用黎將 child components 排位o既一個 class
事實上 HGroup 只係一個 Group layout 上面 apply 左 Spark predefine o既 HorizontalLayout~
者係 HGroup 某程度上只係一種 shortcut~ VGroup 都係一樣~ 用左 predefine o既 VerticalLayout~

如果將上面o既 example Spark Group 部份用 layout 再寫一次的話就會係下面咁樣...

我 personally 比較喜歡用 layout 多過 HGroup VGroup
主要係考慮到 flexibility~
好多時我地都會轉 layout design
如果用 HGroup VGroup 寫法的話~ 如果想轉 layout 就要一次過改晒 open 同 close tag
如果 Group 裡面無乜 child components 都還可以
如果多起上黎~ 你改左個 open tag 之後要搵返個 close tag 都幾麻煩...

而且用 layout 仲可以 runtime 隨時轉 layout class
可以做到更加多變化o既 UI
例如你有一堆 tag 想 show 比 user 睇
想 elegant 一 d可以用 custom made o既 tag cloud layout
想清楚 d 咁 list out 又可以轉左 VerticalLayout
想玩花臣的又可以用 circular layout

下面o既 example 就示範左點樣 runtime 轉 layout
而裡面o既 CircularLayout o係 Andrew Trice 寫o既 custom layout
http://www.insideria.com/2009/05/flex-4-custom-layouts.html

English title: Spark Layout Basics