Posts tagged Flex FAQ
Flex FAQ #10: Flex 4 有幾多個 namespace
1知道點解要用 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認識 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 好多好多倍~ 哈哈
Flex FAQ #5: 點樣做 Full Screen Application
0Flex application 有一個特點就係可以完全跳出 web browser o既框架
Adobe AIR 當然係其中一種做法~
但係 Flash player 本身 support full screen mode
所以直接用 full screen mode 就比起 AIR 直接同快喇~!
要用 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
Flex FAQ #4: 利用 Adobe Flex 做 Video Player
1又係一個好簡單既問題~ 但係絕對可以玩死人~
用 Flex 想播 video 基本上只可以用 VideoDisplay component + FLV movie format
FLV movie format 可以點整呢? 當然係 Flash Video Encoder CS3~
但係 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
Flex FAQ #3: 點樣用 Flex FileReference 下載檔案
2本來呢個問題應該好簡單~
基本上一個 ActionScript developer 可以即時答得出
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
Please enable Javascript and Flash to view this Flash 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
Flex FAQ #2: 點樣清除亂左既 subclipse .svn 資料
2相信用 Flex Builder 或者 Eclipse 既人都會裝埋 Subclipse
Subclipse 的確令到 project source control 輕鬆好多
但係當你需要做 project folder relocation 或者 project import 就會出現好多問題
舉個例~ 你有一堆 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
Flex FAQ #1: 點樣令 Flex 程式開始時將 cursor 指定係某一個 TextInput 裡面
1今日開始會寫返多 d technical articles~
我見好多人都會問呢個問題~
點樣將 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
English title: How to place Flex application’s input cursor focus on a specific TextInput control by default







