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

A Comparison of Flex 3 and Flex 4 beta

  • submit to reddit

Changes in effects

Many improvements have been made in the Flex 4 beta effects infrastructure. While Halo effects will only work on controls based off of UIComponent, the Spark effects can operate on any target including the new graphic primitives in the framework. All of these effect classes live in the spark.effects.* package. Because Spark effects work on Halo components, Spark components, and graphic primitives, Adobe recommends that you use Spark effect classes for future applications.

I've kept this description brief because you can get much more information about the new functionality in the effects classes from Chet Haase's Effects in Adobe Flex 4 SDK beta article.

Changes in layout

In previous versions of Flex, the layout of components and containers were defined inside individual controls. Therefore, you had components such as List, TileList, and HorizontalList, which all share the same functionality except their layout. Still, their layout logic was defined within these component classes. In the Flex 4 beta, layout has been decoupled from components. Now, Spark components such as Application, List, ButtonBar, and Panel can define their layouts declaratively. In all of the components, containment is managed by the Group class and the layout of the Group's children is delegated to an associated layout object. The layouts support both Spark and Halo components in addition to the FXG graphic primitives. Layouts can even be changed at runtime.

As a developer, you can easily write custom layouts and swap them in and out of various individual components. Here is an example of defining a vertical List, horizontal List and a tiled List.

Vertical List (the default layout of a Spark List is VerticalLayout):

<s:List />

Horizontal List:

<s:HorizontalLayout />

Tiled List:

<s:TileLayout />

As I noted earlier, the Flex 4 beta architecture is set up to provide developers with building blocks to pick and choose what functionality they need. By default, virtualization and scrolling is not turned on. To add the option for scrollbars on a Group and turn on virtualization, you will need to:

1) Set useVirtualLayout to true on your layout object 2) Add a Scroller component to your Group.

Here is an example of using virtualization and scrolling on a Spark Panel:

<s:Panel title="Horizontal Panel" width="300" height="220" left="20" top="20">
<s:Scroller width="100%" height="100%">
<s:HorizontalLayout useVirtualLayout="true" />
<s:TextInput />
<s:Button label="clear" />
<mx:DateChooser />
<s:Button label="submit" />

For more information regarding all of the enhancements in the Flex 4 beta layouts including better support for transformations, check out the Spark Layout Specification.


Working with text

All of the Spark components use the new text engine in Flash Player 10. These new classes offer low-level support for controlling text metrics, vertical text, typographic elements such as ligatures, and bidirectional text. Additionally, device fonts now have most of the functionality of embedded fonts that can be anti-aliased, rotated, and styled. The Flex 4 beta has leveraged this functionality in all of the Spark components that use text. For more information on the text primitives and text components provided in the Flex 4 beta, see thethe “Text primitives” section of the Flex 4 Features and Migration Guide.

The Spark components also now use the DefineFont4 embedded font format in Flash Player 10 and AIR 1.5. As of the current beta, Halo components do not have the capability to use the DefineFont4 format. This causes some overhead when mixing Spark and Halo components in an Application and embedding fonts. For now, if you want to use the same embedded font for all of your components, you will need to embed the font twice using DefineFont4 for Spark components and DefineFont3 for Halo components.

Here is an example of embedding the font Arial for a Flex 4 beta application that uses a Spark TextInput and a Halo DataGrid.


@namespace s "library://";
@namespace mx "library://";

@font-face {
src: url("arial.ttf");
fontFamily: "ArialDF3";

@font-face {
src: url("arial.ttf");
fontFamily: "ArialDF4";
cff: true;

s|TextInput {
fontFamily: "ArialDF4";
fontAntiAliasType: "normal";
mx|DataGrid {
fontFamily: "ArialDF3";
fontAntiAliasType: "normal";

Notice that when embedding fonts for Spark components, you need to specify cff: true in the font definition.

Solutions for embedding fonts for Spark and Halo components are under development, so this process should be easier in the future.

Backwards compatibility with Flex 3

As in Flex 3, you can compile your application with an additional compile argument:


This compiler argument will allow your applications to use some of the Flex 3 behavior instead of the new Flex 4 beta behavior. To get a full list of backwards compatibility changes in Flex 4 beta that support the use of the -compatibility-version argument, see the backwards compatibility document.

Note: You cannot selectively keep a subset of the Flex 4 beta behavioral changes when invoking Flex 3 compatibility. If you compile with the argument -compatibility-version=3.0.0, you will get all of the Flex 3 behavior described in the documentation.

Where to go from here

Hopefully, the migration from Flex 3 to the Flex 4 beta is relatively painless. The framework is designed to be mostly backwards compatible. Plus, once you get acquainted with the new architecture, you'll find that it is more ‘flex'ible! For more info on Flex 4 beta features, visit the web Help.


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.)