All the sessions were recorded and now they are freely available to download. In order to get them click on the badge bellow to install Adobe Media Player and subscribe to 360Flex Channel.
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 
Oh, and thanks to Tom and John for making all this possible.
360|Flex is coming back to San Jose, CA on August 18-20, 2008. There are 3 full days of Flex sessions that should satisfy everybody’s needs from developers that are just getting started to the most advanced ones. They have a nice schedule so take a look and see what gets you excited. If you are serious about Flex you must attend this conference. The price is only $480 for all 3 days!!!
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!
Did it happen to you that you removed or moved around an image or some other flex element and you could still see traces of that element in the initial position? It happened to me the other day and it took me a bit of time to find out a way of doing it. Here is what I came up with: yourDirtyFlexComponent.graphics.clear() or, depending on your application, you might want to do something like yourDirtyFlexComponent.parentApplication.graphics.clear(). Do you know another way of doing this? I would like to hear some alternatives.
Here is what a “dirty” stage might look like:
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.
Felipe Albertao and I will be doing a presentation at Java SIG on July 1st in Palo Alto. I’ll post the presentation demo afterwards. This time the demo code will be broken down into steps for easy follow on.
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.
A couple weeks back I had to implement a vertical TabBar and it was one of the few times when Flex surprised me with it’s behavior. The fix was pretty simple but it took me some extra time looking at the source code trying to figure what was going on.
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"?
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:
- 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
@WebRemoteannotation on the interface
(src/action/com/flexdevil/silvafug/DoSomething.java)@WebRemote public String doSomething();
- 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"/>
- Instantiate a remote object that will handle the communications between Flex and Seam (src/silvafug.mxml)
<mx:RemoteObject destination="doSomething" id="service" result="{showWhatTheServerSaid()}"/> - 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.
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.