初识Flex

    由于一次面试的需要，我开始接触学习了Flex，从查找文档到编写实例，我深深地喜欢上了它。2004年Macromedia公司推出Flex，——“使用标记语言，像设计网页那样制作Flash SWF文件”。这个特性让人们意识到，原来SWF的世界很宽广。在Flex 2.0正式版发布前，Macromedia先后发布了三个测试版。2.0版本无疑是Flex产品线的一个分水岭，它真正推开了RIA的大门。

 

   不仅是传统的Flash开发人员，还包括越来越多的Web开发人员，都开始注意到Flex这一富有活力的新技术，网络上开始涌现出大量优秀的应用作品。2007年，“Flex”成为Web应用中被谈论得最多的词汇。Flex在富互联网应用程序（Rich Internet Application，缩写为RIA）中的卓越表现，吸引了大批企业用户，这一热潮很快波及全球。市场的需求直接刺激了人才供给，很多程序开发人员都加入到Flex的学习队伍中。

     Flex和Flash的亲密关系，使得Flash开发人员成为了Flex最早的一批用户。这两者都使用ActionScript语言，但从技术角度上看，Flex和Flash的差异很大。对初学者而言，绝不能等而视之。常常地，Flash开发者在初学Flex时，会觉得无从下手。没有了时间轴，很多人不知道该怎么编写代码。但一旦适应了Flex的开发模式，就会如鱼得水。由于Flex程序和Web程序有较多相似之处，传统的Web开发者会更容易理解Flex的开发框架，但进入到实际开发后，因为缺乏ActionScript的编程经验，对动画的理解不够透彻，又会遇到很多棘手的问题。

对于Flex，首先要了解一下三个名词：  

1. Flex framework
Adobe? Flex 2 framework 包含了创 建 RIA 所需要的所有组件，它们是：用于应用程序布局规划的容器；针对用户界面和从用户处获取数据的控制（例如文本框和按钮）；广泛支持的数据绑定、数据格式化、以及有效值验证；事件驱动的开发模式 。 Flex framework 被包含在公用组件库 （ SWC ）文件中。

2. MXML
每 个 Flex 应用程序至少包含有一 个 MXML 文件，它被作为该程序的主文件 。 MXML 是一种标记语言，它是基 于 XML 的一种实现，用来创 建 Flex 应用程序。你可以使用它去声明程序中所使用的标签结构的定义。

3. ActionScript 3.0
你可以使 用 ActionScript 3.0 为应用程序添加动态行为，它是基 于 ECMAScript 的一种实现，类似 于 JavaScript 。你可以 将 ActionScript 作为一个脚本块， 在 MXML 文件中直接进行添加；或者创建一个单独 的 ActionScript 文件，然后将它们导入 到 MXML 文件中。

 

如何获得Flex
 
    这里要安装的是Flex 2.0版本。从Flex诞生到现在，每个版本的变化都比较大，而且在一个大版本下，官方可能根据情况发布升级补丁，导致出现多个版本并存的情况，因此，使用时要注意选定版本。Flex 2.0指的是Adobe第一次发布的2.0正式版，不包括任何升级包和补丁。

    Flex Framework是Flex的核心，也是开发环境中必备的。Flex Framework包含在免费的开发套件Flex SDK中，可以独立安装。可以到Adobe的官方站点（http://www.adobe.com）去下载Flex SDK 2.0。SDK中配有Flex编译器，安装后，即可使用简单的文件编辑器、XML编辑器或者支持文本编辑的任意软件来编写Flex程序，再配合编译器，就可以着手进行Flex 2应用程序开发了。当然，这种方式对开发者的要求比较高，要对MXML语言和ActionScript足够熟练，否则很难适应。

   这里笔者选择的是安装集成开发环境——Flex Buidler 2.0。Flex Builder 2.0整合了Flex SDK 2.0，并提供了一系列强大的功能，比如可视化的拖曳布局模式、完善的代码提示、所见即所得的CSS设计模式等等。使用Flex Builder，可以让开发者的效率得到显著提高。
我们可以通过两种方式获得Flex Builder 2.0：
  （1）下载。官方站点上提供了功能完整的免费版本，可以试用30天。
  （2）购买。目前Flex Builder 2.0标准版的售价是$499。另外，Adobe还开发了一套功能强大的图表组件（Flex Charting 2.0），整合了图表组件的Flex Builder 2.0的售价为$799。

 

这里有个Flex与j2ee交互的例子

 

程序代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" verticalGap="20">
    <mx:HTTPService id="employeeSrv" method="get" url="employee.jsp" resultFormat="xml" result="getMessage()">
        <mx:request>
            <name>{name.text}</name>
            <email>{email.text}</email>
            <phone>{phone.text}</phone>
            <zipcode>{zipcode.text}</zipcode>
        </mx:request>
    </mx:HTTPService>

<mx:Form>

<mx:FormHeading label="增加员工"></mx:FormHeading>

        <mx:FormItem label="Name">
            <mx:TextInput id="name" width="200" />
        </mx:FormItem>
        <mx:FormItem label="Email">
            <mx:TextInput id="email" width="200" />
        </mx:FormItem>
        <mx:FormItem label="Phone">
            <mx:TextInput id="phone" width="200" />
        </mx:FormItem>
        <mx:FormItem label="ZipCode">
            <mx:TextInput id="zipcode" width="60" />
        </mx:FormItem>
        <mx:HBox width="100%" textAlign="center">
            <mx:Button label="Submit" click="employeeSrv.send();" />
            <mx:Button label="Reset" click="clearText();" />
        </mx:HBox>
    </mx:Form>

<mx:Script>

function getMessage()
{
       var xmlNodes:Array = employeeSrv.result.childNodes;
       mx.controls.Alert.show( (xmlNodes[0].childNodes)[0].toString() , 'Message');
       clearText();
}

function clearText()
{
       name.text = "";
       email.text = "";
       phone.text = "";
       zipcode.text = "";
}
    </mx:Script>

</mx:Application>

 

JSP代码

程序代码

<%@ page c %>
<%
request.setCharacterEncoding( "utf-8" );
System.out.println( request.getParameter( "name" ) );
System.out.println( request.getParameter( "phone" ) );
System.out.println( request.getParameter( "email" ) );
System.out.println( request.getParameter( "zipcode" ) );
%>

结果:
<root>
<msg>Success!</msg>
</root>

在那里声明了一个HTTPService，当你点击Submit按钮的时候HTTPService就会把你填写的数据提交到后台的JSP页面，在JSP页面里就可以使用request.getParameter方法取出你填写的内容，JSP最后返回一个XML文档被mxml页面的getMessage()函数所处理，并在屏幕上显示出Success!
特别提示：HTTPService中的method属性在处理中文的时候请使用GET方式，POST方式会出乱码，这个问题很多朋友都遇到过，请注意。
 

参考资料
http://livedocs.adobe.com/flex/3/html/help.html?content=Part2_DevApps_1.html
http://livedocs.adobe.com/flex/3/devguide_flex3.pdf