Flex與服務器交互(使用RemoteObject+BlazeDS+TomCat同Java交互及開發環境配置)


由於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 二進制套接字等同服務器交互,就不再贅述了本系列課程到此告一段落!


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com