Max Katz heads Developer Relations for Appery.io, a cloud-based mobile app platform. He loves trying out new and cool REST APIs in mobile apps. Max is the author of two books “Practical RichFaces” (Apress 2008, 2011), and is a frequent speaker at developer conferences. You can find out what Max is up to on his blog: mkblog.exadel.com and Twitter: @maxkatz. Max is a DZone MVB and is not an employee of DZone and has posted 80 posts at DZone. You can read more from them at their website. View Full User Profile

A Look Inside Exadel Flamingo - Flex and JBoss Seam

07.21.2008
| 24492 views |
  • submit to reddit

Most enterprises today are planning or already delivering Rich Internet Applications. Full page refereshes are history. Customers today want fast, interactive, and rich Web applications that feel and look similar to desktop applications. While Rich Internet Applications are clearly the future, the technologies or technology stack to use for them is not always clear.

Many IT managers are faced with the question: “Which user interface technology to use?”. Another and equally important question is: “What backend technologies to use?” User interface choices are abundant (Flex, Silverlight, Ajax, JavaFX). However, the purpose of this article is not to compare them all. Instead we are going to focus on the proven and increasingly popular Flex technology for the user interface. On the backend we are going to use JBoss Seam. Seam greatly simplifies development by unifying technologies such as JSF with EJB3, JPA, and Hibernate.

 

Flex

Flex applications run inside a high-performance Flash player from Adobe. The Flash player (version 9) is a ubiquitous lightweight virtual machine that's installed as a plug-in inside a browser and runs Flex applications. Today the Flash player is installed on virtually any machine. Because Flex applications are compiled and run inside a virtual machine (Flash player), a richer user experience can be delivered unlike the standard Web browser scenario where markup (HTML) and JavaScript are interpreted.

 

JBoss Seam

Seam is a lightweight framework whose goal is to make Java EE development simpler. To be more specific, it greatly simplifies development by unifying JSF and JBoss RichFaces with EJB3, JPA, or Hibernate. Out of the box, Seam works with JSF. To take it one step further, it works with RichFaces, JSF components with AJAX support and skinability, to create Rich Internet Applications inside the browser without any additional plugins.

The browser is an excellent platform for building Rich Internet Applications, but the browser as a rich platform has limits. To kick it up a notch, as Emeril Lagasse would say, Flex based user interface running inside a Flash player (virtual machine) can be used inside the browses to deliver even richer applications.

The question now is how to use Flex and JBoss Seam together? We are only changing the user interface, so the backend stays the same. The answer is Exadel Flamingo. Flamingo enables building Flex-based user interfaces and easily connecting with the Seam backend.

 

Exadel Flamingo - Flex and Seam Together

Exadel Flamingo is a tool for easily bootstrapping Flex with a Seam backend. In fact, it also supports JavaFX for user interface and Spring on the backend. The same way JSF and RichFaces naturally work with Seam, Flamingo makes Flex work in the same natural way with Seam. Flamingo has three main features:

 

Tools

Flamingo provides the ability to quickly generate a CRUD-type application with entities, database, and a user interface. Putting together a Java EE Web project has become quite a challenge. There are so many different way to configure the project and numerous dependencies to resolve. With Flamingo tools, you can not only create a new project quickly, but also generate pieces of an application on demand over the course of the development cycle. If you have ever used the seam-gen tool to generate a Seam project, well, Flamingo provides similar tooling.

 

An Integration Library

It serves as the glue between the Flex client and the Seam server code working behind the scenes so the developers can concentrate on business problems instead of writing “plumbing” code. Additionally, communication between Flex and Seam is done via binary protocols. (They are the most efficient.)

 

Client-Side Components

These are non-visual components that make development easier by providing validation, binding, and the ability to bundle multiple requests into one. One of the key features of Flamingo is dynamic persistent methods. These methods allow intuitive, English-like queries to a database, instead of using SQL (The SQL is actually created by Flamingo on the fly.) or creating DAO objects (which sometimes creates unnecessary complexity). Just this feature alone offers a dramatic increase in productivity. Flaming supports Dynamic Finders and Dynamic Updaters. Here is an example of dynamic finder methods:

 

@Entity
public class Person implements Serializable {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}

 

and using dynamic methods:

 

<mx:RemoteObject id="person" destination="Person" result="resultHandler(event)"/>
...
private function resultHandler(event:ResultEvent):void
{
entities = event.result as ArrayCollection;
}
...
person.findAll();
person.findByNameLike("John%");
person.findByNameNotEqual("John Smith");

 

The finder methods findAll, findByNameLike, findByNameNotEquals, are automatically available, without actually having to write them.

Enough talking! We will first look at a quick example that shows how transparent it is to use Flex with Seam and then go through a step-by-step tutorial that will show how to generate a Flex-Seam application.

First, we will start with a Seam component. If you have used Seam before, this should look very familiar:


@Scope(ScopeType.STATELESS)
@Name("helloAction")
public class HelloAction {
public String hello(String name) {
return "Hello, " + name;
}
}
 
 

Next, let's look at the Flex client:

 


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:word="*">
<mx:RemoteObject id="service" destination="helloAction"/>
<mx:Panel title="Flamingo AMF Hello World Sample" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:HBox>
<mx:Label text='Whom do you want to say "Hello" to?'/>
<mx:TextInput id="who"/>
<mx:Button label="Say Hello" click="service.hello(who.text)"/>
</mx:HBox>
<mx:Label text='The server said: "{service.hello.lastResult}"'/>
</mx:Panel>
</mx:Application>

 

This sample shows how the hello method of the server Seam component helloAction can be called using RemoteObject when clicking on the "Say Hello" button.

Finally, here is the services-config.xml file:

 

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<services>
<service
id="hello-service"
class="flex.messaging.services.RemotingService"
messageTypes="flex.messaging.messages.RemotingMessage">
<destination id="helloAction">
<channels>
<channel ref="seam-amf"/>
</channels>
</destination>
</service>
</services>
<channels>
<channel-definition id="seam-amf" class="mx.messaging.channels.AMFChannel">
<endpoint
uri="http://{server.name}:{server.port}/helloworld/seam/resource/amf"
class="flex.messaging.endpoints.AMFEndpoint"/>
</channel-definition>
</channels>
</services-config>

 

This sample shows the channel seam-amf with a set URL to access the server being applied in order to use the destination helloAction:

  1. "{server.name}:{server.port}" is server name:server port where your existing JBoss Seam application is running;

  2. "helloworld" is the name of your existing application;

  3. "helloAction" is the name of the component specified in the "HelloAction.java" file (see annotation @Name("helloAction"))

Hopefully this gives you an idea of how easy it is to connect a Flex user interface with a Seam backend. Now, let's go to our example.

 

Let's Build Something

Next, we will use Maven to generate a ready-to-use CRUD-style application with a Flex user interface connected to a Seam backend. While the application will be rather simple, this will give you an idea how simply it is to use and build Flex-based interfaces with Seam. For a database, we are going to use HSQLDB.

 

Assembling the Starting Pieces

But first, there are a couple of things we need to make sure we have before we can create our first Flex-Seam project.

 

Adobe Flex

  1. Download the Adobe Flex SDK 3 from: http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK.

  2. Unzip the downloaded file

  3. Create an environment variable FLEX_HOME and point it at the root of the Adobe Flex SDK installation

Maven 2

We will use Maven to generate our CRUD application

  1. Download Maven 2 from: http://maven.apache.org/download.html

  2. Unzip the downloaded file

  3. Create an environment variable M2_HOME and point it to Maven’s installation directory,

  4. Add M2_HOME/bin to your PATH

Application Server

We will build a Seam project with an EJB3 component, create an EAR file and deploy it to a JBoss Application Server.

  1. Download JBoss Application Server from: http://www.jboss.org/jbossas/downloads/

  2. Unzip the downloaded file

Exadel Flamingo

Finally, you need to download the latest version of Exadel Flamingo.

  1. Download Exadel Flamingo from: http://flamingo.exadel.com

  2. Unzip the downloaded file

  3. Go to the <flamingo-1.6.0>/bin directory and run the installflamingo file

  4. Optionally, you can add the <flamingo-1.6.0/bin> directory to your path variable. It will enable you to run Flamingo commands from anywhere

 

Now that we all the pieces downloaded and configured, we are ready to create the project.

Generating New Project

To start project generation, go to <flamingo-1.6.0>/bin (or, if you modified the path to include this directory, you can run it from anywhere) and enter:

flamingo create project

You will be asked a series of questions about the project. In most cases, the default values will work, but it's a good idea to specify them explicitly anyways. The default values are shown in [] brackets.

Then, answer the following questions with the answers specified:


Question

Your Answer

Please choose the type of application to generate [flamingo-spring, flamingo-seam]

flamingo-seam

Please enter the location in which your new application will be created (i.e. c:/java/development):

Enter location where you want the project created. (For this question, it's OK to accept the default value.)

Enter the project name (e.g. myproject):

flex-seam

Please enter the root package name for your project (e.g. com.mydomain.myproject):

com.yourcompany.flexseam

Is this project deployed as an EAR (with EJB components) or a WAR (with no EJB support)? [ear, war]:

ear

Will this project have Flex or JavaFX user interface? [flex, javafx]:

flex

Will this project use Hessian or AMF protocol? [amf, hessian]:

amf

Will this project use Seam Remoting or Flamingo servlets? [servlets, remoting, both]:

remoting

What kind of database are you using? [hsql, mysql, oracle, postgres, mssql, db2, sybase, none]:

hsql

Enter the JDBC URL for your database (e.g. jdbc:hsqldb:.):

jdbc.hsqldb:.

Enter database username:

sa

Enter database password:

Leave blank, click Enter

Do you want to update the database schema each time you deploy? [y, n]:

y

Enter the entity class name (Flex source files to view and modify entities will be generated as well):

Person

To see what was created, go to the directory you selected for project creation.

 

Building the Deployable File

Next, we need to build an EAR file that we will deploy.

Go to project root and enter this command:

mvn package

Once the build is complete, go to flex-seam/ear/target . There you should see the flex-seam EAR file. This is the file we are now going to deploy to JBoss Application Server.

 

Deploying and Running

The easiest thing to do is just copy the EAR file to the application server deployment directory. Copy the file to:

<jbossas>/server/default/deploy

Now, all that is left to do is to start the server:

<jbossas>/bin/run

Once the server has started, enter this URL into the web browser:

http://localhost:8080/flex-seam

and you will see a similar picture:

 

 

As you can see, the actual project creation only took a few minutes and we have a rather simple, but nevertheless, a fully working Flex-Seam application.

 

Conclusion

Flash player is a powerful virtual machine for delivering Flex-based Rich Internet Applications. At the same time, Seam greatly simplifies Java EE development. Building Flex-Seam-based applications is an extremely attractive solution for many IT managers today. One piece that has been missing so far is easy integration between Flex and Seam. You could do it on your own, but you would spend a significant amount of time writing “plumbing” code which has nothing to do with the application business logic. Exadel Flmaningo does exactly that; it simplifies Flex-Seam development by providing integration, client-side components and rapid development tools such as instant project creation.

 

Published at DZone with permission of Max Katz, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

replied on Fri, 2009/05/22 - 8:29pm

After unzipping Flamingo, you have to go to the <install>/bin directory and run "flamingoinstall" in order for it to put the necessary jar files into the maven repository. The central maven repository doesn't seem to have the version 1.7.1 Flamingo jar files.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.