本系列教程目标:使初学者了解富网络应用概念,理解并掌握以下四种架构方法。 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系列教程之四 – Flash Builder4
Flex4系列教程之六 – 整合Flex,BlazeDS,Spring(< 2.5.6)