最近由於種種緣故又要開(kāi)始做點(diǎn)教育訓(xùn)練的事，先趁現(xiàn)在有空把手邊的資料整理一下。

＊Flex 的基礎(chǔ)架構(gòu)

關(guān)於 flex 基本上常被問(wèn)到的不外乎就是「如何可以學(xué)好它？」，要瞭解這個(gè)問(wèn)題的答案基本上只要看懂下面這圖就ok了。



＊Actionscript 該學(xué)的重點(diǎn)

從最底層看起，最下面的 actionscript 3是一切的基礎(chǔ)，它是 flash/flex 編程使用的唯一程式語(yǔ)言，因此任何人想學(xué)好 flex 第一件事絕對(duì)是先摸熟 actionscript 這個(gè)語(yǔ)言，包含：

1. 它的基本語(yǔ)法與結(jié)構(gòu)(array, hash, loop, if else…)

2. DisplayList (DisplayObject, DisplayObjectContainer)與 Event system(bubbling, propagating…)

3. Sound, Video, NetConnection 與 Graphics class

掌握 as3 的精華後，接下來(lái)就可以進(jìn)入 flex framework。

＊Flex framework 的重點(diǎn)

基本上 flex framework 就是用 actionscript 寫(xiě)成的框架，因此也可以把它看成是 as3的最好示範(fàn)，看著 framework source 學(xué) actionscript 也是挺不錯(cuò)的，只是路會(huì)變很長(zhǎng)。

Flex Framework 整個(gè)體系非常博大精深，通常一般人不太可能完整把它學(xué)完，只需要針對(duì)最常用到的部份熟悉就好，圖中列出的那三塊(component, managers, style/skin)就是我個(gè)人認(rèn)為所有初學(xué)者最優(yōu)先該學(xué)會(huì)的。

＊Component 該學(xué)些什麼

Component 是整個(gè) flex framework 的基礎(chǔ)，幾乎80% 的元素都是由 UIComponent 繼承而來(lái)，例如最根本的的 它本身就是一個(gè) UIComponent，因此，熟悉 component 就成為學(xué)好 flex framework 最根本也最重要的基本功

Flex 內(nèi)建了 二十幾個(gè) UI controls, 例如 Button, DataGrid, HBox等，以種類來(lái)分，這些 components 可以概分為三大類：

-Controls: Button, DateChooser, Slider…
-Containers: Box, DividedBox, Panel…
-List: DataGrid, Tree, TileList…

初學(xué)者第一步至少該學(xué)會(huì)怎麼用這些元件，瞭解每個(gè)元件的 properties, events, styles, effects…，知道怎麼在手冊(cè)裏查它的 API 文件，以及何時(shí)該用何種元件。

進(jìn)階一點(diǎn)，則是學(xué)會(huì)怎麼修改這些元件，例如繼承一個(gè) Button 下來(lái)加上不同的功能，或是寫(xiě)不同的 skin border 來(lái)改變它的外觀。

再更進(jìn)階，則是開(kāi)始研究元件的生命週期，瞭解每個(gè)元件是何時(shí)初始化，元件內(nèi)部有那些關(guān)鍵指令與它們個(gè)別的功用，然後可以試著建立自已的 custom component。

這一關(guān)看起來(lái)容易但實(shí)際上最困難，因?yàn)?flex 的 component framework 寫(xiě)的非常龐大，雖然亂中有序但要在混沌中看出隱藏的架構(gòu)然後抓住重點(diǎn)整串提起，就非得有人帶著指引正確的途徑才比較可能達(dá)成。

＊manager 是什麼

圖中最上方的第二塊就是 manager。

flex 裏有很多的 managers，負(fù)責(zé)做各種不同的工作(廢話…)，幾個(gè)比較重要的包含：

-SystemManager:
它是每支 flex app 的根源，最先被下載，也最早啟動(dòng)，由它進(jìn)行一連串的 app boot流程

-StyleManager:
它負(fù)責(zé)整支app 的 css style 套用與 skin 生成，如果想玩動(dòng)態(tài) css 載換也靠它

-DragManager:
Flex最大的賣(mài)點(diǎn)就是 drag and drop，這個(gè) manager 就是背後的英雄，初學(xué)者至少要學(xué)會(huì)怎麼處理 drag 行為的五個(gè)事件，以及如何在不同元件間做拖放；進(jìn)階的玩家則應(yīng)該深入研究這支 manager 是怎麼寫(xiě)成的，詳細(xì)閱讀它的 source 會(huì)得到意想不到的無(wú)窮樂(lè)趣(如果你讀完卻沒(méi)有這種感覺(jué)，呃，那代表你該再多讀幾次，如果還是沒(méi)有，那請(qǐng)私下聯(lián)絡(luò)我 :D)

-ModuleManager:
使用 Flex 開(kāi)發(fā)大型應(yīng)用程式時(shí)，往往會(huì)將程式切割成許多小的 module, 這個(gè) manager 就是負(fù)責(zé)載入並管理所有的 module (包含它的 class partition)，初心者或許用不到，但有志深入的玩家一定要很熟。

-CursorManager:
這個(gè)用到的時(shí)機(jī)不是很多，但偶爾要換一下 cursor 時(shí)還是會(huì)用到，初學(xué)者至少要知道怎麼用指定的圖案去換掉系統(tǒng)cursor。

＊Style/Skin 的重點(diǎn)

CSS style 與 skinning 是 Flex 最大的賣(mài)點(diǎn)之一，也是開(kāi)發(fā)過(guò)程中較為麻煩也最耗時(shí)的部份。

初學(xué)者應(yīng)該要徹底瞭解如何使用 CSS style 來(lái)打點(diǎn)一支 flex app 的外觀，換顏色、素材，使用外部 assets 修飾介面。

中階玩家則應(yīng)該瞭解 skinning 的系統(tǒng)，包含 programmatic skinning 與 graphical skin，它們兩的差別？使用時(shí)機(jī)？如何客製化？

更高階的玩家則應(yīng)該熟悉整個(gè) Styling system 的運(yùn)作模式，外加如何動(dòng)態(tài)載入 css 在 runtime 換掉整個(gè)介面。

簡(jiǎn)而言之，flex app 寫(xiě)的好不好，外行人其實(shí)看不太出來(lái)，但一支 app UI 美不美則是一翻兩瞪眼，比較漂亮的那就先加十分

(當(dāng)然，有一種情況是刻意用心去美化了介面結(jié)果弄巧成拙搞的怨聲載道人人喊打，但那種比較不多見(jiàn)，也不是每家公司都會(huì)搞到這步田地，就先不討論)

＊學(xué)完基本功後下一步

在我的標(biāo)準(zhǔn)裏，當(dāng)一個(gè) developer 對(duì)上圖內(nèi)每一塊都有中等程度的瞭解後，就算是完成 flex 養(yǎng)成教育，可以邁向下一個(gè)階段。

也就是開(kāi)始熟悉 application 的製作手法，這包含

-瞭解至少一種以上的開(kāi)發(fā)框架，例如 Cairngorm，老實(shí)說(shuō)我對(duì)這個(gè)框架沒(méi)什麼好感(因?yàn)槭址ㄌ}雜，只適合超複雜登月計(jì)畫(huà)或火星探勘時(shí)使用)，但它結(jié)構(gòu)設(shè)計(jì)良好，又是業(yè)界公認(rèn)的聖盃，等於是專家們共通的語(yǔ)言，因此至少要先瞭解它在做什麼，將來(lái)在專業(yè)場(chǎng)合才好溝通(俗話說(shuō) know the rules so you know what you are breaking, 就是指這情況)

-接著可以看看比較簡(jiǎn)單的手法，像 Riawave, Model-Glue:Flex, PureMVC…等，基本上這些框架設(shè)計(jì)方式都大同小異，每個(gè)都有不同的應(yīng)用場(chǎng)合，可以挑一個(gè)喜歡的再自行修改。

-瞭解基本的概念，例如 Value Object, DAO, MVC 等，它們?cè)诖蟛糠莸某淌娇蚣苎Y都會(huì)出現(xiàn)，早點(diǎn)學(xué)會(huì)日子比較輕鬆。

接著就是開(kāi)始實(shí)際 coding，寫(xiě)一個(gè)中小型規(guī)模的app，不論是單純的 CRUD app，或是留言版、電話簿、進(jìn)銷(xiāo)存管理都可以，籍由多寫(xiě)來(lái)強(qiáng)化編程的概念，然後透過(guò)大量的 peer code review 來(lái)找出可改進(jìn)的地方。

＊結(jié)論

結(jié)論還是老話一句：要入門(mén) flex 超級(jí)簡(jiǎn)單，只要不是白癡應(yīng)該一小時(shí)就行，但要成為可獨(dú)當(dāng)一面的專業(yè)開(kāi)發(fā)者，路就很長(zhǎng)，如果沒(méi)有走對(duì)方向很容易就迷失甚至最後放棄。

換句話說(shuō)，要能成為職場(chǎng)上真正需要的 professional developer，並不如表面上想像的容易(其實(shí)我想每種技術(shù)領(lǐng)域跟產(chǎn)業(yè)都一樣吧)，這也是我過(guò)去半年來(lái)協(xié)助很多公司做 recruiting 後的感想。