What's New and Cool in Flex 4?

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!