Flex4系列教程之五 – 构建Flex4为前端的Java EE项目

本系列教程目标：使初学者了解富网络应用概念，理解并掌握以下四种架构方法。
1. Flex + BlazeDS + Spring（< 2.5.6） + iBATIS + Cairngorm
2. Flex + BlazeDS + Spring BlazeDS Integration + Spring（>= 2.5.6） + iBATIS + Cairngorm
3. Flex + BlazeDS + Spring（< 2.5.6） + iBATIS + pureMVC
4. Flex + BlazeDS + Spring BlazeDS Integration + Spring（>= 2.5.6） + iBATIS + pureMVC

在继续本教程之前你需要准备好以下事项：

已安装 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，再运行试试吧（别忘了刷新项目）。

附件：

sampleApp-basic.7z

Tagged BlazeDS, Cairngorm, Flash Builder, Flex, Flex教程,iBATIS,mybatis, pureMVC,RIA,Spring Framework

Flex4系列教程之五 – 构建Flex4为前端的Java EE项目

相关推荐