Posts tagged HGroup

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 都會重疊左

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

	<s:Group>

		<!-- Spark and Halo Button -->
		<s:Button label="Spark Button" />
		<mx:Button label="Halo Button" />

		<!-- Nested Group -->
		<s:Group>

			<!-- Spark DropDownList and Halo ComboBox -->
			<s:DropDownList />
			<mx:ComboBox />

		</s:Group>

	</s:Group>

</s:Application>

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 完之後睇落其實係無分別

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

	<!-- Spark vertical group -->
	<s:VGroup left="0">

		<s:Button label="Spark Button" />
		<mx:Button label="Halo Button" />

		<!-- Spark horizontal group -->
		<s:HGroup>

			<s:DropDownList />
			<mx:ComboBox />

		</s:HGroup>

	</s:VGroup>

	<!-- Halo veritcal box -->
	<mx:VBox right="0">

		<s:Button label="Spark Button" />
		<mx:Button label="Halo Button" />

		<!-- Halo horizontal box -->
		<mx:HBox>

			<s:DropDownList />
			<mx:ComboBox />

		</mx:HBox>

	</mx:VBox>

</s:Application>

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 再寫一次的話就會係下面咁樣…

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

	<!-- Spark group with vertical layout -->
	<s:Group>

		<s:layout>
			<s:VerticalLayout />
		</s:layout>

		<s:Button label="Spark Button" />
		<mx:Button label="Halo Button" />

		<!-- Spark group with horizontal layout -->
		<s:Group>

			<s:layout>
				<s:HorizontalLayout />
			</s:layout>

			<s:DropDownList />
			<mx:ComboBox />

		</s:Group>

	</s:Group>

</s:Application>

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

<s:HGroup>
	...
</s:HGroup>

而且用 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