Adobe Flex 4 SDK beta review

Adobe has shrunk the distance between design and development with its latest batch of RIA tools: Adobe Flex 4 SDK, Adobe Flash Builder 4 (the Flex Builder IDE renamed), and Adobe Flash Catalyst, all recently made available in public beta.

If only it were as easy to build a web application as it is to design one in Adobe Illustrator and Photoshop. Maybe it will be someday, and maybe that someday is closer than we might think.

Adobe has certainly succeeded in shrinking the distance between design and development with its latest batch of RIA tools: Adobe Flex 4 SDK, Adobe Flash Builder 4 (the Flex Builder IDE renamed), and Adobe Flash Catalyst, all recently made available in public beta.

The new kid on the block is Adobe Flash Catalyst, previously code-named Thermo. By allowing you to import Illustrator or Photoshop artwork and turn them into interactive Flash, Catalyst jumpstarts any Flex project. We can't overstate how accessible and easy to use we found Flash Catalyst.

Using Adobe Flash Catalyst's pallet of UI components (scrollbars, buttons, data lists, and so on) and other tools, we were able to graphically construct a data-ready interface from scratch within minutes. Page and button states were quick to customise; even glitzy transitions such as fades and slides were a one-click cinch to apply.

Adobe Flex 4 SDK: design to build

Adobe Flash Catalyst reads Adobe's new static XML graphics interchange format, FXG, so importing bitmap and vector images from Creative Suite 4 applications (Illustrator and Photoshop) is a snap. Elements altered in Catalyst can still be edited back in Illustrator and Photoshop tools. And you can include "design time data" to give designers a view of actual data formats.

To be sure, Adobe needs to fill out the Adobe Flash Catalyst asset library with more controls, containers, and prefab layout grids - but this is a nice showing.

Meanwhile, under the hood, Adobe Flash Catalyst generates the Flex code behind the user-interface components, which developers can import into Flash Builder 4 and combine with the business logic.

We liked the ability to isolate code by page (or state) in the Flash Builder 4 IDE (known as Gumbo). Because a single Catalyst FXP file contains the code for every state of the entire interface, it can become cluttered. To streamline navigation and comprehension of the design, developers can isolate by state and view only the code relevant to the page they're working on. We'd like to see the code actually collapse too, rather than just gray out.

Flash Builder 4 brings new tools to data-centric workflows, rounding out the coding and design focus of its predecessor, Flex Builder 3. Builder 4's new data service wizard makes very quick work of importing and introspecting back-end services and binding them to UI objects. In addition to PHP, web services, and HTTP services, Builder also supports BlazeDS, LiveCycle Data Services, and ColdFusion.

Just by dragging and dropping, we were able to take a standard query function on my data source, import it into Builder, and bind the result to a data grid in my Flex UI in no time at all. Builder inserted the code that manages behind-the-scenes data fetches, as well as the updates between my master/detail paging.

We could even choose to track changes to the local data store, and undo changes before manually committing updates to the server, reducing the number of round trips. This is a great improvement for interacting with large data sets via a Flash GUI.