Posts in Category "View States"

Creating Flex View States in ActionScript

In Flex 4, Adobe introduced new MXML language improvements that make it much easier to work with states. This support includes the dot (.) delimiter for specifying state overrides, and the new MXML excludeFrom and includeIn attributes.

The following item renderer, MySimpleCustomItemRendererMXML.mxml in the myComponents subdirectory, uses view states to control the appearance of the items in a SkinnableDataContainer container:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark">

    <s:states>
        <s:State name="normal"/>
        <s:State name="hovered"/>
    </s:states>

    <s:Label id="labelDisplay"
        verticalCenter="0"
        left="3" right="3" top="6" bottom="4"
        fontSize.hovered='14' fontStyle.hovered="italic"/>
</s:ItemRenderer>

The following application uses this item renderer:

<?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:SkinnableDataContainer
        itemRenderer="myComponents.MySimpleCustomItemRendererMXML">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>

    <mx:ArrayList>
        <fx:String>Bill J Smith</fx:String>
        <fx:String>Dave Jones</fx:String>
        <fx:String>Mary Davis</fx:String>
        <fx:String>Debbie Cooper</fx:String>
        </mx:ArrayList>
    </s:SkinnableDataContainer>
</s:Application>

However, you might also want to create view state in ActionScript, either in an MXML file or in an ActionScript file. The following example uses the creationComplete event to define the view states in ActionScript:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark"
    creationComplete="creationCompleteHandler(event);">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.states.SetStyle;
            import mx.states.State;

            protected function creationCompleteHandler(event:FlexEvent):void {
                states = [
                    new State({name:"normal"}),
                    new State({name:"hovered",
                        overrides:[
                            new SetStyle(labelDisplay, "fontSize", 14),
                            new SetStyle(labelDisplay, "fontStyle", "italic")]
                        })
                ];
            }
        ]]>
    </fx:Script>

    <s:Label id="labelDisplay"
        verticalCenter="0"
        left="3" right="3" top="6" bottom="4"/>
</s:ItemRenderer>

In this example, you import the mx.states.State and mx.states.SetStyle classes. Every Flex component inherits the mx.core.UIComponent.states property. This property contains an Array of State objects that define the supported view states of the component. In the event handler for the creationComplete event, create an Array of State objects. The name property of the State objects defines the name of the view state.

The State.overrides property contains an Array of objects that implement the mx.states.IOverride interface. The AddChild, AddItems, RemoveChild, SetEventHandler, SetProperty, and SetStyle classes all implement this interface. In this example, you create two instances of SetStyle that override the fontSize and fontStyle styles of the Label control. You can mix objects of type AddChild, AddItems, RemoveChild, SetEventHandler, SetProperty, and SetStyle in the overrides Array.

Note that manipulating at runtime view states, containers that use view states, or properties of components that are controlled by view states can be problematic. For example, when you use view states to control the children of a container, do not add or remove container children, or change the order of children in the container, at runtime. The following container defines a Button control that appear only in State2:

<s:Group>
    <s:Button/>
    <s:Button includeIn="State2"/>
    <s:Button/>
</s:Group>

The view states infrastructure relies on the structure of the container as defined by the MXML file. Changing the child order of the container at runtime can cause your application to fail. Therefore, do not call the addElement(), removeElement(), or setElementIndex() method on the Group container at runtime, or any other method that changes the child order of the container.

For more infomration, see:

 

Stephen Gilson
Flex Doc Team

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

New Doc on Flex Gumbo States Available

Here is new documentation on Flex Gumbo view states, including the new syntax for defining states in Gumbo.

Download the PDF: Using States

View States Doc Updated

The “Using View States” chapter of the Flex Developers Guide has been rewritten to expand the overview, to explain different view-state scenarios, to add more examples, to enhance the description of adding and removing components as part of a change of view state, and to add examples that control the creation policy of components during a change of view state.

Download the new chapter’s PDF: Using View States.

Here’s a ZIP file of all the code samples (full applications) used in the document: Code Samples.