Flex Remote Objects for calling Java objects using BlazeDs

     ‘Adobe Flex’ a very good tool for developing RIA(Rich Internet Application)s. It provides plenty of components to display the data in variety of formats eg: DataGrid, Tree, List,… Also provides very good features to access the data from server.
     Flex basically provides 3 ways HttpService, WebService, RemoteObject to access data from server. Where the earlier 2(HttpService and WebService) do not need any settings at server side or any change in compilation process of Flex code. All you just need to do is to provide the values for url or destination attributes of respective service tags in mxml. But the third way needs some work to be done at server side also some changes in compilation process of Flex code. Now in this post we will discuss about the third way of accessing the data from server i.e. The Remote Procedure Call(RPC) using RemoteObject tag in Flex.
     Remote Procedure Call can be done by using “RemoteObject” a simple tag in flex. But with this tag we can not directly access the data or methods existing at backend. Flex do not provide this type of access, we need some other or third party tools for or procedure for making this Remote Procedure Call work. Selection of these tools depend on the program language or frame work in which the data accessing methods are written. If you are using .Net you are likely to go for WebORB for .Net. If you are using PHP you have tools like AMFPHP, WebORB for PHP. Now we will continue this post by considering JAVA as the programming language used for the Remote Methods, then we have options WebORB for JAVA, BlazeDs. As Adobe labs suggests also owns BlazeDs for J2EE servers, we will continue this tutorial with BlazeDs.
     We will continue this tutorial by doing a simple example in parallel. Before that open the following link
http://opensource.adobe.com/wiki/display/blazeds/BlazeDS/
to get more details about BlazeDS. And download the binary distribution(about 4.5MB) from the following link.
http://opensource.adobe.com/wiki/display/blazeds/Release+Builds

Do not get confused with the source link for download. In the time it gets downloaded we will make the java objects ready for making a simple sample application.
     We will write a simple class HelloRPC in Java.
     /* HelloRPC.java*/
     public class HelloRPC{
          public String firstCall(){
               return “Hello RPC for Java”;
          }
     }
     /*End of class*/
     Compile the java file and keep the class file. By now the file might have got downloaded. That’s a zip file. Extract this zip file into a folder. You have a war file(Caution: For better reusability keep a copy of this file into another folder). Rename this war file with the desired name for the application. Lets say we changed this to firstrpceg.war. Now deploy this file onto the J2EE server. As this war file is readily made to be deployed in tomcat server, lets deploy it on to the Tomcat(5.5 or above) server.
     After deploying the application on to server, we will get a folder in the webapps folder of the server installed folder with the name of the war file we have given. Enter the folder copy the class file we got by compiling the java file we just wrote into the WEB-INF -> classes folder. And move to the WEB-INF folder you have a folder with the name flex. Move to that folder, you can observer the xml files which are the descriptors of the RemoteObject settings. Open the remote-config.xml file with any editor. Now just describe a simple destination here. You can do this by entering the following code at the end of the services tag.

<destination id=“remoteObj”>
<properties>
<source>HelloRPC</source>
</properties>
</destination>

That’s it for the server side settings. Now we will set the compilation options of the Flex project. We will start this by beginning a new project in flex using Flex Builder.

     Open Flex Builder. Go to File -> New -> FlexProject. Specify every thing needed, finally select the server type as J2EE in the flex project creating wizard.


Now click on next. Specify the address of the folder just created in the webapps folder of server by deploying the war file. Also the URL, in our example it would be http://localhost:8080/firstrpceg. Finally the context, typically the context name would be the name of the application i.e. firstrpceg. Now click on validate settings button. Before clicking on this button make sure that the tomcat server is started.



Click on finish button if your validation for the settings has given successful result. In the mxml application file just paste the following Flex code between the application opening and closing tags.

     <mx:RemoteObject id=“RPCforJava” destination = “remoteObj” result=“handleResult(event)” fault=“handleFault(event)” >
     <mx:Method name=“firstCall”>
     </mx:RemoteObject>
     <mx:Label id=“resultLbl” />
     <mx:Button label=“click” click=“RPCforJava.firstCall()”
     <mx:Script>
          <![[CDATA
          private function handleResult(event:ResultEvent){
               resultLbl.text = RPCforJava.firstCall.lastResult;
          }
          private function handleFault(event:FaultEvent){

          }
          ]]>
     </mx:Script>

     Now directly run this application file from the flex builder(caution: keep the server on). If you click on the button “click” you will get the result “Hello RPC for Java” as the text for the label.

     In the above Flex code, the value specified for the destination attribute of the RemoteObject tag typically should be the id of the destination tag specified in the remote-config.xml. The name of the Method tag should match the name of the method in the java class we wrote earlier. That’s it we have a simple sample application for using the RemoteObject in flex for accessing the java objects using the blazeDS tool. We will discuss about settings in detailed in my next post.

A simple AJAX code

Ajax = Asynchronus Javascript And Xml.

Let's start Ajax with a simple example:

var ajaxObject=null;

function getAjaxObject(){

var ajaxObj=null;

try{

ajaxObj=new XMLHttpRequest();

}

catch(e){

try{

ajaxObj=new ActiveXObject("Msxml2.XMLHTTP");

}

catch(e){

ajaxObj=new ActiveXObject("Microsoft.XMLHTTP");

}

}

return ajaxObj;

}

function calledMethod(){

if(ajaxObject==null)

ajaxObject=getAjaxObject();

if(ajaxObject==null){

alert("Your browser do not support this functionality");

return;

}

var url="http://moneycontrol.com/rss/latestnews.xml";

ajaxObject.onreadystatechange=stateChanged;

ajaxObject.open("GET",url,true);

ajaxObject.send(null);

}

function stateChanged(){

if (ajaxObject.readyState==4){

alert(""+ajaxObject.responseText);

}

}

Above code is javascript code. In which callMethod function is the main function to be called from the html events (like button onClick, text onChange). The callMethod function takes care of every phase of the client server communication. To expalin it better, ajaxObject is a global variable meant for holding the Ajax object provided by the browser. 

getAjaxObject is a function which returns a browser communicating object, which actually does the communication. getAjaxObject method first tries to create the new instance of XMLHttpRequest, which is an inbuilt object for all most all browser except internet explorer. So new XMLHttpRequest(); code throws an exception when you try to execute this code from an internet explorer browser. Inorder to enable the Ajax functionality internet explorer has it's own ActiveXObject called "Msxml2.XMLHTTP". When the browser catches an exception of not able to create XMLHttpRequest object, code will try to create an instance of the IE Msxml2.XMLHTTP, through new ActiveXObject("Msxml2.XMLHTTP");. For the latest browsers code upto this segment is enough. But for the systems having older editions of internet explorer the above ActiveXObject may through error. To fix this older version of IE has another ActiveXObject called Microsoft.XMLHTTP, the code tries to create the instance for this ActiveXObject through new ActiveXObject("Msxml2.XMLHTTP"); when the creation of above two objects throw exceptions. If all the above 3 instance creations throw exception, it means that your browser do not support Ajax functionality.

Back to the callMethod function where you get the AjaxObject. Now set URL for which you want to make a call. That means the URL from which you want to get the results. Here we chose an xml file which is located in some other domain called www.moneycontrol.com. You can place any url here depending on your requirement. 

The next line in the function callMethod sets a property to the ajaxObject, called onreadystatechange which gets rised when ever there is a change in readyState property of ajaxObject and handles the response from the requested URL. In this code the above the onreadystatechange property is set to stateChanged function. 

stateChanged is called whenever there is a change in readyState property of ajaxObject. This function verifies the readyState property of ajaxObject and if it is 4, it means that the ajaxObject has the response ready. The ajaxObject have totally 5 readyStates ranging from 0 to 5. Internally these numbers specify the state of ajaxObject. They are:

0 -> The request is not yet initialized.

1 -> The request has been set up. This means the URL is assigned to ajaxObject.

2 -> The request has been sent. This occurs immediately after completion send method.

3 -> The request is in process. This occurs after send method and before the response from the server.

4 -> The request is complete. This means the ajaxObject got the response.

After verifying the readyState property for 4, the code just alerts the content that has come as response. responseText is the property of ajaxObject which prints the text in response. ajaxObjectalso have a property called responseXML which deals with the xml data in the response in document object model(DOM) format.

Once again back to the callMethod function. open(), send() are two methods of ajaxObject where open prepares the ajaxObject to send the request by setting the properties like method to send data (eg: GET, POST), URL (to which the request is to go) and finally a boolean to specify whether the request should go asynchronously or not. And send makes the request to the given URL.