What’s New and Cool in Flex 4?

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

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:

<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"> 

</s:Application>

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:Declarations
• fx:Private
• fx:Library

fx:Declarations is 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, RemoteObject, WebService, and HTTPService.

fx:Private is 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:Library is used to define and store graphical fx:Definition children, which can be reused within the application. Graphical objects created in fx:Library are 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:Library, fx:Definition, and fx:Private tags: it renders two yellow stars that "sandwich" a square with a black to transparent gradient fill.




Declarative Graphics



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.

Layouts

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: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">  

    

  <s:layout>  

    <s:VerticalLayout/>  

  </s:layout>  

    

  <s:Button label="button one"/>  

  <s:Button label="button two"/>  

    

</s:Application>  

States

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.

The AddChild and RemoveChild classes from Flex 3 have been replaced with the includeIn and excludeFrom MXML tag attributes, both of which can be comma-separated lists of multiple states if required. The visual SetProperty and SetStyle classes, as well as the SetEventHandler class, have been replaced with a new propertyName.stateName syntax.

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:

<s:states>  

  <s:State name="defaultState"/>  

  <s:State name="formSubmit"/>  

</s:states>

We can also see that the Label component has a text value defined for defaultState:

<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 defaultState:

<s:TextInput id="formInput" x="97" y="15" includeIn="defaultState"/>

The Button has attribute changes for different states: its x and 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"   

  click.defaultState="formHandler()"   

  click.formSubmit="currentState='defaultState'"/>

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!