chrome翻墙-腾讯升级助手
2023年4月5日发(作者：好友管理)
本系列教程目标：使初学者了解富网络应用概念，理解并掌握以下四种架构方法。
+BlazeDS+Spring（<2.5.6）+iBATIS+Cairngorm
+BlazeDS+SpringBlazeDSIntegration+Spring（>=2.5.6）+iBATIS+
Cairngorm
+BlazeDS+Spring（<2.5.6）+iBATIS+pureMVC
+BlazeDS+SpringBlazeDSIntegration+Spring（>=2.5.6）+iBATIS+pureMVC
RIA是什么？
RIA是富网络应用（RichInternetApplication）的缩写，也即丰富互联网应用程序。它只是一种技术形
式而不是具体的技术。
RIA出现的背景
在RIA出现之前，软件开发都是基于C/S（Client/Server）或B/S（Browser/Server）架构，但两者各
有缺点。
C/S的主要缺点：
1.开发、部署成本高
传统B/S结构的软件需要针对不同OS开发对应的版本，且软件更新换代的速度越来越快自然成本会
很高。
2.维护成本高
服务器和客户端都需要维护管理，工作量较大且技术支持复杂。
B/S的主要缺点：
1.受限于HTML技术，很难像C/S那样产生丰富，个性的客户端界面；
2.存在浏览器兼容性差问题；
端负荷较重，响应速度慢；
绝大多数处理都集中在Server端，并且每次响应都要刷新页面（利用Ajax技术会有所缓解）。
随着软件的飞速发展，此时需要出现一种能够摒弃上诉缺点的新的技术形式–RIA出现了。
目前比较流行的RIA技术
Adobe的Flex
微软的Silverlight
Sun的JavaFX
以上三种技术各有优势，本教程只关注目前应用较广泛的Flex。
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要求FlashPlayer
10以上）
本系列教程也只针对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响应的任何HTTP
URI。
你可以通过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),Java
objects,PHPobjects和.NETobjects,并且不需要把对象配置为WEB服务。
但这种方式与其他2种方式不同，它需要中间件（下一节要讲的内容），此时应用和Server端对象
之间通过AMF（ActionMessageFormat）二进制形式传递数据。
Flex视频教程
一周学会Flex3应用开发视频培训（简体中文字幕）
一周学会Flex4应用开发视频培训（英文）
Flex参考文档
Adobe®Flex®4Beta语言参考（简体中文）
UsingFlex4（英文）
AccessingDatawithFlex4（英文）
ADOBE®FLEX®4Tutorials（英文）
ActionScript3.0ReferencefortheAdobePlatform（英文）
TourdeFlex
Flex相关下载
所有Flex4文档（约60M）
Flex4SDK
中间件是什么？为什么需要中间件？
上节中我们谈到Flex通过HTTPService，WebService和RemoteObject三个组件与Server端技术通信，
并且如果用RemoteObject那么应用和Server端对象之间通过AMF二进制形式传递数据。因此就需要额
外的软件实现AMF协议，这样的软件就是我们所说的中间件。根据不同的Server端技术你需要选择不同
的中间件。
中间件类型
PHP中间件
ZendFramework（开源，免费）中的Zend_Amf
AMFPHP（开源，免费）
SabreAMF（开源，免费）
WebORBforPHP（开源，免费）
.NET中间件
（社区版免费，企业版收费）
Rails中间件
WebORBforRails（开源，免费）
Java中间件
WebORBforJava（社区版免费，企业版收费）
AdobeLiveCycleDataServicesES2（收费）
AdobeBlazeDS（开源，免费）
对比AdobeLiveCycleDataServicesES2和AdobeBlazeDS
BlazeDS应用广泛
BlazeDS是发布于LGPLv3许可下的开源，免费项目。在采用Java作为Server端技术的Flex构架中
得到越来越多的应用。在之后的教程中也采用它作为中间件。
BlazeDS文档
BlazeDS4.0InstallationGuide
BlazeDS4.0Javadoc
BlazeDS相关下载
BlazeDS
BlazeDSsourcecode
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与Flash
Builder之间的新工作流程简化了自定义Flex组件的导入和更新。
对AdobeAIR的本机支持
使用FlashBuilder4（包括构建、调试、打包和签署AIR应用程序所需的全部工具）为AdobeAIR®
运行时创建应用程序。AdobeAIR允许您使用与构建浏览器RIA相同的技能和代码库快速开发桌面
RIA。
代码重构
通常重命名对类、方法或变量的所有引用，在代码中实现快速导航或对它进行重构。FlashBuilder4
增加了移动重构。
功能强大的测试工具（仅限高级版）
借助内存和性能概要分析器提高应用程序性能，它们可以监视和分析内存消耗情况以及CPU周期。还
提供对HPQuickTestProfessional等自动化功能测试工具的支持。
NetworkMonitor（网络监视器）（仅限高级版）
为本地Flex应用程序与后端之间通过的全部数据生成一个详细的审计追踪，为调试和性能调试提供
协助。
高级数据服务
使用开放源BlazeDS添加二进制、高性能、基于HTTP的数据传输，或增加AdobeLiveCycle®Data
ServicesES2模块以实现实时数据推送及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”一项，至此安装完毕。
在继续本教程之前你需要准备好以下事项：
已安装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文件：选择上面准备好的
9.点击Next
输出文件夹URL：http://localhost:8080/sampleApp
10.点击Finish
11.按提示切换到Flash视图（perspective），向中拖入DataGrid控件以备后用
项目结构图：
第三步：运行sampleApp项目
1.重新切换到JavaEE视图（perspective）
2.在Servers视图（View）中的Server内添加sampleApp项目
3.启动此Server
4.以“Web应用程序”的方式运行项目
5.如果看到刚才拖入的表格，恭喜你成功了
第四步：使Flex以RemoteObject的方式与Java交互
是不是觉得表格太空洞了？下面我们用它显示雇员信息，借此演示Flex与Java的交互过程。
1.创建包
2.在包内创建两个类：雇员类Employee，雇员的Service类EmployeeService
;
4.
classEmployee{
eStringname;
eintage;
eStringemail;
9.
Employee(Stringname,intage,Stringemail){
=name;
=age;
=email;
14.}
15.
voidsetName(Stringname){
=name;
18.}
19.
StringgetName(){
name;
22.}
23.
voidsetAge(intage){
=age;
26.}
27.
intgetAge(){
age;
30.}
31.
voidsetEmail(Stringemail){
=email;
34.}
35.
StringgetEmail(){
email;
38.}
}
;
ist;
publicclassEmployeeService{
publicArrayListgetList(){
ArrayListtempList=newArrayList();
for(inti=1;i<=30;i++){
(newEmployee("Smith"+i,20+i,
"smith"+i+"@"));
}
returntempList;
}
}
39.在文件中定义EmployeeService对应的destination
40.
41.
42.
43.
44.在中通过employeeServiceDest调用EmployeeService的getList()方法
定义显示雇员信息的表格
dataProvider="{employeeList}">
dataField="email"/>
定义RemoteObject组件
destination="employeeServiceDest"
result="resultHandler(event);"
fault="faultHandler(event);"/>
定义相关函数
;
Event;
vent;
[Bindable]
privatevaremployeeList:Object;
privatefunctioninit():void{
t();
}
privatefunctionresultHandler(event:ResultEvent):void{
employeeList=;
}
privatefunctionfaultHandler(event:FaultEvent):void{
//(tring,'Error');
(ng(),'Error');
}
]]>
当Application完成构建后立即触发init()方法，以实现对Server端Java的调用
xmlns:s="library:///flex/spark"
xmlns:mx="library:///flex/mx"
minWidth="955"minHeight="600"
creationComplete="init();">
第五步：重新运行sampleApp项目
很不幸，RPC过程失败了(AdobeFlashBuilder的Bug吗？)
注意到上图用黑色背景标注的内容了吧？本应该是sampleApp，但现在却成了WebContent。
我们需要处理一下：
打开项目根文件夹下的.flexProperties文件，更改其中的serverContextRoot=”/WebContent”为
serverContextRoot=”/sampleApp”。
OK，再运行试试吧（别忘了刷新项目）。
附件：sampleApp-basic.7z
SpringBlazeDSIntegration是什么？
SpringBlazeDSIntegration是SpringSource的开源项目，用于整合Spring与BlazeDS。
为什么需要SpringBlazeDSIntegration？
正如“Flex4系列教程之六”介绍的：不使用SpringBlazeDSIntegration同样可以整合Spring与
BlazeDS。但这种整合方式不自然，需要额外维护一个BlazeDS配置文件，SpringBlazeDSIntegration会
改善这种处境。
SpringBlazeDSIntegration需要的软件环境：
Java5或更高
Spring2.5.6或更高
BlazeDS3.2或更高
SpringBlazeDSIntegration特征
MessageBroker（BlazeDS的核心组件）被配置为Spring管理的Bean
Flex客户端发出的HTTP消息通过Spring的DispatcherServlet路由给MessageBroker
Remoteobjects以Spring的方式配置在Spring配置文件内
注意事项：
以下内容基于“Flex4系列教程之五”中创建的sampleApp项目。
在继续本教程之前你需要准备好以下事项：
下载SpringFramework（截稿时最新版spring-framework3.0.2），解压备用
下载SpringFrameworkdependencies（截稿时最新版spring-framework3.0.2dependencies），
解压备用
下载SpringBlazeDSIntegration（截稿时最新版spring-flex1.0.3），解压备用
第一步：准备所需jar包
将以下3部分jar包拷贝到sampleApp项目的lib下
Framework
Frameworkdependencies
iance内的
rt内的
内的
[注：]Spring3的依赖包用Ivy或Maven管理会很方便，完成本系列教程后我会单独整理这部分。
暂且手动拷贝吧
BlazeDSIntegration
第二步：修改文件
将内所有Flex相关配置删除掉，添加以下内容（改用Springweb应用的前端控制器处理所有
应用请求）
vlet-class>
第三步：配置
1.创建应用上下文配置文件
2.<?xmlversion="1.0"encoding="UTF-8"?>
3.
:xsi="/2001/XMLSchema-instance"
5.
xsi:schemaLocation="/schema/beans
6.
/schema/beans/">
7.
8.
9.为了使用SpringBlazeDSIntegration的tag，增加命名空间
10.<?xmlversion="1.0"encoding="UTF-8"?>
11.
:flex="/schema/flex"
xmlns:xsi="/2001/XMLSchema-instance"
xsi:schemaLocation="/schema/beans
13.
/schema/beans/
/schema/flex
/schema/flex/">
14.
15.为了把请求路由给MessageBroker，添加以下tag
16.定义Bean，并用remoting-destinationtag把它暴露给Flex
17.
18.
第四步：删除多余的Flex配置文件
删除以外的所有Flex配置文件（你认为它们还有必要保留吗？）。但千万
别忘记在内重新定义默认channel（原来定义在内）：
修改，替换
为
第五步：重新运行sampleApp项目
运行结果与整合之前相同吧
附件：sampleApp-7.7z
SpringBlazeDSIntegration是什么？
SpringBlazeDSIntegration是SpringSource的开源项目，用于整合Spring与BlazeDS。
为什么需要SpringBlazeDSIntegration？
正如“Flex4系列教程之六”介绍的：不使用SpringBlazeDSIntegration同样可以整合Spring与
BlazeDS。但这种整合方式不自然，需要额外维护一个BlazeDS配置文件，SpringBlazeDSIntegration会
改善这种处境。
SpringBlazeDSIntegration需要的软件环境：
Java5或更高
Spring2.5.6或更高
BlazeDS3.2或更高
SpringBlazeDSIntegration特征
MessageBroker（BlazeDS的核心组件）被配置为Spring管理的Bean
Flex客户端发出的HTTP消息通过Spring的DispatcherServlet路由给MessageBroker
Remoteobjects以Spring的方式配置在Spring配置文件内
注意事项：
以下内容基于“Flex4系列教程之五”中创建的sampleApp项目。
在继续本教程之前你需要准备好以下事项：
下载SpringFramework（截稿时最新版spring-framework3.0.2），解压备用
下载SpringFrameworkdependencies（截稿时最新版spring-framework3.0.2dependencies），
解压备用
下载SpringBlazeDSIntegration（截稿时最新版spring-flex1.0.3），解压备用
第一步：准备所需jar包
将以下3部分jar包拷贝到sampleApp项目的lib下
Framework
Frameworkdependencies
iance内的
rt内的
内的
[注：]Spring3的依赖包用Ivy或Maven管理会很方便，完成本系列教程后我会单独整理这部分。
暂且手动拷贝吧
BlazeDSIntegration
第二步：修改文件
将内所有Flex相关配置删除掉，添加以下内容（改用Springweb应用的前端控制器处理所有
应用请求）
vlet-class>
第三步：配置
1.创建应用上下文配置文件
2.<?xmlversion="1.0"encoding="UTF-8"?>
3.
:xsi="/2001/XMLSchema-instance"
5.
xsi:schemaLocation="/schema/beans
6.
/schema/beans/">
7.
8.
9.为了使用SpringBlazeDSIntegration的tag，增加命名空间
10.<?xmlversion="1.0"encoding="UTF-8"?>
11.
:flex="/schema/flex"
xmlns:xsi="/2001/XMLSchema-instance"
xsi:schemaLocation="/schema/beans
13.
/schema/beans/
/schema/flex
/schema/flex/">
14.
15.为了把请求路由给MessageBroker，添加以下tag
16.定义Bean，并用remoting-destinationtag把它暴露给Flex
17.
18.
第四步：删除多余的Flex配置文件
删除以外的所有Flex配置文件（你认为它们还有必要保留吗？）。但千万
别忘记在内重新定义默认channel（原来定义在内）：
修改，替换
为
第五步：重新运行sampleApp项目
运行结果与整合之前相同吧
附件：sampleApp-7.7z
注意事项：
以下内容基于“Flex4系列教程之七”中最后形成的sampleApp项目。Spring2.5.6之前版本的整合方
式与本篇基本相同，不再重复。
配置数据源
是时候改用DB存储sampleApp中的雇员（Employee）信息了。我们采用Mysql，并假定你已安装它（截
稿时最新版MySQLCommunityServer5.1.47）。
1.准备数据库
创建数据库sample
创建表employees
CREATETABLEIFNOTEXISTS`employees`(
`id`int(11)NOTNULLAUTO_INCREMENT,
`name`varchar(20)COLLATEutf8_unicode_ciNOTNULLDEFAULT'',
`age`int(2)NOTNULLDEFAULT'0',
`email`varchar(100)COLLATEutf8_unicode_ciNOTNULLDEFAULT
'',
PRIMARYKEY(`id`)
)ENGINE=InnoDBDEFAULTCHARSET=utf8COLLATE=utf8_unicode_ci;
插入一些模拟数据
2.准备所需组件
下载以下组件解压备用
CommonsDBCP（截稿时最新版commons-dbcp1.4）
CommonsPool（截稿时最新版commons-pool1.5.4）
Connector/J（截稿时最新版mysql-connector-java5.1.12）
拷贝jar包
将解压后的，和
拷贝到sampleApp的lib下
3.使用单独文件存储DB驱动等信息
创建resources包
在包下创建ties文件，输入你的DB信息
ClassName=
=jdbc:mysql://域名或IP:端口/sample
me=用户名
rd=密码
4.修改文件
增加命名空间
xmlns:xsi="/2001/XMLSchema-instance"
xmlns:flex="/schema/flex"
xmlns:context="/schema/context"
xsi:schemaLocation="/schema/beans
/schema/beans/
d
/schema/flex
/schema/flex/
/schema/context
/schema/context/spring-context-3
.">
引入ties文件
location="classpath:resources/ties"/>
配置数据源
class="ataSource"
destroy-method="close">
value="${ClassName}"/>
向EmployeeService中注入dataSource
5.修改EmployeeService
追加dataSource属性
privateBasicDataSourcedataSource;
publicvoidsetDataSource(BasicDataSourcedataSource){
urce=dataSource;
}
publicBasicDataSourcegetDataSource(){
returndataSource;
}
修改getList方法
publicArrayList
ArrayList
try{
Connectionconn=nection();
PreparedStatementps=eStatement("SELECT*
FROM`employees`");
ResultSetrs=eQuery();
while(()){
Employeeemployee=newEmployee();
e(ing("name"));
(("age"));
il(ing("email"));
(employee);
}
}catch(SQLExceptione){
tackTrace();
}
returntempList;
}
[注：]以上创建Employee实例的方法需要在Employee中追加默认构造器。
6.运行sampleApp
重构server端
你是否觉得目前的server端比较混乱？是的，我们需要重构它。
1.按以下原则重构server端
面向接口编成
分离业务逻辑层和持久层
重构后结构图（代码请参照之后的附件）：
2.重新配置
将以下内容
3.
4.
5.
更改为
class="eeServiceImpl">
6.运行sampleApp
附件：sampleApp-8-1.7z
整合iBATIS2.3
spring-framework3.0目前只支持iBATIS2.x，期望它尽快支持iBATIS的高版本–MyBatis
1.准备所需组件
下载解压iBATIS2.3.4，将拷贝到lib下
将以下springframework的jar文件拷贝到lib下
2.通过Spring管理iBATIS
追加以下代码
class="ClientFactoryBean">
value="WEB-INF/"/>
修改
为
3.创建iBATIS映射文件
创建包
创建映射文件
<?xmlversion="1.0"encoding="UTF-8"?>
PUBLIC"-////DTDSQLMap2.0//EN"
"/dtd/">
resultClass="ee">
SELECT*FROMemployees
4.创建iBATIS配置文件
在WEB-INF下创建
5.<?xmlversion="1.0"encoding="UTF-8"?>
6.
"-////DTDSQLMapConfig2.0//EN"
8."/dtd/">
9.
10.
11.修改Dao的实现类EmployeeDaoImpl
;
13.
ist;
15.
ClientDaoSupport;
ee;
18.
classEmployeeDaoImplextendsSqlMapClientDaoSupport
entsEmployeeDao{
ArrayList
(ArrayList
orList("getEmployees");
24.}
}
25.重构Dao和Service中getList方法的返回值类型
由ArrayList
26.重新运行sampleApp
没问题吧
怎么样？现在整个架构感觉舒服多了吧但是否感觉缺点什么？对，事务！我们下一篇搞定它。
附件：sampleApp-8-2.7z
注意事项：
以下内容基于“Flex4系列教程之八”中最后形成的sampleApp项目。
准备所需jar包
将以下jar包拷贝到sampleApp项目的lib下
Frameworkdependencies
j内的
SpringFramework的事务管理类型
综合性的事务支持是SpringFramework倍受欢迎的原因之一。SpringFramework有两种事务管理方式：
声明式事务管理和编程式事务管理。前者因为“对代码影响最小“和“非侵入性”而较为流行。
配置声明式事务
SpringFramework的声明式事务通过AOP思想实现。
1.制定事务管理规则
常见的是对Service层进行事务管理，我们也不例外。我们约定对Service接口内定义的方法实行
以下事务上下文语义：
以get开头的方法：只读（read-only）
以insert开头的方法：读写（read-write）
以update开头的方法：读写（read-write）
以delete开头的方法：读写（read-write）
2.配置
向文件追加以下内容：
配置PlatformTransactionManagerbean，用于驱动事务
class="urceTransactio
nManager">
配置advice
增加命名空间
xmlns:xsi="/2001/XMLSchema-instance"
xmlns:flex="/schema/flex"
xmlns:context="/schema/context"
xmlns:tx="/schema/tx"
xsi:schemaLocation="/schema/beans
/schema/beans/
d
/schema/flex
/schema/flex/
/schema/context
/schema/context/spring-context-3.
/schema/tx
/schema/tx/">
追加advice
配置切入点
增加命名空间
xmlns:xsi="/2001/XMLSchema-instance"
xmlns:flex="/schema/flex"
xmlns:context="/schema/context"
xmlns:aop="/schema/aop"
xmlns:tx="/schema/tx"
xsi:schemaLocation="/schema/beans
/schema/beans/
d
/schema/flex
/schema/flex/
/schema/context
/schema/context/spring-context-3.
/schema/aop
/schema/aop/
/schema/tx
/schema/tx/">
追加切入点配置
*..*Service.*(..))"/>
pointcut-ref="serviceOperation"/>
[注：]加粗部分为AspectJ切入点表达式，我会在本系列教程之后详细介绍。
3.上面的配置实际上做了什么？
它们被用于围绕Service对象创建相应的事务代理，此代理会用advice配置。这样当Service中
的方法在代理上执行时相应的事务也就启动了。
4.运行sampleApp
附件：sampleApp-9.7z
Cairngorm2概述
orm2是什么？
Cairngorm2是一个简单规范的MVC模式框架。
orm2的两个版本
Cairngorm2分为“普通版“和“企业版“，后者依赖于LiveCycleDataServices，所以我们只探
讨普通版（因为我们用的是BlazeDS）。
orm2原理图示
orm2教程
IntroductiontoCairngorm2
DevelopingFlexRIAswithCairngormmicroarchitecture
为什么不整合Cairngorm3？
Cairngorm3已经不是Cairngorm2的升级。它由跨框架的“指导原则”、“工具”和“库”三部分组成，
目的在于帮助开发者应用Flex和第三方框架。
开始整合
1.注意事项：
以下内容基于“Flex4系列教程之九”中最后形成的sampleApp项目。
2.准备所需组件
下载Cairngorm2普通版，将解压后的拷贝到flex_libs文件夹。
3.在flex_src下创建以下文件夹
business：放置Delegate类和ServiceLocator文件
command：放置Command类
event：放置Event类
vo：放置VO类
util：放置工具类
model：放置Model类
view：放置视图文件（即mxml文件）
controller：放置Controller类
4.在继续之前，还是回顾一下Cairngorm2的原理吧（总觉得Cairngorm2概述中的图示有点乱）
记住一点：Cairngorm2是事件驱动的。
所以要显示存储在数据库中的职员信息需经过以下过程：
触发一个Event；
控制器依据EventID找到对应的Command；
Command调用Delegate（Delegate又调用Server端对象），并把返回的职员信息存储到Model
中的某个属性；
把Mxml文件中的DateGrid组件与上述Model中的属性绑定。因为绑定是动态的，所以一旦属
性值发生变化DateGrid内容会立即体现。
5.在business下创建，以统一管理远程对象
6.<?xmlversion="1.0"encoding="utf-8"?>
7.
:mx="/2006/mxml"
:cairngorm="/2006/cairngorm">
10.
11.
destination="employeeServiceDest"/>
12.
13.在business下创建LoadEmployeesDelegate代理，调用远程对象
ebusiness
15.{
eLocator;
17.
oken;
nder;
20.
classLoadEmployeesDelegate
22.{
evarresponder:IResponder;
evarservice:Object;
25.
functionLoadEmployeesDelegate(responder:IResponder)
{
der=responder;
e=
tance().getRemoteObject("employeeServiceRO");
29.}
30.
functionload():void{
en:AsyncToken=t();
ponder(responder);
34.}
35.}
}
36.在model下创建EmployeesModelLocator（单例模式），用于存储返回的雇员信息
emodel
38.{
Locator;
ormMessageCodes;
ormError;
42.
ollection;
44.
45.[Bindable]
classEmployeesModelLocatorimplementsIModelLocator
47.{
varemployeesList:ArrayCollection;
49.
estaticvar_instance:EmployeesModelLocator;
51.
functionEmployeesModelLocator(){
(_instance!=null){
ew
CairngormError(TON_EXCEPTION,
55."EmployeesModelLocator");
56.}
57.
58._instance=this;
59.}
60.
staticfunctiongetInstance():EmployeesModelLocator{
(_instance==null){
63._instance=newEmployeesModelLocator();
64.}
65.
_instance;
67.}
68.}
}
69.在event下创建LoadEmployeesEvent事件
eevent
71.{
ormEvent;
73.
classLoadEmployeesEventextendsCairngormEvent
75.{
publicvarEVENT_ID:String="loadEmployees";
77.
functionLoadEmployeesEvent(){
(EVENT_ID);
80.}
81.}
}
82.在command下创建BaseCommand，作为所有Commmand类的基类，以便统一处理fault事件。
ecommand
84.{
nd;
ormEvent;
87.
nder;
;
90.
classBaseCommandimplementsICommand,IResponder
92.{
functionexecute(event:CairngormEvent):void{
94.}
95.
functionresult(data:Object):void{
97.}
98.
functionfault(info:Object):void{
("Wearesorry,asystemerrorhas
occurred.
tryagainlater.");
102.}
103.}
}
104.在command下创建BaseCommand的子类LoadEmployeesCommand。调用LoadEmployeesDelegate，并
把取得的雇员信息保存到EmployeesModelLocator。
ecommand
106.{
ormEvent;
108.
ployeesDelegate;
eesModelLocator;
111.
classLoadEmployeesCommandextendsBaseCommand
113.{
overridefunction
execute(event:CairngormEvent):void{
egate:LoadEmployeesDelegate=new
LoadEmployeesDelegate(this);
();
117.}
118.
overridefunctionresult(data:Object):void{
loyeesModelLocator:EmployeesModelLocator=
tance();
eesList=;
122.}
123.}
}
124.到目前你可能比较疑惑：LoadEmployeesEvent和LoadEmployeesCommand是怎样关联上的呢？这就需
要控制器了，在control下创建FSController。
econtroller
126.{
ontroller;
128.
ployeesEvent;
ployeesCommand;
131.
classFSControllerextendsFrontController
133.{
functionFSController(){
mand(_ID,
LoadEmployeesCommand);
136.}
137.}
}
138.是不是觉得都OK了？呵呵，别高兴的太早。我们还需要把和引
入到主应用文件（即
把文件的29~30行替换为以下内容：
139.
140.触发LoadEmployeesEvent事件
替换的8~25行：
ployeesEvent;
142.
efunctioninit():void{
dEmployeesEvent:LoadEmployeesEvent=new
LoadEmployeesEvent();
ch();
}
146.终于到最后一步了：绑定数据源
引入EmployeesModelLocator
eesModelLocator;
把以下内容
dataProvider="{employeeList}"
替换为
dataProvider="{tance().employeesList}"
147.运行
附件：
sampleApp-10.7z
sampleApp(CRUD)_Cairngorm-2+Spring-3.0.2+iBATIS-2.3.7z
PureMVC概述
C是什么？
PureMVC是一个定位于设计高性能RIA客户端的基于模式的框架。目前已经被移植到多种语言（AS2、
AS3、C#、ColdFusion、Haxe、JavaScript、Java、ObjectiveC、PHP、Python、Ruby）和平台，包括
服务器端环境。
C原理图示
C的两个版本
PureMVC分为标准（Standard）和多核（MultiCore）两个版本。后者目的在于进行模块化编程。[PureMVC
–MulticorevsStandard/Singlecore]介绍了两个版本的本质区别。
C教程
PureMVCFrameworkGoalsandBenefits
PureMVCFrameworkOverviewwithUML
PureMVCImplementationIdiomsandBestPractices
PureMVCImplementationIdiomsandBestPractices简体中文(感谢张泽远和Tamt的翻译工作)
开始整合
1.注意事项：
以下内容基于“Flex4系列教程之九”中最后形成的sampleApp项目。
2.准备所需组件
下载PureMVC(AS3)多核版，将解压后的PureMVC_AS3_MultiCore_1_0_拷贝到flex_libs文
件夹。
3.在flex_src下创建以下文件夹
employees
employees/controller：放置Command类
employees/model：放置Proxy类
employees/view：放置Mediator
employees/view/components：放置视图文件（即mxml文件）
4.在继续之前，还是回顾一下PureMVC的原理吧
记住一点：PureMVC的通信并不采用Flash的EventDispatcher/Event，而是使用观察者模式以一
种松耦合的方式来实现的。
所以要显示存储在数据库中的职员信息需经过以下过程：
ViewComponent触发一个Event；
Mediator监听到此Event，发送通知；
控制器依据通知找到对应的Command；
Command调用Proxy（Proxy又调用Server端对象），Proxy依据执行结果发送相应通知；
Mediator接收到上诉通知，随即把通知中附带的雇员信息赋值给DataGrid组件。
5.不难理解，我们之所以创建employees文件夹就是要把雇员信息相关机能放到此文件下。
出于此目的我们把显示雇员信息的DataGrid组件从中分离出来，命名为
EmployeesDataGrid，存储于employees/view/components下。
6.<?xmlversion="1.0"encoding="utf-8"?>
7.
:s="library:///flex/spark"
:mx="library:///flex/mx"
="400"x="32"y="25">
11.
12.
13.
14.
dataField="name"/>
15.
dataField="age"/>
16.
dataField="email"/>
17.
18.
19.在sampleApp中引入EmployeesDataGrid组件
20.<?xmlversion="1.0"encoding="utf-8"?>
21.
:s="library:///flex/spark"
:mx="library:///flex/mx"
th="955"minHeight="600"
:view="ents.*">
26.
27.
28.
29.在employees下创建ApplicationFacade，作为此应用程序的Facade
eemployees
31.{
;
ller.*;
34.
classApplicationFacadeextendsFacade
36.{
staticconstSTARTUP:String='startup';
38.
functionApplicationFacade(key:String){
(key);
41.}
42.
staticfunction
getInstance(key:String):ApplicationFacade{
(instanceMap[key]==null)
ceMap[key]=newApplicationFacade(key);
46.
instanceMap[key]asApplicationFacade;
48.}
49.
deprotectedfunctioninitializeController():void{
lizeController();
52.
erCommand(STARTUP,StartupCommand);
54.}
55.
functionstartup(app:sampleApp):void{
tification(STARTUP,app);
58.}
59.}
}
[注：]看到上面的StartupCommand了吧，我们稍候创建它，该Command主要用于注册Proxy和
Mediator。
60.在主应用中初始化Facade，并调用startup方法（应该能理解调用此方法的意图吧？）
61.<?xmlversion="1.0"encoding="utf-8"?>
62.
:s="library:///flex/spark"
:mx="library:///flex/mx"
th="955"minHeight="600"
:view="ents.*"
lize="p(this);">
68.
69.
ationFacade;
71.
staticconstNAME:String='sampleApp';
evarfacade:ApplicationFacade=
tance(NAME);
74.]]>
75.
76.
77.
78.
79.是时候创建StartupCommand了
ller
81.{
Command;
ication;
84.
classStartupCommandextendsSimpleCommand
86.{
depublicfunctionexecute(note:INotification):void{
88.//@TODO
89.}
90.}
}
91.至此pureMVC已经整合完毕，是不是很简洁？:)接下来实现雇员信息输出。
92.首先在model下创建LoadEmployeesProxy，调用远程对象返回雇员信息
94.{
;
Object;
Event;
vent;
99.
classLoadEmployeesProxyextendsProxy{
staticconstNAME:String='LoadEmployeesProxy';
staticconstLOAD_EMPLOYEES_SUCCESS:String=
'loadEmployeesSuccess';
staticconstLOAD_EMPLOYEES_FAILED:String=
'loadEmployeesFailed';
104.
evaremployeeServiceRO:RemoteObject;
106.
functionLoadEmployeesProxy(){
(NAME);
109.
eeServiceRO=newRemoteObject();
ation=
"employeeServiceDest";
112.
ntListener(,onResult);
113.
ntListener(,onFault);
114.}
115.
functionload():void{
t();
118.}
119.
efunctiononResult(event:ResultEvent):void{
tification(LOAD_EMPLOYEES_SUCCESS,
);
122.}
123.
efunctiononFault(event:FaultEvent):void{
tification(LOAD_EMPLOYEES_FAILED,
tring);
126.}
127.}
}
128.其次在view下创建管理EmployeesDataGrid的Mediator—EmployeesDataGridMediator
130.{
or;
ication;
133.
;
;
136.
ationFacade;
ployeesProxy;
eesDataGrid;
140.
classEmployeesDataGridMediatorextendsMediator
142.{
staticconstNAME:String=
'EmployeesListMediator';
144.
function
EmployeesDataGridMediator(viewComponent:EmployeesDataGrid){
(NAME,viewComponent);
147.
ntListener(_EMPLOYEE
S,
148.
onGetEmployees);
149.}
150.
tedfunctiononGetEmployees(event:Event):void{
152.
sendNotification(_EMPLOYEES);
153.}
154.
depublicfunction
listNotificationInterests():Array{
[
_EMPLOYEES_SUCCESS,
_EMPLOYEES_FAILED
159.];
160.}
161.
depublicfunction
handleNotification(note:INotification):void{
(e()){
_EMPLOYEES_SUCCESS:
165.
ovider=y();
;
_EMPLOYEES_FAILED:
(y().toString(),
'Error');
;
170.}
171.}
172.
tedfunctionget
employeesDataGrid():EmployeesDataGrid{
viewComponentasEmployeesDataGrid;
175.}
176.}
}
177.把上面创建的Proxy和Mediator注册到Model和View中
ller
179.{
Command;
ication;
182.
ployeesProxy;
eesDataGridMediator;
185.
classStartupCommandextendsSimpleCommand
187.{
depublicfunction
execute(note:INotification):void{
erProxy(newLoadEmployeesProxy());
190.
:sampleApp=y()assampleApp;
erMediator(new
EmployeesDataGridMediator(eesDataGrid));
193.}
194.}
}
[注：]在注册Mediator的时候也就确定了它所管理的Mxml文件
195.在controller中创建LoadEmployeesCommand，用于调用LoadEmployeesProxy
ller
197.{
Command;
ication;
200.
ployeesProxy;
202.
classLoadEmployeesCommandextendsSimpleCommand
204.{
depublicfunction
execute(note:INotification):void{
dEmployeesProxy:LoadEmployeesProxy=
veProxy()
asLoadEmployeesProxy;
();
209.}
210.}
}
211.把LoadEmployeesCommand与事件的对应关系追加到ApplicationFacade中
eemployees
213.{
;
ller.*;
216.
classApplicationFacadeextendsFacade
218.{
staticconstSTARTUP:String='startup';
staticconstLOAD_EMPLOYEES:String=
'loadEmployees';
221.
functionApplicationFacade(key:String){
(key);
224.}
225.
staticfunction
getInstance(key:String):ApplicationFacade{
(instanceMap[key]==null)
ceMap[key]=newApplicationFacade(key);
229.
instanceMap[key]asApplicationFacade;
231.}
232.
deprotectedfunctioninitializeController():void
{
lizeController();
235.
erCommand(STARTUP,StartupCommand);
erCommand(LOAD_EMPLOYEES,
LOADEmployeesCommand);
238.}
239.
functionstartup(app:sampleApp):void{
tification(STARTUP,app);
242.}
243.}
}
244.万事俱备，只需要在EmployeesDataGrid创建完毕时触发相应事件
245.<?xmlversion="1.0"encoding="utf-8"?>
246.
:s="library:///flex/spark"
:mx="library:///flex/mx"
="400"x="32"y="25"
onComplete="init();">
251.
252.
253.[Event('loadEmployees')]
254.
255.
256.
257.
staticconstLOAD_EMPLOYEES:String=
'loadEmployees';
259.
functioninit():void{
chEvent(newEvent(LOAD_EMPLOYEES,true));
262.}
263.]]>
264.
265.
266.
267.
268.
headerText="Name"dataField="name"/>
269.
headerText="Age"dataField="age"/>
270.
dataField="email"/>
271.
272.
273.运行试试吧：）
附件：
sampleApp-11.7z
sampleApp(CRUD)_pureMVC-MultiCore.1.0.5+Spring-3.0.2+iBATIS-2.3.7z
更多推荐
silverlight教程
发布评论