360|Flex San Jose ‘08 Rocked!

3 full days of Flex talk are over. It was really great to see how everybody is trying to improve their experience with Flex. I found out about some new cool open source projects, I saw some live demos of how Flex interacts with other technologies and we even dived deep into the internals of Flex. Most importantly we (Felipe and I) got a few project ideas that would improve our development cycle (more on this later).

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 :D Oh, and thanks to Tom and John for making all this possible.

your ads here (468x60) - after 1st post.

Flex - Seam Presentation at JavaSIG

The demo for the JavaSIG presentation that Felipe and I have today is available to download in zip format here (or in 7z format here - this file is a lot smaller). This time the demo files are broken down into steps. On each step there is new functionality added (from a blank seam project to a fully functional flex - seam project that interacts with a database). There is a readme file that describes what is introduced on each step.

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.

Integrating Flex with JBoss Seam - Flamingo Goodies

On top of providing the gluing between Seam and Flex, Flamingo ships with a couple of goodies that can’t be ignored. SeamBinding automatically synchronizes Seam and Flex object and SeamValidator performs Flex validation based on server side rules (all the code samples are taken from this demo).

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.

Integrating Flex with JBoss Seam - Remote Calls

Remote calls are the most straight forward type of communication between Flex and a server. The basic idea is that the server exposes a few methods and then Flex calls them directly. In the example I posted before, the remote calls are done using AMF as implemented by Exadel Flamingo (they developed their own AMF-Serializer).

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.

Integrating Flex with JBoss Seam

Felipe and I presented yesterday at SiIvafug on how to integrate Adobe Flex with Java using JBoss Seam & Exadel Flamingo. We showed how to quickly generate a Seam Project using seam-gen and then how to build a simple flex app to communicate with the backend. All the gluing between Seam and Flex was done using Flamingo, a great alternative to BlazeDS when integrating with Seam.

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.