Flex 學習資源更新
最近由於種種緣故又要開始做點教育訓練的事,先趁現在有空把手邊的資料整理一下。
*Flex 的基礎架構
關於 flex 基本上常被問到的不外乎就是「如何可以學好它?」,要瞭解這個問題的答案基本上只要看懂下面這圖就ok了。

*Actionscript 該學的重點
從最底層看起,最下面的 actionscript 3是一切的基礎,它是 flash/flex 編程使用的唯一程式語言,因此任何人想學好 flex 第一件事絕對是先摸熟 actionscript 這個語言,包含:
1. 它的基本語法與結構(array, hash, loop, if else…)
2. DisplayList (DisplayObject, DisplayObjectContainer)與 Event system(bubbling, propagating…)
3. Sound, Video, NetConnection 與 Graphics class
掌握 as3 的精華後,接下來就可以進入 flex framework。
*Flex framework 的重點
基本上 flex framework 就是用 actionscript 寫成的框架,因此也可以把它看成是 as3的最好示範,看著 framework source 學 actionscript 也是挺不錯的,只是路會變很長。
Flex Framework 整個體系非常博大精深,通常一般人不太可能完整把它學完,只需要針對最常用到的部份熟悉就好,圖中列出的那三塊(component, managers, style/skin)就是我個人認為所有初學者最優先該學會的。
*Component 該學些什麼
Component 是整個 flex framework 的基礎,幾乎80% 的元素都是由 UIComponent 繼承而來,例如最根本的的
Flex 內建了 二十幾個 UI controls, 例如 Button, DataGrid, HBox等,以種類來分,這些 components 可以概分為三大類:
-Controls: Button, DateChooser, Slider…
-Containers: Box, DividedBox, Panel…
-List: DataGrid, Tree, TileList…
初學者第一步至少該學會怎麼用這些元件,瞭解每個元件的 properties, events, styles, effects…,知道怎麼在手冊裏查它的 API 文件,以及何時該用何種元件。
進階一點,則是學會怎麼修改這些元件,例如繼承一個 Button 下來加上不同的功能,或是寫不同的 skin border 來改變它的外觀。
再更進階,則是開始研究元件的生命週期,瞭解每個元件是何時初始化,元件內部有那些關鍵指令與它們個別的功用,然後可以試著建立自已的 custom component。
這一關看起來容易但實際上最困難,因為 flex 的 component framework 寫的非常龐大,雖然亂中有序但要在混沌中看出隱藏的架構然後抓住重點整串提起,就非得有人帶著指引正確的途徑才比較可能達成。
*manager 是什麼
圖中最上方的第二塊就是 manager。
flex 裏有很多的 managers,負責做各種不同的工作(廢話…),幾個比較重要的包含:
-SystemManager:
它是每支 flex app 的根源,最先被下載,也最早啟動,由它進行一連串的 app boot流程
-StyleManager:
它負責整支app 的 css style 套用與 skin 生成,如果想玩動態 css 載換也靠它
-DragManager:
Flex最大的賣點就是 drag and drop,這個 manager 就是背後的英雄,初學者至少要學會怎麼處理 drag 行為的五個事件,以及如何在不同元件間做拖放;進階的玩家則應該深入研究這支 manager 是怎麼寫成的,詳細閱讀它的 source 會得到意想不到的無窮樂趣(如果你讀完卻沒有這種感覺,呃,那代表你該再多讀幾次,如果還是沒有,那請私下聯絡我 :D)
-ModuleManager:
使用 Flex 開發大型應用程式時,往往會將程式切割成許多小的 module, 這個 manager 就是負責載入並管理所有的 module (包含它的 class partition),初心者或許用不到,但有志深入的玩家一定要很熟。
-CursorManager:
這個用到的時機不是很多,但偶爾要換一下 cursor 時還是會用到,初學者至少要知道怎麼用指定的圖案去換掉系統cursor。
*Style/Skin 的重點
CSS style 與 skinning 是 Flex 最大的賣點之一,也是開發過程中較為麻煩也最耗時的部份。
初學者應該要徹底瞭解如何使用 CSS style 來打點一支 flex app 的外觀,換顏色、素材,使用外部 assets 修飾介面。
中階玩家則應該瞭解 skinning 的系統,包含 programmatic skinning 與 graphical skin,它們兩的差別?使用時機?如何客製化?
更高階的玩家則應該熟悉整個 Styling system 的運作模式,外加如何動態載入 css 在 runtime 換掉整個介面。
簡而言之,flex app 寫的好不好,外行人其實看不太出來,但一支 app UI 美不美則是一翻兩瞪眼,比較漂亮的那就先加十分
(當然,有一種情況是刻意用心去美化了介面結果弄巧成拙搞的怨聲載道人人喊打,但那種比較不多見,也不是每家公司都會搞到這步田地,就先不討論)
*學完基本功後下一步
在我的標準裏,當一個 developer 對上圖內每一塊都有中等程度的瞭解後,就算是完成 flex 養成教育,可以邁向下一個階段。
也就是開始熟悉 application 的製作手法,這包含
-瞭解至少一種以上的開發框架,例如 Cairngorm,老實說我對這個框架沒什麼好感(因為手法太複雜,只適合超複雜登月計畫或火星探勘時使用),但它結構設計良好,又是業界公認的聖盃,等於是專家們共通的語言,因此至少要先瞭解它在做什麼,將來在專業場合才好溝通(俗話說 know the rules so you know what you are breaking, 就是指這情況)
-接著可以看看比較簡單的手法,像 Riawave, Model-Glue:Flex, PureMVC…等,基本上這些框架設計方式都大同小異,每個都有不同的應用場合,可以挑一個喜歡的再自行修改。
-瞭解基本的概念,例如 Value Object, DAO, MVC 等,它們在大部份的程式框架裏都會出現,早點學會日子比較輕鬆。
接著就是開始實際 coding,寫一個中小型規模的app,不論是單純的 CRUD app,或是留言版、電話簿、進銷存管理都可以,籍由多寫來強化編程的概念,然後透過大量的 peer code review 來找出可改進的地方。
*結論
結論還是老話一句:要入門 flex 超級簡單,只要不是白癡應該一小時就行,但要成為可獨當一面的專業開發者,路就很長,如果沒有走對方向很容易就迷失甚至最後放棄。
換句話說,要能成為職場上真正需要的 professional developer,並不如表面上想像的容易(其實我想每種技術領域跟產業都一樣吧),這也是我過去半年來協助很多公司做 recruiting 後的感想。
*工商服務時間
咳咳,接下來是工商服務時間:
自從前兩天貼出徵人廣告後,這兩天收到許多 resumes,但其中有 75% 在第一關就過不了,主要在於缺乏我們需要的專業核心能力,或是沒有辦法在 resume 裏適當的表現出他/她的特質或潛力(當然英文程度可能也是一個問題)。
而在過關的 1/3 裏,有超過七成是來自大陸的朋友,這讓我對大陸開發者的用功與實力刮目相看,尤其這些人都是二十出頭的年輕人,能在這麼年輕就擁有一身好功夫確實難得。
但反過來看,台灣地區的應徵者就比較讓人失望,或許高手們都已經有工作所以沒興趣apply,但我想更大的可能是真的沒多少人願意投入這個領域(當然本地沒有這種市場也是主因,所以最後這是一個雞生蛋/蛋生雞的 recursion)。
因此,重點的一段終於來了:
台灣地區的朋友們,如果你已經在其它技術領域(特別是 Java/C#/C/C++)有深厚的底子,而且對 RIA, Flex 技術有興趣,也有心想深入發展,請放心與我聯絡,公司會提供必要的培訓資源,我也會親自訓練所有的新進工程師,將來正式工作後全美六十多個 full-time flex developers都是你切磋交流的對象,加上自由的工作環境,真的機會難得,請看看下面這張圖,我們提供的就是這種 dream job 呀



14 Comments Add your own
1. Hiso&hellip | August 11th, 2007 at 1:37 pm
雞生蛋/蛋生雞在台灣會是一個較大的問題,
以我的flex程度已大半年停在一個程度了,
不是遇到瓶頸或是什麼問題,
就是摸了那麼多,不知道工作機會在那裡,
如果不是最近突然出現了幾個機會,
而且彼此談的還不錯,
我真有點打算改玩sliverlight.
其他比較深入的問題等一些事情確定了,再來聊聊.
2. Marx&hellip | August 11th, 2007 at 7:29 pm
老師何時要正式開課阿?我也想去上您的課。
3. robert&hellip | August 15th, 2007 at 9:28 am
市場、資訊都是問題,我想教育也是吧,我畢業的時候,學校有提到或教導ActionScript的…大概找不太到。
每當慫恿朋友來學Flex/Flash/AS的時候,他們都覺得” 哎呀,我又不會作設計 @.@” ,我的好友們,還是覺得: Flash 的 Actionscript屬於動畫師、圖形設計的專門, 不是一般程式設計師的。
4. jeremy&hellip | August 17th, 2007 at 11:40 pm
老師知識沒升級,學生得到的資訊就lag,然後台灣大環境沒這個市場,最後的下場就是這個局面啊~不過除此之外,其它都是可以努力的,現在算是踏出小小的一步
5. Ken&hellip | August 21st, 2007 at 5:10 pm
上述老師有提到CursorManager這個東西,這個也能做類似讀取資料時,讓游標出現漏斗的樣式,不過他好像不能像使用HTTPService時裡的showBusyCursor這個屬一樣能跑出漏斗順便把背景給鎖定,不曉得有沒有什麼方式能夠做到跟showBusyCursor這樣一樣的效果,因為我用的取得資料方式是PendingCall,這個方法是之前跟老師上課時學的~~由於某些使用者在等待資料時,可能手癢難耐,會去亂按有的沒的,故想說看看能不能像showBusyCursor這個屬性所產生的效果來防止一些手癢的使用者,這樣就不用寫太多的判斷式來enabled一些事件按鈕~~還請賜教,非常感謝捏
6. jeremy&hellip | August 21st, 2007 at 5:26 pm
在 flex 裏要鎖定一個物件有很多種做法,比較 quick and dirty 的 hack 是直接把 application.enabled = false,然後等你資料傳完後再設回 true。
不過從操作流程與互動設計的角度來看,一個操作如果會 block 整個app等到它結束,這可能不是一個很好的設計,在流程上或許有改進空間。
7. Ken&hellip | August 23rd, 2007 at 10:47 am
老師所言慎是~會要把畫面block起來等到某事件結束後再釋放,的確不是一個挺良好的互動設計,我想魚與熊掌難兼得丫,要讓資料展示時能給使用者一目暸然勢必資料獲取方面一定需要等待,例如某些需求的資料面可能內含接近百個欄位,加上資料結構上的join,有時join來join去的取得資料加上分頁出來,有時取出資料時可能需要5秒或著更多時間來等待資料的取回,在這段時間內或許部份user會耐心的等待取回後再進行下一步動作,但也有比較心急的user會像在看好料的一樣,這邊點那邊點的,如此一來假使說設計面沒有做的很嚴緊的話,往往會產生一些例外的錯誤,在沒辦法的情況下只能使畫面block起來等待事件結束後再釋放,我想這類事情大概是IT人員心中的痛,還是flex有種偷偷取資料的方式能讓人神不知鬼不覺的讓資料展現在user面前 = =?,如果有還請老師不吝賜教~~非常的感謝捏 ^^
8. 呆兔&hellip | August 26th, 2007 at 10:58 am
能写成简体中文么?看着太废力了!
9. jeremy&hellip | August 26th, 2007 at 11:25 am
求取知識自已要勤快點啊~
可以試試簡繁轉換軟體「同文堂」
http://tinyurl.com/gs8t9
或 google translater
10. flex_oz&hellip | October 31st, 2007 at 10:51 am
在上面看到你说什么过关不过关之类的是什么?我学flex差不多一年啦,最近做了二三个项目都是自己一个人做的,学了挺多但是记不牢,也没有试过自己的实力,有过关题吗?发我一份试一下
11. Why use Flex? at enchao.c&hellip | November 5th, 2007 at 12:13 pm
[...] d.CAT Flex 學習資源 [...]
12. Ivy&hellip | December 27th, 2007 at 8:24 pm
寫C++很久了,對ActionScript3也很有興趣,就是一直沒有機會把它當成工作. 我對老師提的dream job很有興趣,怎麼跟您連絡呢?
最近才發現這個部落格,真的太好了,正是我一直想要找的!
13. blaw&hellip | March 6th, 2008 at 8:29 pm
老師您好~
這一塊對我來說很陌生~
但要是想學習這方面~您有在開課嗎?
我發現這軟體慢慢開始發展茁壯
只是苦無學習對象…..
14. admin&hellip | March 8th, 2008 at 5:56 pm
台北恆逸資訊有開這方面的課程,使用原廠教材,講師水準也很不錯,可以跟他們洽詢。
Trackback this post | Subscribe to the comments via RSS Feed