Joan has posted 1 posts at DZone. View Full User Profile

A Comparison of Flex 3 and Flex 4 beta

06.19.2009
| 31175 views |
  • submit to reddit

An overview of Flex 4 beta architecture changes

One of the major themes in the Flex 4 beta is "Design in Mind". This goal involves creating a smoother workflow between designers and developers. To help achieve this, the framework provides a clear separation of the visuals for a component and the rest of its behavior. In Flex 3, an individual component's code included logic around its behavior, layout, and visual changes. In Flex 4 beta, the components are factored out into different classes, each handling specific pieces of behavior.

As specified in the Gumbo Architecture Document:

"The main component class, the one whose class name matches the component's MXML tag name, encapsulates the core behavior of the component. This includes defining what events the component dispatches, the data that component represents, wiring up any sub-components that act as parts of the main component, and managing and tracking internal component state (we discuss states in more detail below).

Coupled with that component class is a skin class which manages everything related to the visual appearance of the component, including graphics, layout, representing data, changing appearance in different states, and transitioning from state to state. In the Halo model, Flex component skins were assets responsible for only one part of the graphics of a component. Changing any other aspect of a component's appearance, like layout or visualization of states, required sub-classing the component and editing the ActionScript code directly. In the Gumbo model, all of this is defined declaratively in the skin class, primarily through new graphics tags called FXG tags."

To learn more about the new graphics tags in Flex 4 beta, you can read the FXG 1.0 Specification.

As an example of the architecture discussed above, you can look at the code for the spark.components.Button class. This class only contains logic around the component's behavior. All of the visuals for this component are defined in the skin class spark.skins.default.ButtonSkin.

For performance reasons, the Flex 4 beta has provided building blocks for developers to pick and choose the functionality that you need. Heavyweight functionality such as scrolling and virtualization that is not needed by all applications is not turned on by default.

Namespaces and packages in Flex 4 beta

While keeping Flex 3 classes intact in the same mx.* packages, the Flex 4 beta introduces the spark.* packages for components, core classes, effects, filters, layouts, primitives, skins, and utils.

The Flex 4 beta provides a new set of components and effects that share many of the same class names as Flex 3 components. To avoid name collisions in MXML, the Flex 4 beta comes with four distinct namespaces: MXML 2006, MXML 2009, Spark, and Halo.

MXML 2006: The legacy MXML language namespace used in previous versions of Flex. Flex 3 applications compiled using Flex 4 beta can continue using this namespace.

URI: http://www.adobe.com/2006/mxml

Default Prefix: mx

MXML 2009: The new MXML language namespace. This is purely a language namespace, and does not contain component tags.

URI: http://ns.adobe.com/mxml/2009
Default Prefix: fx

Spark: This namespace includes all of the new Spark components. It should be used in conjunction with the MXML 2009 language namespace.

URI: library://ns.adobe.com/flex/spark
Default Prefix: s

Halo: This namespace includes all of the Halo components. It should be used in conjunction with the MXML 2009 language namespace.

URI: library://ns.adobe.com/flex/halo
Default Prefix: mx

Here is a small example that uses the MXML 2009, Spark, and Halo namespaces to create a simple Flex 4 beta application. This sample uses a Halo DateChooser and a Spark Button.

<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">

<mx:DateChooser id="main_calendar" x="20" y="20"/>
<s:Button label="submit" x="220" y="20"/>

</s:Application>

Flex 4 beta has also added multiple namespace support in CSS. If you are using the MXML 2009, Spark, and Halo namespaces along with Type selectors, you will need to define a set of namespaces in your CSS definitions to avoid name collisions.

Here is an example of CSS that uses type selectors for both Halo and Spark components:

<fx:Style>

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";

s|Button {
color: #FF0000;
}

mx|DateChooser {
color: #FF0000;
}

</fx:Style>
Default Property and the Declarations tag

Prior to the release of the Flex 4 beta, the Flex language allowed the Application root tag to include visual children and non-visual children. The visual children were added to the Application with addChild() and non-visual children were treated as property declarations. Going forward, non-visual children that represent new property declarations are not allowed as immediate children of an Application. You can add these non-visual children under a <fx:Declarations> tag. This includes non-visual children such as effects, validators, formatters, data declarations, and RPC classes. Here is a short example:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Declarations>
<s:Fade id="fadeEffect" target="{targetButton}" alphaFrom="1" alphaTo="0" />
</fx:Declarations>
<s:Button id="targetButton" />
<s:Button label="play effect" click="fadeEffect.play()" x="80" />
</s:Application>

 

References
Published at DZone with permission of its author, Joan Lafferty. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags: