FLEX4教程Word下载.docx
《FLEX4教程Word下载.docx》由会员分享，可在线阅读，更多相关《FLEX4教程Word下载.docx（50页珍藏版）》请在冰豆网上搜索。
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参考文档
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中间件
▪WebORBfor.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开发者
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”一项，至此安装完毕。
在继续本教程之前你需要准备好以下事项：
▪已安装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
▪远程对象访问服务：
选择
▪使用WTP创建Java/Flex组合项目：
选上
7.点击
8.在“配置J2EE服务器”页对应以下两项，其他项默认即可
▪目标运行时：
ApacheTomcatv6.0
▪BlazeDSWAR文件：
选择上面准备好的blazeds.war
9.点击
▪输出文件夹URL：
http:
//localhost:
8080/sampleApp
10.点击
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.packagecom.sample;
4.
5.publicclassEmployee{
6.privateStringname;
7.privateintage;
8.privateStringemail;
9.
10.publicEmployee（Stringname,intage,Stringemail）{
11.this.name=name;
12.this.age=age;
13.this.email=email;
14.}
15.
16.publicvoidsetName（Stringname）{
17.this.name=name;
18.}
19.
20.publicStringgetName（）{
21.returnname;
22.}
23.
24.publicvoidsetAge（intage）{
25.this.age=age;
26.}
27.
28.publicintgetAge（）{
29.returnage;
30.}
31.
32.publicvoidsetEmail（Stringemail）{
33.this.email=email;
34.}
35.
36.publicStringgetEmail（）{
37.returnemail;
38.}
}
packagecom.sample;
importjava.util.ArrayList;
publicclassEmployeeService
升级会员 