Flex 作为富 Internet 应用(RIA)时代
新技术代表
自从 2007 年 Adobe 公司将其开源以来Flex 就以前所未有速度在成长
很多公司包括 IBM 都纷纷加入了 Flex 开发阵营当中很多开发人员也按捺不住 Flex “诱惑”而准备从事 Flex 开发本文主要讲述 Flex 开发基础知识主要是有关开发环境搭建以及介绍简单 Flex 项目创建、编码、调试以及部署过程和 Flex 编程基本知识通过本文学习您将会学习如何搭建 Flex 基本开发环境以及开发、调试和部署方面基础知识为您以后深入系统学习 Flex 打下良好基础要学习本文
您需要有
定 Web 编程经验和 Eclipse FireFox 使用经验代码举例和安装要求
本文所有举例均在 Windows XP SP3 系统中测试完成
您需要台能流畅运行 Windows XP 系统机器除此的外您还需要些工具才能试用本文中代码所有这些工具都可以免费下载(参见 参考资源):Java SDK 1.5 或更高版本
Tomcat 6.0 或更高版本
Eclipse 3.3 或更高版本
Flex Builder 3.0 或更高版本
FireFox2.0 或更高版本
安装配置开发环境
接下来我们便迫不及待
开始吧！首先搭建我们开发环境为了减少
环境不致而引起问题建议读者使用和本文相同软件Software版本:下载 并安装 JDK( 本文使用版本为 Sun JDK 6) ；
下载 并解压 Eclipse( 本文使用版本为 Eclipse Ganymede J2EE 版本
含 WTP 插件 ); 下载 并安装 Flex Builder Eclipse 插件版 ( 本文使用
Flex Builder 版本为 3.0.1); 下载 并安装 Tomcat( 本文使用版本为 Tomcat6.0.18);
下载 并安装 FireFox( 由于 Flex3.0 和
些插件兼容性问题本文使用 FireFox2.0.0.17) 大家知道 Flex 代码编译后是
个 SWF 文件运行在 Flash Player 中要想看到 SWF 文件在运行时输出些调试信息是比较困难所以在安装好基本软件Software的后我们要安装些便于我们调试 Flex FireFox 插件:下载 并安装 debug 版本
FireFox Flash Player 插件 ( 本文使用版本为 Flash Player10)打开 FireFox
到 FireFox 扩展组件站点 上搜索并安装 HttpFoxFlashTracerCache Status 3个插件如图 1 所示图 1:开发调试需要
FireFox 插件
在安装了 Debug 版本
Flash Player 的后Flash Tracer 能显示您在
中用 trace
语句输出调试信息HttpFox 插件不仅能查看 HTTP 通信过程和数据还能看到哪些内容是从 Cache 里面读取另外Cache Status 插件可以让我们方便管理缓存Cache在 Flex 开发过程中往往需要先清除掉缓存Cache中内容才能看到新改动效果接下来我们打开 Flex Builder, 在菜单Window>Preferences>Server>Runtime Environment中设置我们
Tomcat6 以及在菜单Window>Preferences>General>Web Browser中设置浏览器为外部浏览器 FireFox如图 2 和图 3 所示:图 2:配置 Tomcat
图 3:设置默认浏览器
到此为止
我们开发环境算是彻底搭建完毕可以看出这个过程并不算是特别简单别急先苦后甜小憩下让我们来享受下 Flex 开发带来乐趣吧！Flex
Hello World ！创建项目
打开 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 其他第 3方包默认路径类似于 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
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
initialize="init">
<mx:Script>
<
= 0;
i
;
trace("i="+i);
}
]]>
</mx:Script>
<mx:Label text="Hello World!" />
</mx:Application>运行、调试以及部署
现在
终于到了让我们项目运行时候了 ! 右键点击项目 ->Run As->Run _disibledevent="Flex 开发入门" />结束语
Flex 作为 RIA
新技术对传统 web 开发技术有继承也有发展这篇文作为入门文主要作用是帮助大家掌握 Flex 开发环境、开发方式、开发调试部署流程以及 Flex 基本编程知识但 Flex 除了国际化、Unit 测试、Ant 编译等传统问题的外作为新技术 Flex 还有很多区别以往地方比如模块开发RSL(Runtime Shared Libraries), Shared object、和 JavaScript 交互以及它 MVC 框架 cairngorm远程和消息传递框架 BlazeDS 等所有这些问题都是值得我们进行后续讨论
最新评论