最近有不少初學(xué)者問(wèn)我，Flex/AIR可以干什么？如何才可以學(xué)好Flex/AIR？因此時(shí)至今日我打算寫(xiě)一篇這樣的文章，以便初學(xué)者更好的找到適合自己的Adobe Flex學(xué)習(xí)路線。
由于文章本事比較冗長(zhǎng)，因此將其分成Flex篇與AIR篇，請(qǐng)大家注意，本篇文章是Adobe Flex學(xué)習(xí)路線（Flex部分之控件篇）

okay，在說(shuō)Adobe Flex/AIR學(xué)習(xí)路線之前，應(yīng)該有必要了解一下以下內(nèi)容：

1、什么是Flex/RIA/AIR？
RIA：大家可以看我的《Flex第一步》上面的說(shuō)明，也可可以看這里。
Flex：同樣，大家可以看我的《Flex第一步》上面的說(shuō)明，也可可以看這里。
AIR：由于寫(xiě)《Flex第一步》的時(shí)候并未推出AIR的，因此在這本書(shū)里沒(méi)有涉及到AIR，那么什么是AIR呢？
          可以看我2008年初，應(yīng)RIAMeeting邀請(qǐng)而做的一次關(guān)于Adobe AIR的演講，請(qǐng)看這里：http://www.k-zone.cn/zblog/post/log-2008-1-29-diarys.html

2、Flex到底可以做些什么？
     我例舉幾個(gè)商業(yè)化的Flex例子，給大家看一下，Flex到底可以做些什么。
     請(qǐng)看這里：http://flex.org/showcase/
     或者這里：http://www.scalenine.com/showcase/
     同時(shí)，這里有大量的由為Flex制作的皮膚：http://www.scalenine.com/gallery/

3、ActionScript 3.0的概念
      具體大家可以看這里。

4、MXML的概念
      具體請(qǐng)看這里。

由于本篇文章寫(xiě)的比較晚，因此我就不在一一敘述上面的這些概念了，網(wǎng)上有很多詳細(xì)的解釋?zhuān)海?br /> 同時(shí)上述內(nèi)容也全部在walktree和我寫(xiě)的的書(shū)里《Flex第一步》

okay，介紹完剛才的幾個(gè)準(zhǔn)備工作，那么讓我們來(lái)詳細(xì)了解一下Flex的學(xué)習(xí)路線。

1、在學(xué)習(xí)Flex之前，一定要先了解如何搭建Flex開(kāi)發(fā)平臺(tái)。而這些內(nèi)容需要大家了解什么是Flex Builder、Flex SDK。
      而這部分內(nèi)容，我想在另外一篇文章里面寫(xiě)，不過(guò)這些內(nèi)容大家也都可以到網(wǎng)上或者書(shū)上找到答案，我就不在這里復(fù)述了。
      一般說(shuō)來(lái)：通過(guò)這里直接下載Flex Buiilder 3.0就可以在你的機(jī)器上面編寫(xiě)Flex Application了。

2、在學(xué)習(xí)Flex之前，首先學(xué)習(xí)的卻是ActionScript 3.0（我就不講Flex與ActionScript 3.0的關(guān)系了）
     如果是一個(gè)初學(xué)者，那么就一定要掌握ActionScript 3.0一些基本內(nèi)容：例如，變量/常量、基本數(shù)據(jù)類(lèi)型、流程控制、函數(shù)、面向?qū)ο蟮奶卣鞯冗@幾方面淺顯的內(nèi)容。
     當(dāng)你掌握了ActionScript 3.0后，如果再學(xué)習(xí)Flex的話，就會(huì)有事半功倍的效果。
     推薦關(guān)于ActionScript 3.0的圖書(shū)：國(guó)內(nèi)黑羽兄寫(xiě)的《ActionScript 3.0 殿堂之路》、國(guó)外的《ActionScript 3.0編程精粹》

3、學(xué)習(xí)Flex，就應(yīng)該從最基本的Flex components開(kāi)始，Flex components一般分成如下一些類(lèi)別（基本部分）：
     a、常規(guī)類(lèi)控件：Alert
     b、按鈕類(lèi)控件：Button、RadioButton、RadionButtonGroup
     c、文本類(lèi)控件：Label、TextArea、TextInput、RichTextEditor
     d、日期類(lèi)控件：DateChooser、DateField
     e、載入類(lèi)控件：Image、SWFLoader、VideoDisplay
     f、菜單類(lèi)控件：Menu、MenuButton、PopUpMenuButton
    以上都是Flex的一些最基本控件，有很多看起來(lái)很炫的控件都是繼承與這些基本控件的。

4、當(dāng)掌握了以上Flex初級(jí)控件后，大家可以學(xué)習(xí)一些比較高級(jí)的控件，例如：
    a、格式化類(lèi)控件：CurrencyFormatter、DateFormatter等等。
    b、驗(yàn)證類(lèi)控件：CreditCardValidator、DateValidator、EmailValidator等。

5、當(dāng)掌握以上控件后，我們還要把它們有序的組合在一起，因此就必須要掌握容器、布局的概念。
    a、容器類(lèi)控件：Panel、TitleWindow、Canvas、ApplicationControlBar、ControlBar、VBox、HBox、ViewStack等。
    b、布局類(lèi)控件：水平布局、垂直布局、自定義布局等。

okay，當(dāng)你完成了上述內(nèi)容后，基本上你就可以做出非常正規(guī)的Flex Application，對(duì)，你沒(méi)有看錯(cuò)，就上面那些基本的內(nèi)容。

接下來(lái)就是一些有選擇性掌握的、炫目的控件：

6、Flex Effects
     這些組件是控制你的Flex在操作上面的一些效果。例如Move（移動(dòng)效果）、Fade（淡出淡入效果）、Resize（改變大小效果）、Zoom（放大縮小效果）等。
     我個(gè)人建議，這部分內(nèi)容還應(yīng)該是必須要掌握的。

7、Flex Chats
      這些chats，基本上涵蓋了常用的一些圖標(biāo)組件

8、Flex 表格組件、打印組件
     表格組件：例如：DataGrid、Adanced DataGrid等。
     打印組件：FlexPrintJob。

同時(shí)上面的控件部分我只列舉了一些常用的控件，關(guān)于這些控件大家可以看這里:
http://examples.adobe.com/flex3/componentexplorer/explorer.html

書(shū)籍方面，我推薦《Flex3權(quán)威指南》、《Flex 3 Cookbook中文版》這兩本，當(dāng)然如果大家原因的話也可以買(mǎi)《Flex第一步》：）

okay，以上就是Flex的控件部分了，當(dāng)掌握了這些內(nèi)容后，雖然你可以做出很炫效果的Flex Application，但是還缺少一些東西，那就是數(shù)據(jù)讀取的功能。
那么下一篇文章的內(nèi)容：《Adobe Flex學(xué)習(xí)路線（Flex部分之控件篇一）》 首先要了解的是以下一些概念： 
1、XML
     我就不在這里復(fù)述了，詳細(xì)請(qǐng)看：http://baike.baidu.com/view/63.htm（其實(shí)百度的一些功能還是比較不錯(cuò)的，例如百科、貼吧）

2、E4X
     詳細(xì)概念請(qǐng)看：http://baike.baidu.com/view/1057001.htm
     簡(jiǎn)介點(diǎn)說(shuō)，E4X會(huì)使我們更加容易的處理xml數(shù)據(jù)。

3、JSON
     還是需要看定義的話，請(qǐng)前往這里：http://baike.baidu.com/view/136475.htm

4、數(shù)組
    我想只要是學(xué)過(guò)編程的朋友都應(yīng)該知道數(shù)組的概念吧，如果不知道的話，請(qǐng)看這里：http://baike.baidu.com/view/209670.htm

5、哈希表
    詳細(xì)請(qǐng)看：http://baike.baidu.com/view/329976.htm
    關(guān)于哈希表與數(shù)組直接區(qū)別，就不是本篇文章所描述的內(nèi)容了，如果大有多這方面不清楚的可以查閱相關(guān)資料。

okay，了解了一些以上的內(nèi)容后，讓我們看一下Flex本身如何對(duì)外部數(shù)據(jù)進(jìn)行處理的。也就是說(shuō)，盡量掌握以下的一些知識(shí)點(diǎn)。

1、URLLoader、URLRequest的用法。
    掌握了URLLoader、URLRequest的用法有，就可以從外部讀入任意內(nèi)容的數(shù)據(jù)了，并且可以加以處理。例如以下的代碼：
    
    var loader: URLLoader = new URLLoader( new URLRequest( "resources/config.xml" ));
    loader.addEventListener( Event.COMPLETE, handleCompleted );

   上述代碼告訴我們，F(xiàn)lex讀取外部xml的方式。將xml讀取后，就可以對(duì)其進(jìn)行處理了，關(guān)于處理的具體方式可以看下面。

2、Flex處理XML的機(jī)制。
    由于Flex本身內(nèi)置了E4X機(jī)制，這樣它可以比其他的編程語(yǔ)言更加適合處理XML這樣的數(shù)據(jù)。
    因此就需要學(xué)習(xí)Flex是如何讀取、控制XML的方式。

3、Flex內(nèi)置一些與XML有關(guān)系的class
    Flex SDK內(nèi)置了一些處理XML的Class，而這些Class基本上都放置在flash.xml這個(gè)包下面。例如XMLDocument、XMLNode、XMLNodeType
    flash.xml的詳細(xì)內(nèi)容請(qǐng)看：http://livedocs.adobe.com/flex/3_cn/langref/flash/xml/package-detail.html
    同時(shí)還包含了兩個(gè)在頂級(jí)包中的class：
    XML：http://livedocs.adobe.com/flex/3_cn/langref/package.html#XML()
    XMLList：http://livedocs.adobe.com/flex/3_cn/langref/package.html#XMLList()
    還有一個(gè)是關(guān)于處理XMLList集合的class：
    XMLListCollection，位置在mx.collections下面，具體請(qǐng)看：
    http://livedocs.adobe.com/flex/3_cn/langref/mx/collections/XMLListCollection.html
    當(dāng)掌握了這些內(nèi)容后，大家可以可以很方便的對(duì)讀入到Flex里面的XML進(jìn)行處理了。

4、Array、ArrayCollection
    由于Flex本身一門(mén)編程語(yǔ)言，因此理所當(dāng)然的具有處理數(shù)組的能力，因此大家必須要掌握ActionScript 3.0中 Array的一些概念。
    例如：
    數(shù)組的長(zhǎng)度（length）、數(shù)組查找（indexOf、lastIndexOf）、首尾增加新的元素（push、unshift）、首尾刪除元素（pop、shift）、在數(shù)組中出插入/刪除元素（splice）
    截取數(shù)據(jù)（slice）、連接多個(gè)數(shù)組（concat）、數(shù)組排序功能（reverse、sort、sortOn）、操作數(shù)組元素（forEach、every、filter、map、some）等這些概念。
    我本人認(rèn)為雖然ActionScript 3.0的數(shù)組的確具有一些其他語(yǔ)言所不具有的方式，但是ActionScript 3.0的數(shù)組與其他動(dòng)態(tài)語(yǔ)言（Python、Ruby）比起來(lái)還是差的多的。

    ArrayCollection這也是ActionScript 3.0給我們帶來(lái)的一個(gè)更加高級(jí)的方式，ArrayCollection的含義也就是數(shù)組的集合。
    它在很多程度上可以代替ActionScript 3.0中令人不爽的數(shù)組概念。
    詳細(xì)的用法請(qǐng)看這里：http://livedocs.adobe.com/flex/3_cn/langref/mx/collections/ArrayCollection.html

5、哈希表
    雖然ActionScript 3.0本身并沒(méi)有給我們帶來(lái)哈希表的功能，但是我們可以使用ActionScript 3.0另外一個(gè)強(qiáng)大的功能：Object class，我們可以通過(guò)控制Object來(lái)實(shí)現(xiàn)哈希表的功能。

    例如以下的代碼：
    var obj : Object = new Object();
    obj.x = 1;
    obj.y = 2;
    obj.z = 3;
    如果想要取出obj.x的值，那么我們就可以使用obj[ x ]或者obj.x這樣的方式就可以把對(duì)應(yīng)的值取出來(lái)。

6、對(duì)JSON的處理
    由于現(xiàn)在很多Open API方面的source都支持對(duì)JSON的輸出，因此有的時(shí)候，還是需要了解一下在Flex里面如何處理JSON的。
    而JSON相對(duì)于XML的好處是：1、size相對(duì)小一些。2、更容易被JavaScript處理。
    但是ActionScript 3.0里面沒(méi)有給我們直接處理JSON的能力，因此我們需要借用外部的力量來(lái)實(shí)現(xiàn)。
    在《我經(jīng)常使用的 Flex Tools 和 Resource》一文中，我想大家推薦了一個(gè)library：as3corelib。其中就有關(guān)于ActionScript 3.0處理JSON的class：JSONDecoder。
    關(guān)于這個(gè)class的具體用法，請(qǐng)大家自己查找。

okay，基本上《Adobe Flex/AIR學(xué)習(xí)路線（Flex部分之?dāng)?shù)據(jù)篇一）》已經(jīng)完成了，但是這僅僅是Flex中最基本的一些數(shù)據(jù)處理方式，下一篇《Adobe Flex/AIR學(xué)習(xí)路線（Flex部分之?dāng)?shù)據(jù)篇二）》我向大家介紹一下Flex組件的數(shù)據(jù)處理方式：dataProvider、itemRenderer、data這三個(gè)屬性，通過(guò)這兩個(gè)屬性，我們可以讓一些Flex內(nèi)置的組件本身就具有數(shù)據(jù)顯示、處理能力。 

上一篇文章《Adobe Flex/AIR學(xué)習(xí)路線（Flex部分之?dāng)?shù)據(jù)篇一）》分析了Flex里面經(jīng)常使用的一些數(shù)據(jù)類(lèi)型、處理數(shù)據(jù)的一些常用的class等內(nèi)容，今天我們簡(jiǎn)述一下，Flex里面的哪些組件也具有數(shù)據(jù)處理能力。

1、dataProvider
     在Adobe ActionScript 3.0里面的定義如下：
    要查看的數(shù)據(jù)集。此屬性允許您將大多數(shù)類(lèi)型的對(duì)象用作數(shù)據(jù)提供程序。如果將 dataProvider屬性設(shè)置為 Array，則會(huì)將其轉(zhuǎn)換為 ArrayCollection。如果將該屬性設(shè)置為 XML對(duì)象，則會(huì)將其轉(zhuǎn)換為僅包含一個(gè)項(xiàng)目的 XMLListCollection。如果將該屬性設(shè)置為XMLList，則會(huì)將其轉(zhuǎn)換為 XMLListCollection。如果將該屬性設(shè)置為實(shí)現(xiàn) IList 或 ICollectionView接口的對(duì)象，則可直接應(yīng)用此對(duì)象。受轉(zhuǎn)換操作的影響，在您獲取 dataProvider屬性時(shí)，該屬性值將始終為 ICollectionView，所以此值不一定是您設(shè)置的對(duì)象類(lèi)型。如果要修改數(shù)據(jù)提供程序中的數(shù)據(jù)，則了解以下行為非常重要：可能不會(huì)檢測(cè)對(duì)原始數(shù)據(jù)所做的更改，但將檢測(cè)對(duì)從 dataProvider屬性獲取的 ICollectionView 對(duì)象所做的更改。默認(rèn)值為 null.此屬性可用作數(shù)據(jù)綁定的源。
    上面那一大堆的東西其實(shí)就說(shuō)明以下幾點(diǎn)：
    a、凡是具有dataProvider的組件，都可以將Array、XML等內(nèi)容作為數(shù)據(jù)源。
    b、將這些作為數(shù)據(jù)源的內(nèi)容“自動(dòng)”綁定并顯示在這些控件上面。
    所以通常的做法，當(dāng)Flex獲取了外部數(shù)據(jù)后，可以將其直接賦值為dataProvider，然后通過(guò)一些設(shè)定，就可以在這些組件上面顯示數(shù)據(jù)了。
    關(guān)于這個(gè)例子我就不在這里復(fù)述了，大家可以自行去找一下，或者直接看這里的內(nèi)容：http://livedocs.adobe.com/flex/3_cn/mx/controls/ComboBox.html#includeExamplesSummary

2、itemRenderer（項(xiàng)目渲染器）及其data屬性。
     itemRenderer的作用就是可以自定義一些組件的項(xiàng)目顯示效果，例如我們熟知的Combobox、List、DataGrid等都具有這樣的屬性，也就是說(shuō)，我們可以利用itemRenderer來(lái)改善ComBoBox里面的下拉的顯示效果。當(dāng)然，List、DataGrid也是這樣的。
     當(dāng)ComboBox中自定義了一個(gè)渲染器后，同時(shí)使用dataProvider的方式綁定了一個(gè)數(shù)據(jù)源，這個(gè)時(shí)候，如何與我們自定義的渲染器里面的item發(fā)生作用呢？就是使用data方式。
     也就是說(shuō)，dataProvider可以綁定數(shù)據(jù)到UI、如果這個(gè)組件使用了自定義渲染器，那么就可以使用data.XXX的方式獲取到dataProvider里面的數(shù)據(jù)。

okay，以上介紹的兩個(gè)知識(shí)點(diǎn)是關(guān)于Flex組件的數(shù)據(jù)處理能力，其中dataProvider可以把Array、XML等內(nèi)容作為數(shù)據(jù)源直接綁定并顯示到UI上面，而itemRenderer里面的data是實(shí)現(xiàn)組件與其渲染器之間的數(shù)據(jù)處理。

下一篇的內(nèi)容是關(guān)于Flex與后臺(tái)進(jìn)行通訊的常見(jiàn)的幾種方式：HTTPService、WebService、Remote等方式，而通過(guò)這幾種方式可以輕松的讓一些例如Java、C#、Python、Ruby、PHP等主流編程語(yǔ)言為Flex所服務(wù)：）

附加：
關(guān)于dataProvider、itemRenderer、data的具體用法有些抽象，因此我特此列舉一個(gè)例子來(lái)說(shuō)明一下。
這是一個(gè)HorizontalList組件，而且其中它的itemRenderer=ToolBoxRenderer，想讓我們看一下HorizontalList的片段代碼：
<mx:HorizontalList id="myHorizontalList" itemRenderer="ToolBoxRenderer">
         <mx:dataProvider>
             <mx:Array>
                   <mx:Object tooltip= "rubber" styleName="rubber" language="{ _language }"/>
             </mx:Array>
         </mx:dataProvider>
</mx:HorizontalList> 

然后是ToolBoxRenderer的片段代碼：

<mx:Canvas width="30" height="30">
         <mx:Button
            width="30" height="30" 
            toolTip="{ data.tooltip }" 
            styleName="{ data.styleName }"/>
</mx:Canvas>

再讓我們看看itemRenderer是如何與我們今天這個(gè)主題聯(lián)系起來(lái)的。
1、在myHorizontalList中定義了一個(gè)dataProvider，通過(guò)代碼可以看出是一個(gè)Array類(lèi)型的變量，然后將其賦值給dataProvider。這個(gè)時(shí)候，其實(shí)就應(yīng)該將數(shù)據(jù)顯示到myHorizontalList上面了，這也就是dataProvider的用處。
2、在dataProvider包含的Array中，定義如下的結(jié)構(gòu)：<mx:Object tooltip= "rubber" styleName="rubber" language="{ _language }"/>
3、我們不僅設(shè)定了dataProvider，還是同時(shí)設(shè)定了itemRenderer，即為T(mén)oolBoxRenderer。
4、在ToolBoxRenderer里面，定義了一個(gè)Button，同時(shí)我們使用類(lèi)似于這樣的方式可以取得
以上就是一個(gè)非常簡(jiǎn)單，但是又非常典型的一個(gè)dataProvider、itemRenderer、data的用法，希望大家可以理解：）

做Flex的項(xiàng)目也很長(zhǎng)時(shí)間了，就來(lái)說(shuō)一下我經(jīng)常使用的一些Flex Tools 和 Resource。

Flex Framework：
1、Cairngorm
     首先Cairngorm是Adobe推崇的一種Flex Framework，同時(shí)也是開(kāi)源的Framework，暫且不提它的單例模式、結(jié)構(gòu)等備受爭(zhēng)議的地方，就單單是前面所說(shuō)，我想沒(méi)用不使用它的理由。
    下載地址：http://opensource.adobe.com/wiki/display/cairngorm/Cairngorm
2、Mate
    我個(gè)人是非常喜歡的一個(gè)輕量級(jí)的Flex Framework，不過(guò)缺點(diǎn)就是只能在Flex里面使用。
    關(guān)于Mate的詳細(xì)內(nèi)容可以去這里：http://www.k-zone.cn/zblog/post/flex-mate-framework.html

Unit：
1、FlexUnit：
     FlexUnit是一個(gè)關(guān)于Flex與ActionScript 3.0的單元測(cè)試框架。在功能上有些與JUnit有些類(lèi)似，我比較推薦的一種測(cè)試框架。
    地址：http://opensource.adobe.com/wiki/display/flexunit/FlexUnit

IDE：
1、MyEclipse
     在這里使用MyEclipse而不是Eclipse的原因，非常簡(jiǎn)單，因此MyEclipse很多東西都已經(jīng)集成好了，到時(shí)候你安裝一下Flex Builder for Eclipse plug-in就可以了。
     地址：http://www.myeclipseide.com
2、Aptana（AIR）
     如果想使用AIR IDE的話，我經(jīng)常使用的是Aptana、因此它除了可以編譯AIR外，還支持很多的JS library，例如Ext JS、JQuery等。正難能可貴的是，它還是可以編譯IPhone...
     地址：http://aptana.com
3、FlashDevelop（ActionScript 3.0）
    有的時(shí)候，需要一些ActionScript Project，那么如果再使用Myeclipse的話，似乎有些大材小用，因此我會(huì)使用FlashDevelop。
    地址：http://www.flashdevelop.org

Library：
1、Degrafa
    由于我需要使用繪圖的一些東西，因此Degrafa是我不二的選擇。
    地址：http://www.degrafa.org/
2、as3corelib
    這里面提供了很多很有用的功能，例如：包括幾個(gè)基礎(chǔ)的MD5、JSON、高級(jí)String以及數(shù)據(jù)解析等等，強(qiáng)烈推薦。
    地址：http://code.google.com/p/as3corelib/
3、FlexLib
    這里面有很多開(kāi)源的第三方組件，有的時(shí)候的確是需要參考一下，強(qiáng)烈推薦。
    地址：http://code.google.com/p/flexlib/

Explorers：
1、ComponentExplorer
    這是關(guān)于Flex 3.0的一些常用組件，偶爾我也會(huì)看一下的。
    地址：http://examples.adobe.com/flex3/componentexplorer/explorer.html
2、Flex 3 Style Explorer
    地址：http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

Doc：
1、Flex編碼規(guī)約
    地址：http://opensource.adobe.com/wiki/display/flexsdk/Coding+Conventions
2、Flex SDK 3.0 Language Reference
    地址：http://livedocs.adobe.com/flex/3/langref/
3、Flex 4.0（Gumbo）Language Reference
    地址： http://livedocs.adobe.com/flex/gumbo/langref/
4、ActionScript language references
    地址：http://www.adobe.com/devnet/actionscript/references/
5、ASDoc
    ActionScript的API文檔生成工具ASDoc
    地址：http://livedocs.adobe.com/flex/3/html/help.html?content=asdoc_1.html

替換com.spket.ui_1.6.17.jar中的com.spket.ui.internal.Lincese.

1.6.17 Lincese