由於Flex只是一種
客戶端技術其本身並不能直接同
數據庫交互,在實際的應用開發過程中Flex提供了如
URLRequest、HTTPService、RemoteObject、
WebService等類以實現同
服務器的通訊和
數據交互,下面做一些介紹和實例解析:
本示例用到的開發工具和組件:jdk1.6、eclipse3.0、 FlexBuilder3.0、 blazeds-turnkey-3.3.0.9885(已包含Tomcat)
1、安裝JDK至指定目錄下如:C:/Program Files/
Java/jdk1.6.0_16
2、解壓blazeds-turnkey-3.3.0.9885.zip 將tomcat目錄拷貝至:D:/Program Files/tomcat
3、配置或加入我的電腦環境變量:
[c-sharp] view plaincopyprint?
JAVA_HOME C:/Program Files/Java/jdk1.6.0_16
CATALINA_BASE D:/Program Files/tomcat
CATALINE_HOME D:/Program Files/tomcat
CLASSPATH %JAVA_HOME%/lib;%CATALINA_HOME%/lib/servlet-api.jar
Path %JAVA_HOME%/bin;%JAVA_HOME%/lib;
4、查看Tomcat服務器配置信息:
查看D:/Program Files/tomcat/conf/server.xml文件
找到 <Connector port="8400" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="9400" />
配置的端口信息為“8400”
5、手動方式啟動TomCat檢查是否配置成功(當然你也可以在Eclipse中安裝TomCat插件控制Tomcat):
啟動命令行“cd D:/Program Files/tomcat/bin”定位至Tomcat Bin目錄
運行“startup.bat”啟動TomCat看到如下(啟動成功):

瀏覽器中輸入:“http://localhost:8400/”如下(恭喜JAVA環境+BlazeDS+Tomcat配置成功):

6、建立開發文件夾,拷貝BlazeDS配置文件和用到的配置文件及類庫“WEB-INF”至站點目錄:
找到blazeds.war個改后綴為RAR解壓找到“WEB-INF”文件夾拷貝至"WebSite"下目錄結構如:

這樣做的目的是將JAVA項目同Flex項目Web站點目錄分開互不干擾(使用eclipse的Flex開發插件有時會報莫名的錯誤,Flex開發還是建議用FlexBuilder)
7、在Eclipse中新建java項目並將編譯路徑鏈接至“../WebSite/WEB-INF/classes”目錄下如圖:



8、發布WebSite至TomCat:
在“D:/Program Files/tomcat/conf/server.xml”文件<Host>節點中新增如下<Context>節點重啟TomCat(執行第5步驟運行“shutdown.bat”再運行“startup.bat”)
[xhtml] view plaincopyprint?
<Host name="localhost" appBase="webapps"
unpackWARs
=
"true"
autoDeploy
=
"true"
xmlValidation
=
"false"
xmlNamespaceAware
=
"false"
>
<
Context
path
=
"/WebSite"
docBase
=
"E:/學習/BlazeDs/WebSite"
debug
=
"0"
reloadable
=
"true"
crossContext
=
"true"
/>
</
Host
>
9、新建FLEX 服務器為J2EE的“myBlazeDSFlex”項目至"E:/學習/BlazeDs/Flex"目錄

10、配置服務器及Flex輸出目錄至“webSite/flex"下,並“Validate Configuration”通過(如圖):

11、你也可以手動設置Felx項目屬性(如圖)來配置J2EE服務器:

12、在eclipse中編寫完成Java類及方法 並編譯:
UserBean類:
[java] view plaincopyprint?
package myBlazeDS;
public
class
UserBean {
private
String _name;
private
int
_age;
private
String _address;
public
UserBean(String name,
int
age,String address)
{
this
._name = name;
this
._age = age;
this
._address = address;
}
public
void
setName(String name)
{
this
._name = name;
}
public
String getName()
{
return
this
._name;
}
public
void
setAge(
int
age)
{
this
._age = age;
}
public
int
getAge()
{
return
this
._age;
}
public
void
setAddress(String address)
{
this
._address = address;
}
public
String getAddress()
{
return
this
._address;
}
}
外部接口類BlazeDSService:
[java] view plaincopyprint?
package myBlazeDS;
public
class
BlazeDSService {
public
String GetBlazeService(String user)
{
return
user +
":歡迎使用Java BlazeDS同Flex交互"
;
}
public
UserBean GetUserInfo(String name,
int
age,String address)
{
return
new
UserBean(
"User:"
+ name, age,address +
" China"
);
}
}
13、配置“E:/學習/BlazeDs/WebSite/WEB-INF/flex/remoting-config.xml”增加(如圖):
[xhtml] view plaincopyprint?
<destination id="FirstBlazeService">
<
properties
>
<
source
>
myBlazeDS.BlazeDSService
</
source
>
<
scope
>
application
</
scope
>
</
properties
>
</
destination
>

14、在Flex引入RemoteObject 指定destination屬性加入調用方法<mx:method>節點如:
[xhtml] view plaincopyprint?
<mx:RemoteObject id="myJavaService"destination="FirstBlazeService"showBusyCursor="true">
<
mx:method
name
=
"GetBlazeService"
fault
=
"onBlazeDSFalut(event)"
/>
<
mx:method
name
=
"GetUserInfo"
result
=
"getUserBean(event)"
fault
=
"onBlazeDSFalut(event)"
/>
</
mx:RemoteObject
>

15、完整體Flex頁面代碼:
[xhtml] view plaincopyprint?
<?xml version="1.0"encoding="utf-8"?>
<
mx:Application
xmlns:mx
=
"http://www.adobe.com/2006/mxml"
layout
=
"absolute"
>
<
mx:RemoteObject
id
=
"myJavaService"
destination
=
"FirstBlazeService"
showBusyCursor
=
"true"
>
<
mx:method
name
=
"GetBlazeService"
fault
=
"onBlazeDSFalut(event)"
/>
<
mx:method
name
=
"GetUserInfo"
result
=
"getUserBean(event)"
fault
=
"onBlazeDSFalut(event)"
/>
</
mx:RemoteObject
>
<
mx:Canvas
width
=
"653"
height
=
"190"
x
=
"10"
backgroundColor
=
"#297E8D"
fontSize
=
"15"
>
<
mx:Script
>
<!--[CDATA[
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;
import mx.core.UIComponent;
import mx.core.BitmapAsset;
import mx.core.ByteArrayAsset;
private function onCallJava():void
{
myJavaService.GetBlazeService(nameInput.text);
}
private function onCallBean():void
{
myJavaService.GetUserInfo(txtName.text,int(txtAge.text),txtAddress.text);
}
private function getUserBean(e:ResultEvent):void
{
var o:*=e.result as Object;
vtxtName.text
=
o
.name;
vtxtAge.text
=
o
.age;
vtxtAddress.text
=
o
.address;
}
private function onBlazeDSFalut(e:FaultEvent):void
{
Alert.show(e.message.toString());
}
]]--
>
</
mx:Script
>
<
mx:TextInput
id
=
"nameInput"
x
=
"108"
y
=
"18"
width
=
"145"
/>
<
mx:Button
label
=
"Call Java"
click
=
"onCallJava();"
x
=
"274"
y
=
"18"
fillAlphas
=
"[1.0, 1.0]"
/>
<
mx:TextArea
text
=
"{myJavaService.GetBlazeService.lastResult}"
x
=
"397"
height
=
"34"
width
=
"246"
y
=
"19"
/>
<
mx:Label
x
=
"10"
y
=
"61"
width
=
"632"
height
=
"2"
/>
<
mx:Label
x
=
"10"
y
=
"80"
text
=
"UserName:"
/>
<
mx:Label
x
=
"10"
y
=
"117"
text
=
"UserAge:"
/>
<
mx:Label
x
=
"10"
y
=
"150"
text
=
"Address:"
/>
<
mx:TextInput
x
=
"108"
y
=
"78"
id
=
"txtName"
width
=
"146"
/>
<
mx:TextInput
x
=
"107"
y
=
"115"
id
=
"txtAge"
width
=
"147"
/>
<
mx:TextInput
x
=
"107"
y
=
"148"
id
=
"txtAddress"
width
=
"147"
/>
<
mx:Button
x
=
"272"
y
=
"112"
label
=
"Call Bean"
id
=
"btnCallBean"
click
=
"onCallBean();"
/>
<
mx:Text
x
=
"397"
y
=
"80"
width
=
"246"
id
=
"vtxtName"
/>
<
mx:Text
x
=
"397"
y
=
"117"
width
=
"246"
id
=
"vtxtAge"
/>
<
mx:Text
x
=
"397"
y
=
"150"
width
=
"246"
id
=
"vtxtAddress"
/>
</
mx:Canvas
>
</
mx:Application
>
16、DEMO完成后目錄結構如圖:

17、DEMO功能完成最終效果如圖:源碼下載:

flex還可以通過如XMLSocket FMS 二進制套接字等同服務器交互,就不再贅述了本系列課程到此告一段落!