Posts tagged Flex

Flex FAQ #10: Flex 4 有幾多個 namespace

2 years ago

by Vicker in Flex FAQ

知道點解要用 Spark 之後當然要實戰下啦
首先寫返個 Hello Spark application 先
以下o係 main application o既 source code
* 太簡單喇~ 無 build application 放上黎~ 抱歉

<?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 就容後再講喇~

Flex FAQ #9: 點解要 Spark

2 years ago

by Vicker in Flex, Flex FAQ, Uncategorized

認識 Spark 之前先要講下 Halo

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 好多好多倍~ 哈哈

Flash Builder Flex Flex FAQ Halo Spark

Flex 4 重新上路

2 years ago

by Vicker in Flex

近期因為要寫幾個比較細既 Flex application
所以借機會用下 Flash Builder 4 寫 Flex 4 apps
Flex 4 最大最大既改變當然係 Spark framework
黎緊我會將寫 Flex 4 o既一 d 心得同大家分享下

大家亦唔需要太擔心 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 就暫時唔得喇…

Flex Flex Builder Spark

Flex FAQ #8: Font Embedding 全集

2 years ago

by Vicker in Flash, Flex, Flex FAQ

尋日要幫一個 application 做 font embedding
主要係想 embed 楷書
其實 font embedding 本身並唔係一件難事
因為 Flex 本身已經 support~
但係 embed 得黎又要控制好 file size 就唔簡單~!
至於楷書o既問題就更加多…
應該 specific d 講… 係 Microsoft o既標楷體o既問題更加多…

由淺入深~

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… =.=

CSS DynaComware dynamic text embed Flash Flex font font-face font-family Microsoft

Adobe MAX SF day 3

3 years ago

by Vicker in Adobe MAX, Flex, RIA

最後一日 MAX
今年有 d 唔同~
Sneak peak session 同 General session 逼埋o係同一日
第三日變左只係得堂上~

其中一堂講 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既屋企為首要任務

Adobe Adobe MAX AIR Flash Flex Pizza Hut user group Way Yuen

Adobe MAX SF day 2

3 years ago

by Vicker in Adobe MAX, Flex, RIA

(抱歉… 太忙喇… 遲左好多先出 post…)

第二日又黎喇~ 精神都算唔錯~
今朝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, 西餐算喇…

ActionScript Adobe Adobe Groups Adobe MAX AIR Alchemy Ben Forta Flash Flash Catalyst Flex Flex Builder Kevin Lynch RTFMP Ted Patrick Tim Buntel Way Yuen YouTube

Adobe MAX SF day 1

3 years ago

by Vicker in Adobe MAX, Flash, Flex, RIA, Thermo