如何学习Flex Framework

最近由于种种缘故又要开始做点教育训练的事，先趁现在有空把手边的资料整理一下。

＊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后的感想