Flex4系列教程Word下载.docx
- 文档编号:20186551
- 上传时间:2023-01-17
- 格式:DOCX
- 页数:49
- 大小:339.32KB
Flex4系列教程Word下载.docx
《Flex4系列教程Word下载.docx》由会员分享,可在线阅读,更多相关《Flex4系列教程Word下载.docx(49页珍藏版)》请在冰豆网上搜索。
1.开发、部署成本高
传统B/S结构的软件需要针对不同OS开发对应的版本,且软件更新换代的速度越来越快自然成本会很高。
2.维护成本高
服务器和客户端都需要维护管理,工作量较大且技术支持复杂。
B/S的主要缺点:
1.受限于HTML技术,很难像C/S那样产生丰富,个性的客户端界面;
2.存在浏览器兼容性差问题;
3.Server端负荷较重,响应速度慢;
绝大多数处理都集中在Server端,并且每次响应都要刷新页面(利用Ajax技术会有所缓解)。
随着软件的飞速发展,此时需要出现一种能够摒弃上诉缺点的新的技术形式–RIA出现了。
目前比较流行的RIA技术
▪Adobe的Flex
▪微软的Silverlight
▪Sun的JavaFX
以上三种技术各有优势,本教程只关注目前应用较广泛的Flex。
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®
Player和AdobeAIR®
Runtimes
两者都是运行环境,前者基于浏览器,后者基于桌面。
可基于这两个环境开发Flex应用,但Adobe®
Player已非常普及所以现有Flex应用绝大多数都是基于Adobe®
Player开发。
(Flex3要求FlashPlayer9以上,Flex4要求FlashPlayer10以上)
本系列教程也只针对Adobe®
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)二进制形式传递数据。
Flex视频教程
一周学会Flex3应用开发视频培训(简体中文字幕)
一周学会Flex4应用开发视频培训(英文)
Flex参考文档
Adobe®
Flex®
4Beta语言参考(简体中文)
UsingFlex4(英文)
AccessingDatawithFlex4(英文)
ADOBE®
FLEX®
4Tutorials(英文)
ActionScript3.0ReferencefortheAdobePlatform(英文)
TourdeFlex
Flex相关下载
所有Flex4文档(约60M)
Flex4SDK
[声明:
]
本文图片出于UnderstandingFlexintheclient/servermodel一文,感谢原作者的付出。
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开发者
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(英文)
本文部分图片出于UnderstandingFlexintheclient/servermodel一文,感谢原作者的付出。
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的交互过程。
1.创建com.sample包
2.在包内创建两个类:
雇员类Employee,雇员的Service类EmployeeService
3.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Flex4 系列 教程
![提示](https://static.bdocx.com/images/bang_tan.gif)