MyEclipse+Flex.Builder+Tomcat+BlazeDS
一开始学习使用 FLEX 的时候 , 我是用的单独的 FlexBuilder3, 做些纯 FLEX 的应用程序还可以 . 但是如果要和 JAVA 结合在一起使用 , 即利用 FLEX 充当一个完整的 J2EE 系统的 WEB 层的话 , 就需要把 FLex 和 J2EE 结合在一起,上网查资料都是用 Eclipse+MyEclipse+Flex+LCDS 的配置,不是我想要的,要么就是说的不够详细,像我这种菜鸟都不是的家伙直接 就被 OUT 了。所以尝试着自己完整的配了一下 环境 ,不会的部分用网上的方法,现在就差把 Mysql 放进去,一起配置啦。
一、准备工作:
所需要的软件:
Flex.Builder : Flex.Builder.3.Eclipse 插件版 .FB3_WWEJ_Plugin
MyEclipse : MyEclipse_7.0M1_E3.4.0
Tomcat : apache-tomcat-6.0.24
Jdk : jdk-6u10-rc2-bin-b32-windows-i586-p-12_sep_2008
BlazeDS : blazeds-turnkey-3.2.0.3978
二、安装过程:
1. 安装 JDK ,比较简单,(会让你一并装 JRE ,一块装了就行,最好在一个安装目录里)接着就是配置环境变量了,右击【我的电脑】 -> 【属性】 -> 【高级】 -> 【环境变量】
假设 JDK 安装路径: D:/Program Files/Java/jdk1.6.0_10 ( 根据个人情况,我自己装在 D 盘 )
( 注:环境变量中两个符号的用途:
. 表示在当前目录下寻找
;表示不同路径的分隔符
%JAVA_HOME% 表示名称为 JAVA_HOME 的路径 )
( 1 )【系统变量】 -> 【新建】 变量名 :JAVA_HOME 变量值:
D:/Program Files/Java/jdk1.6.0_10( 安装路径 )
( 2 )【系统变量】 -> 【新建】变量名 :classpath 变量值:
.;%JAVA_HOME%/lib
( 3 )【系统变量】在系统变量中如果已有 path 不用新建 , 直接加入变量值:
;%JAVA_HOME%/bin;
(4) 测试: Win+R ,打开“运行”,输入 cmd ,再输入 Java 或 javac 或 java -version
2. 安装 MyEclipse_7.0M1_E3.4.0 ,按提示操作就可以了,哈哈
3. 安装 Flex.Builder.3.Eclipse 插件版 ,也是按步骤走,但是到这一步需注意
注意:下图是选择 FLEX BUILDER 的安装路径,你可以自行选择,然后点击 “next” 按钮。
注意:下图这一步是要你选择 MyEclipse7.0 中的 Eclipse 的安装路径,必须选择 MyEclipse7.0 中的 Eclipse 文件夹。
接着按提示到安装完毕。
然后打开你 FlexBuilder 插件安装的文件夹,打开下面的“ eclipse ”文件夹,可以看到里面有 features 和 plugins 两个文件夹,将他们复制到 MyEcipse7.0 下的 eclipse 文件夹下的 features 和 plugins 两个文件夹内( FlexBuilder 的 features 放到 MyEcipse7.0 下的 features , FlexBuilder 的 plugins 放到 MyEcipse7.0 下的 plugins )。
然后将 FlexBuilder 插件安装的文件夹中的 sdks 放入到 MyEcipse7.0 下的 eclipse 文件夹下。
这样配置基本完成。你就可以在 MyEclipse7.0 下切换视图,从中找到 Flex 对应的的视图结构。【 window 】 -> 【 open Perspective 】 -> 【 other 】就可以看到 Flex Development ,点进去就可以了。
4. 安装 tomcat-6.0.24 , (安装之前必须完成上述的 JDK 的安装)。安装文件可以到 Tomcat 网站上下载( http://tomcat.apache.org/download-60.cgi#6.0.2 4 )注意下载版本为: Windows Service Installer (这个不用配置环境变量,自动配置)。下载后直接运行 apache-tomcat-6.0.24.exe ,一直单击【 Next 】按钮就完成了。安装时,它会自动找到你的 JDK 安装路径。安装完后打开 tomcat ,开启服务后打开浏览器,在地址栏输入 http://localhost:8080/ 测试安装成功否。
5. 下载 BlazeDS : http://opensource.adobe.com/wiki/display/blazeds/Release+Builds 。如果使用的是 turnkey 版本(建议下载此版本)里面实际上包含了 Tomcat 服务器了。但是本人因为之前已经装好了 Tomcat6.0.24 了,所以我的安装的是自己手动的了,下面我介绍只安装 BlazeDS 的 web application 版本(但是仍然下载的是 Turnkey 版本)。下载的 zip 包里面包含了: blazeds.war: 主要的 BlazeDS war 文件,用来建立你的 BlazeDS 应用程序。 Sample.war 就是 BlazeDS 例子了。 Ds-console.war ,简单的 BlazeDS 部署管理程序。而且必须把这三个 war 文件部署在 Tomcat_Home ( tomcat 安装目录)下的 webapps 目录下。然后重启 Tomcat 服务器,在浏览器输入: http://localhost:8080/samples 如果看到显示页面代表就成功了。
6. 接着就可以在 MyEclipse 里建 Flex 工程了 。
( 1 ) 建立 Flex 项目,首先在 MyEclipse 下打开 Flex 视图,右键建立 Flex 工程。
(2 ) 点击 Next ,配置 J2EE 服务器,如下图
填 Target runtime 栏的时候点右面的 new ,选 apache 的 tomcat-6.0 就可以了。
填 Flex WAR file 栏的时候点右面的 Browse , Flex WAR file 指的是安装了 lcds 后的 flex.war 文件的路径,但是在这里我们采用的是 BlazeDS 来取代 lcds ,所以这里设置的是 blazeds.war 的路径。因此 Browse 里直接选 Tomcat_Home ( tomcat 安装目录)下的 webapps 目录下的拷贝进来的 blazeds.war 就可以了(本人想用 LCDS 的,可是网上资源太少了,因为是付费的,几乎找不见,只能用 BlazeDS ,这个是免费的,反正功能差不多,可以把 BlazeDS 理解为 LCDS 的子项,包含于 LCDS )。
Output folder 指的是 Flex 编译后的 swf 和 html 等文件存放的路径,这里改为了 WebRoot ,意思是发布到根目录就可以了。当然你可以根据你的需要和习惯自行设置其他的路径 。
(3 ) 点击下一步,采用默认的配置就可以,点击完成,该工程就建立完成。下图为该工程的目录结构
(4) 让它变成 web 工程由 MyEclipse 发布, 在项目上右键,向Flex 项目中加入Web 支持(作用:为了让Tomcat 可以加载此项目,因为Tomcat 只可以加载Web 项目),如下图所示:
右键项目 -> 【 MyEclipse 】 -> 【 Add Web Project Capabilities 】进入如下页
将下面的 Create web.xml 这一项的对勾去除(因为项目下面已经存在了 web.xml 文件,所以去除掉。),点击“ Finish ”按钮即可。
(5) 项目已经全部搭建完成。(可以发现项目的图标变为两个地球的样子) 现在我们的工程的图标变成了 J2EE Web 工程了,这意味着,你可以 用 MyEclipse 来发布它或者添加更多容器,比如 hibernate 、 spring 等 。
三、测试例子
( 1 )创建 Java 文件。点击 src 文件夹,然后创建 java class. 类的包为 hello, 名字为 HelloWorld.
package hello ;
public class HelloWorld {
public String sayHelloTo ( String str ) {
System . out . println ( "Hello " + str );
return "Hello " + str ; }
}
(2) 在 FirstFlex.mxml 文件中新建一个 text 和一个按钮,来显示从 HelloWorld 传回来的信息。
<? xml version = "1.0" encoding = "utf-8"? >
< mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" viewSourceURL = "srcview/index.html" >
< mx: Script >
< ! [ CDATA [ import mx . rpc . events . FaultEvent ;
import mx . rpc . events . ResultEvent ;
[ Bindable ]
private var helloResult:String ;
private function sayHelloTo (): void {
ro . sayHelloTo ( inputText . text );
}
private function resultHandler ( event:ResultEvent ): void {
helloResult = event . result as String ;
} ]]> </ mx: Script >
< mx:RemoteObject id = "ro" destination = "helloworld" result = "resultHandler(event)" />
< mx:HBox width = "100%" >
< mx:TextInput id = "inputText" />
< mx:Button label = "Submit" click = "sayHelloTo()" />
</ mx:HBox >
< mx:Label text = "{helloResult}" />
</ mx:Application >
(3) 现在,我们要定义 remote object ,让 flex 程序能够调用 java 类。首先来配置 /WEB-INF/flex/remoting-config.xml 文件,添加以下粗体部分来新增一个 destionation—HelloWorld 类。
<? xml version = "1.0" encoding = "UTF-8"? >
< service id = "remoting-service"
class = "flex.messaging.services.RemotingService" >
< adapters >
< adapter-definition id = "java-object" class = "flex.messaging.services.remoting.adapters.JavaAdapter" default = "true" />
</ adapters >
< default-channels >
< channel ref = "my-amf" />
</ default-channels >
< destination id = "helloworld" >
< properties >
< source > hello . HelloWorld </ source >
</ properties >
</ destination >
</ service >
( 4 )到此,配置结束。然后选择此项目,选择在服务器上执行。即浏览地址为: http://localhost:8080/BlazedApp/FirstFlex.html 如果你能在输入框输入字段之后,点击按钮能返回 Hello,XXX 的信息,就代表成功了。