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

舉個例我地想整一個 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 下載檔案

但係 Flash Video Encoder 其實好多野未必 convert 到~
WMV? bye bye~ MOV? bye bye~ 就算 MPG 都有可能無啦啦無晒聲~
AVI 暫時算係一定可以 import 到既 format~
如果你用 Windows 的話~ 可以試下用 erightsoft 既 SUPER

http://www.erightsoft.com/SUPER.html

可以將 WMV, MOV 等等轉左 DIVX AVI~
(見到 可以直接 convert 做 FLV 既朋友唔需要興奮… 係唔 compatible 架 =.=||)

好喇~ 睇黎好似問題已經解決左~ 不過唔好意思~
當你好開心咁 convert 晒 d video~ 翻睇一次~ 你會發覺…
所有 video 一 play 到大約 3 份之 1 就會 kick 住左~
之後如果你郁 slider~ 就會無左聲… what the…

究竟係 encoder 問題? codec 問題? OS 問題?
我試晒 Windows 同 Mac 都唔 work…
但係用 Flash 既 Video component 播又無問題… 似乎又係 Flex…

咁究竟最後可以點解決呢?

YouTube…

將任何 format video 放上 YouTube (within 100Mb)
然後等 YouTube 幫你 convert 做 FLV
最後用 VideoDownloader down 返個 FLV…
Quality 算 acceptable~ 但起碼係最 stable 既解決方法~
Please Adobe! 買多幾塊烏蠅拍唔該… 太多問題喇~ 仲要下下攞命…
有幾多問題? 聽日再 Blog…

English title: How to use Adobe Flex to make a video player

Related posts:

1. Munsang College Biology Department Website version 3 始動~!
2. Sometimes I hate Flex… Sometimes
3. Flex FAQ #6: Layout 秘技 Part 1

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 下載檔案