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

大家亦唔需要太擔心 Flex 4 o既 syntax 會再變
因為 Flex 4 o既 SDK 已經 freeze 左
除左 bug fix 同埋 font embedding 之外~ 其他都應該唔會再變
大家可以放心去用喇~!

首先大家要 Flex 4 app 當然要用最新o既 compiler 啦
大家可以用 Flex 4 o既 SDK 又或者 Adobe Flash Builder 4 beta 2

Adobe Flex 4 SDK (Free)
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

Adobe Flash Builder 4 beta 2 (Trial)
http://labs.adobe.com/technologies/flashbuilder4/

有一點要提一提大家
雖然 FB4 可以同時 compile Flex 3 同 Flex 4 o既 applications
但係 FB4 o既 plugin support 唔係咁 work
如果你本身會用一大堆 eclipse plugin 的話
我強烈建議你 keep 返 FB3~!!

裝 SubClipse 還是可以的不過要 manual install…
Aptana 就暫時唔得喇…

Related posts:

1. Adobe MAX SF day 2
2. Adobe MAX SF day 1
3. Sometimes I hate Flex… Sometimes

由淺入深~

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

其中一堂講 Flash player 10 最新既 text engine 同 text layout framework
Text layout framework 可以話係現有 text controls o既加強版
可以 support 到更加多o既文字效果

- multiple column
(重點係 support 自動換 column
仲有 multiple column selection
仲可以 self define irregular shape columns)

- support 打直寫某 d 字~ 例如中文同日文
(大家以後可以唔駛靠 enter 靠行黎打中文喇)

詳細可以參考 Adobe Labs
http://labs.adobe.com/technologies/textlayout/

其他時間就同 Way 作最後衝刺
Adobe MAX 有個傳統
就係要行攤位儲印仔換禮物
外國人比較得意… 佢地會直接行去人地個檔度要人印… 然後即走…
我就覺得起碼都要聽下人地個檔講 d 乜會比較有禮貌…

結果終於儲齊~ 換到o既係一副 Adobe MAX 啤牌
A J Q K 係 AIR Flex Photoshop 同 Flash
Joker o係 MAX Explorer

眼見副啤牌咁有紀念價值
好想拎多 d 比 user group members
於是臨走o既時候去 counter 問可唔可以拎多 d 比 user group
原來 counter o個位 staff 都係香港人 @o@
同埋原來 Adobe 已經預左我地會拎比 user community…
於是我都拎左十幾盒 XDD 多謝 Adobe~!
(早知唔駛儲印仔 =.=||)

夜晚又係搵食時間
o係 map 搵到 pizza hut~!!!
睇落好似好近… 於是行過去… 點知… 執左笠…
於是又要打的去第二間…

去到見到 poster 兜意粉好似好正
仲有一個 pizza 加蒜蓉飽~!
廿幾蚊美金超抵~! 即買~!
返到酒店一開…
wa… 碟意粉大到呢… 有香港 party size 咁大…
食完蒜蓉飽同大光兜意粉之後… 我同阿 Way 都投晒降…
早知一早就去食 Pizza Hut…

今次 Adobe MAX 對於我黎講主要都係想見識同埋直接體驗一下新野
雖然… 的確有 d 失望…
不過能夠同咁多位 Adobe o既朋友聚下舊都好難得~!
下次都唔知幾時可以去 MAX lu…
始終依家都係想以盡快建立新o既屋企為首要任務

Related posts:

1. Adobe MAX SF day 2
2. Adobe MAX SF day 1
3. Adobe MAX SF pre day 1

第二日又黎喇~ 精神都算唔錯~
今朝o係 marriot 食早餐
原本諗住會同會場的有 difference
但係都係食o個 d 野…
生果… 硬飽… 奶… 茶… 果汁…
比較好o既係果汁係樽裝~ 可以拎走飲~ 仲要係 tropicana~ 正

朝早上 Flex testing o既 session
之前寫 Flex application 都比較少考慮 testing
呢個 session 對我黎講都幾重要~
不過上完之後就會發覺 testing 唔應該係事後先去做…
而係要由 Day 1 開始每寫一 part 就要寫返相對應o既 testing module…
基本上工作量係 double 或者 triple~ 因為除左 unit test 仲有 function test, etc…
講真… 有幾多 company 會考慮到同埋 afford 得起呢…

下一個 app… 如果我有時間的話我都想認真的做一次…

跟住就係 General Session 2~
一開始由 Flex Builder product manager Tim Buntel 講解 Flex
講講下突然之間部機好似比人 hack 左咁~
之後有一個神秘人 The Chief (Kevin Lynch) 話依家 computer field 有好多問題出現~
要 Tim Buntel 諗辦法去解決~

之後燈光一暗~ 音樂響起~ 開始播片~
感覺係非常超人特攻隊~ 然後進入左秘密基地 The Agency~!

多位 Agent 就位~ 包括 Agent B (Tim Buntel) 同 Agent F (Ben Forta)
之後開始介紹各種 The Agency o既最新科技

包括
- 利用 Adobe AIR 控制家庭電器
- Adobe Photoshop CS4 o既 content aware scaling
- Adobe Photoshop CS4 o既 3d texturing
- Adobe Flash Catalyst
- Cold Fusion 下一代 IDE code name Bolt
- Adobe Flex Builder 4 with Theme Library
- Flash content search engine indexing
- Adobe Flash Media Sever 3.5 with dynamic streaming

而最矚目o既就莫過於 Adobe Alchemy 同埋 RTFMP

Adobe Alchemy 係一個 convertor
能夠將已經存在o既 C / C++ library 直接 convert 做 Flash o既 library
最有機會用到o既地方就一定係 encryption o喇~
ActionScript 一直都無 encryption library~
透過 Alchemy 就可以唔駛 ground up 寫就做到 encryption
同場仲即時示範利用 Alchemy convert o既 Quake 同 Super Mario (emulator)
絕對係令大家感到非常震撼~!!

RTFMP (Real Time Media Flow Protocol) o係 Adobe 新既 communication protocol
主要係令到多個 Adobe Flash Player 之間能夠直接做 communication
完全唔需要透過一個 server connection

最直接o既用途就係單靠 Adobe Flash Player + Web cam 就可以做到 video chat
係~!! 完全唔需要 middle server~!! 而且係絕對 smooth~! 開幾十個都無影響~!!

最後由 Ted Patrick 接棒介紹 Adobe Groups
Adobe Groups 係 Adobe 一個 official 而 centralized o既 community network
透過 Adobe Groups 就可以知道全球幾百個 user group / community o既一切動向
香港o既 Flex user group (FxAIR.org) 亦都會搬入 Adobe Groups
但 setting 比較繁複~ 希望能夠趕及農曆新年前完成~ 請見諒

* 關於所有 technology o既 information / URL 已經整理好放左o係呢度

http://vicker.cubeforge.net/blog/adobe-max-sf-summary/

第二個 general session 完左~
食完飯又繼續聽各個 session~

Evening 就到左大家都好期待o既 sneak peak session
不過… 我自己就覺得非常失望…
兩個字去形容就係 “倉促”…
好似趕時間咁~ present d 野又比較亂…

Anyway~ 大致上o既 sneaked items 如下

- RTMFP (上面已經介紹左)
- Nitro (Adobe AIR o既 widget controller)
- Durango (Adobe AIR o既 runtime application component mash up tool)
- Photoshop Image Compositing (自動將 imported image 去底)
- Content Intelligent Toolkit (Media library 包括 video 同 image o既 analysis)
- Dreamweaver Web Widgets (直接o係 Dreamweaver insert web widget~ 而且可以直接 live preview~ 完全唔需要開 browser)
- Infinite Images (利用一 set photo 去做出無限 zoom in 同無限 zoom out effect)
- Live Cycle and Creative Services (利用 Live Cycle 去 streamline collaborative Premiere Pro workflow)
- Meer Meer (Online service~ 自動 detect 一個 Dreamweaver web site o係唔同 browser 之下有無 display differences~ 仲可以用 onion skin o黎直接 compare
- Server-side ActionScript

o係 Adobe 正式 post video 之前
大家不妨去 YouTube search 下~ 好似有 HD version tim…

夜晚同 Way 行左去 Japan Town 諗住食返 d 好o既日本野…
饑寒交逼~ 行左成粒鐘去到~ 點知…
奉勸各位… 去到美國食 hurger, salad, 西餐算喇…

Related posts:

1. Adobe MAX SF day 1
2. Adobe MAX SF day 3
3. Adobe MAX SF pre day 1

之後即刻上二樓食早餐
同之前一樣… 硬飽… 果汁… 咖啡… 奶…
Somehow 我總係覺得唔會夠飽…

食飽見未夠鐘就去左 community lounge
一入到去就見到熟識既面孔~
John, Sumi, Craig 同 JD 都o係到
總係覺得見到佢地就 = 見到 Adobe community~ 哈哈

打完招呼傾左一陣就要趕去聽野
第一場係 Flex testing~ 都 ok~
之後就係精采o既 general session~!

一如以往~ 未入到門就聽到好激昂o既音樂~!
一入到去真係好震撼~ 3 個 main screen 加兩組 side screen
main screen 係山峰藍天白雲~ 一堆 Adobe product logos o係天度飛~ 好型~
跟住所有 screen 會好似老虎機咁轉 d product logos
然後中間加插 30onMAX o既 video~
好彩無拍者… 唔係比人 post 出黎好攪笑~

開場~ 有 DJ Mike Relm 用 30onMAX 既 video 表演捽碟~
(事後睇返 wikipedia 知道 Mike 係 VJ – video performance artists~ 曾經同 blue man group 合作 LOL)

跟住係 MAX explorer o既一段 animation~
MAX explorer 攀山登上 Adobe AIR blimp~
然後飛越冰海~ 到達沙漠~ 啟動 Adobe 火箭~ 最後… 失敗 XD
感覺好似 Indianna Jones~ 主要係想帶出主題 – Connect, Discover 同 Inspire
有機會希望可以 get 到 source distribute 比大家睇
絕對值得珍藏~~!!

之後係 president Shantanu Narayen o既開埸白~
今次 MAX 主力都係 Adobe Flash Platform~
大家以後要多 d 用呢個 term~
可以唔駛一大堆名同人解釋~

Adobe Flash Platform 包括:
Tools: Flash / Flash Catalyst / Flex
Clients: Flash Player / Adobe AIR
Servers: Flash Media Server / Blaze DS

Shantanu 亦特別提到 Thermo 已經正式命名為 Flash Catalyst
呢個名改得好定唔好真係見仁見智…
本身 Flash 同 Flex 兩個字都已經經常讀錯…
再加埋 Flash Catalyst 真係亂到傻… 成日聽人講錯 Flex Catalyst…
以後都係讀 abbreviation 穩陣 d,,, Fl Fc Fx…

之後提到 (RED)WIRE 利用 Adobe AIR 開發左新o既 application
將 music, subscription 同 charity 帶去另一個 level

http://www.redwire.com/

(已經正式 launched… 大家可以自行 download 體驗下~)

跟住 CTO Kevin Lynch 出場~
佢以 3 個 main title 黎講解 Adobe 黎緊o既方向
- Client + Cloud
- Social Computing
- Devices + Desktop

Client 當然係講 Flash player 同 Adobe AIR 啦
Kevin 簡單示範左 Flash player 10 o既 native 3d performance
然後就宣佈 Adobe AIR 1.5 已經正式 release
(大家有裝 AIR 的話應該已經 auto updated)

為左示範 AIR~ Kevin 請左 New York Times 上台介紹佢地最 latest o既 AIR based news reader
一入 application 睇落其實無乜特別~
但係當佢 resize window o既時候就會發覺 d columns 會自動加或者減黎 fill up spaces
呢個應該係利用到最新o既 Flash player 10 text engine 做的~
感覺非常 smooth 而且 readability 好高~
最得意o既係佢地連一份報紙最重要o既 crossword puzzle 都 implement 左 XDDD
Innovation 同 amazing 有時真係唔一定要 complex~

之後 Kevin 更進一步將同一個 New York Times application 放o係 aigo
(一部裝左 windows o既 mobile internet device)
control 上面雖然無咁方便~ 不過 UI 完全 support 到~
呢個就正正係 Adobe AIR o既優勢~!
(New York Times reader 未正式 release~ 稍後再補上)

跟住開始講 cloud~
cloud 其實即係 services
clients + cloud CM 應該會好有同感
不過 CM 會 focus on 個 cloud 一定要係 XML format~ 哈哈

其實網上面o既 cloud 已經好多~ 多到有 d 散同亂~
於是就帶出左 Adobe 一個新o既 tool~ Tour de Flex~
Tour de Flex 係 AIR application~
佢其實係一個 library~ 裡面有好多常用o既 services
每一個 service 都有相對應o既 sample codes 教你點樣用 Flex 去 connect d services
而且仲有 executable o既 sample application 比你去試~
絕對係 cloud development o既入門 references

Tour de Flex 已經 release~ 可以於 Flex.org download

http://flex.org/tour

進入 Social Computing~
Social Computing 裡面最常出現o既就係 notifications
每一日大家都會收到好多各式各樣o既 notifications… OS… Facebook… Twitter… etc…
問題係當 notifications 愈黎愈多~ 你就會開始亂~
你可能會為左 Twitter 裝 twitterific… 又可能為左 facebook 裝其他 plugin… etc
所以 Adobe 就開發左另一個 Adobe AIR based tool~ Adobe Wave
Adobe Wave 簡單講就係 collection of notifications
你只需要入返每種 service o既 account 就可以 1 stop 收到所有 note
而且仲 support custom applications~

Adobe Wave prerelease program 已經接受 registration~

http://labs.adobe.com/wiki/index.php/Adobe_Wave

(invitation code 稍後於 user group gathering 提供)

最後到 Devices + Desktop
Desktop 已經有 AIR~ Device 亦都有 Flash Lite~
下一步可以點呢…
之前好多人都認為應該係將 AIR 裝入 mobile devices
但 Adobe 似乎有一個更加好o既答案… Adobe Flash Player 10… natively on mobile devices…

Kevin o係一盤 mobile devices 裡面逐步拎出黎做 demo
佢地全部都係行緊 FP10~
(咁樣唔知係唔係意味住 Flash Lite 要講 bye bye…)
包括… Nokia Symbian… Windows Mobile… Google Phone… 最後係… Apple iPhone…
正當大家都起哄o既時候… sorry… 無…
Kevin 聲稱同 Apple 交涉緊~ 咁係唔係者係話其實已經 run 到呢?!?!?

最後 Kevin 為大家示範 Adobe o既一個 future device prototype~
佢拎住一部 Samsung o既 MID~ 然後對住個 stage screen~
等左幾秒就 connect 左~ 然後 Kevin 手指一 fling 就將佢 device o既相 transfer 左去 stage screen~
而且仲要好靚咁 display 出黎~!!!

同樣o既 transfer 仲可以 between MID~
甚至係一部電視機~! (當然要 compatible la)
感覺幾得意~ 不過有幾多人 afford 得起~ 哈哈~

第一個 general session 到此結束~!

完左 session 食 lunch…
Again… 唔會飽…
於是返去食麵~! 哈哈

下晝繼續聽野~
Design XD… 竟然係講 Adobe CS4 product line design concept… 有 d 失望…
之後好多堂都係早走 or skip…
今年大家都 complain d sessions 無 screening… 質素比較差…

多數時間都係o係 community lounge~
見到 Bing~ 估唔到佢同我地一樣咁遠都黎~
之後識左 Singapore UGM Shunjie~!
大家o既話題竟然係研究下點樣用 d Adobe stickers XDDD
似乎我地亞洲人都係鍾意自己部 laptop 多過 d stickers~ 哈哈

夜晚有雞翼食~ 唔錯唔錯~

之後有 Birds of a Feather 同 Meet the Team~
同阿 Way 去左 Meet the FX / FB / FC Team~
不過佢地變左 open chatting… d 人一堆一堆咁~ 好難埋堆…

大覺訓~ 第二日繼續~

Related posts:

1. Adobe MAX SF day 2
2. Adobe MAX SF day 3
3. Adobe MAX SF pre day 1

舉個例我地想整一個 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 資料

Working with Flex for nearly two years. I am sure I have the right choice however sometimes Flex do makes me mad.

• SWFLoader content can’t be unloaded completely.
  (How many times you try to replace a loader content but you notice the content music never gone away)
• VideoDisplay component doesn’t play .flv correctly…
• Not even those produced by Flash Video Encoder…
• Non standard CSS
• Math.floor (Math.random () * 4) + 6
  (Oh my god… I just want a random integer)
• Smooth scroll List
• Disabling Ctrl key during drag move
• Gradient fill Container
• Full screen Keyboard input…
  (I understand security… but that should be user’s responsibility… not developer’s obstacle)

Flex Builder related…

• Why can’t I export my syntax coloring settings?
• I don’t know which part I haven’t done yet… WHERE’S MY TODO!?!?
• Auto building get set function please…

To be continue…

Adobe… please… I love advancedDataGrid… but fix the old ones first…

Related posts:

1. Munsang College Biology Department Website version 3 始動~!
2. Adobe MAX SF day 2
3. Adobe MAX SF day 1

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

同一時間 Adobe 亦o係 Adobe Developer Center 發表左 SWF searchability FAQ
裡面除左有耳熟能詳既 marketing slogan 之外

The openly published SWF specification describes the file format used to deliver rich applications and interactive content via Adobe Flash Player, which is installed on more than 98 percent of Internet-connected computers

亦有提及到背後既原理
以及 Yahoo! 都會於稍後 update search engine

的確~ 咁多年以黎 Flash 都比人彈 SEO
每一次我幫人做 project analysis 既時候
第一句都係問 “application base” 定 “content base”
今次呢個 news 的確幾吸引~
但係問題係唔係就咁就解決呢?!?!
我地係唔係唔再需要寫特登寫 XHTML version / XSL / 一大堆 supportive AS?!?!
言之尚早~!

At least… Munsang Biology web d content 仲未 index 到~ 哈哈

Anyway~ should be a great start!

詳情:

Improved Flash indexing by Google Webmaster Central Blog
http://googlewebmastercentral.blogspot.com/2008/06/improved-flash-indexing.html

SWF searchability FAQ by Adobe Developer Center
http://www.adobe.com/devnet/flashplayer/articles/swf_searchability.html?devcon=f1

Related posts:

1. Adobe MAX SF day 2
2. Adobe MAX SF day 1
3. NEW TECHNOLOGIES KEEP ON COMING…