Flex系列--1--构建Flex4为前端的Java EE项目

在继续本教程之前你需要准备好以下事项：
已安装 JDK（截稿时最新版 JDK 6 Update 20），并设定好 JAVA_HOME 环境变量（Tomcat 启动需要）；
下载 Tomcat（截稿时最新版 Tomcat 6.0.26）解压到适当目录，确保 Tomcat 启动正常；
已在“Eclipse IDE for Java EE Developers“（截稿时最新版基于 Eclipse 3.5）基础上正确安装了 Flash Builder 4 插件（可试用 60 天）；
下载最新版 BlazeDS（截稿时最新版 blazeds 4.0.0.14931），解压备用；
已对 Flex 基本了解。
第一步：添加 Apache Tomcat 运行时

从 Window 菜单选择 Preferences
在 Preferences 对话框中展开 Server，然后选择 Runtime Environments
在 Server Runtime Environments 页点击 Add，打开 New Server Runtime Environment 对话框
在 New Server Runtime Environment 页展开 Apache
从下面支持的 Apache Tomcat 服务器中选择一个（我用的是 Apache Tomcat v6.0）：
Apache Tomcat v3.2
Apache Tomcat v4.0
Apache Tomcat v4.1
Apache Tomcat v5.0
Apache Tomcat v5.5
Apache Tomcat v6.0
当你添加一个 Server Runtime Environment 时，默认会创建一个 Server 并作为实体添加在 Servers 视图（View）内。如果你只想添加 server runtime environment 而不想在 Servers 视图内创建 Server，那么清除 Create a new local server 前的多选框（我们选上这个多选框免得之后手动创建 Server）
当你点击 Next 时会打开 Tomcat Server 页
在 Tomcat installation directory 项选择 Apache Tomcat 目录（例如：D:\apache-tomcat-6.0.26）
点击 Tomcat Server 页的 Finish
点击 Server Runtime Environment 页的 OK（如 6 所述，此时 Servers 视图内会显示一个 Server） 

第二步：使用 WTP 创建 Java/Flex 组合项目
切换到 Java EE 视图（perspective）
在 Project Explorer 视图（View）内点击右键，选择 New 项
选择子菜单中的 Project… 项，打开 New Project 对话框
展开 Flash Builder，选择“ Flex 项目“（因为我是中文系统所以 Flash Builder 的菜单项都显示为中文，尽管我的 Eclipse 为英文）
点击 Next
在“新建 Flex 项目”对话框中对应以下几项：
项目名：sampleApp
项目位置：默认即可
应用程序类型：Web
Flex SDK 版本：默认即可
应用程序服务器类型：J2EE
远程对象访问服务：选择 BlazeDS
使用 WTP 创建 Java/Flex 组合项目：选上
点击 Next
在“配置 J2EE 服务器”页对应以下两项，其他项默认即可
目标运行时：Apache Tomcat v6.0
BlazeDS WAR 文件：选择上面准备好的 blazeds.war
点击 Next
输出文件夹 URL：http://localhost:8080/sampleApp
点击 Finish
按提示切换到 Flash 视图（perspective），向 sampleApp.mxml 中拖入 DataGrid 控件以备后用
项目结构图：

第三步：运行 sampleApp 项目

重新切换到 Java EE 视图（perspective）
在 Servers 视图（View）中的 Server 内添加 sampleApp 项目
启动此 Server
以“Web 应用程序”的方式运行项目
如果看到刚才拖入的表格，恭喜你成功了
第四步：使 Flex 以 RemoteObject 的方式与 Java 交互
是不是觉得表格太空洞了？下面我们用它显示雇员信息，借此演示 Flex 与 Java 的交互过程。
创建 com.sample 包
在包内创建两个类： 雇员类 Employee，雇员的 Service 类 EmployeeService
package com.sample;

public class Employee {
    private String name;
    private int age;
    private String email;

    public Employee(String name, int age, String email) {
    this.name = name;
    this.age = age;
    this.email = email;
    }

    public void setName(String name) {
    this.name = name;
    }

    public String getName() {
    return name;
    }

    public void setAge(int age) {
    this.age = age;
    }

    public int getAge() {
    return age;
    }

    public void setEmail(String email) {
    this.email = email;
    }

    public String getEmail() {
    return email;
    }
}
package com.sample;

import java.util.ArrayList;

public class EmployeeService {
    public ArrayList getList() {
    ArrayList tempList = new ArrayList();

    for (int i = 1; i <= 30; i++) {
        tempList.add(new Employee("Smith"+i, 20+i, "smith"+i+"@test.com"));
    }

    return tempList;
    }
}

在 remoting-config.xml 文件中定义 EmployeeService 对应的 destination
<destination id="employeeServiceDest">
    <properties>
        <source>com.sample.EmployeeService</source>
    </properties>
</destination>

在 sampleApp.mxml 中通过 employeeServiceDest 调用 EmployeeService 的 getList() 方法
定义显示雇员信息的表格
<mx:DataGrid x="32" y="25" width="400" dataProvider="{employeeList}">
    <mx:columns>
        <mx:DataGridColumn headerText="Name" dataField="name"/>
        <mx:DataGridColumn headerText="Age" dataField="age"/>
        <mx:DataGridColumn headerText="Email" dataField="email"/>
    </mx:columns>
</mx:DataGrid>

定义 RemoteObject 组件
<fx:Declarations>
    <mx:RemoteObject id="employeeServiceRO" destination="employeeServiceDest"
                     result="resultHandler(event);"
                     fault="faultHandler(event);"/>
</fx:Declarations>

定义相关函数
<fx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.rpc.events.ResultEvent;
        import mx.rpc.events.FaultEvent;

        [Bindable]
        private var employeeList:Object;

        private function init():void {
            employeeServiceRO.getList();
        }

        private function resultHandler(event:ResultEvent):void {
            employeeList = event.result;
        }

        private function faultHandler(event:FaultEvent):void {
            //Alert.show(event.fault.faultString, 'Error');
            Alert.show(event.toString(), 'Error');
        }
    ]]>
</fx:Script>
当 Application 完成构建后立即触发 init() 方法，以实现对 Server 端 Java 的调用
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="955" minHeight="600"
               creationComplete="init();">

第五步：重新运行 sampleApp 项目
很不幸  ，RPC 过程失败了(Adobe Flash Builder 的 Bug 吗？)

注意到上图用黑色背景标注的内容了吧？本应该是 sampleApp，但现在却成了 WebContent。
我们需要处理一下：
打开项目根文件夹下的 .flexProperties 文件，更改其中的 serverContextRoot=”/WebContent” 为 serverContextRoot=”/sampleApp”。
OK，再运行试试吧（别忘了刷新项目）。