如何学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 繼承而來，例如最根本的的 它本身就是一個 UIComponent，因此，熟悉 component 就成為學好 flex framework 最根本也最重要的基本功

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 後的感想。