狂淘

整合Flex和Java—配置篇

Author:yongtree

廢話就不說了，要想了解Flex的相關(guān)內(nèi)容就請問一下Google，百度吧。切入正題，作為一個Java程序員學(xué)習(xí)Flex，關(guān)心的就是怎樣將Flex和Java進行結(jié)合交互。帶著Java程序員的思維，一開始學(xué)習(xí)Flex并沒有按部就班的學(xué)習(xí)Flex的基礎(chǔ)知識，而是想搞清楚Flex到底怎樣和Java交互的。經(jīng)過了一個周末的研究，終于初見成果，下面就重要的講解三種配置的兩個。

         在分享這幾種配置之前，先簡單的介紹一下需要用到的一些資源。

1、  MyEclipse+Flex插件（官網(wǎng)下載）

2、  Tomcat6.0作為服務(wù)器（官網(wǎng)下載）

3、  用BlazeDS（免費）代替LCDS（收費）：沒錢啊，只能先使用免費的了。從Adobe官方網(wǎng)站上下載下來，將blazeds.war、ds-console.war、samples.war三個文件放在tomcat的webapps目錄下。

Flex+Java配置：

         第一種：Java工程和Flex工程獨立，這種方式也是很多人使用的方式，F(xiàn)lex程序員和Java程序員相互獨立的工作，這種方式網(wǎng)上有很多的資料，在這里就不再 贅述了。

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

1、  切換到Flex視圖，新建Flex project，如下圖

因為我們是要java和flex結(jié)合，所以在服務(wù)器選擇上我們選擇J2EE

 
 
存放java類的源文件，我們的目的就是Flex和java在一個工程里，所以我們這里選擇上

說明：Java source folder就是你自己java業(yè)務(wù)源碼存放的根目錄，在FB3里，LCDS項目旨在將Java J2ee項目和FlexLcds項目混合。

當(dāng)然如果你不選擇 combined 兩個在一起，那么就麻煩些：要么你再單獨新建一個Flex項目，而這個項目只寫java代碼。要么再建一個J2ee工程寫java代碼，而這個項目只寫Flex代碼，但最后要把Java編譯后的class文件放到這個項目下的webroot\web-inf\classes目錄中。即不管怎樣，最后發(fā)布時，java編譯后的class文件必須和lcds部署的項目在一起。

2、  點擊Next，配置J2EE服務(wù)器，如下圖

說明：Target runtime實際上沒什么用（后來我刪除了配置文件里的對應(yīng)信息，也沒問題），但是不指定就不能繼續(xù)，如果這里顯示的是<none>那么就新建一個Tomcat的runtime，簡單的只需要指定tomcat的安裝目錄即可。

Content folder實際上就是最終編譯后的容器目錄，因此，BlazeDS的blazeds.war文件將會發(fā)布到 該目錄 下的web-inf下的flex目錄中。同時因為教程采用的是MyEclipse，他默認(rèn)的就是發(fā)布WebRoot里的內(nèi)容，為了自動化，因此這里改為了WebRoot（這也是java開發(fā)的習(xí)慣）

Flex WAR file 指的是安裝了lcds后的flex.war文件的路徑，但是在這里我們采用的是BlazeDS來取代lcds，所以這里設(shè)置的是blazeds.war的路徑。

Compilation options指定了flex文件的編譯方式，選擇推薦的在FlexBuilder里編譯吧，雖然開發(fā)時多耗點時間，但是在發(fā)布后不會占用服務(wù)器的編譯處理時間，對用戶來說是有好處的。

Output folder 指的是Flex編譯后的swf和html等文件存放的路徑，這里改為了WebRoot，意思是發(fā)布到根目錄就可以了。當(dāng)然你可以根據(jù)你的需要和習(xí)慣自行設(shè)置其他的路徑

3、  點擊下一步，采用默認(rèn)的配置就可以，點擊完成，該工程就建立完成。下圖為該工程的目錄結(jié)構(gòu)

4、  讓它變成web工程由MyEclipse發(fā)布吧

              點擊Finish，現(xiàn)在我們的工程的圖標(biāo)變成了J2EE Web 工程了，這意味著，你可以用MyEclipse來發(fā)布它或者添加更多容器，比如hibernate、spring等

5、  工程建好以后，你可以通過右鍵—>屬性來進行更多的設(shè)置。

6、  這樣一個Flex+Java的工程就建立完成。

7、  編寫例子，測試在介紹完第三種方式以后統(tǒng)一介紹。

第三種：由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、  將該工程發(fā)布到tomcat下，并啟動tomcat。（注：一定要啟動tomcat，因為在后面的設(shè)置中，它要驗證工程的路徑）

4、  然后在該工程上右鍵àFlex Project NatureàAdd Flex Project Nature

5、  設(shè)置完成后，會發(fā)現(xiàn)web工程的目錄結(jié)構(gòu)已經(jīng)發(fā)生了改變，如下圖。

我們發(fā)現(xiàn)以這種形式建立的工程的目錄結(jié)構(gòu)和第二種方法有少許的不同，flex的mxml文件默認(rèn)的放在src文件夾中，和java文件共用一個目錄。并且沒有像上一個工程那樣自動的編譯出可運行的文件。

6、  如果你對這個目錄結(jié)構(gòu)不太滿意，還想讓flex的文件放在flex_src目錄下，別急，我們可以通過右鍵à屬性來設(shè)置。如下圖

在這里你可以重新設(shè)置你的flex源文件夾和輸出目錄

7、  配置flex默認(rèn)的sdk。這樣配置完，還不行，程序可能還不能正常地運行，還需要配置他使用的sdk。如下圖

8、  馬上就大功告成了，讓我們來寫個程序測試一下吧。

1)新建一個java類：Hello.java

package com;

public class Hello {

  public String hello(String name){

     System.out.println("flex調(diào)用我了，真好~~~~");

     return "hello "+name;

  }

}

        2)為flex配置這個要調(diào)用的對象，修改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.

第三種方法，在編譯完后，訪問網(wǎng)頁會出現(xiàn)404異常。具體原因不詳。但是它仍會編譯出一個swf文件，訪問這個swf即可。而第二種方式可以編譯出一個html文件。訪問一下會出現(xiàn)一下界面：

輸入dfdff，則輸出hello dfdff。說明調(diào)用java類成功。不信我們可以看看java類在控制臺上的打印。

控制臺上的打印

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

如果用lcds，則不需要預(yù)編譯，可以直接訪問mxml文件，lcds會動態(tài)編譯返回結(jié)果。哎，免費的還是不行啊，誰叫咱沒錢啊，只能用免費的了，痛苦點就痛苦點吧。