New View State Syntax for Flex 4

Flex 4 lets you specify view states using a new inline MXML syntax, rather than the syntax used in previous releases. In the new syntax, the AddChild, RemoveChild, SetProperty, SetStyle, and SetEventHandler classes have been deprecated and replaced with MXML keywords.

To create view states, you use the <s:states> tag. In the body of the <s:states> tag, add one or more <s:State> tags, one for each additional view state. However, there is no longer a base view state, as defined in Flex 3 by the currentState property being set to the empty string (“”). The default view state is now the first view state defined in the <s:states> tag.

The AddChild and RemoveChild classes are replaced by the includeIn and excludeFrom MXML attributes. Use these attributes to specify the set of view state in which a component is included.

The includeIn attribute takes a comma delimited list of view state names, all of which must have been previously declared within the application’s <s:states> Array. The excludeFrom attribute takes a comma delimited list of view state names where the component in not included. The excludeFrom and includeIn attributes are mutually exclusive; it is an error to define both on a single MXML tag.

The following example uses view states to add components to the application based on the current state:

<?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/mx">
<s:layout>
<s:VerticalLayout/>
</s:layout>

<s:states>
<s:State name="default"/>
<s:State name="addCheckBox"/>
<s:State name="addTextInput"/>
<s:State name="addCheckBoxandButton"/>
</s:states>

<!-- Included in the addCheckBox and
addCheckBoxandButton view states. -->
<s:CheckBox id="myCB" label="Checkbox"
includeIn="addCheckBox, addCheckBoxandButton"/>
<!-- Included in the addTextInput view state. -->
<s:TextInput id="myTI"
includeIn="addTextInput"/>
<!-- Included in the addCheckBoxandButton view state. -->
<s:TextInput id="myB"
includeIn="addCheckBoxandButton"/>

<s:Button label="Add CB"
click="currentState='addCheckBox'"/>
<s:Button label="Add TI"
click="currentState='addTextInput'"/>
<s:Button label="Add CB and Button"
click="currentState='addCheckBoxandButton'"/>
<s:Button label="Restore Default"
click="currentState='default'"/>
</s:Application>

You no longer use the SetProperty, SetStyle, and SetEventHandler classes in the <s:states> tag to define overrides for a view state. Instead, define state-specific property values using the dot operator on any writable MXML attribute. The dot notation has the following format:

propertyName.stateName

Use the same syntax for overriding a property, style, or event. For example, you can specify the value of the label property of a Button control for the default view state and for the State1 view state, as the following example shows:

<s:Button label="Default State" label.State1="New State"
label.State2="Newer State"/>

The unqualified property, meaning the one that does not use the dot notation to specify a view state, defines the default value.

The following example sets the enabled property of a Button control based on the current view state:

<?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/mx">
<s:layout>
<s:VerticalLayout/>
</s:layout>

<s:states>
<s:State name="default"/>
<s:State name="addCheckBox"/>
<s:State name="addTextInput"/>
<s:State name="addCheckBoxandButton"/>
</s:states>

<!-- Included in the addCheckBox and
addCheckBoxandButton view states. -->
<s:CheckBox id="myCB" label="Checkbox"
includeIn="addCheckBox, addCheckBoxandButton"/>
<!-- Included in the addTextInput view state. -->
<s:TextInput id="myTI"
includeIn="addTextInput"/>
<!-- Included in the addCheckBoxandButton view state. -->
<s:TextInput id="myB"
includeIn="addCheckBoxandButton"/>

<s:Button label="Add CB"
click="currentState='addCheckBox'"
enabled.addCheckBox="false"/>
<s:Button label="Add TI"
click="currentState='addTextInput'"
enabled.addTextInput="false"/>
<s:Button label="Add CB and Button"
click="currentState='addCheckBoxandButton'"
enabled.addCheckBoxandButton="false"/>
<s:Button label="Restore Default"
click="currentState='default'"
enabled.default="false"/>
</s:Application>

For more information, see the Flex 4 documentation on view states.

 

Stephen Gilson
Flex Doc Team