Flex 开发入门.docx
《Flex 开发入门.docx》由会员分享，可在线阅读，更多相关《Flex 开发入门.docx（23页珍藏版）》请在冰豆网上搜索。
Flex开发入门
本文介绍Flex开发的基础知识：
包括如何搭建开发环境，如何调试，以及如何建立和部署简单的Flex项目。
通过本文的学习，可以为您将来深入地学习Flex打下良好的基础。
开始之前
Flex作为富Internet应用（RIA）时代的新技术代表，自从2007年Adobe公司将其开源以来，Flex就以前所未有的速度在成长。
很多公司，包括IBM都纷纷加入了Flex开发的阵营当中。
很多开发人员也按捺不住Flex的“诱惑”而准备从事Flex开发。
本文主要讲述Flex开发的基础知识，主要是关于开发环境的搭建，以及介绍简单的Flex项目创建、编码、调试以及部署的过程和Flex编程的基本知识。
通过本文的学习，您将会学习如何搭建Flex基本的开发环境以及开发、调试和部署方面的基础知识。
为您以后深入系统的学习Flex打下良好的基础。
要学习本文，您需要有一定的Web编程经验和EclipseFireFox使用经验。
代码示例和安装要求
本文所有示例均在WindowsXPSP3系统中测试完成。
您需要一台能流畅运行WindowsXP系统的机器，除此之外您还需要一些工具才能试用本文中的代码。
所有这些工具都可以免费下载（参见参考资源）：
∙JavaSDK1.5或更高版本
∙Tomcat6.0或更高版本
∙Eclipse3.3或更高版本
∙FlexBuilder3.0或更高版本
∙FireFox2.0或更高版本
安装配置开发环境
接下来我们便迫不及待的开始吧！
首先搭建我们的开发环境，为了减少因为环境不一致而引起的问题，建议读者使用与本文相同的软件版本：
∙下载并安装JDK（本文使用版本为SunJDK6）；
∙下载并解压Eclipse（本文使用版本为EclipseGanymedeJ2EE版本，含WTP插件）;
∙下载并安装FlexBuilderEclipse插件版（本文使用的FlexBuilder版本为3.0.1）;
∙下载并安装Tomcat（本文使用版本为Tomcat6.0.18）;
∙下载并安装FireFox（由于Flex3.0和一些插件的兼容性问题，本文使用FireFox2.0.0.17）
小提示
FlexBuilder提供两个版本，一个是Allinone的版本，另外一个是Eclipse的插件版，Allinone的版本内置了一个Eclipse的基本核心，插件不全。
所以我们采用单独下载Eclipse和安装FlexBuilder插件版的方式。
另外在安装过程中不要安装FlashPlayer到IE或者FireFox上。
我们在接下来的步骤中将单独安装debug版本的FlashPlayer。
大家知道Flex代码编译后是一个SWF文件，运行在FlashPlayer中，要想看到SWF文件在运行时输出的一些调试信息是比较困难的。
所以在安装好基本的软件之后，我们要安装一些便于我们调试Flex的FireFox插件：
下载并安装debug版本的FireFoxFlashPlayer插件（本文使用的版本为FlashPlayer10）
打开FireFox，到FireFox的扩展组件站点上搜索并安装HttpFox，FlashTracer，CacheStatus三个插件，如图1所示。
图1：
开发调试需要的FireFox插件
小提示
在Debug版本的Flashplayer和FlashTracer插件完成好之后，我们发现FlashTracer并不能正常的显示用trace语句输出的调试信息。
为了使其能够工作，还需要先点击图1中的FlashTracer设置按钮来设置日志文件的输出路径。
并且输出的日志文件路径对于WindowsXP来说必须是C:
\DocumentsandSettings\Administrator\ApplicationData\Macromedia\FlashPlayer\Logs\flashlog.txt。
在安装了Debug版本的FlashPlayer之后，FlashTracer能显示您在程序中用trace（）语句输出的调试信息，HttpFox插件不仅能查看HTTP通信的过程和数据，还能看到哪些内容是从Cache里面读取的。
另外，CacheStatus插件可以让我们方便的管理缓存。
在Flex开发过程中，往往需要先清除掉缓存中的内容，才能看到新改动的效果。
接下来我们打开FlexBuilder,在菜单Window>Preferences>Server>RuntimeEnvironment中设置我们的Tomcat6以及在菜单Window>Preferences>General>WebBrowser中设置浏览器为外部浏览器FireFox，如图2和图3所示：
图2：
配置Tomcat
图3：
设置默认浏览器
到此为止，我们的开发环境算是彻底搭建完毕，可以看出这个过程并不算是特别简单。
别急，先苦后甜，小憩一下，让我们来享受一下Flex开发带来的乐趣吧！
Flex的HelloWorld！
创建项目
打开FlexBuilder,如图4所示，新建一个Flex项目：
图4：
新建Flex项目
在图5所示设置页面中，我们选择项目类型是Webapplication，关于AIR类型应用的基础知识可参考developerWorks上的另一篇文章《使用AdobeAIR和Dojo开发基于Ajax的Mashup应用》。
Applicationservertype我们以J2EE为例，并且不要钩选Useremoteobjectaccessservice,关于这些高级内容，我们将在后续的文章中陆续讨论。
最后我们使用EclipseGanymedeJ2EE版本内置的WTP（WebToolsPlatform）来创建一个后端使用Java前端使用Flex的RIA项目。
在默认设置下，src是Java代码的源代码文件夹。
图5：
设置Flex项目
在后续的设置页面中，我们配置项目运行时的J2EEserver为我们在安装配置开发环境部分中配置的Tomcat6如图6所示：
图6：
配置运行时J2EEServer
点击Next，在下一个页面中一切都按照默认设置即可。
如图7所示，Mainsourcefolder是设置默认的flex代码（包括mxml和Actionscript）的源文件夹，Mainapplicationfile是项目默认的主应用。
OutfolderURL是项目运行在我们配置的Tomcat上时的URL.
图7：
其他属性设置
一切完成之后，我们来看看项目的组成结构，如图8所示：
flex_src中是默认的flex源码位置，flex_libs则是存放flex其他第三方包的默认路径。
类似于web应用的lib文件夹。
src是java代码位置。
WebContent文件夹的结构和普通由WTP建立的WebProject的结构完全相同。
在默认的输出路径bin-debug文件夹中，我们可以看出Flexbuilder自动生成的FlexSample.mxml文件已经被自动编译成FlexSample.swf文件。
图8：
Flex项目结构
接下来，我们在新创建的项目上增加一点内容并让它运行起来：
双击FlexSample.mxml,在其中添加一个最基本的Flex组件:
Label,并且在该应用初始化的时候调用init（）方法。
我们在init（）方法中用trace（）语句输出调试信息。
代码如下清单1所示：
清单1：
FlexSample.mxml
xmlversion="1.0"encoding="utf-8"?
>
Application
xmlns:
mx="
layout="absolute"
initialize="init（）">
Script>
[CDATA[
privatefunctioninit（）:
void
{
vari:
int=0;
i++;
trace（"i="+i）;
}
]]>
Script>
Labeltext="HelloWorld!
"/>
Application>
运行、调试以及部署
现在，终于到了让我们的项目运行的时候了!
右键点击项目->RunAs->RunOnServer如图9所示：
接下来的几个页面选择默认即可，这时大家我们可以看到项目会被部署到我们配置的Tomcat6上去。
并且FlexBuilder会自动打开一个我们刚才配置的外部FireFox窗口。
图9：
运行项目
但可能令您遗憾的是FlexBuilder自动打开的FireFox窗口打开的URL:
http:
//localhost:
8080/FlexSample/却什么也没有。
别着急，还剩下最后一步：
如图10所示：
右键点击我们要运行的FlexSample.mxml>RunAs>FlexApplication
图10：
运行mxml
如果不出意外的话，您应该会看到下面的界面，FlashTracer插件输出了我们用trace（）语句输出的debug信息，标签的HelloWorld！
也被显示到了界面上。
同样，打开FireFox的HttpFox插件，我们也可以看到在运行时FlexSample.swf被载入。
图11：
运行后的界面
如果我们希望像调试Java代码那样，在运行时观察变量的值怎么办呢？
首先我们像在Java代码中设置断点一样给我们的ActionScript代码增加断点。
如图12所示：
图12：
在ActionScript代码中设置断点
然后选择我们的FlexSample.mxml右键选择调试运行。
如图13所示：
图13：
调试方式运行flex
然后我们随提示切换到Flex的调试视图，就会看到我们可以像Java调试模式那样轻松的调试Flex代码。
如图14所示：
图14：
FlexBuilder调试视图
利用WTP，我们可以将项目export成一个标准的warfile.将导出的war文件放到Tomcat的webapps目录或者其他web服务器的相应目录下就可以当作一个标准的web应用来部署运行。
到此为止，我们应该庆祝一下我们已经迈入了Flex的大门了！
我们已经编译出了我们自己的swf文件，并且运行在服务器上了。
熟悉了这个开发过程之后，让我们乘胜前进，结合一个小例子学习一下Flex的编程基础知识吧！
Flex编程基础
面向对象的编程
在上面HelloWorld的例子中我们可以看出，就像在HTML中嵌入JavaScript那样，我们可以在mxml里面嵌入ActionScript代码来实现业务逻辑。
没错！
如果您把Flex中mxml和ActionScript的关系理解为Html和JavaScript的关系，您会忽然发现您对Flex变的如此熟悉！
ActionScript语言是面向对象的脚本语言，它连编写方式都和JavaScript非常的相似。
除了可以嵌套在mxml里面之外，它还可以像JavaScript写在单独的.js文件里面那样写在单独的.as文件里面，然后在mxml里面引入它。
下面我们新建一个ActionScript的类J2eeServer.as如清单2所示：
清单2：
J2eeServer.as
packagecom.ibm.flex
{
importflash.events.EventDispatcher;
importmx.rpc.AsyncToken;
importmx.rpc.events.FaultEvent;
importmx.rpc.events.ResultEvent;
importmx.rpc.http.HTTPService;
publicclassJ2eeServerextendsEventDispatcher
{
publicfunctionJ2eeServer（）
{
}
publicfunctionsendRequest（locale:
String）:
void
{
varhttpObject:
HTTPService=newHTTPService（）;
httpObject.resultFormat="text";
httpObject.url=
"http:
//localhost:
8080/FlexSample/SampleServlet?
locale="+locale;
varresponder:
mx.rpc.Responder=newmx.rpc.Responder（onSuccess,onFault）;
varcall:
AsyncToken=httpObject.send（）;
call.addResponder（responder）;
}
privatefunctiononSuccess（event:
ResultEvent）:
void
{
this.dispatchEvent（event）;
}
privatefunctiononFault（event:
FaultEvent）:
void
{
trace（"communicationfailed!
"）;
this.dispatchEvent（event）;
}
}
}
在这个类定义里面，熟悉Java的开发人员可以看出其编码规范和Java非常类似。
在其中我们定义了一个sendRequest（）方法，使用HTTPService对象发起一个http的get请求,并且对于不同的返回结果我们定义了onSuccess（）和onFault（）两个方法去处理。
在这两个结果处理方法中，我们将事件dispatch出去。
与Servlet集成
在J2eeServer.as中，我们通过ActionScript发出http请求，现在我们定义一个服务器端的servlet来处理该请求。
如清单3所示：
清单3：
SampleServlet.java
packagecom.ibm.sample;
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
publicclassSampleServletextendsHttpServlet{
privatestaticfinallongserialVersionUID=1L;
publicSampleServlet（）{
super（）;
}
protectedvoiddoGet（HttpServletRequestrequest,
HttpServletResponseresponse）throwsServletException,IOException{
doPost（request,response）;
}
protectedvoiddoPost（HttpServletRequestrequest,
HttpServletResponseresponse）throwsServletException,IOException{
Stringlocale=request.getParameter（"locale"）;
response.setContentType（"text/html"）;
PrintWriterout=response.getWriter（）;
out.println（"Thelocaleyouselectedis"+locale）;
}
}
和普通web应用一样配置web.xml,如清单4
清单4：
web.xml
xmlversion="1.0"encoding="UTF-8"?
>
xmlns:
xsi="http:
//www.w3.org/2001/XMLSchema-instance"
xsi:
schemaLocation="
FlexSample
SampleServlet
SampleServlet
com.ibm.sample.SampleServlet
SampleServlet
/SampleServlet
FlexSample.html
事件驱动与数据绑定
从J2eeServer.as中我们依稀可以看出Flex事件驱动的影子。
的确，Flex的业务流程大多是靠事件来驱动的。
某一个方法结束后，dispatch出去一个事件。
事件的监听者监听到这个事件后就会采取相应的动作来处理事件。
如清单5所示：
我们在init（）方法中进行了事件绑定，绑定了两个监听方法successHandler（）和errorHandler（）到J2eeServer上。
当J2eeServer完成和服务器端servlet通信dispatch出相应的事件后，两个监听方法便会监听到相应的事件并进行处理。
Flex的另外一个重要的特点就是支持数据绑定，在另一篇文章《使用Eclipse和JavaFX开发Mashup应用》中我们曾介绍了JavaFx的数据绑定特性，同样Flex也支持数据绑定。
当数据源被绑定到另外一个对象的某属性上时，数据源的数据如果发生变化，开发人员不需要写额外的代码该对象的属性值就可以相应的变化。
如清单5中所示：
如果要进行数据绑定，则要先定义一个可绑定的数据源，例如我们在变量privatevarserverResponse:
String="";的上面设置[Bindable]属性，表示其为可绑定变量。
然后我们在resultLable中使用花括号{serverResponse}将变量serverResponse绑定到resultLable的text属性上。
清单5：
FlexSample.mxml
xmlversion="1.0"encoding="utf-8"?
>
Applicationxmlns:
mx="layout="absolute"
creationComplete="init（）">
Script>
[CDATA[
importmx.rpc.events.ResultEvent;
importmx.rpc.events.FaultEvent;
importcom.ibm.flex.J2eeServer;
importmx.collections.ArrayCollection;
privatevarjserver:
J2eeServer=newJ2eeServer（）;
//可绑定变量
[Bindable]
privatevarserverResponse:
String="";
//可绑定变量
[Bindable]
privatevarlocales:
ArrayCollection=newArrayCollection（
[{label:
"en_us",data:
"en_us"},
{label:
"zh_cn",data:
"zh_cn"}]）;
privatefunctioninit（）:
void
{
//事件绑定
jserver.addEventListener（ResultEvent.RESULT,successHandler）;
jserver.addEventListener（FaultEvent.FAULT,errorHandler）;
}
privatefunctionlocaleComboxChangeHandler（event:
Event）:
void
{
jserver.sendRequest（localeCombox.selectedItem.data）;
}
privatefunctionsuccessHandler（event:
ResultEvent）:
void
{
serverResponse=event.result.toStri
升级会员 