This article is sponsored by Adobe.

---

Advertisements

Interested in Flex graphics? Check out the new book Flex 4 Fun by Chet Haase, available as a PrePrint™ from Artima Press.

As a rich-client development platform, Flex's realm occupies the territory between user interface-oriented designers and server-side developers. Since a Flex application executes in the Flash Player, it can make use of any asset targeting the Flash Player, such as Flash video, animations, or highly customized components, creating a possibly very rich user experience. At the same time, most Flex applications must access server-side data. Indeed, Flex has in recent years found a strong niche in business-oriented applications that present data in interesting and interactive ways.

Thus, even more than HTML- and CSS-oriented Web application development, Flex applications require both server- and client-oriented developer skills. Although the Flex developer's toolset has become increasingly powerful in recent years—there are Flex ports of the most popular Java testing and code quality tools, for example—Flex development tools have lagged far behind their more mature Java cousins in both quality and features.

In addition to developer tools, Java developers have been able to enjoy productivity boosts from the steady flow of high-level frameworks and APIs, such as Hibernate, JPA, JSF, and so on. Although Adobe, the instigator and main vendor behind Flex, has provided blueprint-style frameworks, such as Cairngorn, Flex developers had to, by and large, devise their own mini-frameworks and coding patterns.

The April release of the open-source Flex 4 SDK and the Flash Builder 4 IDE brought the Flex development landscape closer to what Java developers have come to expect. Flex 4 defines a new component architecture, Spark, that cleanly separates presentation-related application components from user interaction and business logic. Such a separation goes beyond what Java UI frameworks currently offer, for instance; it also directly facilitates the close collaboration of designers and developers.

Flash Builder 4, Adobe's Eclipse-based payware IDE, in turn, makes Flex development more productive, although still not as much pleasure as some Java development tools currently afford. The main new feature in Flash Builder 4 is full support for the new Flex 4 component architecture. Indeed, Flash Builder's project wizards provide a good introduction to the new Flex 4 features, such as Flex skins, item renders, and components.

For most developers, the main job of an IDE is to ease the common chores of working with code, especially on larger code bases. Because Flash Builder 4 is built on Eclipse 3.5, many development tasks are served by relevant Eclipse functionality, such as interacting with version control systems, managing workspaces, and configuring editor preferences.

On a purely coding level, Flash Builder provides but a fraction of features available in most Java IDEs. Refactoring, for instance, is limited to move and rename. Unlike FlexBuilder 3, Flash Builder can ably organize import statements and correctly reformat code. Code completion is much faster than in FlexBuilder, and Flash Builder, in general, has a snappier, more polished feel.

Some of that improved performance comes from a re-worked Flex compiler that uses clever optimizations and heuristics to reduce compilation times by several fold compared with the previous compiler generation. Since Flex development involves frequent edit-compile-execute cycles, Flash Builder's faster compiler alone is a significant productivity boost.

Developer - Designer Productivity

A key goal of the new Flex component architecture, Spark, is to make it easier for developers and designers to collaborate not only on visually rich applications, but also to enhance an application's user interaction model. Designer-developer collaboration is facilitated mainly by a shared project file format now supported by the latest-generation Adobe design tools, such as Illustrator and PhotoShop. A designer, for instance, can define visual skins for Flex components in Illustrator, and save the design artifacts in this shared project format. A Flex developer can open that project in Flash Builder and directly access the visual artifacts from within a Flex project.

In addition to providing graphic elements, a designer may also define feature-rich Flex components. Those component definitions are written as ActionScript or MXML files—MXML is Flex's domain language for user interfaces—that can be directly manipulated at the code level by a developer in Flash Builder. Such components and component skin definitions can also be shared between various Adobe design tools and Flash Builder.

Static images and graphics are but one aspect of the new designer-developer workflow in Flash Builder. Similar to components in most UI toolkits, Flex components are stateful: A button, for instance, may have a depressed and non-depressed visual state, and it may assume yet more nuanced states when the mouse moves over the component, or when the component is hidden from view. The Spark component architecture directly supports component states at the level of component skins. Designers can use other Adobe tools to define skins for various Flex component states and Flash Builder can connect those skins via its visual designer to the appropriate component state data.

Sophisticated Flex components not only define various skin elements corresponding to component states, but also the transitions from one component state to another. For instance, pressing a button may ease that button into its depressed state over time by playing an animation. Since component states, skins associated with states, and transitions from one state to another are tightly integrated and require careful orchestration, Adobe recently released Flash Catalyst, a tool specifically aimed at creating visually rich Flex components. Catalyst can work with Illustrator or PhotoShop files and projects as input, but yields more fully developed Flex component code. The Flex skin definitions developed in Catalyst can then be imported into a Flash Builder project.

Accessing Data

Over the past few years, Flex data access libraries matured both in scope and features. Although the initial release of the Flex SDK already included the ability to connect to HTTP and SOAP data sources, HTTP data access has been abstracted away into a few easy-to-use Flex APIs in more recent Flex SDKs.

There are at least two ways in which HTTP data access serves a Flex application. In the simplest and common case, a Flex client may open a connection to a remote HTTP service and retrieve JSON, XML, or any other data from that service for use inside the Flex client. Indeed, loading resources via HTTP is a common Flex development technique.

In some cases, however, a Flex client cannot directly invoke an HTTP service, perhaps due to firewall or some other security restriction. With the open-source BlazeDS server-side component, it is possible to proxy an HTTP service on the same server the Flex client was loaded from. In such a scenario, the server-side component forwards HTTP request to the proxied resource, allowing the Flex client to confine its network connections to a single server. Proxying HTTP services in this manner has been available since at least Flex 2.0, and is now even easier with Flash Builder's new data access wizards.

The emergence of BlazeDS is among the more interesting recent Flex developments. BlazeDS is an open-source Java component that facilitates message exchange with server-side Java classes from Flex clients. BlazeDS provides for synchronous and asynchronous communication modes, and polling as well as streaming message communication. In addition to exchanging messages, BlazeDS also includes a Java-to-Flex serialization framework. In addition to simple message exchange, BlazeDS defines a remote object invocation mechanism, allowing Flex clients to invoke methods on server-side Java objects. Remote method calls with BlazeDS take place via HTTP or HTTPS, making this communication method suitable across firewalls.

Flash Builder's data access wizards incorporating BlazeDS-based data access. A developer can point the wizard to the HTTP server endpoint of a BlazeDS configuration. That endpoint, in turn, publishes the various Java classes available for remote method invocation. Upon selecting one or more server-side Java methods, Flash Builder generates client-side proxy classes to facilitate the remote calls. Client-side ActionScript equivalents of the Java method parameter and return value classes are also generated. Since BlazeDS operates at the class file level, any JVM language can be used on the server, including JRuby or Scala, for example.

In addition to HTTP and remote Java classes, Flash Builder has similar wizards to invoke server-side PHP classes as well as ColdFusion objects. SOAP-based services can also be invoked, and Flash Builder provides a SOAP interaction wizard, too.

Testing and Debugging

In addition to the Flex SDK, many third-party open-source Flex APIs and libraries have been developing over the past few years. Those libraries include Flex ports of the most popular Java unit testing and code coverage frameworks.

While FlexUnit 3 has been a fairly feature-complete port of JUnit 3, the newly released FlexUnit 4 library provides features not found in JUnit 4, but that are more specific to unit testing Flex client code.

Similar to Ajax clients, Flex clients make extensive use of asynchronous access to server-side resources: the body of a Flex method frequently dispatches calls to network-bound resources, such as fetching files, XML or JSON data, or invoking remote Java objects via BlazeDS. A key characteristic of such method calls is that the operation set in motion by a method may not complete until after the local method has already returned. FlexUnit 4 provides a simple asynchronous testing framework to test just such methods: Test methods can be registered to listen for the results of asynchronous operations and report their results as those operations complete. Asynchronous test setup and teardown are also possible with FlexUnit 4. Flash Builder now includes templates that generate FlexUnit 4 code inside a Flex project.

Flash Builder also includes a new network debugger. Developers familiar with the open-source Firebug plug-in to Firefox will find familiar features in Flash Builder's network monitoring and debugging tool. In addition to reporting on minute details of remote network sockets opened from a Flex client, Flash Builder can measure and report on the network performance aspects of remote communications that can help optimize Flex application performance.

Resources

Flash Builder 4
http://www.adobe.com/products/flashbuilder

Flex SDK 4
http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK

Flash Catalyst
http://www.adobe.com/products/flashcatalyst

Talk back!

Have an opinion? Be the first to post a comment about this article.

About the author

Frank Sommers is Editor-in-Chief of Artima.