java整合flex

java+flex項目整合

java+flex 2010-12-20 16:11:12 閱讀59 評論0   字型大小：大中小 訂閱 第一種：java工程和flex工程獨立 這種方式也是很多人使用的方式。flex程式員和java程式員相互獨立的工作。下面介紹下.。 一、所需要的軟體 MyEclipes + Tomcat6.0 + Flex Builder3 + BlazeDS，網上自己去下載。 二、設定管理員端（MyEclipes + Tomcat6.0 + BlazeDS） 1、先將BlazeDS壓縮包解壓開，在找到blazeds.war解壓開，得到META-INF檔案夾和WEB-INF檔案夾。 2、開啟MyEclipes，配置Tomcat伺服器：window->Preferences->MyEclipes->Application Server->Tomcat->Tomcat 6.x配置Tomcat home directory 為Tomcat的安裝路徑，同時選擇Tomcat server->Enable.。 3、接下來，在MyEclipse中建立一個Web Project，工程名 Peace。 4、然後把第一步解壓blazeds.war所得的兩個檔案夾粘貼到Peace項目下的WebRoot檔案夾下，出現Override提示框，選擇Yes to All。 5、下面在本工程的src目錄下編寫一個java類（包名com.nankyrei.service，類名HelloWorld）： package com.nankyrei.service public class HelloWorld{ public String getHello(){ return "Hello World"; } } 6、java類寫好了，下面要在remoting-config.xml中聲明這個類(粗體字部分)： <?mxl 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"> <porperties> <!--這裡要寫完整路徑：包名+類名--> <source>com.nankyrei.service.HelloWorld</source> </porperties> </destination> </service> 7、好了，大功告成，現在將這個項目部署到Tomcatzhong，然後啟動Tomcat。 三、建立flex用戶端 1、建立一個flex項目，名稱為flex_peace，選擇Application server type：J2EE。 2、這一步非常重要，點擊next，設定server location，其中Root folder為剛剛在tomcat裡部署的Peace項目路徑。為了保持一致性，Root URL和Context root 中的相對路徑的名稱都與該web項目名稱保持相同。這三項內容填寫好後，需要點擊“Validate Configuration”按鈕，進行配置驗證（此時讓Tomcat處於開啟狀態）。驗證完成後點擊Finish。 3、最後編寫用戶端（flex_peace.mxml）  <?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.FaultEvent;
        import mx.controls.Alert;
        import mx.rpc.events.ResultEvent;
       
        private function resultHandler(event:ResultEvent):void {
            Alert.show(event.result.toString(), "成功");
        }
       
        private function faultHandler(event:FaultEvent):void {
            Alert.show(event.fault.toString(), "失敗");
        }
        ]]>
    </mx:Script>
   
    <!-- destination 屬性值要和 remoting-config.xml 中 destination 的 id 一致-->
    <mx:RemoteObject id="remoteObject"
                      destination="helloWorld"
                     result="resultHandler(event)"
                     fault="faultHandler(event)"/>
   
    <mx:Button label="發送訊息" click="remoteObject.getHello()" x="256.5" y="197"/>
</mx:Application> 4、運行Flex Application，右鍵點擊flex_peace.mxml->run as->Flex Application即可，(期間tomcat必須保持運行狀態) 第二種：Flex工程加入 Java 元素
1、 切換到 Flex視圖，建立 Flex project，如下圖

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

當然如果你不選擇 combined 兩個在一起，那麼就麻煩些：要麼你再單獨建立一個
Flex 項目，而這個項目唯寫 java代碼。要麼再建一個J2ee工程寫 java代碼，而這

因為我們是要 java 和 flex結合，所
以在伺服器選擇上我們選擇 J2EE

存放java類的源檔案，我們的目的
就是Flex和 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，意思是發布到根目錄就可以了。當然你可以根據你的需要和習慣自行設
置其他的路徑

因為我們採用的 BlazeDS，所
以這裡要設定 BlazeDS 的路
徑
這裡我們可以自訂輸出路徑，
一般情況下設定成根目錄
WebRoot 就可以了
3、 點擊下一步，採用預設的配置就可以，點擊完成，該工程就建立完成。下圖為該工
程的目錄結構

4、 讓它變成 web工程由MyEclipse發布吧

Flex 檔案的
源檔案夾
Java 源檔案
夾
自動產生的
flex 的配置
檔案
Flex 編譯後發布
的檔案。我們發
布在根目錄下


點擊Finish，現在我們的工程的表徵圖變成了 J2EE Web 工程了，這意味著，你可以


注意，不要點的太快了，要把這裡的
對號勾掉，這樣就不會覆蓋 BlazeDS
建立的 web.xml 用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的部分代碼拷過來。

（注意：這樣會出錯，可以把

<web-app version="2.4" 
xmlns="http://java.sun.com/xml/ns/j2ee" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

改為：<web-app>）

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

<param-value>/WEB-INF/flex/hotfixes,/WEB-INF/flex/jars</param-val
ue>
</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 會動態編譯返回結果。

轉載自：http://cache.baidu.com/c?m=9f65cb4a8c8507ed4fece7631046893b4c4380147d8c8c4668d4e419ce3b4c413037bfa6663f405a8e906b6075a91f5fbdf43176610123b5999cc0169bac925f75ce786a6459db0144dc4df19c0c32c050872a9ab86891adf142cbfd9680c85523dd22026df7f69c2c0403bb6ee71541f4d7ef5f652e07ca9b2712ff&p=8b2a94039e8311a058ecc8601e56&user=baidu

 

解決：

倒數第11行的404 異常，我對比第二種和第三種發現第三種漏了

 

這個檔案夾，所以解決辦法：把漏的檔案夾整個從第二種拷一份到項目中、重新整理，一定要重新整理到到出現

 

這個檔案夾有這些內容，才可以成功。