This summer brings the first full public preview of Adobe Flex 4 (codenamed Gumbo). The Flex 4 beta comes with a number of significant updates and enhancements to the platform. Adobe’s primary goal with Flex 4 is to provide support and integration with Adobe Catalyst an interactive design tool aimed at closing the gap between developers and designers.
What is Adobe Flex?
Adobe Flex is a popular framework for building Rich Internet Applications (RIAs). The Flex framework is used to create SWF files that run inside the Adobe Flash Player. Flex was built for use by developers and follows traditional application development paradigms, rather than the timeline-based development found in the Flash Professional authoring tools. Flex applications are built using the Flash Builder IDE – a mature Eclipse-based development environment. ActionScript 3, the Flash Player programming language, is used to access data and build user interface components. The Flex Framework also uses a declarative XML language, MXML, to simplify Flex development and layout.
In addition to the client side framework, Adobe offers enterprise infrastructure for building Flex applications with their Blaze Data Services (open source) and LiveCycle Data Services (commercial) products for remoting and web messaging. Adobe has found a compelling balance in their Flex offerings, as the Flex SDK and Blaze Data Services products are open source and freely available, while the Flash Builder IDE and LiveCycle Data Services products are commercially licensed.
Flex 4 Overview
Now that you have a brief understanding of Adobe Flex, it is time for an overview of the changes in Flex 4. With Catalyst in mind, Adobe is introducing a new set of components, and more importantly an entirely new component architecture. Additionally, they are updating the MXML language, integrating FXG, and Flash Builder 4 (formerly Flex Builder). With all of these changes, Flex 4 applications fully support and require Flash Player 10.
Since the earliest releases, Flex has included a full set of high-level user interface components. Components such as buttons, drop down lists, date choosers, rich text editors, and data grids, have enabled the creation of high quality interfaces. Because Flex components are implemented in ActionScript 3, an object-oriented programming language, it has always been possible to extend and combine the standard library components to create custom components. Yet, with Flex 3, this process is often cumbersome because the core logic is too tightly coupled to the look and feel.
A major initiative in Gumbo is to make components more extensible and more toolable by breaking out the different behaviors of the components: separating out core logic, layout, and skinning. In Gumbo, the component architecture is known as Spark, and is built on top of the Flex 3 component architecture, called Halo, by extending from Halo’s main base class UIComponent. This allows Halo and Spark components to coexist and provides an incremental adoption path. For backwards compatibility, the Halo components still exist in their Flex 3 form, while the component library has been re-implemented for Flex 4 in the “spark.components” package (see the MXML 2009 section for details). In many cases, the new components look identical to the old components, and some, like Button, even have the same name.
With the re-architecting of the Flex components, the major focus is clearly the designer and the designer-developer workflow. Fortunately, it also gives a big boost to Flex developers, as better separation of concerns makes for more productive development and more maintainable code.
Let’s jump into the details by beginning with a review of the layout changes. In Flex 3, layout was embedded directly into the container implementation. For example, one would use the VBox container to layout children vertically, or the HBox container to layout children horizontally. In Gumbo, layout is no longer defined by the container, but is handled through delegation. As you see in Figure 1, that means that the desired layout is defined in a separate layout section of the MXML.