Flash/Flex/AIR：第一個Flex應用程序

1.基於窗體的應用程序和基於時間軸的應用程序
對於一般的PC機應用應用程序，主要有單機應用程序、C/S應用程序和B/S應用程序;這些應用程序具有五花八門的表現形式，用戶一般只關注應用 程序的功能而無所謂其實現方式，但是對於開發人員，沒一種表現形式似乎都至少對應着一種思維方式，這些思維方式從另一個維度將應用程序劃分爲四大類，即： 基於控制檯的程序、基於網頁的程序、基於窗體的程序和基於時間軸的程序。對於熟悉Java和其他高級語言的開發人員，對基於控制檯和基於網頁的程序一定不 會陌生。那什麼又是基於窗體的應用程序，什麼又是基於時間軸的應用程序呢？

基於窗體的應用程序通常都具有GUI(圖形用戶接口)，說白了就是桌面應用程序，典型的代表有WindowsForm，WebForm等。所有用 戶可訪問的資源和交互都是以可視化控件的形式提供，這些控件有分爲容器類控件和非容器類控件，前者可以包含其他控件，而操作系統桌面是最頂層的容器控件。 開發此類應用程序的典型是Java Swing、Visual Basic以及本版塊的重點Flex。

基於時間軸的應用程序則是以時間爲線索持續講應用程序的狀態和交互提供給用戶，典型的代表是動畫和遊戲等多媒體應用程序。時間軸這個概念對於熟悉 其他類型的開發人員非常陌生，然而它確實又是值得大家劃時間去理解的一個概念，因爲它可以是像窗體那樣等待用戶相應，也可以像網頁那樣來回交換數據，甚至 在沒有任何外力的情況下自發的根據所處環境調整自己的狀態。更爲奇妙的是，每一個時間軸上的元素都可以包含自己的時間軸，所有的時間軸都彼此獨立，這使得 應用程序可以呈現出無限的多維狀態。開發此類應用程序的典型是Flash ActionScript。

2.Flex應用程序結構
從上面的介紹我們看到了Flex和Flash的本質區別──基於窗體和基於時間軸，這就是我在講解Flex時總是不忘Flash的原因之一。另一 個原因則是因爲，雖然Flex不直接基於時間軸，但是別忘了Flex也是使用ActionScript作爲其語言環境，因此時間軸的思維方式仍然可以應用 到Flex開發中，或者讓Flex和Flash協同開發又未嘗不可。

回到Flex應用程序中來，一個典型的Flex應用程序通常包含一下元素：
>. *.swc：一系列隨Flex SDK一起安裝的flex framework。
>. *.mxml：Flex應用程序專用的xml文件。其內容即爲flex 標記語言，通常用於定義flex應用程序的外觀和行爲，可以內嵌ActionScript3和CSS。雖然官方文檔上說每個flex應用程序必須要有至少 一個mxml文件作爲其入口，其實這不是必須的，因爲每個mxml對應於一個as類。這層關係有點類似與jsp的自定義標籤庫和java類的關係。完全可 以用純ActionScript來開發flex應用。
>. *.as：ActionScript3獨立類文件，通常用於定義flex應用程序的行爲，當然如果你比較喜歡純ActionScript的形式開發,也可 以用來定義程序的外觀。這也是我推薦大家的用法，畢竟純ActionScript項目比混合了ActionScript和MXML的項目更容易被開發人員 接受，也更容易維護。
>. *.css：獨立CSS文件，用於規範Flex應用程序組建的外觀。通常和MXML協同使用。
>. 圖片資源：像其他很多應用程序一樣，flex也需要圖片(圖標、表情等)的點綴。
>. 數據：很多基於數據的flex組件(列表框、Grid等)都有一個屬性來設置其數據提供者，這些數據通常可以以外部xml的形式給出，當然也可以硬編碼在程序裏和從其他輸入流中獲取。

Flex SDK爲我們提供了一個編譯器mxmlc，用於講上述元素編譯成swf文件和html文件。這個生成的swf文件就是待開發web應用程序的富客戶端，當然要求瀏覽器裝有flashplayer插件，並且不建議在獨立flashplayer中運行。

mxmlc是一個用java編寫的編譯器，因此也可以直接使用可執行的mxmlc.jar來方便構建ant腳本。

3.Flex開發環境

官方開源免費Flex SDK下載
官方商業IDE Flex Builder 60天試用版下載（linux用戶下載）
官方商業IDE Flash Professional 30天試用版下載

Flex Builder是一個基於Eclipse的IDE，具有插件版和獨立版兩個版本（linux只有獨立版），linux用戶如果存在安裝問題，請參考我的《工作空間從windows轉到linux》一文。

除了上述高級IDE，如同其他編成語言一樣，開發flex只需要一個文本編輯器和一個命令行環境即可(前提是環境變量已配置好)。我使用的文本編 輯器是vim(Visual Interface iMproved)，號稱世界最強的兩大編輯器之一，針對各操作系統都有對應版本，尤其推薦Unix-like用戶使用。其他推薦的有 UtralEditor,SuperNotepad，FlashDevelop等。

文本方式開發是我首先推薦大家──無論你處於什麼階段──使用的，因爲這種方式能夠更好的掌握細節。除非你的客戶給你的時間很有限纔去考慮IDE。另外一個理由，寫文章交流容易，很多論壇是不支持上傳圖片的，這時界面操作就難以文字說清楚了。再者不用擔心盜版問題。

關於Flex的資源，IDE的幫助文檔已經很詳細了，也有中文版可下載。建議大家直接看英文幫助。

4.Flex的Hello World

處於上述原因，這裏僅給出文本方式下在示例(分爲mxml和純as兩種方式)

首先說明一下，Flash/Flex跟其他語言相對比較特殊的地方是它沒有標準輸入輸出，因此只能以可視對象的方式顯示。

4.1 MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label text="Hello World!" />
</mx:Application>

 <?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
<mx:Label text="Hello World!" />
</mx:Application>

4.2ActionsScript3

HelloWorld.as

package {
    import flash.display.Sprite;
    import flash.text.TextField;

    public class HelloWorld extends Sprite{
        public function HelloWorld(){
            say();
        }

        public function say():void{
            var tf:TextField=new TextField();
            tf.text=new String("Hello World!");
            this.addChild(tf);
                        return ;
        }
    }
}

package {
    import flash.display.Sprite;
    import flash.text.TextField;

    public class HelloWorld extends Sprite{
        public function HelloWorld(){
            say();
        }

        public function say():void{
            var tf:TextField=new TextField();
            tf.text=new String("Hello World!");
            this.addChild(tf);
                        return ;
        }
    }
}

編譯上述代碼：
mxmlc HelloWorld.as
mxmlc HelloWorld.mxml

都會生成HelloWorld.swf，用瀏覽器打開看看，Hello World，恭喜你，你已經入門了！
簡單解釋一下，任何mxml都是用flex的入口;如果是ActionScript的話，入口則是Sprite子類的構造方法。ActionScript的類名需要於文件名相同。

寫作前篇《Flex簡介》和本篇《第一個Flex應用程序》的目的是想讓未接觸過flex的朋友產生對flex的興趣，有關flex開發的具體類容以後有時間再介紹。其實有過其他語言的基礎，上述代碼是可以無師自通的。

Enjoy It！