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

1. <?xml version="1.0" encoding="utf-8"?>   
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">   
3. <mx:Label text="Hello World!" />  
4. </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

1. package {  
2.     import flash.display.Sprite;  
3.     import flash.text.TextField;  
4.   
5.     public class HelloWorld extends Sprite{  
6.         public function HelloWorld(){  
7.             say();  
8.         }  
9.   
10.         public function say():void{  
11.             var tf:TextField=new TextField();  
12.             tf.text=new String("Hello World!");  
13.             this.addChild(tf);  
14.                         return ;  
15.         }  
16.     }  
17. }  

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！