- 浏览: 511024 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
michao:
大哥,还有aperture.exe吗? 发我一份,找不到呀,m ...
使用aperture框架让AS3与C++通信,执行本地代码 -
Aaron-Joe-William:
文件被删除了。下不了。
SQLite 数据库加密的一种解决方案 -
hanmiao:
樓主的文章不就是來自IBM Developers里的http: ...
mina 入门 -
howesen:
断包与粘包问题,需要处理下就好了
mina接收数据不全(2) -
sniciq:
git clone --recursive git://git ...
ESB学习笔记(Spring Integration实战)
Flex 开发入门 |
级别: 初级 刘 庆 (liuqcdl@cn.ibm.com ), 软件工程师, IBM 软件开发中心 2009 年 1 月 07 日 本文介绍 Flex 开发的基础知识:包括如何搭建开发环境,如何调试,以及如何建立和部署简单的 Flex 项目。通过本文的学习,可以为您将来深入地学习 Flex 打下良好的基础。<!----><!----> <!----> Flex 作为富 Internet 应用(RIA)时代的新技术代表,自从 2007 年 Adobe 公司将其开源以来,Flex 就以前所未有的速度在成长。很多公司,包括 IBM 都纷纷加入了 Flex 开发的阵营当中。很多开发人员也按捺不住 Flex 的“诱惑”而准备从事 Flex 开发。本文主要讲述 Flex 开发的基础知识,主要是关于开发环境的搭建,以及介绍简单的 Flex 项目创建、编码、调试以及部署的过程和 Flex 编程的基本知识。通过本文的学习,您将会学习如何搭建 Flex 基本的开发环境以及开发、调试和部署方面的基础知识。为您以后深入系统的学习 Flex 打下良好的基础。 要学习本文,您需要有一定的 Web 编程经验和 Eclipse FireFox 使用经验。 本文所有示例均在 Windows XP SP3 系统中测试完成。您需要一台能流畅运行 Windows XP 系统的机器,除此之外您还需要一些工具才能试用本文中的代码。所有这些工具都可以免费下载(参见 参考资源 ):
接下来我们便迫不及待的开始吧!首先搭建我们的开发环境,为了减少因为环境不一致而引起的问题,建议读者使用与本文相同的软件版本:
大家知道 Flex 代码编译后是一个 SWF 文件,运行在 Flash Player 中,要想看到 SWF 文件在运行时输出的一些调试信息是比较困难的。所以在安装好基本的软件之后,我们要安装一些便于我们调试 Flex 的 FireFox 插件: 下载 并安装 debug 版本的 FireFox Flash Player 插件 ( 本文使用的版本为 Flash Player10) 打开 FireFox,到 FireFox 的 扩展组件站点 上搜索并安装 HttpFox,FlashTracer,Cache Status 三个插件,如图 1 所示。 图 1:开发调试需要的 FireFox 插件
在 安装了 Debug 版本的 Flash Player 之后,Flash Tracer 能显示您在程序中用 trace() 语句输出的调试信息,HttpFox 插件不仅能查看 HTTP 通信的过程和数据,还能看到哪些内容是从 Cache 里面读取的。另外,Cache Status 插件可以让我们方便的管理缓存。在 Flex 开发过程中,往往需要先清除掉缓存中的内容,才能看到新改动的效果。 接下来我们打开 Flex Builder, 在菜单Window>Preferences>Server>Runtime Environment 中设置我们的 Tomcat6 以及在菜单Window>Preferences>General>Web Browser 中设置浏览器为外部浏览器 FireFox,如图 2 和图 3 所示: 图 2:配置 Tomcat 图 3:设置默认浏览器 到此为止,我们的开发环境算是彻底搭建完毕,可以看出这个过程并不算是特别简单。别急,先苦后甜,小憩一下,让我们来享受一下 Flex 开发带来的乐趣吧!
打开 Flex Builder, 如图 4 所示,新建一个 Flex 项目: 图 4:新建 Flex 项目 在图 5 所示设置页面中,我们选择项目类型是 Web application,关于 AIR 类型应用的基础知识可参考 developerWorks 上的另一篇文章《使用 Adobe AIR 和 Dojo 开发基于 Ajax 的 Mashup 应用》 。 Application server type 我们以 J2EE 为例,并且不要钩选 Use remote object access service, 关于这些高级内容,我们将在后续的文章中陆续讨论。最后我们使用 Eclipse Ganymede J2EE 版本内置的 WTP(Web Tools Platform) 来创建一个后端使用 Java 前端使用 Flex 的 RIA 项目。在默认设置下,src 是 Java 代码的源代码文件夹。 图 5:设置 Flex 项目 在后续的设置页面中,我们配置项目运行时的 J2EE server 为我们在安装配置开发环境部分中配置的 Tomcat6 如图 6 所示: 图 6:配置运行时 J2EE Server 点 击 Next,在下一个页面中一切都按照默认设置即可。如图 7 所示,Main source folder 是设置默认的 flex 代码 ( 包括 mxml 和 Action script) 的源文件夹,Main application file 是项目默认的主应用。 Out folder URL 是项目运行在我们配置的 Tomcat 上时的 URL. 图 7:其他属性设置 一 切完成之后,我们来看看项目的组成结构,如图 8 所示:flex_src 中是默认的 flex 源码位置,flex_libs 则是存放 flex 其他第三方包的默认路径。类似于 web 应用的 lib 文件夹。 src 是 java 代码位置。 WebContent 文件夹的结构和普通由 WTP 建立的 Web Project 的结构完全相同。在默认的输出路径 bin-debug 文件夹中,我们可以看出 Flex builder 自动生成的 FlexSample.mxml 文件已经被自动编译成 FlexSample.swf 文件。 图 8:Flex 项目结构 接 下来,我们在新创建的项目上增加一点内容并让它运行起来:双击 FlexSample.mxml, 在其中添加一个最基本的 Flex 组件 :Label, 并且在该应用初始化的时候调用 init() 方法。我们在 init() 方法中用 trace() 语句输出调试信息。 代码如下清单 1 所示: 清单 1:FlexSample.mxml
现 在,终于到了让我们的项目运行的时候了 ! 右键点击项目 ->Run As->Run On Server 如图 9 所示:接下来的几个页面选择默认即可,这时大家我们可以看到项目会被部署到我们配置的 Tomcat6 上去。并且 Flex Builder 会自动打开一个我们刚才配置的外部 FireFox 窗口。 图 9:运行项目 但可能令您遗憾的是 Flex Builder 自动打开的 FireFox 窗口打开的 URL: http://localhost:8080/FlexSample/ 却什么也没有。别着急,还剩下最后一步: 如图 10 所示:右键点击我们要运行的 FlexSample.mxml > Run As > Flex Application 图 10:运行 mxml 如 果不出意外的话,您应该会看到下面的界面,Flash Tracer 插件输出了我们用 trace() 语句输出的 debug 信息,标签的 Hello World !也被显示到了界面上。同样,打开 FireFox 的 HttpFox 插件,我们也可以看到在运行时 FlexSample.swf 被载入。 图 11:运行后的界面 如果我们希望像调试 Java 代码那样,在运行时观察变量的值怎么办呢?首先我们像在 Java 代码中设置断点一样给我们的 Action Script 代码增加断点。如图 12 所示: 图 12:在 Action Script 代码中设置断点 然后选择我们的 FlexSample.mxml 右键选择调试运行。如图 13 所示: 图 13:调试方式运行 flex 然后我们随提示切换到 Flex 的调试视图,就会看到我们可以像 Java 调试模式那样轻松的调试 Flex 代码。如图 14 所示: 图 14:Flex Builder 调试视图 利用 WTP,我们可以将项目 export 成一个标准的 war file. 将导出的 war 文件放到 Tomcat 的 webapps 目录或者其他 web 服务器的相应目录下就可以当作一个标准的 web 应用来部署运行。 到此为止,我们应该庆祝一下我们已经迈入了 Flex 的大门了!我们已经编译出了我们自己的 swf 文件,并且运行在服务器上了。熟悉了这个开发过程之后,让我们乘胜前进,结合一个小例子学习一下 Flex 的编程基础知识吧!
在 上面 Hello World 的例子中我们可以看出,就像在 HTML 中嵌入 JavaScript 那样,我们可以在 mxml 里面嵌入 Action Script 代码来实现业务逻辑。没错!如果您把 Flex 中 mxml 和 Action Script 的关系理解为 Html 和 JavaScript 的关系,您会忽然发现您对 Flex 变的如此熟悉! Action Script 语言是面向对象的脚本语言,它连编写方式都和 JavaScript 非常的相似。除了可以嵌套在 mxml 里面之外,它还可以像 JavaScript 写在单独的 .js 文件里面那样写在单独的 .as 文件里面,然后在 mxml 里面引入它。 下面我们新建一个 Action Script 的类 J2eeServer.as 如清单 2 所示: 清单 2:J2eeServer.as
在这个类定义里面,熟悉 Java 的开发人员可以看出其编码规范和 Java 非常类似。在其中我们定义了一个 sendRequest() 方法, 使用 HTTPService 对象发起一个 http 的 get 请求 , 并且对于不同的返回结果我们定义了 onSuccess() 和 onFault() 两个方法去处理。在这两个结果处理方法中,我们将事件 dispatch 出去。 在 J2eeServer.as 中,我们通过 Action Script 发出 http 请求,现在我们定义一个服务器端的 servlet 来处理该请求。如清单 3 所示: 清单 3:SampleServlet.java
和普通 web 应用一样配置 web.xml, 如清单 4 清单 4:web.xml
从 J2eeServer.as 中我们依稀可以看出 Flex 事件驱动的影子。的确,Flex 的业务流程大多是靠事件来驱动的。某一个方法结束后,dispatch 出去一个事件。事件的监听者监听到这个事件后就会采取相应的动作来处理事件。如清单 5 所示:我们在 init() 方法中进行了事件绑定,绑定了两个监听方法 successHandler () 和 errorHandler () 到 J2eeServer 上。当 J2eeServer 完成和服务器端 servlet 通信 dispatch 出相应的事件后,两个监听方法便会监听到相应的事件并进行处理。 Flex 的另外一个重要的特点就是支持数据绑定,在另一篇文章《使用 Eclipse 和 JavaFX 开发 Mashup 应用》
中
我们曾介绍了 JavaFx 的数据绑定特性,同样 Flex
也支持数据绑定。当数据源被绑定到另外一个对象的某属性上时,数据源的数据如果发生变化,开发人员不需要写额外的代码该对象的属性值就可以相应的变化。如
清单 5 中所示:如果要进行数据绑定,则要先定义一个可绑定的数据源,例如我们在变量 清单 5:FlexSample.mxml
最终项目的文件结构如图 15 所示: 图 15:项目文件结构图 运 行项目,我们可以看到当我们改变下拉框的值的时候,会触发 localeComboxChangeHandler() 函数调用 J2eeServer 的 sendRequest() 方法将选择的 locale 值发送给服务器端的 servlet,并且在结果返回后,将从服务器端得到的 response 显示在 resultLable 上。如图 16 所示: 图 16:项目运行结果
Flex 作为 RIA 的新技术,对传统 web 开发技术有继承也有发展。这篇文作为入门文,主要作用是帮助大家掌握 Flex 的开发环境、开发方式、开发调试部署的流程以及 Flex 的基本编程知识。但 Flex 除了国际化、Unit 测试、Ant 编译等传统问题之外,作为新技术 Flex 还有很多不同以往的地方,比如模块开发,RSL(Runtime Shared Libraries), Shared object、和 JavaScript 交互以及它的 MVC 框架 cairngorm,远程调用和消息传递框架 BlazeDS 等。所有这些问题都是值得我们进行后续讨论的。 在本文完成之际,特别感谢 IBM 中国软件开发中心 IM 开发团队我的同事们在工作和学习中给我的巨大帮助! 学习
获得产品和技术
|
发表评论
-
十个Flex/Air疑难杂症及解决方案简略
2010-05-31 17:17 3346最近去一家台企面 ... -
Windows环境下配置+运行red5源码+AS3连接red5简单示例
2010-04-19 13:39 5185Windows环境下配置+运行red5源码+AS3连接red5 ... -
使用aperture框架让AS3与C++通信,执行本地代码
2010-04-08 16:48 3258我们都知道,AIR的效果是非常出色的,这也是大家喜欢她的原因, ... -
SQLITE入门至精通
2010-04-07 11:13 3026关键 ... -
教你解析FLEX JSON中的一个问题 关于键值 和键
2010-04-01 15:25 2326字符串:message = ' "param&quo ... -
air写文件保存在安装目录
2010-03-31 15:46 3223AIR中..保存文件我们般会像下面这样操作 var f ... -
弱弱的一个小问题,bitmapdata pngencoder base64 bytearray
2010-03-31 14:16 1155好久没写东东了,呵呵。随便写点点。关于bitmapdata如何 ... -
FLASH教程:SWF间的双向通信
2010-03-02 18:23 1363假设有一个主 SWf 名为 m ... -
如何把as文件生成swf格式文件
2010-03-02 18:22 5291一,从http://opensource.adobe.com/ ... -
Flex数据交互方法 :httpservice, webservice, RemoteObject, socket
2010-02-27 17:06 1913【转载】 文章分类:Flash编程 http://h ... -
理解Flash Player 9垃圾回收机制
2010-02-02 18:27 1089理解Flash Player 9垃圾回 ... -
BlazeDS入门教程-很详细-赞原创作者一个
2010-01-11 23:51 1723什么是BlazeDS呢?BlazeDS是一个基于服务器的Ja ... -
一些漂亮的Flex主题下载
2010-01-11 10:31 6178一些漂亮的Flex主题下载1Digg meWindows Cl ... -
通过Stratus 服务器在Flash Player中使用RTMFP 开发 点对点应用(一)
2010-01-08 17:43 5402作者:Jozsef Vass 译者:巴巴鲁 ... -
ActionScript 3.0著名开源库 大集合
2009-12-29 17:26 2046这篇文章开始于对Adrian ... -
Flex 读取XML配置文件总结
2009-11-19 11:45 1990在Flex中我 ... -
一个list定义组件,网上找了很久没有,自己做了一个。
2009-10-29 11:55 1252一个list定义组件,网上找了很久没有,自己做了一个。希望对大 ... -
如何使用Flex RemoteObject components 与JAVA交互
2009-10-08 18:04 53132008-12-25 | 22:53分类:前端开发 ... -
flex 在线录制视频语音
2009-09-12 17:45 3649<?xml version="1.0" ... -
flex 蒙板 遮罩
2009-09-11 17:09 3876方法一 <mx:Image source=&q ...
相关推荐
总结一下,Flex开发入门涉及MXML文件的创建、UI组件的使用,以及与J2EE项目的交互。通过学习这些基础知识,开发者可以开始构建功能丰富的富互联网应用程序。压缩包内的`Flex 开发入门.mht`可能是一个教程文档,包含...
### Flex开发入门与ActionScript详解 #### 一、Flex与ActionScript简介 Flex是一种用于构建高性能的、跨浏览器的Web应用程序的开源框架。它由Adobe Systems维护和支持,并且以其强大的功能和灵活性受到开发者们的...
Flex开发入门指南
**Java与Flex开发入门** Java和Flex是两种广泛用于创建丰富互联网应用程序(RIA,Rich Internet Applications)的技术。本文将深入探讨这两个技术平台的基础知识,以及它们如何协同工作以提供卓越的用户体验。 ...
Flex开发入门是一个面向初学者的主题,它涉及到Adobe Flex这一开源框架的使用,用于构建富互联网应用程序(RIA)。Flex是基于ActionScript和MXML,这两种语言允许开发者创建具有交互性、动态性和高性能的Web应用程序...
### Flex开发入门知识点详解 #### 一、Flex简介与特性 **Flex** 是一款由Adobe推出的开源框架,主要用于构建高质量的Rich Internet Applications (RIA),即富互联网应用。它结合了强大的编程语言(ActionScript)...
《ArcGIS API for Flex开发入门详解》 ArcGIS API for Flex是Esri公司推出的一款用于构建富互联网应用程序(RIAs)的开发库,它作为ArcGIS Server 9.3的一部分,旨在提供更快的运行速度和更好的用户体验,尤其在...
标题中的"FLEX开发入门"指的是学习Adobe Flex框架的初级阶段,Flex是一种用于构建富互联网应用程序(RIA)的开源开发工具,主要使用ActionScript语言和MXML进行编程。它允许开发者创建交互性强、功能丰富的Web应用,...
arcgis api for flex 开发入门(三)地图浏览控件的使用
arcgis api for flex 开发入门(二)Map的创建
arcgis api for flex 开发入门(五)查询
Flex开发是一种创建富互联网应用程序(RIA)的技术,它基于Adobe Flash Platform,主要使用ActionScript编程语言。本套入门资料专为初学者设计,旨在帮助学习者掌握Flex的基础知识和技能,从而能够构建交互性强、...
arcgis api for flex的环境搭建
1. **环境配置**:如何设置Java开发环境(JDK、IDE)和Flex开发环境(Flex SDK、IDE),以及如何配置BlazeDS或LCDS等数据通信工具。 2. **数据交互**:使用AMF(Action Message Format)协议进行Java和Flex之间的...
8. **应用程序结构**:讲解MVC(模型-视图-控制器)或其他设计模式在Flex开发中的应用,帮助组织和管理代码。 9. **高级主题**:可能包括自定义组件开发、性能优化、错误处理和调试技巧等进阶内容。 压缩包中的`...
《flash+flex+air移动开发入门经典——适用于android、ios和blackberry》 第1章 flash、flex和air简介 1 1.1 adobe flash 1 1.2 actionscript 3.0 2 1.2.1 ecmascript 2 1.2.2 关键概念 3 1.3 flex框架 11 ...