MyEclipse+Flex.Builder+Tomcat+BlazeDS

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 的信息，就代表成功了。