Daniel Harfleet: Passing complex parameters and results

« Calling Java remote objects and handling results | Main | Debugging Flex and Java at the same time »

August 04, 2006

Passing complex parameters and results

In my previous coffee break guide, you saw flex integrating with java by way of passing strings, obviously if this was the only way we could pass information between flex and java, it would be pretty limited. In this post, I will show you how you can pass more complex objects (often called DTOs or Value Objects) between flex and java. Like always I provide you the code to allow you to try it out.

In this example we will create a very simple address book for the sole purpose of demonstrating passing complex parameters.

Under the src/fdweb directory of your project, create a java class called AddressBookDelegate and populate it with the code here, this class will be the remote object we are going to call. You will notice in the addAddress method, that we pass in an AddressVO and we pass back a List of AddressVOs, we don't have to pass back Lists, it is just satisfying the functionality we need.

Under your project directory, at the same level as META-INF and WEB-INF, create a folder called 'fdsweb' and inside it create a new ActionScript class using File>New>ActionScript class. Call it AddressVO.as and add the following code in:

package fdsweb
{
   [Bindable]
   [RemoteClass(alias="fdsweb.AddressVO")]
  	
   public class AddressVO
   {			
      public var line1 : String;
      public var line2 : String;
      public var city : String;
      public var postalCode : String;
	
   }
}

In a real project, this directory would probably be com.company.project.etc and is where you will hold all your ActionScript code, but today we will just have a simple package structure.

What the above code shows is that we have a value object (DTO) which has four attributes all of which are Strings, however, as a java developer you probably would have worked this out for yourself as AS syntax is relatively similar to Java. Notice however in ActionScript, you have to declare the package using a brace notation. The main thing to be aware of here is that we are telling the gateway (the component that does the flex-java-flex mapping) that we would like this class to map to our java class AddressVO (in java package fdsweb).

Next we should create the java class, just create a standard java value object, take a look here if you want a sanity check. The java class does not need to be serializable, however, it must have a no-args constructor.

Now we just need to add in the destination which tells the gateway about the remote java object, add the following:


to your remoting-config file, under WEB-INF/flex:


<destination id="addressBookDelegate">
<properties>
<source>fdsweb.AddressBookDelegate</source>
<scope>application</scope>
</properties>
</destination>

As mentioned earlier the flex gateway is responsible for translating java to ActionScript and ActionScript to java, it copies across the data, it can handle deep copies and does not get caught out by circular references.

Create a new mxml class in the project and call it AddressBookView.mxml and populate it with the source code from here. The mxml file contains some view related code, in this case we have a form, which is just a way of laying out some components, our form contains four text inputs and a button.

We also have a DataGrid, which is very similar to a JTable if you have ever coded Swing.

When the user inputs four lines of their address and click add, the click event is fired and the button has the handleAdd() function registered to handle click event for it. The handleAdd() function creates an empty AddressVO and populates it with the data from the text inputs in the form.

   private function handleAdd() : void
   {
      var address : AddressVO = new AddressVO();
      address.line1 = line1Input.text;
      address.line2 = line2Input.text;
      address.city = cityInput.text;
      address.postalCode = postalCodeInput.text;
		
      addressBookRO.addAddress(address);
   }

It then calls the method on the remote object (addAddress), this calls the addAddress(..) method on the java remote object, which adds the address to the address book and then sends back the contents of the address book as a List of AddressVOs. The remote object's result handler is pointing to the handleResult function, which updates our local copy of the list of addresses (we are using an ArrayCollection).


private function handleResult( event : Object ) : void
{
addressList = event.result;
}

The DataGrid mentioned earlier has a property of dataProvider set to reference the list of addresses, whenever that list changes, a 'binding event' is fired, which the DataGrid receives and re-populates itself.

<mx:DataGrid dataProvider="{addressList}" width="100%" height="100%" />

Flex allows you to break visual components down into sub-components so that you can manage your project source more easily, in addition as a java developer, you may want to take a look at the Cairngorm microarchitecture, which provides a set of patterns to allow you to better architect a project.

In the next guide, I will show you how to look at the output of the gateway to see how your object gets passed, I will also show you how you can debug your client-side flex code using the FlexBuilder debugger and show you how you can use JPDA to remote debug the java remote object. This will give you full end to end debugging.

Posted by dharfleet at August 4, 2006 05:05 PM

Comments

Man, i have read some articles, and just want to say thanks. Its really clear and helpful.

Posted by: Kurk at November 24, 2006 01:44 AM