What’s New and Cool in Flex 4?By Andrew Muller
The release of Flex 4 beta 1 has been some time coming. It has had a very public development process which began back in August last year, when Adobe revealed early builds of Flex 4 – previously codenamed Gumbo – on their open source site. While some of the Flex 4 feature set has undergone modification and refinement during that period, most of the early features are still there. In this article, we’re going to go through some of the more significant changes you’ll find in Flex 4.
At the end, there’s a quiz – test your knowledge of Flex 4, and you’ll be in the running for a copy of Flex Builder 3 Standard, with a free upgrade to Flash Builder 4!
Namespaces are used by Flex for a number of reasons: to identify the version of the language being used, to give a scope with which we can map an XML tag to a specific ActionScript class, and to tell the compiler the location for custom components. Flex 4 has been updated to the new MXML 2009 namespace, which now contains new language tags. Components are now declared in their own namespaces, with the Flex 3 (Halo) and the Flex 4 (Spark) components each having their own namespace.
This means that the application file will now potentially have three namespace declarations within the Application tag:
Observant readers will have noticed that the new MXML 2009 namespace is prefixed with
fx. It’s used for special language entities; some you’re already familiar with while others are new with the introduction of Flex 4.
Many Flex 3 tags have Flex 4 equivalents, but some new language tags have been introduced as part of this namespace. These include:
fx:Declarationsis used to define non-visual children of the application that represent property declarations; these are now no longer permitted to be under the application root on their own. One example would be the declaration of service calls, for example,
fx:Privateis used to store information that will be ignored by the compiler, such as developer details and version numbers. It's also used to store design-related information that's unnecessary to the operation of Flash Builder or the compiler. It's likely that this tag will contain additional data that's unique to a tool capable of exporting design content, such as Illustrator, which could be used by various Adobe tools as part of a Flash Catalyst workflow - more on that later.
fx:Libraryis used to define and store graphical
fx:Definitionchildren, which can be reused within the application. Graphical objects created in
fx:Libraryare only instantiated when they're used.
Let's put all these together with a sample. The code in Listing 1 demonstrates the use of the
fx:Privatetags: it renders two yellow stars that "sandwich" a square with a black to transparent gradient fill.
Flex 4 will make good use of FXG, the new graphics interchange format used with the CS4 graphics applications. Flex 4 and Flash Player 10 can together render FXG graphical elements. These include:
- graphics and text primitives
- fills, strokes, gradients, and bitmaps
- support for filters, masks, alphas, and blend modes.
FXG graphical elements can be used in Flex 4 in a number of ways. The example code above includes two FXG elements, a square, and a star. FXG elements can be used within an MXML file or component and can also be saved as an .fxg file format. The CS4 tools will typically export an FXG using the FXG 2008 namespace. Because these files are designed to be shared between graphical applications, you'll find that they have a stricter format to what's used in Flex; the Flex compiler will only use the FXG-specific tags. Adobe's new application, Flash Catalyst, will make it easy to create FXG graphics compatible with Flex 4, which you can then use to complete your application's user interface and appearance.
New effects have been added to Flex 4 that can also be applied to FXG graphical elements. These new effects will work on both new and old components alike. Standalone effects must now be declared within
fx:Declarations tags instead of the body of the application. Once again, Flash Catalyst has additional tools to help make using these effects easier.
CSS handling has also had improvements made in this new release. One of the reasons for this is that CSS has a more important part to play in the skinning of components. Additional selectors have been added, including an id selector and a descendant selector, which may be applied to components; this allows you to apply a style to a component depending on if they descend from a particular component, for example, a
Button that is a descendant of an
HBox. If you're familiar with descendant CSS selectors, you should find this an intuitive way to deal with these components.
In Flex, you choose components by their layout properties as you build them: a
Canvas will give you absolute
x, y positioning, a
VBox's contents are laid out in a vertical stack, an
HBox sets its contents out horizontally, and the Application tag offers a choice of all three layout options. The new
layout tag in Flex 4 also offers the choice of all three layout options; its purpose is to decouple the layout rules from individual components, giving developers control over the positioning of a component's children. One advantage is that layouts can be defined, changed, or removed at runtime for a component.
The sample code below specifies a vertical layout, and will display two buttons stacked vertically within the application:
<?xml version="1.0" encoding="utf-8"?>
<s:Button label="button one"/>
<s:Button label="button two"/>
Ask most Flex developers about view states, and they'll tell you that these are best created with Flex Builder. In Flex 3, states described how visual elements may be added or removed programmatically from the visual layer, with similar tags for modifying styles, properties, and events. States mean effective changes to the UI can be made in Flex with efficient reuse of visual elements.
The reason why it's been easier to use Flex Builder for this process is that the IDE is able to record the various steps required to change states and translate those changes into the necessary code. You could write the same code that it generates yourself, but why would you? It takes a tremendous amount of time to work out the order of what's going to happen.
Now, states have been updated for Flex 4: the tags previously used have been deprecated and the changes required for the various states are now elements of the visual components that you use. Components now always exist, instead of being programmatically added when switching to a specific state. This means that there are no more failures due to missing variables, as there were in the past. While it's likely to still be faster to manage states visually, the way that changes are applied in your code is more logical.
The states themselves are created in a similar fashion to Flex 3; each is defined with a
State tag nested within a pair of
states tags. In the past, a base view state had to be defined explicitly by setting a
currentState attribute - instead, the first state is considered the default.
RemoveChild classes from Flex 3 have been replaced with the
excludeFrom MXML tag attributes, both of which can be comma-separated lists of multiple states if required. The visual
SetStyle classes, as well as the
SetEventHandler class, have been replaced with a new
Let's see an example, shown in full in Listing 2. Note the definition of the two states in the code - one for the default state, and one to be shown once the form has been submitted:
We can also see that the
Label component has a text value defined for
<mx:Label id="formLabel" x="20" y="16" text.defaultState="Your name:"/>
Also note the
includeIn attribute on the
TextInput - it is only set to appear while we're in the
<s:TextInput id="formInput" x="97" y="15" includeIn="defaultState"/>
Button has attribute changes for different states: its
y attributes are changed for the
formSubmit state using a dot notation; that is,
x.formSubmit="20". The Button also has two click event handlers, one for each state, with the second one used to change back to defaultState:
<s:Button id="formButton" x="295" y="15.5" label="Submit"
label.formSubmit="Again" x.formSubmit="20" y.formSubmit="38"
Those were just some of the features that you'll use on a day-to-day basis with your development in Flex 4. This beta release is a significant upgrade to Flex; a lot of the changes will make Flex development easier and give you more creative control over your project. We'll be sure to see some new and exciting uses of the technology as Flex fans become acquainted with these excellent new features. You can keep up to date with Flex 4 and grab the Flex 4 beta SDK at Adobe Labs.
Feeling confident? Test your knowledge of what's new in Flex 4 with our quick quiz. Three lucky entrants will win a copy of Flex Builder Standard, with a free upgrade to Flash Builder 4!