Flash Builder 4 Feature – States

I didn’t like States in Flex Builder 3, actually I completely avoided them if I could help it. But I have actually enjoyed the changes to states that have been introduced in Flash Builder 4. Gone are the days of removeChild, addChild all in a states section that became difficult to read very quickly if not carefully monitored.

Now with the spark components there is a completely new (and refreshing) way to develop multiple states in your visual components. Gone are the huge and unreadable states section, with a new slimmed down states array within your component.

States Array
States are quickly defined with the new spark tags as such:

To add another state you just need to add another tag to the array as such:

Currently the three tags we have set up are all based on the first tag in the array, in this case “State1″.

basedOn
Now in the “” tag there are additional options you can set, such as “basedOn”. The “basedOn” tag does the obvious, states the state that the current state is based on.

There are other options that should remind you of states in Flex 3 that can be found within the overrides array, such as removeChild, AddChild, SetEventProperty, SetProperty, etc.

includeIn and excludeFrom
In the visual component properties there are a few new options that are only availabe in the http://ns.adobe.com/mxml/2009 namespace, these properties are include includeIn and excludeFrom. The includeIn property makes it so that the visual component being “included” will be in the specific state.

You can set multiple states for the visual component to be included by setting an array of states in the includeIn property.

The exludeFrom tag acts just like the includeIn tag, just removes the visual component from the view in the stated state.

Setting Properties, Events, and Styles by State
In the visual component you can add state specific properties, events, and styles by just making the simple change as demonstrated below. In the example I’ve changed the width, height, and title specifically in the “state2″ state.

I do love that the new states model makes it so Flash Builder doesn’t add in all sorts of Ids everywhere and you don’t have to keep going up to a states section just to see all state changes. And again, everything is so much easier to read.