For improving the look and feel of browser-based applications, AJAX technologies work wonders, but RIAs (rich Internet applications) take the browser to a whole new level. RIAs deliver a consistently richer user experience, with functionality and data access more closely approximating native desktop apps.
Adobe Flex Builder 3.0 is an Eclipse-based IDE for building RIAs on Adobe’s Flash platform and the open source Flex SDK. Although you could use any text editor to cobble ActionScript and MXML into a Flex app, Flex Builder 3.0 delivers a streamlined experience for RIA development and Flex project code management.
Flex Builder provides easy graphical tools for laying out rich Web GUIs, generating the underlying MXML code. It shines for creating real-time dashboards, thanks to graphing and charting widgets. Plus, you’ll find plenty of community demos at Adobe Developer Connection to help jump-start your efforts.
I’m very impressed with the additions in this release. The highlights include better visual layout tools and more control over CSS, new wizards for WSDL introspection and back-end data connectivity, and plug-ins that augment workflow between developers and design teams running Adobe Creative Suite 3 applications (such as Flash, Photoshop, Illustrator, and Fireworks).
The WSDL introspection wizard makes it easy to pull together ActionScript and Web services inside Flex, while the CS3 plug-ins provide MXML-savvy templates that allow CS3 users to create Flex controls with familiar tools, versus learning to design directly in Flex.
In the Professional edition, which is the version I tested, additional goodies include performance and memory profiling tools — great for troubleshooting bottlenecks and memory leaks — and a plug-in for HP/Mercury QuickTest Professional that facilitates automated unit testing.
In all, these new features go a long way toward getting higher-quality applications into production faster. Other improvements, such as real-time charting and advanced data grids, help give your Web apps more dimensions and additional polish.
One of the most notable additions is support for Adobe AIR 1.0. The new Web-to-desktop runtime lets developers package a host of Web technologies, ranging from HTML and CSS to AJAX and Flash, into an application that can run right on the user’s desktop — sans browser — and look and behave like local apps, even functioning when offline.
Flex-ible construction
The Flex Builder 3.0 IDE sports the typical accoutrements, including code and graphical views, a controls palette, project hierarchy and debug views, and a properties panel. Anyone familiar with Eclipse will feel right at home.
Visual Studio developers may miss such features as the ability to split code windows or to simultaneously display code and layout windows as in Dreamweaver, but these are minor issues. I easily jumped into UI creation, dragging components for layout, navigation, and data access from the pallet to the work canvas.
Flex projects can be geared for the Web (Flash player) or the desktop (running on AIR). Creating an AIR project revealed additional pallet components for working with native file systems (tree, list, history) and for embedding an HTML browser into the application — useful for quick import and redeployment of existing Web site assets to the desktop. Again, Builder generates all the MXML design code.
You can create custom chromes for your GUI and programmatically control view states, but the process for embedding dynamic assets, such as ActionScript-based Flash files or data-driven charts, could be much smoother.
For example, you can easily skin a project using Flash SWF files, and import them simply as static files (perfectly understood by Flex).
But using Flash in combination with ActionScript to produce a dynamic interface requires several downloads (including the Flex Component Kit for Flash and Flex Skin Design Extensions for each app of the CS3 suite), defining a Movie Clip class in Flash, and then exporting the result as a SWC file — which creates a separate Flex-native component. It’s not difficult to do, exactly, just unnecessarily convoluted.
That said, the extensions for CS3 provide numerous templates (for buttons, data grids, menu bars, tree hierarchies, collapsible accordion menus, and so on) that helped kick off interface creation.
Builder, of course, provides direct access to ActionScript and MXML code for manual tweaking. The IDE boasts all of the aids you would expect, including code assist, auto-completion, and so forth. Adobe has improved change management in Builder with a nice code refactoring mechanism, and the tool offers good separation between design interface and business logic.
I greatly appreciate the new wizards for WSDL introspection, working with AJAX libraries, and connecting with back-end data sources — a boon to turning out real-time charts and dashboards. Flex supports both SOAP and REST (Representational State Transfer) Web service invocations, and wiring service calls through ActionScript has never been easier.
Builder also offers good support for server technologies, including ASP.Net, ColdFusion, J2EE, and PHP. Flex can pull remote objects via Adobe LiveCycle or ColdFusion’s Flash Remoting.
Bend, don’t break
Flex Builder Professional is more than double the price of the Standard edition, but for my money, it’s the one to buy. Pro gives you good debugging additions and other benefits such as application profiling.
Flex profiling shows the duration of method calls, call paths, object sizes, as well as stack and garbage collection traces. I was able to see into the SWF black box and glean insights that I could use to slim down my application and improve performance. Adobe also includes some decent best-practice guidelines to help developers optimize performance.
ActionScript may not provide all the power and finesse of mainstream languages, but it’s no slouch. Developers will find class-based inheritance, namespaces, and type checking that help up the sophistication and should meet even the most stringent requirements for a wide variety of customer-facing applications.
I would like to see Adobe add a service monitor framework for both Flex and AIR applications. In addition to general monitoring of available network services, OS-aware monitoring components built into AIR applications could be used to make real-time performance adjustments.
Also on my wish list: I’d like to see time-based effects and other component behaviors accessible via the Design view, rather than forcing hand-coding. Further, although being able to convert Flex projects to AIR apps is nice, the process involves first creating an AIR project and then importing the Flex assets. It would be preferable to simply export to AIR.
Further, although Adobe has done a good job pulling together the design- and developer-minded approaches, some of the implementation here feels clumsy — especially compared to the tight integration Microsoft has achieved between Silverlight and the Expression and Visual Studio development environments.
The new links between Flex Builder and the CS3 suite are a good start, but more is needed to successfully bridge the packages.
To this end, Adobe is not sitting still. Adobe Thermo is the code name for an advanced UI development tool aimed at improving the ties with the CS3 Suite, promising to streamline interface development with features to build in programmatic aspects more rapidly.
Finally, although this version of Flex Builder is available for Mac and Windows only, Adobe is hard at work on a Linux edition to support the forthcoming Flash and AIR runtimes for Linux, which are slated for release by year’s end. Meanwhile, alpha builds of the runtimes and IDE are available at Adobe Labs.
I have reviewed every major release of Flex Builder for InfoWorld’s pages, and I’m more excited than ever by the current state of the art and the future prospects for RIA, as well as Adobe’s vision for AIR on the desktop. Adobe Flex Builder 3.0 offers a comprehensive, relatively inexpensive means of jumping into RIA with only a modest learning curve.
If you’re aiming to improve the user experience of a customer-facing app, or looking for a more flexible way to create executive dashboards and other data-driven, visual interfaces, I highly recommend you give Adobe Flex Builder 3.0 a try.
