人力资源-flex开发环境配置手册.docx

Flex开发环境配置手册
开发工具篇
一． 开发工具
这里主要需要介绍的是两个Flex开发工具的环境配置
l Micromedia Flex Builder 1.5

l FlexBuilder 2.0 Eclipse 插件

二． Micromedia Flex Builder 1.5环境配置
1. 安装Micromedia Flex Builder 1.5
安装部分比较简单，基本上和其他的Windows软件安装差不多，这里不做详细介绍。
2. 配置开发环境
Flex Builder开发工具总体预览如下

图1 总体预览
OK，上面是配置完成的Flex Builder的开发环境预览，下面我们开始进入配置介绍，在这之前请先阅读Flex开发环境配置手册----服务器篇。因为这里使用的服务器是在服务器篇中介绍的布局，所以建议最好先阅读服务器篇。
a) 新建Flex站点
首先我们需要在Flex Builder中为我们的Flex项目构建一个站点，我这里假设其站点名称为genifyFlex，并在服务器的发布目录下新建一个genifyFlex目录，当然这个名称你可以选取自己喜欢的名称。在Flex Builder的菜单栏SiteàNew Flex Site中配置项目站点，如下所示：

图2 新建Flex站点01

图3 新建Flex站点02
Site name：Flex项目使用的站点名称。
Local root folder：项目源文件放置位置。
Flex server root folder：服务器篇中安装的Flex 1.5的目录（注意这个不是Flex Builder的目录）。
URL prefix：用户访问时使用的URL前缀，在项目开发过程中对源文件进行调试时Flex Builder生成的访问路径的前缀也使用该前缀。
b) 站点配置
这里可以在上面的More Settings链接对站点进行更加详细的配置，也可以在Flex Builder的菜单栏SiteàManage Sites进行站点的详细配置

图4 配置Flex站点01

图5 配置Flex站点02
在这里我们选择Edt对站点的一些信息进行详细配置，当然我们也可以在这里建立站点或者导入导出站点信息，这些不是我们这里的重点。
通过基本配置向导（Basic）可以完成对站点的基本信息的配置。
步骤一：
配置站点名称，如果项目的源文件是放置在本地的，这里只需键入站点名称即可，如果源文件是放在服务器上的，并且通过FTP或RDS来连接到服务器的，需要建立相应的连接，详细信息参见在线帮助文档。我们这里使用本地目录，因此这里只需键入站点名称即可。如下图所示：

图6 配置Flex站点03
步骤二：
这里选择服务器使用的技术，我们这里使用MXML for JSP技术

图7 配置Flex站点04
步骤三：
配置编辑和测试服务器，以及文件存放的位置，这里我使用的是本地服务器。

图8 配置Flex站点05
步骤四：
测试调试用URL前缀，在调试时系统自动请求这个前缀加文件名来访问项目文件，进行调试。在点击下一步前请Test URL，否则在你进行调试时将出现无法访问的错误。

图9 配置Flex站点06
步骤五：
这里可以配置当你完成项目文件的编辑后自动将该文件传至服务器，因为我这里配置的服务器目录即项目目录，所以我这里选择不自动上传文件。

图10 配置Flex站点07
步骤六：
配置信息预览，这里可以单击Done完成配置，也可以点击Advanced进行高级配置

图11 配置Flex站点08
c) 复制Flex核心文件
在Flex1.5的安装目录下有一个flex.war的文件是Flex描述引擎的核心文件，使用解压缩工具（如winrar等）将其WEB-INF文件解压至服务器的站点目录下，我这里是genifyFlex，完成后的站点目录结构如下所示

图12 开发环境目录结构
d) 测试环境
现在我们可以使用一个测试文件firstapp.mxml进行测试，看看环境配置是否有问题，如上图所示将firstapp.mxml文件放在genifyFlex目录下

图13 测试文件
使用Debug测试服务器的配置，（Debug前请确保Apache服务器和Resin都已经启动），如果配置正确则可看到如下页面

图14 测试结果
至此Flex Builder开发环境的配置基本完成。
三． Eclipse Flex开发环境配置
1. 获取FlexBuilder2.0插件

2. 安装插件
将插件压缩包flexbuilder2_a1_plugin_10-14.zip解压，解压以后的目录结构如下所示，这里不要将zorn.feature.core.update.site_197.zip解开，其中Players目录低下是IE和Mozilla等浏览器的Flash插件，在运行程序前先安装这些插件。

图15 插件包目录结构
插件的安装通过Eclipse菜单栏的HelpàSoftware UpdatesàFind and Install进行，如下图所示

图16 插件安装01
步骤一：选择安转新插件

图17 插件安装02
步骤二：选择New Archived Site，然后将文件指向插件包的zorn.feature.core.update.site_197.zip文件，注意不要忽略Eclipse不支持的插件，如下红框处不要打勾

图18 插件安装03
选择新建的Flex插件然后Finish，系统会检测出插件的内容

图19 插件安装04

图20 插件安装05
接下去的安装与Windows的其它软件的安装过程大致相似，先接受协议，然后安装软件，当出现提示框时选择Install All即可完成插件的安装，最后重启Eclipse即可使用FlexBuilder。
3. Eclispe环境预览

图21 代码编辑视图

图22 设计视图
至此两个Flex的开发环境配置基本完成。