Ronnie 猫's 一亩三分地

关注前端技术,一直走在追随前端的路上…For Long Time

【转】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 运行时

  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,再运行试试吧(别忘了刷新项目)。

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google photo

You are commenting using your Google account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s