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.
<s:Panel title="My Panel" width="320" height="200">
<s:VerticalLayout paddingTop="5" paddingBottom="5" gap="10" />
<s:Button label="Button 1" click="myclick(event);" />
<s:Button label="Button 2" click="myclick(event);" />
<s:Button label="Button 3" click="myclick(event);" />
Figure 1: Layout Example
The code from Figure 1 has three Buttons being laid out vertically inside of a Panel. If a layout is not defined, the container defaults to a positional layout, specified by BasicLayout, which is identical to the Flex 3 Canvas container. In a positional layout, each child must specify its "x" and "y" coordinates relative to the container. The experienced Flex developer will also notice that the padding properties are set on the VerticalLayout definition, not on the Panel definition, as they would have been in Flex 3. Like all layout classes, VerticalLayout extends from "spark.layouts.LayoutBase." The framework includes the following layouts: BasicLayout, ButtonBarHorizontalLayout, HorizontalLayout, TileLayout, and VerticalLayout. Custom layouts can be created for use with any Spark container simply by extending the LayoutBase class.
With the revamped approach to layout in Gumbo, the familiar Flex 3 containers are no longer needed. In Flex 4 development, the "spark.components.Group" class can be used to manage sets of visual children. The Group class inherits from Halo's UIComponent class (Group -> GroupBase Inheritance-> UIComponent), and may contain UIComponents, Flash DisplayObjects, or IGraphicElements (the base class for FXG assets – see the FXG section for details). Groups can have layouts just like containers.
The other major Gumbo base class that many of the components inherit from is the "spark.components.supportClasses.SkinnableComponent" class, and as the name implies these components are fully skinnable: the look and feel can be changed without changing the behavior. This is accomplished by breaking out the skin into its own source file. The core logic remains in the class with the component's name, and does things like dispatch events, manage state, and wire sub-components together. The separate skin extends from "spark.components.supportClasses.Skin," and manages things like colors, fonts, skin states, and skin state transitions.
Since Flex is open source, we can just look at the code to see how it all fits together. For example, looking at Button, we see the core logic in "spark/components/Button.as," and the skin in "spark/skins/default/ButtonSkin.mxml." Skins are applied to components via CSS. Figure 2 show a CSS snippet from the default.css file where ButtonSkin is applied to the Button class. Overriding the default skin is as simple as overriding this CSS definition with your own, and including a custom skin.
Figure 2: CSS snippet applying ButtonSkin to the Button class
In addition, to the numerous changes around existing functionality in the Flex framework, Flex 4 also includes a set of new text classes, such as SimpleText and RichText. The new text classes take advantage of the new Flash Text Engine capabilities in Flash Player 10. These classes will help to address a major pain point in Flex 3 applications, as it was difficult to deal with large bodies of text in previous versions of Flex.
For a more detailed overview of the Spark Component Architecture, see the following white paper on opensource.adobe.com.
To review, MXML is the declarative mark-up language that provides a high-level abstraction on top of ActionScript to make layout cleaner and easier, along with tooling in both Flash Builder and Catalyst. In Flex 4, new namespaces lead the list of MXML enhancements, giving the new Gumbo components a place to live, while maintaining backwards compatibility with Flex 3 components. Thus, a Flex 4 application can include both new Spark components and old Flex 3 Halo components.
<?xml version="1.0" encoding="utf-8"?>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
<s:Button label="Spark Button" left="10" top="10" />
<mx:Button label="Halo Button" left="10" top="40" />
Figure 3: MXML code using both Halo and Spark components
Figure 4: Resulting Application
Figure 3 shows an example of using both Halo and Spark components in the same application. In Flex 4, there are two new MXML namespaces: fx for MXML 2009 and s for the new Spark components. Also, the legacy Flex 3 mx namespace, has been preserved. As Figure 3 shows, namespaces are used not only in MXML, but also in CSS, to support full interoperability between components.
Other notable MXML 2009 additions include Declarations, Library, Definitions, and Private. The Declarations tag is just a placeholder element to contain all non-visual elements like formatters and effects. The Library tag, and nested Definition tags, are used to create re¬usable graphic elements, or "symbols." Lastly, the Private tag is completely ignored by the complier and as such, is a good place to store structured metadata about the document, like author and date.
Flex 2 introduced the concept of view states, allowing different views of a component to be managed as state changes. States in Flex are conceptually divided into two groups: component states ("over" or "down" on a Button) and application states ("login" or "home"). The legacy state syntax in Flex 3 required components and properties to be modified within the state block. This was out-of-context, often verbose, and frequently confusing. Flex 4 introduces a new inline syntax that is both flexible and terse.
<mx:State name="A" />
<mx:State name="B" />
<mx:State name="C" />
<s:Button label="Button" label.B="State B" includeIn="A,B" />
Figure 5: MXML snippet defining States and showing the new inline state syntax
Figure 5 shows an example of the new inlinie syntax on a Button component. The button will be included in states A and B, and its label property will be modified in state B.
FXG is a new XML-based vector graphics format for Flash and Flex applications. The format is similar to SVG, which has been a part of the Flash Player for years. FXG targets the advanced vector drawing capabilities of Flash Player 10. FXG's primary purpose is to provide a graphics interchange format that various tools can read and write without having knowledge of Flex or ActionScript. Thus, it provides an important bridge between Flex, Catalyst, and other Adobe tools, like Illustrator CS4.
FXG also offers advantages to the developer. First, because it's an XML-based format, it's easy to include in source control. Second, it maps directly to MXML, so you can take a FXG file exported from Illustrator, throw away all the meta information, and include it inline with your MXML code. And finally, it just makes sense. Any developer can read FXG code because it's just shapes, images, text, transforms, and filters. The primitive shapes are rectangles, ellipses, lines, and the powerful Path element. Furthermore, FXG supports the full set of affine transforms like scale, rotate, skew, plus all filters from Flash Player 10, like glow, blur, and drop shadow.
In Flex applications, FXG is also called "MXML Graphics." FXG and MXML Graphics are basically the same. The major difference is that MXML Graphics can be altered at runtime, while FXG files are composed of static assets. Figure 6 provides an example of a simple red square in FXG, written as MXML Graphics inside a vanilla MXML application.
<?xml version="1.0" encoding="utf-8"?>
<s:Rect width="100" height="100">
<mx:SolidColor color="#ff0000" />
Figure 6: MXML Graphics Example
Next, Figure 7 includes the same red square drawn in Adobe Illustrator CS4 and exported as a FXG asset
<?xml version="1.0" encoding="utf-8" ?>
xmlns:ai="http://ns.adobe.com/ai/2008" version="1.0" ai:appVersion="188.8.131.527" d:id="1"
<Group d:id="2" d:type="layer" d:userLabel="Layer 1">
<Rect width="100" height="100" ai:knockout="0">
...more Illustrator metadata... </Private> </Graphic>
Figure 7: FXG / CS4 Example
To learn more about FXG see the published specification.
Flash Builder 4
Flash Builder, previously known as Flex Builder, is the main tool developers use to build Flex and AIR applications. The Eclipse-based integrated development environment (IDE) offers editors for MXML, ActionScript, and CSS. In addition, it includes a step through debugger, visual design tools, and includes a memory and performance profiler in the professional version.
Along with a shiny new name, Flash Builder 4 includes significant tooling enhancements to almost every aspect of the IDE. First, enhanced refactoring and code generation support make common tasks like wiring an event handler to a MXML control much easier. Second, runtime tooling has received updates to both the Debugger and Profiler, and a new Network Monitor tool has been added. Finally, the integration of unit testing into Flash Builder, plus the new FlexUnit 4 release, have brought excellent testing support to the IDE.
The changes in Flex 4 represent a large step forward for application development on the Flash platform. The new Spark component architecture breaks out the major behaviors each component exhibits, making tasks like skinning components much easier, and thus, greatly simplifying the workflow between developers and designers. In addition, MXML has been updated to support new features in Flex 4, while maintaining backwards compatibility with the previous version of Flex. FXG has been introduced to add a powerful graphics format for exchanging assets between the different Adobe design and development tools. Lastly, the Flash Builder IDE has been updated to meet the demands of enterprise software engineers. The wide-range of updates in Flex 4 signify another step forward in the maturing Flex framework.
Jon Rose is an enterprise software consultant and Flex Practice Director at Gorilla Logic, Inc. (www.gorillalogic.com) located in Boulder, Colorado. He is an editor and contributor to InfoQ.com, an enterprise software community. He is the co-host of DrunkOnSoftware.com, a videocast for those who like booze and bits. He has worked with clients large and small in both the private sector and government. His love of solving problems drives him to build quality software. You can read his blog at: http://ectropic.com.
Justin Shacklette is a senior software engineer at Gorilla Logic, Inc. (www.gorillalogic.com) He is passionate about all things new, especially learning new stuff and teaching it to others. You can read his blog at: http://saturnboy.com.