Java EE and Flex, Part 1: A compelling combination

Rich-client technology for your enterprise Java applications

Adobe Flex is becoming a popular choice for generating the client side of enterprise Java applications. In this first of two articles, Dustin Marx demonstrates how Flex can help you deliver highly interactive user interfaces that access your Java EE application's enterprise logic. Get a hands-on introduction to perfecting a simple Flex client, then enable it to communicate with your Java EE server. Level: Beginner

Flex 3 gives you another choice for building browser-based UIs for your Java EE applications. If you haven't yet discovered how simple it is to add rich clients to enterprise Java applications with Flex, this article could serve as your point of entry. You'll find out what benefits Flex brings to the table, how to create application layouts using Flex's XML grammar, and how to make your Flex client work with a Java EE application.

Java developers adopting Flex

We know that some Java developers are resistant to Flex as a front-end technology for Java EE, but there's a strong argument for giving Flex a chance. Author Dustin Marx discusses the factors driving Flex adoption in the Java community in a sidebar to this hands-on article.

Before I ask you to install Flex and start putting together a sample application, let's consider the advantages of using Flex as a client-side technology. Flex offers advantages specific to Java developers and some that are more general. We'll look at both.

Why choose Flex?

Adopting a new technology means embracing a learning curve, which can take some convincing. Here are some general advantages to using Flex:

  • You can write Flex code once and run it in any Web browser for which a Flash Player plugin exists. None of the browser-detection or object-detection code typical of JavaScript or Ajax applications is required.
  • The target runtime (Flash Player 9 or later) is installed on more than 95 percent of Web browsers worldwide.
  • Flex is based on standards. Its scripting language (ActionScript 3.0) has roots in ECMAScript (the same specification implemented by JavaScript), and its layout language is a specific XML grammar called MXML. Familiarity with the underlying standards can help you learn Flex with relative ease.
  • Flex has a refreshingly simple mechanism for binding the property of one object in a Flex application to the property of another object in Flex. This addictive feature is commonly referred to as property binding. (JSR 295: Beans Binding is intended to add this feature to the Java language, but it won't be included in Java SE 7.)
  • You can associate the Flex-based front-end with any back-end technology using techniques that promote loose coupling. Flex provides built-in support for communication with back-ends via both traditional HTTP and SOAP-based Web services.
  • Flex provides a rich set of components, Flash effects (including animation, video, and audio), and accessibility features that make it easy to add richness and highly fluid experiences to a Web application.

Flex for Java developers

General benefits might be enough to attract you to Flex, but there are others that are mostly or entirely aimed at Java developers.

One such benefit is the striking similarity between Java and ActionScript 3.0 in language features, concepts, and syntax. The languages use similar conditional statements, looping syntax, and even coding conventions. (It's arguable that ActionScript is more like Java than JavaFX Script.) Flex's Javadoc-like ASDoc documentation-generation tool uses the same comment syntax that you use in Java to generate documentation. ActionScript's packaging structure is related to directory structure in exactly the same way that Java approaches packages and directories.

ActionScript 3 also provides class-based object-oriented features (such as classes in the Java sense, inheritance, and interfaces) and static typing. These additions to what most of us are used to in JavaScript make learning and using ActionScript easier. (ActionScript still makes dynamic typing and prototype-based inheritance available for situations when you want or need those features of traditional JavaScript.)

Flex's ability to communicate with a Java EE back-end using HTTP or SOAP-based Web services is highly useful, but you're not limited to those communication approaches. Blaze DS -- a separate, open source product from Adobe -- gives you even greater flexibility for communicating between a Flex front-end and a Java EE back-end. BlazeDS lets you use JMS for communication and allows you to use object remoting with Java. BlazeDS also adds potential performance benefits because it uses the binary AMF3 format for faster communication than is normally experienced with XML.

A third-party open source product called GraniteDS offers even more choices for applying a Flex-based front-end to a Java EE application. GraniteDS offers support for the AMF3 binary format and also some features not available with BlazeDS. For example, GraniteDS offers tools and service frameworks for more easily integrating Flex with back-ends based on EJB 3, the Spring Framework, Guice, or Seam.

In discussing Flex so far, I've repeatedly used the words simple and easy. But don't just take my word for it. The best way to understand how simple and easy Flex basics are is to try them out for yourself. In the next sections you'll implement a sample application, refactor it to add features and reduce boilerplate code, and then establish communication between your new, Flex-based client and a Java servlet.

Acquiring and installing Flex

This article's examples use the Flex 3.2 SDK. If you want to build and run the examples, download the Flex SDK (including the command-line compiler and debugger). A single ZIP file contains the Flex SDK for multiple platforms.

Unzip the file into an obvious location, such as C:\flex_sdk_3_2. For convenience, add the location of the Flex SDK bin directory in the path so that the command-line tools can be run from any directory. I like to create a FLEX_HOME environment variable that points at the Flex SDK location and then add $FLEX_HOME/bin or %FLEX_HOME%\bin to the PATH. You can verify a correct installation of Flex by running the command mxmlc -version, as shown in Figure 1.

Verifying your Flex installation
Figure 1. Verifying your Flex installation

Although it's not required to build and run the examples, you might be interested in downloading FlexBuilder 3, which is available at no cost for a trial period. FlexBuilder lets you use any text editor (such as JEdit or vim) or Java IDE (such as NetBeans or Eclipse) to write and maintain MXML and ActionScript files. Aptana Studio and Spket IDE include specific support for editing Flex-related files.

MXML: Flex layout with XML

Flex uses MXML for defining a Flex application's layout. Flex layout files are typically named with a .mxml extension. MXML code must be well-formed XML and use XML namespaces. The example in Listing 1 demonstrates a simple but completely functional Flex application, written entirely with MXML, that displays a list of selected JavaWorld articles.

Listing 1. Static MXML example

<?xml version="1.0" encoding="UTF-8" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                width="1100" height="700">
   <mx:Panel title="Some of Dustin's Favorite JavaWorld Articles">
      <mx:Label text="A Small Sample of Favorite JavaWorld Articles"
                fontSize="14" fontWeight="bold" />
      <mx:Grid>
         <mx:GridRow>
            <mx:GridItem>
               <mx:Label text="Designing with Exceptions"
                         fontWeight="bold" />
            </mx:GridItem>
            <mx:GridItem>
               <mx:Label text="Bill Venners" />
            </mx:GridItem>
            <mx:GridItem>
               <mx:Label text="http://www.javaworld.com/javaworld/jw-07-1998/jw-07-techniques.html" />
            </mx:GridItem>
         </mx:GridRow>
         <mx:GridRow>
            <mx:GridItem>
               <mx:Label text="Inheritance Versus Composition"
                         fontWeight="bold" />
            </mx:GridItem>
            <mx:GridItem>
               <mx:Label text="Bill Venners" />
            </mx:GridItem>
            <mx:GridItem>
               <mx:Label text="http://www.javaworld.com/javaworld/jw-11-1998/jw-11-techniques.html" />
            </mx:GridItem>
         </mx:GridRow>
         <mx:GridRow>
            <mx:GridItem>
               <mx:Label text="JSP Best Practices"
                         fontWeight="bold" />
            </mx:GridItem>
            <mx:GridItem>
               <mx:Label text="Dustin Marx" />
            </mx:GridItem>
            <mx:GridItem>
               <mx:Label text="http://www.javaworld.com/javaworld/jw-11-2001/jw-1130-jsp.html" />
            </mx:GridItem>
         </mx:GridRow>
         <mx:GridRow>
            <mx:GridItem>
               <mx:Label text="More JSP Best Practices"
                         fontWeight="bold" />
            </mx:GridItem>
            <mx:GridItem>
               <mx:Label text="Dustin Marx" />
            </mx:GridItem>
            <mx:GridItem>
               <mx:Label text="http://www.javaworld.com/javaworld/jw-07-2003/jw-0725-morejsp.html" />
            </mx:GridItem>
         </mx:GridRow>
         <mx:GridRow>
            <mx:GridItem>
               <mx:Label text="Why Extends is Evil"
                         fontWeight="bold" />
            </mx:GridItem>
            <mx:GridItem>
               <mx:Label text="Allen Holub" />
            </mx:GridItem>
            <mx:GridItem>
               <mx:Label text="http://www.javaworld.com/javaworld/jw-08-2003/jw-0801-toolbox.html" />
            </mx:GridItem>
         </mx:GridRow>
         <mx:GridRow>
            <mx:GridItem>
               <mx:Label text="Why Getter and Setter Methods Are Evil"
                         fontWeight="bold" />
            </mx:GridItem>
            <mx:GridItem>
               <mx:Label text="Allen Holub" />
            </mx:GridItem>
            <mx:GridItem>
               <mx:Label text="http://www.javaworld.com/javaworld/jw-09-2003/jw-0905-toolbox.html" />
            </mx:GridItem>
         </mx:GridRow>
         <mx:GridRow>
            <mx:GridItem>
               <mx:Label text="New Features Added to Servlet 2.5"
                         fontWeight="bold" />
            </mx:GridItem>
            <mx:GridItem>
               <mx:Label text="Jason Hunter" />
            </mx:GridItem>
            <mx:GridItem>
               <mx:Label text="http://www.javaworld.com/javaworld/jw-01-2006/jw-0102-servlet.html" />
            </mx:GridItem>
         </mx:GridRow>
         <mx:GridRow>
            <mx:GridItem>
               <mx:Label text="REST for Java Developers, Part 1"
                         fontWeight="bold" />
            </mx:GridItem>
            <mx:GridItem>
               <mx:Label text="Brian Sletten" />
            </mx:GridItem>
            <mx:GridItem>
               <mx:Label text="http://www.javaworld.com/javaworld/jw-10-2008/jw-10-rest-series-1.html" />
            </mx:GridItem>
         </mx:GridRow>
      </mx:Grid>
   </mx:Panel>
</mx:Application>

Because this example is static, it doesn't show off many of Flex's and Flash's advantages. However, it serves as a good introduction to MXML.

All of the code in Listing 1 is well-formed XML. Most of the XML lines in Listing 1 are related to the same lines of code (repeating GridRow elements with nested GridItem and Label elements). They are used to define a static display grid with the Grid component and its GridRow and GridItem sub-elements. The use of <Grid>, <GridRow>, and <GridItem> organize and present data in a manner similar to how HTML table elements <table>, <tr>, and <td>, respectively, are often used.

This first MXML example also demonstrates the <mx:application> root tag used in all MXML applications. This tag includes an explicit width and height for the Flex application. The mx prefix is associated with the Flex XML namespace as part of this root element.

You'll use the Flex command-line compiler, mxmlc, to compile this article's examples. The Flex defaults (defined in the flex-config.xml file) are sufficient for the examples' needs, making compilation with mxmlc easy. Assuming the first MXML listing is saved in a file named Example1.mxml, you compile it with this command:

mxmlc Example1.mxml

In accordance with the default settings, this MXML file is compiled into an SWF file, called Example1.swf, that's placed in the same directory as the MXML file it was generated from. You can execute the SWF file by opening it in a Web browser or by simply entering the entire filename at the command line. The rendered SWF file looks something like Figure 2.

Rendered SWF file
Figure 2. Rendered SWF file (Click to enlarge.)
1 2 3 4 5 Page
Join the discussion
Be the first to comment on this article. Our Commenting Policies
See more