Flex4系列教程之五 – 构建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 运行时

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

第二步：使用 WTP 创建 Java/Flex 组合项目

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

项目结构图：  

第三步：运行 sampleApp 项目

1. 重新切换到 Java EE 视图（perspective）
2. 在 Servers 视图（View）中的 Server 内添加 sampleApp 项目
3. 启动此 Server
4. 以“Web 应用程序”的方式运行项目
5. 如果看到刚才拖入的表格，恭喜你成功了 :)

第四步：使 Flex 以 RemoteObject 的方式与 Java 交互
是不是觉得表格太空洞了？下面我们用它显示雇员信息，借此演示 Flex 与 Java 的交互过程。

1. 创建 com.sample 包
2. 在包内创建两个类： 雇员类 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;
       }
   }

3. 在 remoting-config.xml 文件中定义 EmployeeService 对应的 destination

   <destination id="employeeServiceDest">
       <properties>
           <source>com.sample.EmployeeService</source>
       </properties>
   </destination>

4. 在 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 项目
很不幸 :cry: ，RPC 过程失败了(Adobe Flash Builder 的 Bug 吗？)
注意到上图用黑色背景标注的内容了吧？本应该是 sampleApp，但现在却成了 WebContent。

我们需要处理一下：
打开项目根文件夹下的 .flexProperties 文件，更改其中的 serverContextRoot="/WebContent" 为 serverContextRoot="/sampleApp"。

OK，再运行试试吧（别忘了刷新项目）。  

附件：  sampleApp-basic.7z