無論係 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

Click here to view the embedded video.

English title: Spark Layout Basics

No related posts.

<?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:Label text="Hello Spark!" />

</s:Application>

唔太複雜吧~ 不過都幾多野唔同~ 首先當然係 namespace 啦

Flex Builder 3 (FB3) 寫 Flex 3 app 時o既 namespace 真係簡單到不得了

xmlns:mx="http://www.adobe.com/2006/mxml"

一個 mx 走天涯~
一個已經包括左:
- language (Array, uint, Number, Object etc…) 同埋
- Halo components (Button, VBox, DataGrid etc…)

FB4 寫 Flex 3 namespace 基本上無變架~ 大家唔駛咁擔心

xmlns:mx="http://www.adobe.com/2006/mxml"

但係 FB4 寫 Flex 4 就複雜喇~
首先 Flex 4 namespace 唔再係一個 namespace 玩晒~
而係好 clear cut 咁分開左 language 同 component namespaces

Flex 4 o既 language namespace 係

xmlns:fx="http://ns.adobe.com/mxml/2009"

至於 Flex 4 o既 component namespace 分為 Halo 同 Spark

Flex 4 Halo namespace

xmlns:mx="library://ns.adobe.com/flex/mx"

!!!! 大家要留意 FB4 Beta 2 o既 Halo namespace 係 library://ns.adobe.com/flex/halo !!!!
!!!! 不過最新o既 internal build 用左 library://ns.adobe.com/flex/mx 暫時未知原因係乜 !!!!

Flex 4 Spark namespace

xmlns:s="library://ns.adobe.com/flex/spark"

所以如果大家用 FB4 寫 Flex 4 o既時候需要同時用 Halo 同 Spark 就要一次過用晒 fx, s 同 mx 3 個 namespaces
當然啦~ 將來當 Spark 有齊 Halo d component o既時候~ 應該可以一個 s namespace 攪掂晒~!

呢個 Hello Spark app 除左 namespace declaration 之外
比較特別o既就係 Spark Application 同 Spark Label
好明顯佢地係用黎 replace Halo Application 同 Halo Label ga la
至於有乜 improvement 就容後再講喇~

Related posts:

1. Flex FAQ #9: 點解要 Spark
2. Flex FAQ #6: Layout 秘技 Part 1
3. Flex FAQ #5: 點樣做 Full Screen Application

Halo 係 Flex 3 o既主要骨格
由最 base o既 application (mx:Application)
去到 layout properties (horizontalAlign, padding)
再去到 UI control (mx:Button, mx:TextInput) 都係 Halo o既範圍
而 Spark 就係 Flex 4 o既主要骨格

好地地用緊 Halo 點解又要 Spark 呢?

用得 Flex 比較深入o既 developer 或者 designer… 又或者 dezeloper 都會發現 Halo 有幾個比較大o既問題

1) Skinning Skinning and Skinning

Halo control 要做 skin 係非常痛苦架
一係就只係用 CSS 做 d 好似無做過咁o既 styling
一係就用 Flash 畫好晒 d 野~ 之後 export SWF~ Flex embed SWF~ 再 CSS map class…
要改野咩? 開返個 Flash source 由頭做過啦

而且 Halo control o既 internal object 係 fixed 架
舉個例~ 一個 Halo button 裡面有一個 icon 同一個 text field~ 唔可以多亦唔可以少
如果想做一個有兩個 icon o既 button 就只可以由一個 Box container 開始砌~ 之後再自己加返 custom events…

2) 雞肋 States

Flex o既 States 本身係一樣好方便o既 function
只要 define 一個 base state~ 然後 further define 其他 state 多左或者少左o既野~ 就可以好易做到 transition
但係只要 state o既數量稍為多 d~ 又或者 state 同 state 之間變化比較多~ 就會開始 lost control…
究竟 B 呢個 state 有 d 乜呢… 睇返 state A 先~ 哦~ 原來乜都無…

3) Heavy

其實 Flex Application 本身係 SWF file 已經唔係太大 file size
不過如果你寫既 application 比較 large scale~ 又或者對於 memory consumption 好緊張~
就會好想幫 Flex 3 大瘦身~

Flex 3 為左將所有野簡單化~ 有時會將一 d 你未必需要用o既 item 都放左入去
舉個例~ Box container by default 係有 scroll bar 架~ 只係平時唔用o既時候無 display
但係無 display 代唔代表佢完全唔用 resources 呢?
大家只要睇下 super class Container 就會發現一大堆比 scroll 用o既 variables… 都幾多下…

幾個 Box 可能影響唔大
但係如果你用 data grid 再加埋 custom item renderer 仲要用 Box 做 layout… 咁就大件事喇…
你就會問… 明明我個 Box 唔駛 scroll… 點解要屈我 d resources

上面提到只係比較大o既問題
當然仲有好多其他野啦~ 例如 CSS 唔 standard 呀~ Animate color 會傻左呀~ 等等等等…
而 Spark o既開發就係為左解決上面呢堆問題~

呢度就暫時粗略講一講
之後我會詳細咁講每一 part~

1) Spark o既 control 大致上可以細分為 HostComponent 同 SkinClass
HostComponent 主要負責 event / state declaration 同埋 contain data
SkinClass 就負責控制所有 graphic elements, state content 同 data binding

好處在於 HostComponent 只係負責最 base o既 feature
而 SkinClass 就可以比你點玩都得~ 就算你想個 Button 係星形再加兩個 icon 都無問題

2) States o既 format 完全唔同晒~
State 裡面o既野唔再o係 state o既層面處理~ 而係o係 control o既層面處理
配合埋 Flash Builder o既 State editor 要知道 current state 有乜簡直易如反掌

3) Scroll bar 再唔o係 default component 會有o既野
要用就要自己 declare~ 唔用就當然慳好多 resources 啦~

仲有好多其他 changes~ 包括 improved CSS class~ custom layout~ PopUpAnchor~ TLF~
可以咁講… 要學o既野多過 Flex 2 上 Flex 3 好多好多倍~ 哈哈

Related posts:

1. Flex FAQ #10: Flex 4 有幾多個 namespace
2. Flex FAQ #6: Layout 秘技 Part 1
3. Flex FAQ #5: 點樣做 Full Screen Application

由淺入深~

1) Flex 直接 Embed font

方法主要有兩種

1A) Flex CSS refer local font

@font-face
{
	src: local("標楷體");
	font-family: "KaiShu";
}

o係 CSS 裡面 declare font-face
然後 source 利用 local 指住個字體名
最後 declare 一個 font family 名~ (呢個隨意就得)
呢度最 tricky 係個字體名… 特別係 Mac 機再加埋中文字…
經常攪到 Flex Builder compile o既時候會出現 local build error…

好: 快
壞: 唔穩定, File Size 大

1B) Flex CSS refer font file

@font-face
{
	src: url("/fonts/標楷體.ttc");
	font-family: "KaiShu";
}

想解決 1A 出現o既問題就要利用 source 指 url 直接指住 font file
font file 大家可以o係唔同地方買或者 download 到
如果o係 system font 的話

Windows 可以o係控制台 > 字型 裡面抄走
Mac 可以o係 System/Library/Fonts 裡面抄走
(Mac 特別要留意副檔名 dfont 的係 embed 唔到架)

好: 穩定~ 準
壞: File Size 大

備註: Embed Microsoft Windows 內置標楷體o既爆字問題

如果大家要 embed 標楷體~ 就千祈唔好用 Windows 裡面o既標楷體
因為 embed 之後o係 Mac 機睇係會出現爆字問題

關於爆字 (字形破碎) o既問題請參考 – 破碎的細明體研究院
http://bbs.bnw.com.tw/conference/viewtopic.php?t=2856

簡單黎講o係 MS 的標楷體 version 太舊 (3.0)
解決方法係去華康科技買返新 d o既 version (latest 5.0) (我試過 2005 年o既 3.10 無問題)

不過用華康標楷體 3.10 最大o既問題係 file size…
MS (4.9Mb) 華康 (27.9Mb)
一個 Flex application 用之前要 download 4.9Mb 已經唔容易… 更何況 27.9Mb…

另外更要特別提一提
Embed 27.9Mb o既字形係好耐同好唔 stable 架
我曾經多次出現 out of memory o既問題…
10 次 compile 得 2 – 3 次成功…
(Mac Pro 都頂唔順… 好難相信… 應該又係 Flex Builder 問題…)

2) Flex 利用 unicode-range 抽出要 embed o既字

@font-face
{
	src: url("/fonts/標楷體.ttc");
	font-family: "KaiShu";
	unicode-range: U+5011,U+6211;
}

其實利用 Flex CSS Embed font o既時候係可以透過 unicode-range 抽出某 d 字架
以上面為例就會將 “們” 字同 “我” 字抽出黎啦~!
究竟點解係 5011 同 6211 呢?

其實 5011 同 6211 係 d 字o既 unicode value in HEX
想 get 一個中文字o既 unicode
大家可以用呢個 Chinese to Unicode converter
http://www.chinese-tools.com/tools/converter-unicode.html
記住要將個 result 轉返做 HEX value

如果大家用 Mac o既 Numbers 的話可以用下面呢個 equation

=CONCATENATE("U+",RIGHT(DEC2HEX(CODE("字")),4))

@font-face
{
	src: url("/fonts/標楷體.ttc");
	font-family: "KaiShu";
	unicode-range: U+5011-U+6211;
}

至於呢個係另一種寫法~ 將 5011 至 6211 所有字都 embed~
當然大家可以 combine comma “,” 同 dash “-” 兩種寫法啦~!!

好: 要用o既字先 embed~ 有效控制 file size
壞: 煩… 要逐粒字加都幾浪費時間…
更壞: Flex Builder 應該有 bug… 當 unicode-range 後面太多野會出現 compilation error…

3) Flash + Flex Combo = 無敵~!

試左一整日… 放棄左一輪之後… 突然諗到o既絕技~!
Flash + Flex Combo

首先利用 Flash dynamic text field 寫低需要o既字

記住要揀埋你需要o既 font
跟住 set dynamic text field o既 font embedding

然後揀 Auto Fill~
一下就掂晒~!

然後 Export SWF file~
最後 Flex embed SWF file

@font-face
{
	src: url("/fonts/font.swf");
	font-family: "DFBiaoKaiShu-B5";
}

留意 font family 一欄今次唔可以隨便填
一定要同 Flash 裡面寫o既完全一樣
以我上面 example 為例就係 DFBiaoKaiShu-B5

之後就可以 compile 啦~!

好: 快 準 穩定
壞: 要開多一個 application… =.=

Related posts:

1. Adobe MAX SF day 1
2. Flex FAQ #3: 點樣用 Flex FileReference 下載檔案
3. Essential ActionScript 3.0 and ActionScript 3.0 Design Patterns

舉個例我地想整一個 shopping cart list
我地會用 List + itemRenderer
itemRenderer 既 content 多數係 Label + Button
通常我地都會將 Label 放埋一邊~ Button 放另一邊~ 好似咁…

A List with Label and Button itemRenderer

但係有時總會出現一 d item o既名太長…
結果令到 button distort 左~

Too long label resulting distorted button

解決方法係利用 Label o既 truncateToFit
而用 truncateToFit o既時候一定要 define minWidth 或者 maxWidth
直覺上當然係用 maxWidth 啦~

計法就係:
maxWidth = itemRenderer width – Button width – horizontalGap

但係呢種做法首先非常煩~ 而且容易錯
再諗下如果 Button width 轉咁點算呢…
重新計過…
當然可以用 data binding 解決… 但係你諗下咁樣做 d code 係幾咁長…

咁有無終極方法呢?
有… 但係唔容易明… 竟然係用 minWidth

<mx:itemRenderer>
    <mx:Component>
        <mx:HBox>
            <mx:Label width="100%" minWidth="0" text="{data.label}" truncateToFit="true" />
            <mx:Button label="{outerDocument._button_label}" />
        </mx:HBox>
    </mx:Component>
</mx:itemRenderer>

後來同 Way discuss 之後諗諗下都有道理
因為 truncateToFit 先決係 minWidth 或者 maxWidth 要 set
如果 set minWidth = 0 其實無影響 layout 但係會開著 truncateToFit
然後 set width = 100% 就可以解決…

總之有時寫 Flex UI 要寫得好~
個腦係要 Flex-ible 一 d….

Click here to view the embedded video.

English title: Layout 101 Part 1

Related posts:

1. Flex FAQ #5: 點樣做 Full Screen Application
2. Flex FAQ #3: 點樣用 Flex FileReference 下載檔案
3. Flex FAQ #2: 點樣清除亂左既 subclipse .svn 資料

要用 full screen mode 首先要改動 SWFObject 或者 Object tag
主要係加入 allowFullScreen 呢個 parameter
以 Flex Builder o既 HTML template 為例

SWFObject:

AC_FL_RunContent(
    "src", "${swf}",
    "width", "${width}",
    "height", "${height}",
    "align", "middle",
    "id", "${application}",
    "quality", "high",
    "bgcolor", "${bgcolor}",
    "name", "${application}",
    "allowScriptAccess","sameDomain",
    "type", "application/x-shockwave-flash",
    "pluginspage", "http://www.adobe.com/go/getflashplayer"
);

Object tag: (要留意加左兩個地方~!)

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="${application}" width="${width}" height="${height}"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
    <param name="movie" value="${swf}.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="${bgcolor}" />
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="true" />
    <embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
        width="${width}" height="${height}" name="${application}" align="middle"
        play="true"
        loop="false"
        quality="high"
        allowScriptAccess="sameDomain"
        allowFullScreen="true"
        type="application/x-shockwave-flash"
        pluginspage="http://www.adobe.com/go/getflashplayer">
    </embed>
</object>

之後 within Flex application 就可以利用 stage.displayState 開動 full screen

stage.displayState = StageDisplayState.FULL_SCREEN;

如果想做到 toggle full screen effect 可以利用簡單既 if… else… statement

if (stage.displayState == StageDisplayState.NORMAL)
{
    stage.displayState = StageDisplayState.FULL_SCREEN;
}
else
{
    stage.displayState = StageDisplayState.NORMAL;
}

但係要留意一點~ Full screen mode o既所有 text field 係唔可以 edit 架…
講真… 咁o既 limitation 可以話將個 application 廢左武功…
暫時都無解決辦法… Astro 都唔得…

Adobe Labs – Flash Player 10 Beta Release Notes
http://labs.adobe.com/technologies/flashplayer10/releasenotes.html

Limited Fullscreen Keyboard Access — In Flash Player 10, key events are supported for non-printing keys such as arrows, shift, enter, tab, space, etc. Limited access to the keyboard will allow fullScreen games and video controls with keyboard access in a secure way.

背後o既原因係擔心有人 develop 假既 OS login page…
都好無奈… 如果咁既話所有 web browser o既 full screen mode 都應該 disable text input…

Adobe Labs – Talk:Flash Player:9:Update:Full-Screen Mode
http://labs.adobe.com/wiki/index.php/Talk:Flash_Player:9:Update:Full-Screen_Mode#Why_suspend_key_input.3F

When considering this feature, several security concerns impacted our decisions for this first release. The reason keyboard input was blocked was to help prevent phishing attacks using Flash, where full-screen is used to simulate a log-in screen, someone else’s website, etc. This also impacted our decision to add the overlay to visually inform the user that something had changed and they were in a new state.

English title: How to develop full screen application

Related posts:

1. Adobe MAX SF day 2
2. Adobe MAX SF day 1
3. Flex FAQ #3: 點樣用 Flex FileReference 下載檔案

var t_file_ref:FileReference = new FileReference ();
var t_url_request:URLRequest = new URLRequest ("some_path/some_file.type");
t_file_ref.download (t_url_request);

但係原來o係某 d 情況佢係會 malfunction 既…
而且係你估都估唔到~ 加上玩足你幾個鐘…

為免大家中招所以寫左呢個 example

Click here to view the embedded video.

睇落好似無分別~就算 click “這個不能下載” 都出現左下載畫面但係當你以為 download 左既時候…
你會發覺乜都見唔到…其實問題係在於 FileReference o既 instance declaration method如果o係 function
裡面 declare 既 temporary variable當 function 完成之後 FileReference instance 就會o係 select event 之前消失結果… download 左個桔…
解決方法係將 FileReference instance 放o係 class member variable

public class some_class
{
    private var _file_ref:FileReference;
    function some_function ()
    {
        this._file_ref = new FileReference ();
        ...
    }
}

其實呢個問題… 都幾荒謬… 不過可以玩謝好多 developer…Adobe o既 Technote 有詳細解釋~
http://kb.adobe.com/selfservice/viewContent.do?externalId=3637d5c3&sliceId=1

English title: How to download a file in Flex using FileReference

Related posts:

1. Adobe MAX SF day 2
2. Flex FAQ #5: 點樣做 Full Screen Application
3. Essential ActionScript 3.0 and ActionScript 3.0 Design Patterns

舉個例~ 你有一堆 svn 左既 Flex Builder 2 projects 要轉去 Flex Builder 3…
最穩陣既方法相信係 FB2 svn commit 左~ 然後 FB3 checkout 返~
但係如果你選擇 direct copy / project import~
就會有機會出現舊既 .svn data remove 唔到~ 然後無辦法重新 connect svn…

解決方法係人手逐個 .svn delete… =.=||

講笑~ 哈哈

Mac o既 user 會比較幸福~ 因為一句 command 就可以攪掂

find . -name .svn -print0 | xargs -0 rm -rf

如果出現 operation not permitted 可以試下加 sudo

find . -name .svn -print0 | xargs -0 sudo rm -rf

參考文章:

SVN on OSX by SIMPLESTATION
http://www.simplestation.com/journal/how-to-use-svn-on-os-x/

English title: How to remove all the .svn information produced by subclipse

Related posts:

1. Flex FAQ #5: 點樣做 Full Screen Application
2. Flex FAQ #6: Layout 秘技 Part 1
3. Flex FAQ #3: 點樣用 Flex FileReference 下載檔案

我見好多人都會問呢個問題~
點樣將 input text 既 cursor by default set 去某一個 TextInput component.
其實方法好簡單~ 只需要利用 setFocus function

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”{this.t_ti.setFocus ();}”>
<mx:TextInput id=”t_ti” />
</mx:Application>

但係大家會發現當 application load 完之後直接打字都係唔 work.
其實只要大家o係 Flex application 任何一個位置 click 一下就得喇.
咁樣 click 一下似乎有 d 笨… 但係呢個應該係 browser 或者 Flash player 既 issue~
Flash player 需要你 click 佢一下以確認你既 focus point 係 Flex application 而唔係 HTML

Click here to view the embedded video.

English title: How to place Flex application’s input cursor focus on a specific TextInput control by default

Related posts:

1. Flex FAQ #6: Layout 秘技 Part 1
2. Flex FAQ #5: 點樣做 Full Screen Application
3. Flex FAQ #3: 點樣用 Flex FileReference 下載檔案