Flex4 与 Java 整合开发配置心得

最近刚开始学习Flex4，在启动页上的官方教程里，无法下载JavaCode代码示例，总是页面不可用，一番纠结后终于得到了一份整合Flex和Java配置篇PDF文档，照着步骤做还是遇到了点麻烦，现将配置过程心得整理如下，当作学习笔记，也希望对其他新入门Flex的朋友有所帮助：

1，  所需资源

MyEclipse (推荐MyEclipse 是因为它可以整合Tomcat和BlazeDS，相当方便，一开始我使用的eclipse怎么也实现不了互通，原来还需要手工把BlazeDS的4个xml文件复制到编译目录下，汗一个)

Flash Builder 4 (Flex现在改名叫这个了- -！以下简称FB吧。Adobe官网分为独立版和Eclipse plugin版，其中包含Flex SDK。推荐plugin版，可以整合进MyEclipse，这样可以只开一个Ecplise实现FB和JAVA同时开发)

Tomcat6.0 ：http://tomcat.apache.org/

BlazeDS ：BlazeDS 是一个基于服务器的 Java 远程控制 (remoting) 和 Web 消息传递 (messaging) 技术，它能够使得后端的 Java 应用程序和运行在浏览器上的 Adobe Flex 应用程序相互通信。也就是说Flex 和Java能通信就靠它了，下载地址：https://www.adobe.com/cfusion/entitlement/index.cfm?e=lc_blazeds

2，  开始建项

这里只介绍FB工程加入Java元素，个人觉得这种方式最简单最方便。

当然也可以建两个项目：一个flex项目，一个java项目，把编译路径设置成tomcat的webapps下的同一个目录，再把blazeDS的4个xml文件手工复制到编译路径，添加web.xlm就行，具体细节此处不再赘述

下面开始建立Flex包含java元素的工程：

2.1 新建Flex项目，填写项目名：FirstFlex。选择服务端技术为J2ee，使用远程对象访问服务为BlazeDS。Java源文件夹为src。点击下一步

2.2 目标运行时为Tomcat6.0，大家都懂的。 

上下文根目录就是工程的根目录，项目名为FirstFlex，所以此处也是。

内容文件夹实际上就是最终编译后的容器目录，BlazeDS的blazeds.war文件将会发布到该目录下的web-inf下的flex目录中，即4个xml文件。同时因为采用的是MyEclipse，他默认的就是发布WebContent里的内容，为了自动化，这里也改为WebContent。

BlazeDS WAR文件，就是选择从官网下载的BlazeDS压缩包。

输出文件夹设为WebContent，目的是保证FB和JAVA编译路径一致。注意此界面是MyEclipse的界面，可以整合BlazeDS，一开始我用FB独立版怎么也出不来教程中的这个界面，没有BlazeDS选择这一项，所以如果不是MyEclipse就要手工把BlazeDS相关文件复制到工程目录下。

2.3 后面一路点next,finished 就会生成如下工程目录：

注意当前是在Flash透视图(Perspective)下，可进行mxml, as编程，切换到MyEclipse透视图，图中的src文件夹就会变成Java源文件夹，方可进行java开发。

3，  写测试程序

3.1.       新建一个java类

package com;

public class Hello {

  public String doAction(String name) {

      System.out.println("收到Flex消息, 开始行动！ Bom~~~");

      return "hello " + name;

  }

}

3.2.    为flex配置远程调用对象：修改WEB-INF/flex下remoting-config.xml  添加：

<destination id="hello">

<properties>

<source>

com.Hello

</source>

</properties>

</destination>

这样就能在mxml里通过id“hello”调用到java服务端的com.Hello类了

3.3.    修改默认的FirstFlex.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

              xmlns:s="library://ns.adobe.com/flex/spark"

              xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

    <fx:Script>

       <![CDATA[

           import mx.rpc.events.ResultEvent;

           protected function getResult(event:ResultEvent):void

           {

              var res:String = event.result as String;

              showResult.text = res;

           }

           private function remotingSayHello():void

           {

              var sname:String = nameInput.text;

              h.doAction(sname);

              nameInput.text = "";

           }

       ]]>

    </fx:Script>

    <fx:Declarations>

       <!-- 将非可视元素（例如服务、值对象）放在此处 -->

       <s:RemoteObject destination="hello" id="h" result="getResult(event)" endpoint="http://localhost:8080/FirstFlex/messagebroker/amf" />

    </fx:Declarations>

    <s:Label x="128" y="170" text="Name : " width="44" height="13" />

    <s:TextInput x="222" y="161" id="nameInput"/>

    <s:TextArea x="222" y="214" id="showResult"/>

    <s:Button x="488" y="161" click="remotingSayHello()" label="提交" />

</s:Application>

4.   启动Tomcat，运行FirstFlex.mxml。或直接在IE地址栏里输入http://localhost:8080/FirstFlex/FirstFlex.html会出现如下画面

输入name后点提交按钮，下方会显示返回结果。同时MyEclipse的控制台会打印” 收到Flex消息, 开始行动！ Bom~~~”，

至此，大功告成！