Flex的安装.docx
- 文档编号:29324693
- 上传时间:2023-07-22
- 格式:DOCX
- 页数:22
- 大小:659.25KB
Flex的安装.docx
《Flex的安装.docx》由会员分享,可在线阅读,更多相关《Flex的安装.docx(22页珍藏版)》请在冰豆网上搜索。
Flex的安装
Flex开发入门
刘庆,软件工程师,IBM软件开发中心
简介:
本文介绍Flex开发的基础知识:
包括如何搭建开发环境,如何调试,以及如何建立和部署简单的Flex项目。
通过本文的学习,可以为您将来深入地学习Flex打下良好的基础。
本文的标签:
eclipse, flex, flex开发入门, java, 开发
标记本文!
发布日期:
2009年1月07日
级别:
初级
访问情况:
79056次浏览
评论:
0 (查看 | 添加评论 -登录)
平均分(137个评分)
为本文评分
开始之前
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=" 事件驱动与数据绑定 从J2eeServer.as中我们依稀可以看出Flex事件驱动的影子。 的确,Flex的业务流程大多是靠事件来驱动的。 某一个方法结束后,dispatch出去一个事件。 事件的监听者监听到这个事件后就会采取相应的动作来处理事件。 如清单5所示: 我们在init()方法中进行了事件绑定,绑定了两个监听方法successHandler()和errorHandler()到J2eeServer上。 当J2eeServer完成和服务器端servlet通信dispatch出相应的事件后,两个监听方法便会监听到相应的事件并进行处理。 Flex的另外一个重要的特点就是支持数据绑定,在另一篇文章《使用Eclipse和JavaFX开发Mashup应用》中我们曾介绍了JavaFx的数据绑定特性,同样Flex也支持数据绑定。 当数据源被绑定到另外一个对象的某属性上时,数据源的数据如果发生变化,开发人员不需要写额外的代码该对象的属性值就可以相应的变化。 如清单5中所示: 如果要进行数据绑定,则要先定义一个可绑定的数据源,例如我们在变量 private var serverResponse: 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,errorHandle
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Flex 安装
![提示](https://static.bdocx.com/images/bang_tan.gif)