Reviews : Macromedia Flex :

Review: Macromedia Flex

Summary

Finally J2EE developers have a decent rich client development platform. Well, we almost do. Macromedia's new Flex offering - currently in Beta - looks to serve up a native J2EE rich Internet application development platform that uses the ubiquitous Flash Player as the rich client. Flex offers an XML- based scripting language that compiles Flash applets on the fly and can call on remote Web Services, EJBs and other Java objects. Component-based? Yes. Extensible? Yes. Customizable? Highly. Standards-based? Yup. Worth looking into? Definitely. More Information

Introduction

A lot was going on this year's MAX, Macromedia's annual developer's conference, last month, but the talk of the show was undoubtedly about Macromedia Flex. Currently in Beta, Macromedia Flex is a server-side offering that enables developers to deploy a rich client presentation layer using XML-based code. Simply put, Flex works much in the same way a JSP container does, only it compiles the script (currently referred to by its code name, MXML) into Flash clients instead of an HTML interface. The end result is a highly-customizable rich client interface that can be easily integrated and deployed in existing J2EE applications. Plus, Flex is 100% native Java and will be deployable in the major J2EE application servers, and even Apache Tomcat (there are plans for a .NET version in the future, as well).

The Case for Rich Clients

I have discussed this previously (see my Canoo ULC review), so I will do so only briefly here. The reality is this: HTML-based interfaces are clunky. Client-side activity and validation is unpredictable (Is JavaScript enabled? Does the client have a JVM to execute an applet?). Forcing entire page refreshes to simply send and receive a small piece of data is extraneous. In the end, the application and all of its users ultimately suffer. By integrating a richer client that is component-based, allows for a client-side data model (and client-side data interaction) and has the ability to call on remote services, we can develop applications that perform significantly better both in terms of utilizing client and server processing (HTML-based applications rely too heavily on the server) and in terms of fulfilling business objectives with our applications by providing better interaction.

Flex Overview

Flex utilizes Macromedia Flash Player to provide it's rich client interfaces. Macromedia Flash is a natural for the client. It is just about everywhere 98% of computers on the Internet have it. In the past couple of years, Macromedia has evolved Flash to incorporate a component architecture, standardized ActionScript to ECMA and provided XML parsing capabilities. In short, Flash has moved from a simple animation tool to a robust rich client development platform.

Even with these enhancements, traditional Flash development still doesn't easily fit into the J2EE development cycle very well. Client development must be done from within the Flash development environment, calling on Java objects and EJBs requires additional work and software (Flash Remoting) on the server, and learning Flash development requires time. Personally, I have found the traditional Flash development paradigm odd and unnatural, at least from a server-side programming standpoint. The timeline format is somewhat awkward, understanding where to put scripting and where to find it is somewhat confusing. It just doesn't make sense from a J2EE developer's standpoint. With Flex, however, it isn't necessary to use the Flash development environment. Developer's can simply use the MXML language, along with ActionScript, and Flex will compile the Flash application at runtime. This makes a lot of sense to me. Now I can easily develop and then deploy MXML (and thus Flash) files with my WAR and EAR files. There is even a custom tag that will allow developers to embed MXML scripts within JSP pages.

Components and Behaviors

Any rich client tool has to have a component model. The ability to reuse common components like drop-down boxes, data grids, trees, tabs and other UI elements is key. Additionally, developers will need to be able to customize these components to match their own layouts and also develop their own components. Flex has a slew of pre-built components in both types of Flex components: containers, which control layout in the Flash Player drawing surface, and controls, which are user interface components. Additionally, developers can extend these pre-built components or create their own using Flash or in MXML.

Flex also includes a number of pre-built behaviors. These behaviors are effects that are triggered by events within the Flash player environment. For example, a behavior might trigger a sound to play when the user clicks on a button.

Customizable Interface

There are a number of ways to tweak the look and feel of Flex applications. Flex supports cascading style sheets, which means developers have the option of using their existing style sheets for their rich Internet applications. Components have a skins properties that allow for easy alteration of their appearance. A particularly cool feature of Flex is its support of Scalable Vector Graphics (SVG) for rendering vector-based images and backgrounds from XML files.

J2EE/Standards Back-end

While a rich client interface allows for additional data and logic on the client side, the core business logic will invariable still reside on the server. Flex utilizes standards to call remote methods. Flex can call on SOAP-based Web services, Plain Old Java Objects (POJOs) and Enterprise JavaBeans (EJBs). For the J2EE developer, this is important.

Flex Development

Developing rich client applications should be seamless for the J2EE developer, this being a simple yet robust language and a good IDE. In the case of Flex, the MXML language is a straightforward tag-based language that can be supported with ActionScript's object-oriented scripting. Developers have a choice of development environments.

IDE Integration

Brady is the code name for a Flex development environment, also currently in Beta. Brady is essentially a version of Dreamweaver MX that includes support for MXML tags. However, I suspect that most J2EE developers will not be using this, however, and will instead opt for the Eclipse plug-ins currently in development in partnership with IBM. Also, because MXML is XML-compliant, any XML editor that supports schemas will support it. This includes popular XML tools such as Altova xmlspy, IntelliJ IDEA and Borland JBuilder, among others.

MXML

Let's take a look at the heart of Flex: MXML. The following code snippet is taken from the Macromedia Flex preview site:

<?xml version="1.0" encoding="iso-8859-1"?>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

    <mx:WebService id="wsStock"
wsdl="
http://services.xmethods.net/soap/urn:xmethods-delayed-quotes.wsdl">

        <mx:operation name="getQuote">
            <mx:request>
                <symbol>{symbol.text}</symbol>
            </mx:request>
        </mx:operation>
    </mx:WebService>

<mx:Label text="Enter a symbol:"/>
<mx:HBox>
   <mx:TextInput id="symbol"/>
   <mx:Button label="Get Quote" click='wsStock.getQuote.send()'/>
</mx:HBox>

<mx:Label id="quote" fontWeight="bold">{wsStock.getQuote.result}</mx:Label>

</mx:Application>

The results of this code can be seen in Figure 1.

Flex

You can see this XML code uses XML namespaces to declare mx as the tags. The root element is the mx:Application tag. The mx:HBox tag is used for layout purposes, mx:TextInput and mx:Button are form elements. mx:Label indicates where text will display. Pretty straightforward. Binding data is done using the curly brackets, e.g. {symbol.text} will output the text input in the symbol text input field. The mx:WebService tag performs a WSDL lookup on a remote Web Service. This is processed when the button is clicked. Note the behavior entered: click='wsStock.getQuote.send()'. This seems like a highly intuitive implementation at first glance. I look forward to getting deeper into the beta.

MXML includes intuitive methodologies for designing layouts, building UIs, performing validation and all of the important tasks that will be necessary in building rich client applications.

ActionScript 2.0

Finally, Flash's ActionScript 2.0 is fully supported by Flex. This means that developers have an object-oriented way to add granular functionality to their rich client applications. This can include anything from client-side business logic and flow control and more. Because is it based on the ECMAScript standard, ActionScript should be easy for Java developers to adopt.

Conclusion

Overall, I'm really excited about this new software. It is unquestionable that HTML-page based applications will be replaced by richer clients. I think it's about time that J2EE developers have a decent platform for rich client development - one that is component-based, extensible, intuitive and can be edited from within the development environments we are all used to. Macromedia's commitment to standards - CSS, XML, SOAP, SVG, etc. - is a welcome approach. Clients will have to have the Flash plug-in, but given its widespread usage and relatively small download size this seems a minor consideration. The only downside is that this product is currently only in Beta. Anyone interested in participating can apply at Macromedia.com. Happy Holidays and see you next month.

Applet Index
(sorted alphabetically)
A B C D E F G H I J K
L M N O P Q R S T U
V W X Y Z #s

The Java Source
(applets w/source code)
A B C D E F G H I J K
L M N O P Q R S T U
V W X Y Z

How to Add Java Applets to Your Site

New on the Java Boutique:

New Review:

Time Management Made Easy with the Quartz Enterprise Job Scheduler
Why not just use the Java timer API? This open source scheduling API boasts simplicity, ease-of-integration, a well-rounded feature set, and it's free!

New Applet:

Reverse Complement
Reverse Complement is a simple applet that converts DNA or RNA sequences into three useful formats.