整合Flex和Java—配置篇

 

整合Flex和Java—配置篇

Author:yongtree

废话就不说了，要想了解Flex的相关内容就请问一下Google，百度吧。切入正题，作为一个Java程序员学习Flex，关心的就是怎样将Flex和Java进行结合交互。带着Java程序员的思维，一开始学习Flex并没有按部就班的学习Flex的基础知识，而是想搞清楚Flex到底怎样和Java交互的。经过了一个周末的研究，终于初见成果，下面就重要的讲解三种配置的两个。

         在分享这几种配置之前，先简单的介绍一下需要用到的一些资源。

1、  MyEclipse+Flex插件（官网下载）

2、  Tomcat6.0作为服务器（官网下载）

3、  用BlazeDS（免费）代替LCDS（收费）：没钱啊，只能先使用免费的了。从Adobe官方网站上下载下来，将blazeds.war、ds-console.war、samples.war三个文件放在tomcat的webapps目录下。

Flex+Java配置：

         第一种：Java工程和Flex工程独立，这种方式也是很多人使用的方式，Flex程序员和Java程序员相互独立的工作，这种方式网上有很多的资料，在这里就不再 赘述了。

         第二种：Flex工程加入Java元素

1、  切换到Flex视图，新建Flex project，如下图

因为我们是要java和flex结合，所以在服务器选择上我们选择J2EE

存放java类的源文件，我们的目的就是Flex和java在一个工程里，所以我们这里选择上

说明：Java source folder就是你自己java业务源码存放的根目录，在FB3里，LCDS项目旨在将Java J2ee项目和FlexLcds项目混合。

 

当然如果你不选择 combined 两个在一起，那么就麻烦些：要么你再单独新建一个Flex项目，而这个项目只写java代码。要么再建一个J2ee工程写java代码，而这个项目只写Flex代码，但最后要把Java编译后的class文件放到这个项目下的webroot/web-inf/classes目录中。即不管怎样，最后发布时，java编译后的class文件必须和lcds部署的项目在一起。

2、  点击Next，配置J2EE服务器，如下图

说明：Target runtime实际上没什么用（后来我删除了配置文件里的对应信息，也没问题），但是不指定就不能继续，如果这里显示的是<none>那么就新建一个Tomcat的runtime，简单的只需要指定tomcat的安装目录即可。

 

Content folder实际上就是最终编译后的容器目录，因此，BlazeDS的blazeds.war文件将会发布到 该目录 下的web-inf下的flex目录中。同时因为教程采用的是MyEclipse，他默认的就是发布WebRoot里的内容，为了自动化，因此这里改为了WebRoot（这也是java开发的习惯）

 

Flex WAR file 指的是安装了lcds后的flex.war文件的路径，但是在这里我们采用的是BlazeDS来取代lcds，所以这里设置的是blazeds.war的路径。

 

Compilation options指定了flex文件的编译方式，选择推荐的在FlexBuilder里编译吧，虽然开发时多耗点时间，但是在发布后不会占用服务器的编译处理时间，对用户来说是有好处的。

 

Output folder 指的是Flex编译后的swf和html等文件存放的路径，这里改为了WebRoot，意思是发布到根目录就可以了。当然你可以根据你的需要和习惯自行设置其他的路径

 

3、  点击下一步，采用默认的配置就可以，点击完成，该工程就建立完成。下图为该工程的目录结构

4、  让它变成web工程由MyEclipse发布吧

 

              点击Finish，现在我们的工程的图标变成了J2EE Web 工程了，这意味着，你可以用MyEclipse来发布它或者添加更多容器，比如hibernate、spring等

 

5、  工程建好以后，你可以通过右键—>属性来进行更多的设置。

6、  这样一个Flex+Java的工程就建立完成。

7、  编写例子，测试在介绍完第三种方式以后统一介绍。

 

第三种：由Web project反向加入Flex，也就是Java+Flex

1、  先建立一个web工程：flexweb。（略）

2、  向flexweb工程手工添加Flex需要的元素。

1）首先将BlazeDS需要的jar文件拷到工程的lib目录下。可以将上面建的那个flex工程的lib下的jar文件拷到该工程下的lib目录下。

2）然后要加入Flex BlazeDS需要的配置文件。在WEB-INF下新建一个名为flex的文件夹，然后将我们上面建立的那个firstFlex该文件夹下的四个xml文件拷到该文件夹下。

3）最后，修改web.xml文件，加入Flex的配置。做法一个简单的把上面我们新建的那个flex工程的web.xml的部分代码拷过来。

<context-param>

       <param-name>flex.class.path</param-name>

       <param-value>/WEB-INF/flex/hotfixes,/WEB-INF/flex/jars</param-value>

    </context-param>

 

    <!-- Http Flex Session attribute and binding listener support -->

    <listener>

        <listener-class>flex.messaging.HttpFlexSession</listener-class>

    </listener>

 

    <!-- MessageBroker Servlet -->

    <servlet>

        <servlet-name>MessageBrokerServlet</servlet-name>

        <display-name>MessageBrokerServlet</display-name>

        <servlet-class>flex.messaging.MessageBrokerServlet</servlet-class>

        <init-param>

            <param-name>services.configuration.file</param-name>

            <param-value>/WEB-INF/flex/services-config.xml</param-value>

       </init-param>

        <load-on-startup>1</load-on-startup>

    </servlet>

 

    <servlet-mapping>

        <servlet-name>MessageBrokerServlet</servlet-name>

        <url-pattern>/messagebroker/*</url-pattern>

    </servlet-mapping>

3、  将该工程发布到tomcat下，并启动tomcat。（注：一定要启动tomcat，因为在后面的设置中，它要验证工程的路径）

4、  然后在该工程上右键àFlex Project NatureàAdd Flex Project Nature

5、  设置完成后，会发现web工程的目录结构已经发生了改变，如下图。

我们发现以这种形式建立的工程的目录结构和第二种方法有少许的不同，flex的mxml文件默认的放在src文件夹中，和java文件共用一个目录。并且没有像上一个工程那样自动的编译出可运行的文件。

 

6、  如果你对这个目录结构不太满意，还想让flex的文件放在flex_src目录下，别急，我们可以通过右键à属性来设置。如下图

在这里你可以重新设置你的flex源文件夹和输出目录

7、  配置flex默认的sdk。这样配置完，还不行，程序可能还不能正常地运行，还需要配置他使用的sdk。如下图

8、  马上就大功告成了，让我们来写个程序测试一下吧。

1)新建一个java类：Hello.java

package com;

 

public class Hello {

  public String hello(String name){

     System.out.println("flex调用我了，真好~~~~");

     return "hello "+name;

  }

}

        2)为flex配置这个要调用的对象，修改WEB-INF/flex下remoting-config.xml

加入：

<destination id="hello">

        <properties>

            <source>

                com.Hello

            </source>

        </properties>

</destination>

 

    3)编写一个Flex程序

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

 

  <mx:Script>

     <![CDATA[

         import mx.rpc.events.ResultEvent;

        

         function gg(evnet:ResultEvent):void{

            var ff:String  = evnet.result as String;

            ggg.text = ff;

         }

        

         function remotingSayHello():void{

             var sname:String = nameInput.text;

            h.hello(sname);  

         }

     ]]>

  </mx:Script>

 

  <mx:RemoteObject destination="hello" id="h"

     result="gg(event)" endpoint="http://localhost:8080/flexweb/messagebroker/amf" >

      

  </mx:RemoteObject>

 

   

  <mx:TextArea id="ggg"  x="109" y="122"/>

 

  <mx:Button label="say hello" click="remotingSayHello();" x="144" y="193"/>

  <mx:TextInput id="nameInput"  x="109" y="73"/>

  <mx:Label text="name" x="47" y="75"/>

</mx:Application>

    4)重启tomcat，运行flexweb.mxml.

第三种方法，在编译完后，访问网页会出现404异常。具体原因不详。但是它仍会编译出一个swf文件，访问这个swf即可。而第二种方式可以编译出一个html文件。访问一下会出现一下界面：

输入dfdff，则输出hello dfdff。说明调用java类成功。不信我们可以看看java类在控制台上的打印。

控制台上的打印

配置成功，高兴吧，o(∩_∩)o…哈哈。

如果用lcds，则不需要预编译，可以直接访问mxml文件，lcds会动态编译返回结果。哎，免费的还是不行啊，谁叫咱没钱啊，只能用免费的了，痛苦点就痛苦点吧。