新的項目對用戶體驗及用戶互動要求較高，決定選用Flex作為前端的展現技術，整體框架仍然是Flex+Spring+Hibernate(考慮采用seam中)。作為入門，先從經典的Hello world開始，暫時不考慮Flex與Spring、Hibernate的集成。

Flex要實現與Java集成，開源項目BlazeDS、GraniteDS、Flamingo都提供了相應的解決方案，考慮到BlazeDS是Adobe官方的開源項目，因此采用BlazeDs作為Flex與Java通信的基礎框架。什么是 BlazeDS呢，看看官方的介紹：

BlazeDS is the server-based Java remoting and web messaging technology that enables developers to easily connect to back-end distributed data and push data in real-time to Adobe? Flex? and Adobe AIR? applications for more responsive rich Internet application (RIA) experiences.

開發工具采用Eclipse+Flex Builder 3 Plug-in方式，不采用Flex Builder 3。先安裝Eclipse，再安裝Flex Builder 3 Plug-in，相關的安裝配置不再贅述。

1、下載BlazeDS

下載BlazeDS Turnkey ：http://flexorg.wip3.adobe.com/blazeds/3.0.x/milestone/3978/blazeds-turnkey-3.2.0.3978.zip

由于BlazeDS Turnkey中包含BlazeDS的使用例子，對于入門熟悉Flex及BlazeDS都有較好的參考價值，因此建議下載BlazeDS Turnkey。

關于blazeds-turnkey 的目錄說明：

docs：BlazeDS Javadoc

resources：BlazeDS的相關支持包，包括clustering（采用jgroups）、BlazeDS與ColdFusion 集成的配置文件、BlazeDS的配置文件、BlazeDS與AJAX集成的橋、Flex的SDK、Flex的java library、BlazeDS與Tomcat、Jboss、Websphere等security集成的支持包。

sampledb：hsqldb的啟動腳本及樣例數據庫

tomcat：Tomcat 包

blazeds.war：最小化的BlazeDS 文件，可以作為空白項目來建立BlazeDS 應用程序。

sample.war：BlazeDS的demo例子（所謂的testdrive）。

ds-console.war ：BlazeDS的部署管理程序。

2、建立Java Web Project

File->New->Web Project 建立Java helloworld項目

在helloworld/src下，新建com.yeeach.HelloWorldService類，內容如下：

package com.yeeach;

public class HelloWorldService {
public String hello(String var1) {
return “hello ” + var1;
}
public String world(String var1) {
return “world ” + var1;
}
}

3、建立helloworld的BlazeDS開發環境

3.1、拷貝blazeds.war下的WEB-INF到helloworld的目錄下，覆蓋原有的WEB-INF

3.2、在helloworld下建立flex-src目錄（與src同級），用于存放flex的相關代碼

helloworld/src：用于存放項目的java代碼

helloworld/flex-src：用于存放項目flex的相關代碼

helloworld/WebRoot/WEB-INF/flex：存放flex的相關配置文件

3.3、設置Flex Project Nature

3.4、在helloworld/flex-src下，新建MXML Application ：helloworld.mxml? ，內容如下：

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”>
<mx:RemoteObject destination=”com.yeeach.HelloWorldService”
id=”helloWorldService”>
<mx:method name=”hello”
result=”sayHelloResult(event)”/>
<mx:method name=”world”
result=”sayWorldResult(event)”/>
</mx:RemoteObject>
<mx:HBox>
<mx:Label text=”輸入：”/>
<mx:TextInput id=”inputStr”/>
<mx:Button label=”say hello”
click=”sayHello(event);”/>
<mx:Button label=”say world”
click=”sayWorld(event);”/>
</mx:HBox>
<mx:HBox>
<mx:Label text=”結果：”/>
<mx:TextArea id=”result”/>
</mx:HBox>

<mx:Script>

<![CDATA[
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;

function sayHello(event:Event):void
{
var inputVar:String=inputStr.text;
helloWorldService.hello(inputVar);

}

function sayWorld(event:Event):void
{
var inputVar:String=inputStr.text;
helloWorldService.world(inputVar);

}

private function sayHelloResult(event:ResultEvent):void
{
result.text=event.result.toString();
Alert.show(event.result.toString(), "返回結果");
}

private function sayWorldResult(event:ResultEvent):void
{
result.text=event.result.toString();
Alert.show(event.result.toString(), "返回結果");
}
]]>
</mx:Script>
</mx:Application>

3.5、修改remoting-config.xml，增加對destination的說明

<destination id=”com.yeeach.HelloWorldService”>
<properties>
<source>com.yeeach.HelloWorldService</source>
</properties>
</destination>

3.6、設置Flex Build Path等相關屬性

1)右鍵->Properties,設置Flex Build Path屬性，將Main source folder修改為flex-src，然后點擊“OK”

2)右鍵->Properties,設置Flex Applications屬性，添加flex-src下的其他Application，然后點擊“OK”

如果需要添加flex-src子目錄下的其他Application（例如helloworld/flex-src/com/yeeach /helloworld1.mxml），目前從UI界面似乎無法正確添加，可以直接修改.actionScriptProperties, 在<applications></applications>中間增加相應的Application

<applications>
<application path=”helloworld.mxml”/>

<application path=”com/yeeach.com/helloworld1.mxml”/>
</applications>

3)右鍵->Properties,設置Flex Compiler屬性，將Flex SDK version 修改為“Use default”或“Use a specific SDK”，指向正確的Flex SDK；確認“Additional compiler arguments”配置參數正確，然后點擊“OK”

4)右鍵->Properties,設置Flex Server屬性，配置為正確的參數，然后點擊“OK”

3.7、部署helloworld 應用到Tomcat

通過http://127.0.0.1:8080/helloworld/helloworld.swf來訪問我們的hello world

3.8、分析helloworld.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”>
<mx:RemoteObject destination=”com.yeeach.HelloWorldService”
id=”helloWorldService”>

//此處的destination=”com.yeeach.HelloWorldService”與remoting- config.xml中的id=”com.yeeach.HelloWorldService”完全匹配

//id=”helloWorldService”用來在actionscript中標識destination=”com.yeeach.HelloWorldService”，后面的helloWorldService.hello(inputVar)等都使用此id;

<mx:method name=”hello”
result=”sayHelloResult(event)”/>

//mx:method 聲明java類com.yeeah.com.HelloWorldService中的hello方法及響應結果回調函數sayHelloResult
<mx:method name=”world”
result=”sayWorldResult(event)”/>
</mx:RemoteObject>
<mx:HBox>
<mx:Label text=”輸入：”/>
<mx:TextInput id=”inputStr”/>
<mx:Button label=”say hello”
click=”sayHello(event);”/>
<mx:Button label=”say world”
click=”sayWorld(event);”/>
</mx:HBox>
<mx:HBox>
<mx:Label text=”結果：”/>
<mx:TextArea id=”result”/>
</mx:HBox>

<mx:Script>

<![CDATA[
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;

function sayHello(event:Event):void
{
var inputVar:String=inputStr.text;
helloWorldService.hello(inputVar);

}

function sayWorld(event:Event):void
{
var inputVar:String=inputStr.text;
helloWorldService.world(inputVar);

}

private function sayHelloResult(event:ResultEvent):void
{
result.text=event.result.toString();
Alert.show(event.result.toString(), "返回結果");
}

private function sayWorldResult(event:ResultEvent):void
{
result.text=event.result.toString();
Alert.show(event.result.toString(), "返回結果");
}
]]>
</mx:Script>
</mx:Application>

代碼文件：helloworld.rar

====http://www.jexchen.com/?p=87

Flex+BlazeDS+Java初步：環境配置與“Hello,World”

好久沒更新文章了，問題多多的2008就要過去了，希望來年是個好兆頭，大家都平平安安…

其實很早就接觸過Flex BlazeDS Java結合使用，最初還用的是FDS(Flex Data Service,早已更名為LiveCycle Data Service)，不過從來沒實際在項目中用過，由于現在的做的產品主要就是在這個架構上運行，因此有必要重新學習學習。

Flex+LCDS(BlazeDS)+Java這種方式對大型的企業級相關應用是比較好的選擇。

網上關于Flex + BlazeDS + Java的安裝配置文章很多，大都是按照官方的方式，使用向導的方式來進行的，而且通常使用的是BlazeDS Turkey（集成了Tomcat的BlazeDS版本），而且使用了WTP(Web Tools Platform的簡稱，允許開發人員在Eclipse下開J2EE Web應用)，雖然配置比較簡單，但由于采用向導的方式，實際上并不靈活，通過實踐，推薦下面一種比較靈活的方式 ^_^我會將我在安裝配置的過程遇到的常見問題一并指出，我自己做個記錄，大家也可少走點彎路

我用的軟件環境：

JDK 1.6

Eclipse 3.4.1

Flex 3 plugin for Eclipse （升級到Flex 3.0.214193，Flex SDK為3.2）

Sysdeo Eclipse Tomcat Launcher plugin (一款Eclipse下的Tocamt插件)

Tomcat6.0.13 (我用的是zip包，直接解壓就用)

BlazeDS (我下載的是 blazeds-bin-3.2.0.3978.zip)

其中Tomcat的插件下載地址為：http://www.eclipsetotale.com/tomcatPlugin.html#A1 其它的相關軟件大家應該都知道。

安裝：

上面的所有工具安裝都很簡單，注意安裝后請配置好JDK與Tomcat的環境變量，BlazeDS這里不需安裝，下面講 Hello World再說怎么使用。

Tomcat Launcher plugin插件安裝好后，在eclipse中配置如下：

然后一步一步來創建Hello World:

先看一下完成后的項目結構圖：

一、創建Java項目：

選擇new->Java Project創建一個普通Java項目，其中注意的是為了與flex源文件目錄區分，將java項目的源文件目錄自定義為javasrc，并設定java class默認的輸出目錄，如下圖：

（創建完成后可將本身的src目錄刪掉）

創建一簡單的HelloWorldService類，用來當Flex端通過BlazeDS以RemoteObject的方式直接訪問，SimpleService.java內容很簡單，如下：

?

?

將blazeds-bin-3.2.0.3978.zip解壓，得到flex.war, war其實就是一打包文件，使用解壓軟件將其解壓，得到META-INF與WEB-INF兩個目錄，將WEB-INF目錄下的flex、lib目錄及web.xml文件復制到當前應用程序的WEB-INF目錄下，在HelloBlazeDS項目上點右鍵，刷新，這時eclipse中HelloBlazeDS項目目錄結構如下圖所示：

二、為當前Java項目增添Flex Project支持

在HelloBlazeDS項目上點擊右鍵，選Flex Project Nature –> Add Flex Project Nature如下圖：

不選任何服務器支持，呆會手動配置：

指定Flex的編譯生成目錄至WEB-INF\flex，其中flex目錄為新創建的：

按提示，切換到Flex視圖，這時會報一個錯誤

在錯誤提示信息上點擊右鍵，選擇Recreate HTML Templates，為生成的swf重建HTML模板。

三、增添Tomcat服務器支持

在HelloBlazeDS項目上點擊右鍵，選擇Properties，打開的配置面板中選擇Tomcat，設置參數如下：

完成設置。

（你會發現在我的d:\tomcat6.0.13\conf\Catalina\localhost\目錄下生成了名為hello.xml的文件，生成該文件的目的就是為HelloBlazeDS項目在Tomcat下配置了一個獨立的Context，這樣就不必將文件布署到Tomcat的webapps下去了。

四、完成BlazeDS配置并創建Flex客戶端程序

編輯WEB-INF\flex\remoting-config.xml文件，增添下面的語句：

?

?

在src下創建Flex應用程序HelloBlazeDS.mxml (MXML Application類型)，代碼如下：

?

?

需要注意的是Flex compiler的參數設置，我們這種完全手動配置的情況尤其需要注意，下面是我的參數配置，具體含義請查看相關資料：）

-context-root “webRoot” -services “e:/workspace/javaeeworkspace/HelloBlazeDS/webRoot/WEB-INF/flex/services-config.xml” -locale en_US

ok，現在可以點擊工具欄上的小貓圖標，啟動Tomcat了，在瀏覽器輸入以下地址：

http://localhost:8080/hello/flex/HelloBlazeDS.html

運行運行~~~效果如下：

?