mx.states.State (Flex 3.4)

Package	mx.states
Class	public class State
Inheritance	State EventDispatcher Object

The State class defines a view state, a particular view of a component. For example, a product thumbnail could have two view states; a base view state with minimal information, and a rich view state with additional information. The overrides property specifies a set of child classes to add or remove from the base view state, and properties, styles, and event handlers to set when the view state is in effect.

You use the State class in the states property of Flex components. You can only specify a states property at the root of an application or a custom control, not on child controls.

You enable a view state by setting a component's currentState property.

MXML Syntax expanded

Hide MXML Syntax

The <mx:State> tag has the following attributes:

  <mx:State
  Properties
  basedOn="null"
  name="null"
  overrides="null"
  />

Default MXML Propertyoverrides

View the examples

	Property	Defined By
		basedOn : String The name of the view state upon which this view state is based, or null if this view state is not based on a named view state.	State
		constructor : Object A reference to the class object or constructor function for a given object instance.	Object
		name : String The name of the view state.	State
		overrides : Array The overrides for this view state, as an Array of objects that implement the IOverride interface.	State
		prototype : Object [static] A reference to the prototype object of a class or function object.	Object

	Method	Defined By
		State() Constructor.	State
		addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void Registers an event listener object with an EventDispatcher object so that the listener receives notification of an event.	EventDispatcher
		dispatchEvent(event:Event):Boolean Dispatches an event into the event flow.	EventDispatcher
		hasEventListener(type:String):Boolean Checks whether the EventDispatcher object has any listeners registered for a specific type of event.	EventDispatcher
		hasOwnProperty(name:String):Boolean Indicates whether an object has a specified property defined.	Object
		isPrototypeOf(theClass:Object):Boolean Indicates whether an instance of the Object class is in the prototype chain of the object specified as the parameter.	Object
		propertyIsEnumerable(name:String):Boolean Indicates whether the specified property exists and is enumerable.	Object
		removeEventListener(type:String, listener:Function, useCapture:Boolean = false):void Removes a listener from the EventDispatcher object.	EventDispatcher
		setPropertyIsEnumerable(name:String, isEnum:Boolean = true):void Sets the availability of a dynamic property for loop operations.	Object
		toLocaleString():String Returns the string representation of this object, formatted according to locale-specific conventions.	Object
		toString():String Returns the string representation of the specified object.	Object
		valueOf():Object Returns the primitive value of the specified object.	Object
		willTrigger(type:String):Boolean Checks whether an event listener is registered with this EventDispatcher object or any of its ancestors for the specified event type.	EventDispatcher

Summary	Defined By
activate	[broadcast event] Dispatched when the Flash Player or AIR application gains operating system focus and becomes active.	EventDispatcher
deactivate	[broadcast event] Dispatched when the Flash Player or AIR application operating loses system focus and is becoming inactive.	EventDispatcher
enterState	Dispatched when the view state has been entered.	State
exitState	Dispatched before a view state is exited.	State

Property Detail

basedOn

property

public var basedOn:String

The name of the view state upon which this view state is based, or null if this view state is not based on a named view state. If this value is null, the view state is based on a root state that consists of the properties, styles, event handlers, and children that you define for a component without using a State class.

The default value is null.

name

property

public var name:String

The name of the view state. State names must be unique for a given component. This property must be set.

overrides

property

public var overrides:Array

The overrides for this view state, as an Array of objects that implement the IOverride interface. These overrides are applied in order when the state is entered, and removed in reverse order when the state is exited.

The following Flex classes implement the IOverride interface and let you define the view state characteristics:

AddChild
RemoveChild
SetEventHandler
SetProperty
SetStyle

The overrides property is the default property of the State class. You can omit the <mx:overrides> tag and its child <mx:Array>tag if you use MXML tag syntax to define the overrides.

Constructor Detail

State

()

Constructor

public function State()

Constructor.

Event Detail

enterState

Event

Event Object Type: mx.events.FlexEvent
property FlexEvent.type = mx.events.FlexEvent.ENTER_STATE

Dispatched when the view state has been entered. This event is dispatched after the changes to the base view state have been applied.

The FlexEvent.ENTER_STATE constant defines the value of the type property of the event object for a enterState event.

The properties of the event object have the following values:

Property	Value
`bubbles`	false
`cancelable`	false
`currentTarget`	The Object that defines the event listener that handles the event. For example, if you use `myButton.addEventListener()` to register an event listener, myButton is the value of the `currentTarget`.
`target`	The Object that dispatched the event; it is not always the Object listening for the event. Use the `currentTarget` property to always access the Object listening for the event.

exitState

Event

Event Object Type: mx.events.FlexEvent
property FlexEvent.type = mx.events.FlexEvent.EXIT_STATE

Dispatched before a view state is exited. This event is dispatched before the changes to the base view state have been removed.

The FlexEvent.EXIT_STATE constant defines the value of the type property of the event object for a exitState event.

The properties of the event object have the following values:

Property	Value
`bubbles`	false
`cancelable`	false
`currentTarget`	The Object that defines the event listener that handles the event. For example, if you use `myButton.addEventListener()` to register an event listener, myButton is the value of the `currentTarget`.
`target`	The Object that dispatched the event; it is not always the Object listening for the event. Use the `currentTarget` property to always access the Object listening for the event.

Examples How to use this example

StatesExample.mxml

<?xml version="1.0" ?>
<!-- Simple example to demonstrate the States class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Define one view state, in addition to the base state.-->
    <mx:states>
        <mx:State name="Register">
            <mx:AddChild relativeTo="{loginForm}" position="lastChild">
                <mx:target>
                    <mx:FormItem id="confirm" label="Confirm:">
                        <mx:TextInput/>
                    </mx:FormItem>
                </mx:target>
            </mx:AddChild>
            <mx:SetProperty target="{loginPanel}" name="title" value="Register"/>
            <mx:SetProperty target="{loginButton}" name="label" value="Register"/>
            <mx:SetStyle target="{loginButton}" 
                name="color" value="blue"/>
            <mx:RemoveChild target="{registerLink}"/>
            <mx:AddChild relativeTo="{spacer1}" position="before">
                <mx:target>
                    <mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''"/>
                </mx:target>
            </mx:AddChild>
        </mx:State>
    </mx:states>

    <!-- Define a Panel container that defines the login form.-->
    <mx:Panel title="Login" id="loginPanel" 
        horizontalScrollPolicy="off" verticalScrollPolicy="off"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Text width="100%" color="blue"
            text="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/>

        <mx:Form id="loginForm" >
            <mx:FormItem label="Username:">
                <mx:TextInput/>
            </mx:FormItem>
            <mx:FormItem label="Password:">
                <mx:TextInput/>
            </mx:FormItem>
        </mx:Form>
        <mx:ControlBar>
            <mx:LinkButton id="registerLink"  label="Need to Register?"
                click="currentState='Register'"/>
            <mx:Spacer width="100%" id="spacer1"/>
            <mx:Button label="Login" id="loginButton"/>
        </mx:ControlBar>
    </mx:Panel>
</mx:Application>

Adobe® Flex™ 3.4 Language Reference Language Reference only	All Packages \| All Classes \| Language Elements \| Index \| Appendixes \| Conventions \| Frames No Frames
State	Properties \| Methods \| Events \| Examples