通過BlazeDS 開發J2EE+Flex項目

一、 準備工作

l 安裝配置系統軟件和工具

JDK1.5或者以上版本

MyEclipse 7.0或者以上版本

Flex4 for eclipse plug-in

Tomcat5.0 或者以上版本

BlazeDS.war (blazeds是一個用於集成flex 客戶端和j2ee server的組件)

 

二、 環境搭建(集成BlazeDS)

l 新建一個JAVA WEB工程

新建一個JAVA WEB工程，名爲flexweb 設置項目的編碼方式爲utf-8

l BlazeDS集成FLEX和TOMCAT

1）解壓BlazeDS.war到%TOMCAT_HOME%/webapps目錄下

2）爲web app 添加blazeds 支持：

右擊WebRoot選擇import—>GeneralàFile system

 

單擊Browse 選擇tomoat服務器安裝地址，然後選擇webapps中的blazeds文件夾

 

單擊確定，然後勾選它

單擊Finish 然後選擇Yse to all

l 新建一測試類

在j2ee視圖中創建一個package “com.flex.test”,在包com.flex.test 下面創建一個類FlexWeb.這個類有一個簡單的方法:text(String name)

打開 flexweb的WebRoot/WEB-INF/flex/remoting-config.xml,添加一個供flex 客戶端調用的destination. 複製下列代碼到remoting-config.xml中

<destination id="Hello">

    <properties>

    <source>com.flex.test.FlexWeb</source>

    </properties>

    </destination>

 

保存項目，用tomcat發佈啓動tomcat

l 添加FLEX支持

在工程flexweb上右鍵 flex project nature->add flex project nature.(中文爲添加/更改項目類型) 這時會彈出對話框

 

 

Root folder(根文件夾)：選擇剛纔發佈到tomcat的工程flexweb路徑（%TOMCAT_HOME%/webapps目錄下）

Root URL：TOMCAT服務器的啓動路徑加上flexweb，說明我們要啓動到flexweb工程

Context root ：編譯後的FLEX項目路徑

Output folder：工程 重構後FLEX文件的輸出路徑 

[點擊Finish完成]

找到Problems窗口看到有一個錯誤然後我們右鍵選重新創建HTML模板。這裏錯誤已經解決，但是新的問題又來了，src是java的源文件夾存java源代碼地方，但是現在被flex給佔用了所以我們要重新給flex添加一個源文件目錄，如下圖

右鍵項目屬性找到flex構鍵路徑的主源文件夾把src改爲flex_src

 

然後把src文件夾裏面的flexweb.xml移動到flex_src文件夾裏面

4、編輯FLEX應用程序

在Flex應用程序,例如 flexweb.mxml 中添加以下代碼：

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

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

<mx:RemoteObject id="say" destination="Hello">

</mx:RemoteObject>

<mx:Button x="335" y="80" label=" Click" click="remotingSayHello(event);"/>

<mx:TextInput x="159" y="80" id="tiName"/>

<mx:Label x="109" y="82" text="name:"/>

<mx:Label text="{say.sayHelloTo.lastResult}" x="44" y="162" width="448" height="71" id="lblView" color="#FCEE09" fontSize="20" fontWeight="bold" textDecoration="underline" fontStyle="normal"/>

<mx:Script>

<![CDATA[

function remotingSayHello(event:Event):void{

var iname:String=tiName.text;

say.text(iname);

}

]]>

</mx:Script>

</mx:Application>

 

在Flex Development視圖下,project->Build Project,可以看到Flex 應用程序被正確編譯,產生輸出到bin目錄下面

到這裏代碼已經完成，重新發布你的項目，重啓tomcat，在項目中右擊flexweb.mxml運行你會看到如下效果