Since in our day to day development we use a combination of Java (JBoss Seam), Flamingo and Flex one session was of special interest to us: Lazy Loading using dpHibernate. dpHibernate works with BlazeDS and Hibernate so we’ll try to see if we can integrate dpHibernate (or parts of it) with Flamingo in order to make lazy loading available for our projects. This would be really cool because JBoss Seam does all the wiring and session handling that one needs to do if using directly Hiberbate. I was lucky enough to go see the session on DataBinding because it explained a lot of the Flex internals and it also touched on what made dpHibernate possible. I loved this session the most and I find it really useful. If you’d like to know exactly how binding works I highly recommend taking a look at Michael’s presentation.

This being said it’s time to go back to work and stop dreaming about cool projects… at least for a few days Oh, and thanks to Tom and John for making all this possible.

I also have a 1gb flash drive with content from 360|Flex Atlanta and Europe to give away to a commenter to this post. Just make sure that your email is correct so I can contact you. I’ll randomly select one commenter on August 10th and send him/her the flash drive. Good luck and see you there!

Here is what a “dirty” stage might look like:

The steps necessary to test this demo are described here. javasig.ear (javasig-step-VI/dist/javasig.ear) can be dropped in jboss/server/default/deploy for quick testing of the application.

Validation

When you create database tables you specify a set of rules for each field. Say the field can’t be null, it must have more than 5 characters, etc. These rules must be enforced on the front end as well. In Flex we’d have to create validators for each field and for each rule to make sure that we don’t break any of the database constraints. Flamingo’s SeamValidator automatically validates Flex elements based on server side constraints.

On the server side the database management is done by Hibernate so we just need to specify rules for each field (CommandItem.java):

@Length(min=3, max=40)
private String command;

Flamingo automatically checks against Hibernate rules and performs the validation directly on Flex objects (silvafug.mxml):

<flamingo:SeamValidator id="validator" destination="commandItem"
        source="{commandInput}" validationTarget="command"
        property="text" />
<mx:TextInput id="commandInput"/>
<mx:Button label="Validate Command" click="validator.validate()"/>

That’s all what it takes for the magic to happen. Pretty neat, isn’t it?

Binding

Binding a Flex and a Java Object can be done automatically using Flamingo’s SeamBinding. Note that we can get the same results with RemoteObjects (pass the object to the server as an argument - see the post on Remote Calls) but SeamBinding simplifies our lifes a bit by removing some extra steps.

Say we have a Java Object (CommandItem.java):

@Name("commandItem")
@Entity
@Scope(SESSION)
public class CommandItem implements Serializable
{
	private static final long serialVersionUID = 1892843745280885007L;

	@Id @GeneratedValue
	private Integer dbID;

	@Length(min=3, max=40)
	private String command;

	private Integer distance;

	public Integer getDbID() {
		return dbID;
	}
	public void setDbID(Integer dbID) {
		this.dbID = dbID;
	}
	public String getCommand() {
		return command;
	}
	public void setCommand(String command) {
		this.command = command;
	}
	public Integer getDistance() {
		return distance;
	}
	public void setDistance(Integer distance) {
		this.distance = distance;
	}
}

and a Flex object (CommandItem.as):

[RemoteClass(alias="com.java.package.CommandItem")]
[Bindable]
public class CommandItem
{
	public var dbID:int;
	public var command:String;
	public var distance:int;
}

then SeamBinding seamlessly keeps the 2 objects synchronized. All we need to do is connect the 2 objects and call on commit or update depending on which direction we want to perform the synchronization (silvafug.mxml):

<flamingo:SeamBinding destination="commandItem"
        id="bindingService" source="{commandItem}"/>
<mx:Button label="Do Something" click="bindingService.commit()"/>

Tada! When bindingService.commit() is called we got our client side object automatically saved in the server session. If we want it stored in the database all we’d have to do is to persist the server side object.

Here is a horizontal TabBar:

And here is a TabBar with direction="vertical":

Not so pretty, right? Wouldn’t it make sense to round the corners on the right side instead of the top? So I checked the source code for the TabSkin and there it was:

override protected function updateDisplayList(w:Number, h:Number):void
{
   ...
   var cr:Object = { tl: cornerRadius, tr: cornerRadius, bl: 0, br: 0 };
   var cr2:Object = { tl: cornerRadius2, tr: cornerRadius2, bl: 0, br: 0 };
   ...
}

cr and cr2 are used to draw the tabs and they are set to round up the top left and top right corners. All what needs to be done is to check if the direction is vertical and if so do the rounding on the right side:

var cr:Object = { tl: 0, tr: cornerRadius, bl: 0, br: cornerRadius };
var cr2:Object = { tl: 0, tr: cornerRadius2, bl: 0, br: cornerRadius2 };

Here is our new vertical TabBar:

Doesn’t this look more like what you’d expect to get if you set direction="vertical"?

Here are the steps needed to take in oder to set up the communication:

1. On the server side (JBoss Seam) we need to expose methods for remote access. To do this, we just have to mark the methods with the @WebRemote annotation on the interface
   (src/action/com/flexdevil/silvafug/DoSomething.java)

   @WebRemote public String doSomething();

2. Configure the Flex application to let it know which Seam component to access (set the destination to the @Name of the Seam component in services-config.xml)

   <destination id="doSomething"/>

3. Instantiate a remote object that will handle the communications between Flex and Seam (src/silvafug.mxml)

   <mx:RemoteObject destination="doSomething" id="service"
    result="{showWhatTheServerSaid()}"/>

4. Talk to the server (src/silvafug.mxml)

   <mx:Script>
      ...
      function showWhatTheServerSaid()
      {
         Alert.show(service.doSomething.lastResult);
      }
      ...
   </mx:Script>
   ...
   <mx:Button label="Do Something" click="service.doSomething()"/>

Because the communication with the server is asynchronous, we need to monitor the lastResult in order to get the return value from the server. We can either use binding to keep an object set to the latest result (<mx:Text text="{service.doSomething.lastResult}"/>) or we can set the result property of the RemoteObject to a method that gets called once the lastResult is available.

Remote calls can be used to easily accomplish all the backend communications. They are useful to access database data (save/retrieve), run complex calculations based on user input, or extract interesting stats from the server and represent them in a meaningful way to the user. Although Flamingo offers a few custom components that are pretty powerful and that simplify the server communication even more for specific situations, Remote Objects represent the core of backend communications.

You can check out the project demonstrated during the presentation here. The project shows how to effectively use WebRemoting, RemoteObjects, SeamBinding and SeamValidators (automatically validate flex fields based on database rules).

Steps that you need to follow in order to run the project:

• unzip the demo
  
• drop the unzipped folder in your Eclipse workspace
• open Eclipse and create a new general project called silvafug (this will load up the demo on Eclipse)
• download JBoss 4.2.2 and start the server
• open build.properties (inside silvafug project) and change jboss.home property to point to your jboss installation directory
• deploy the project ( Eclipse -> run -> External Tools -> Open External Tools Dialog -> new Ant builder -> set Buildfile to build.xml -> run)
• point your browser to http://localhost:8080/silvafug to get the generic home page or to http://localhost8080/silvafug/flex/silvafug.html to get the flex application

I’ll cover the main points from the presentation in more detail over the next days.