Flex4+Spring3+ibatis实战系列教程.docx

Flex4+Spring3+ibatis实战系列教程.docx

《Flex4+Spring3+ibatis实战系列教程.docx》由会员分享，可在线阅读，更多相关《Flex4+Spring3+ibatis实战系列教程.docx（39页珍藏版）》请在冰豆网上搜索。

Flex4+Spring3+ibatis实战系列教程

Flex4系列教程之一–RIA

本系列教程目标：

使初学者了解富网络应用概念，理解并掌握以下四种架构方法。

1.Flex+BlazeDS+Spring（<2.5.6）+iBATIS+Cairngorm

2.Flex+BlazeDS+SpringBlazeDSIntegration+Spring（>=2.5.6）+iBATIS+Cairngorm

3.Flex+BlazeDS+Spring（<2.5.6）+iBATIS+pureMVC

4.Flex+BlazeDS+SpringBlazeDSIntegration+Spring（>=2.5.6）+iBATIS+pureMVC

RIA是什么？

RIA是富网络应用（RichInternetApplication）的缩写，也即丰富互联网应用程序。

它只是一种技术形式而不是具体的技术。

RIA出现的背景

在RIA出现之前，软件开发都是基于C/S（Client/Server）或B/S（Browser/Server）架构，但两者各有缺点。

C/S的主要缺点：

开发、部署成本高

传统B/S结构的软件需要针对不同OS开发对应的版本，且软件更新换代的速度越来越快自然成本会很高。

维护成本高

服务器和客户端都需要维护管理，工作量较大且技术支持复杂。

B/S的主要缺点：

受限于HTML技术，很难像C/S那样产生丰富，个性的客户端界面；

存在浏览器兼容性差问题；

Server端负荷较重，响应速度慢；

绝大多数处理都集中在Server端，并且每次响应都要刷新页面（利用Ajax技术会有所缓解）。

随着软件的飞速发展，此时需要出现一种能够摒弃上诉缺点的新的技术形式–RIA出现了。

Flex4系列教程之二–Flex4

Flex和FlexSDK是什么？

Flex是一个开源、免费的框架，用于构建在Adobe®Flash®Player或AdobeAIR®runtimes环境内运行的跨浏览器、桌面和操作系统的富网络应用。

FlexSDK（FlexSoftwareDevelopmentKit）除了包括Flex框架以外还包括compilers（编译器）和debugger（调试器）等开发工具。

（这也意味着没有FlashBuilder等IDE同样可以开发Flex应用，但效率会很低。

）

授权

MozillaPublicLicense,version1.1（MPL）

开发语言

FlexFramework：

ActionScript3.0

开发者

AdobeSystemsIncorporated

Flex应用运行环境–Adobe®Flash®Player和AdobeAIR®Runtimes

两者都是运行环境，前者基于浏览器，后者基于桌面。

可基于这两个环境开发Flex应用，但Adobe®Flash®Player已非常普及所以现有Flex应用绝大多数都是基于Adobe®Flash®Player开发。

（Flex3要求FlashPlayer9以上，Flex4要求FlashPlayer10以上）

本系列教程也只针对Adobe®Flash®Player。

Flex与Flash

在我们的印象里Flash只是设计师用来制作动画的工具，但实际上Flash也可以构建富网络应用的，但比较复杂。

程序员并不习惯使用画图工具，时间轴和可视化面板等来开发富网络应用，Flex的出现解决了这一问题。

有了Flex，程序员可以使用ActionScript和MXML编程语言快速开发富网络应用。

Flex对开发者更具吸引力，而Flash更多的是吸引设计人员。

Flex原理

当你编译一个Flash程序时，Flash开发环境把所有的可视化元素，时间轴指令和ActionScript中的业务逻辑编译为SWF文件。

同样地，Flex程序中的MXML和ActionScript代码首先全部被转换为ActionScript然后编译为SWF文件。

当你把SWF文件部署到服务器上时，使用者可以从服务器获取到这个程序。

Flex应用的构建形式

尽管用Flex开发RIA有多种形式，但现在主流的架构是：

Flex作为Client（客户端），Java、PHP、Asp、Ruby等技术作为Server（服务器端）。

本教程之后的内容主要介绍Flex与Java技术的整合。

Flex访问服务器端数据的3种方式

既然Flex可以和Java等Sever端技术整合，那么它们之间怎样实现通信的呢？

Flex通过HTTPService，WebService和RemoteObject这3个组件实现与Server端的通信。

●HTTPService组件

HTTPService组件允许你与HTTP服务交互，可以是接收HTTP请求和发送HTTP响应的任何HTTPURI。

你可以通过HTTPService组件调用任何类型的Server端技术，包括PHPpages,ColdFusionPages,JavaServerPages,Javaservlets,RubyonRails和ASPpages。

HTTPService组件允许你发送HTTPGET、POST、HEAD、OPTIONS、PUT、TRACE和DELETE请求，并典型的以XML形式返回。

●WebService组件

WebService组件允许你访问WEB服务。

不了解WEB服务吗？

●RemoteObject组件（最灵活、最常用的方式）

RemoteObject组件允许你访问Server端对象的方法，例如ColdFusioncomponents（CFCs）,Javaobjects,PHPobjects和.NETobjects,并且不需要把对象配置为WEB服务。

但这种方式与其他2种方式不同，它需要中间件（下一节要讲的内容），此时应用和Server端对象之间通过AMF（ActionMessageFormat）二进制形式传递数据。

Flex4系列教程之三–中间件BlazeDS

中间件是什么？

为什么需要中间件？

上节中我们谈到Flex通过HTTPService，WebService和RemoteObject三个组件与Server端技术通信，并且如果用RemoteObject那么应用和Server端对象之间通过AMF二进制形式传递数据。

因此就需要额外的软件实现AMF协议，这样的软件就是我们所说的中间件。

根据不同的Server端技术你需要选择不同的中间件。

中间件类型

PHP中间件

▪ZendFramework（开源，免费）中的Zend_Amf

▪AMFPHP（开源，免费）

▪SabreAMF（开源，免费）

▪WebORBforPHP（开源，免费）

.NET中间件

▪WebORBfor.NET（社区版免费，企业版收费）

Rails中间件

▪WebORBforRails（开源，免费）

Java中间件

▪WebORBforJava（社区版免费，企业版收费）

▪AdobeLiveCycleDataServicesES2（收费）

▪AdobeBlazeDS（开源，免费）

对比AdobeLiveCycleDataServicesES2和AdobeBlazeDS

BlazeDS应用广泛

BlazeDS 是发布于LGPLv3许可下的开源，免费项目。

在采用Java作为Server端技术的Flex构架中得到越来越多的应用。

在之后的教程中也采用它作为中间件。

BlazeDS文档

BlazeDS4.0InstallationGuide

BlazeDS4.0Javadoc

BlazeDS相关下载

BlazeDS

BlazeDSsourcecode

Flex4系列教程之四–FlashBuilder4

FlashBuilder4是什么？

FlashBuilder4是一个 Eclipse 插件，版本4之前称为FlexBuilder。

用于帮助开发者使用Flex框架快速开发跨平台的富网络应用。

正如下图描述的那样，FlashBuilder4已经集成了FlexSDK，你不需要再额外下载安装它。

FlashBuilder4版本及授权

有4个版本，分别是：

FlashBuilder4高级版

FlashBuilder4标准版

FlashBuilder4标准教育版

FlashBuilder4高级教育版

其中“FlashBuilder4标准教育版“注册（需要提供教师资格的相关证明）后可免费下载使用，其他都是收费的（但有60天的试用期）。

FlashBuilder4开发者

AdobeSystemsIncorporated

FlashBuilder4主要特征

▪强大的编码工具

借助功能强大、基于Eclipse™的IDE进行开发，它包含针对MXML、ActionScript®语言和CSS的编辑器以及语法颜色、语句完成、代码折叠、交互式点进调试和自动生成常用代码。

▪丰富的可视布局

使用一个丰富的内建组件库以可视方式设计和预览用户界面布局、外观和行为。

扩展内建Flex框架组件或根据需要创建新组件。

导入使用AdobeFlashCatalyst™交互式设计工具创建的功能性应用程序UI。

▪以数据为中心的开发

检查Java™、PHP、AdobeColdFusion®、REST和SOAP服务，在新的“Data/Service”（数据/服务）资源管理器中显示方法和属性。

使用简单的拖放方法将方法绑定到UI组件。

▪交互式数据可视化

只需使用FlexCharting库拖放图表类型并将它链接到数据源，即可创建数据仪表板和交互式数据分析。

使用功能强大的AdvancedDatagrid使用户能浏览复杂数据。

▪外观与样式设计

使用CSS和图形属性编辑器自定义应用程序外观。

快速设置最常用的属性，并在“Design”（设计）视图中预览结果。

使用新的ThemeBrowser（主题浏览器）浏览可用主题，并将它们应用于您的项目。

▪与AdobeCreativeSuite设计工具集成

导入使用AdobeFlashProfessional、Illustrator®、Photoshop®或Fireworks®软件创建的设计资源，或导入使用FlashCatalyst创建的整个应用程序用户界面。

FlashProfessional与FlashBuilder之间的新工作流程简化了自定义Flex组件的导入和更新。

▪对AdobeAIR的本机支持

使用FlashBuilder4（包括构建、调试、打包和签署AIR应用程序所需的全部工具）为AdobeAIR®运行时创建应用程序。

AdobeAIR允许您使用与构建浏览器RIA相同的技能和代码库快速开发桌面RIA。

▪代码重构

通常重命名对类、方法或变量的所有引用，在代码中实现快速导航或对它进行重构。

FlashBuilder4增加了移动重构。

▪功能强大的测试工具（仅限高级版）

借助内存和性能概要分析器提高应用程序性能，它们可以监视和分析内存消耗情况以及CPU周期。

还提供对HPQuickTestProfessional等自动化功能测试工具的支持。

▪NetworkMonitor（网络监视器）（仅限高级版）

为本地Flex应用程序与后端之间通过的全部数据生成一个详细的审计追踪，为调试和性能调试提供协助。

▪高级数据服务

使用开放源BlazeDS添加二进制、高性能、基于HTTP的数据传输，或增加AdobeLiveCycle®DataServicesES2模块以实现实时数据推送及pub/sub消息传递。

▪命令行构建（仅限高级版）

使用新的命令行构建功能实现构建流程自动化。

▪Flex单元测试集成（仅限高级版）

使用Flex单元测试框架实现功能测试自动化。

▪ASDoc支持

使用ASDoc在MXML和ActionScript编辑器中显示注释。

对比FlashBuilder4标准版，FlashBuilder4高级版，FlexBuilder3及Flex4SDK的功能

FlashBuilder4的系统要求（软件）

▪操作系统

Microsoft®Windows®XPwithServicePack3

WindowsVista®UltimateorEnterprise（32or64bitrunningin32-bitmode）

WindowsServer®2008（32bit）

Windows7（32or64bitrunningin32-bitmode）

▪Java™虚拟机（32位）

IBM®JRE1.5

Sun™JRE1.5

IBMJRE1.6

SunJRE1.6

▪Eclipse3.4.2或3.5（插件安装）

在Windows操作系统上安装FlashBuilder4

FlashBuilder4安装文件有两种形式：

”独立安装文件“（即，安装文件已经包含Eclipse）和“插件安装文件”（不包含Eclipse）。

以下只介绍插件形式的安装。

第一步：

下载相关软件

1. 下载JDK6（76.67MB）

2. 下载EclipseIDEforJavaEEDevelopers （基于Eclipse3.5SR2，190MB）

3.下载FlashBuilder4高级版

▪免费创建一个Adobe账号

▪创建账号成功后会显示“DownloadAdobeFlashBuilder4Premium”页面

▪在下拉菜单中选择“English|EclipsePlug-inWindows|403.3MB”

▪点击“Download”按钮下载

第二步：

安装

1.安装JDK；

2.解压Eclipse到指定目录，确保Eclipse能正常启动；

3.安装FlashBuilder插件之前关闭Eclipse和所有浏览器窗口；

4.运行FlashBuilder插件;

▪选择安装前的解压目录

▪选择语言（这只是安装向导的语言，安装后IDE中菜单的语言依据操作系统自动识别）

▪之后是介绍信息，点“Next”

▪之后是许可协议，选择同意后点“Next”

▪之后选择安装路径，点“Next”

▪指定上面安装的Eclipse位置，点“Next”

▪待执行完启动Eclipse，在新建项目弹出窗口中会有“FlashBuilder”一项，至此安装完毕。

FlashBuilder4相关文档

UsingFlashBuilder4（英文）

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

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

▪已安装JDK（截稿时最新版 JDK6Update20），并设定好JAVA_HOME环境变量（Tomcat启动需要）；

▪下载Tomcat（截稿时最新版 Tomcat6.0.26）解压到适当目录，确保Tomcat启动正常；

▪已在“EclipseIDEforJavaEEDevelopers“（截稿时最新版基于Eclipse3.5）基础上正确安装了FlashBuilder4插件（可试用60天）；

▪下载最新版BlazeDS（截稿时最新版 blazeds4.0.0.14931），解压备用；

▪已对Flex基本了解。

第一步：

添加ApacheTomcat运行时

1.从Window菜单选择 Preferences

2.在Preferences对话框中展开 Server，然后选择 RuntimeEnvironments

3.在ServerRuntimeEnvironments页点击 Add，打开NewServerRuntimeEnvironment对话框

4.在NewServerRuntimeEnvironment页展开 Apache

5.从下面支持的ApacheTomcat服务器中选择一个（我用的是ApacheTomcatv6.0）：

▪ApacheTomcatv3.2

▪ApacheTomcatv4.0

▪ApacheTomcatv4.1

▪ApacheTomcatv5.0

▪ApacheTomcatv5.5

▪ApacheTomcatv6.0

6.当你添加一个ServerRuntimeEnvironment时，默认会创建一个Server并作为实体添加在Servers视图（View）内。

如果你只想添加serverruntimeenvironment而不想在Servers视图内创建Server，那么清除 Createanewlocalserver 前的多选框（我们选上这个多选框免得之后手动创建Server）

7.当你点击 Next 时会打开 TomcatServer页

8.在 Tomcatinstallationdirectory 项选择ApacheTomcat目录（例如：

D:

\apache-tomcat-6.0.26）

9.点击TomcatServer页的 Finish

10.点击ServerRuntimeEnvironment页的 OK（如6所述，此时Servers视图内会显示一个Server）

第二步：

使用WTP创建Java/Flex组合项目

1.切换到JavaEE视图（perspective）

2.在ProjectExplorer视图（View）内点击右键，选择 New 项

3.选择子菜单中的 Project… 项，打开NewProject对话框

4.展开 FlashBuilder，选择“ Flex项目“（因为我是中文系统所以FlashBuilder的菜单项都显示为中文，尽管我的Eclipse为英文）

5.点击 Next

6.在“新建Flex项目”对话框中对应以下几项：

▪项目名：

sampleApp

▪项目位置：

默认即可

▪应用程序类型：

Web

▪FlexSDK版本：

默认即可

▪应用程序服务器类型：

J2EE

▪远程对象访问服务：

选择 BlazeDS

▪使用WTP创建Java/Flex组合项目：

选上

7.点击 Next

8.在“配置J2EE服务器”页对应以下两项，其他项默认即可

▪目标运行时：

ApacheTomcatv6.0

▪BlazeDSWAR文件：

选择上面准备好的blazeds.war

9.点击 Next

▪输出文件夹URL：

http:

//localhost:

8080/sampleApp

10.点击 Finish

11.按提示切换到Flash视图（perspective），向sampleApp.mxml中拖入DataGrid控件以备后用

项目结构图：

第三步：

运行sampleApp项目

1.重新切换到JavaEE视图（perspective）

2.在Servers视图（View）中的Server内添加sampleApp项目

3.启动此Server

4.以“Web应用程序”的方式运行项目

5.如果看到刚才拖入的表格，恭喜你成功了 

第四步：

使Flex以RemoteObject的方式与Java交互

是不是觉得表格太空洞了？

下面我们用它显示雇员信息，借此演示Flex与Java的交互过程。

创建com.sample包

在包内创建两个类：

雇员类Employee，雇员的Service类EmployeeService

packagecom.sample;

publicclassEmployee{

privateStringname;

privateintage;

privateStringemail;

publicEmployee（Stringname,intage,Stringemail）{

this.name=name;

this.age=age;

this.email=email;

}

publicvoidsetName（Stringname）{

this.name=name;

}

publicStringgetName（）{

returnname;

}

publicvoidsetAge（intage）{

this.age=age;

}

publicintgetAge（）{

returnage;

}

publicvoidsetEmail（Stringemail）{

this.email=email;

}

publicStringgetEmail（）{

returnemail;

}

}

packagecom.sample;

importjava.util.ArrayList;

publicclassEmployeeService{

publicArrayListgetList（）{

ArrayListtempList=newArrayList（）;

for（inti=1;i<=30;i++）{

tempList.add（newEmployee（"Smith"+i,20+i,"smith"+i+"@"））;

}

returntempList;

}

}

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

com.sample.Em