States and Transitions

State Flex class

The State class is a small class that is really only used to define the states of a component. It inherits only from EventDispatcher. State has a three public properties: overrides:Array, basedOn:String, and name:String. overrides holds the operations that the State will perform when it is applied to a component. name sets the name of the state and basedOn established a hierarchy between states. The functionality for the State is implemented in UIComponent and the individual overrides, which all implement the IOverride interface.

The State class exposes three internal methods using the mx_internal namespace so that UIComponent can call them when it is applying states to itself. These methods are initialize(), dispatchEnterState(), and dispatchExitState().

initialize() simply loops through its child overrides, calling initialize() on them and then marking itself as initialized:

  1.     mx_internal function initialize():void
  2.     {
  3.       if (!initialized)
  4.       {
  5.         initialized = true;
  6.         for (var i:int = 0; i < overrides.length; i++)
  7.         {
  8.           IOverride(overrides[i]).initialize();
  9.         }
  10.       }
  11.     }

Each of the dispatch* methods simply perform a dispatchEvent() of the appropriate events. I don't know why the Adobe developers would add methods such as these because dispatchEvent() is a public method on EventDispatcher and UIComponent could just call this directly on the State (as it inherits from EventDispatcher). Perhaps they just wanted to encapsulate the functionality in case it would change in the future.

In the case where the UIComponent is returning to its base state, there is not an explicit State object associated with this state, so the UIComponent dispatches the enterState event on itself:

  1.         // If we're going back to the base state, dispatch an
  2.         // enter state event, otherwise apply the state.
  3.         if (isBaseState(currentState))
  4.             dispatchEvent(new FlexEvent(FlexEvent.ENTER_STATE));
  5.         else
  6.             applyState(_currentState, commonBaseState);

enterState Flex Event

The enterState event is dispatched from the State class when a new state has been entered. The class that actually dispatches this event is UIComponent. State is actually a very small class that exposes an mx_internal method dispatchEnterState() which UIComponent hijacks since it is in charge of applying states to itself:

  1.     private function applyState(stateName:String, lastState:String):void
  2.     {
  3.         var state:State = getState(stateName);
  4.  
  5.         if (stateName == lastState)
  6.             return;
  7.            
  8.         if (state)
  9.         {
  10.             // Apply "basedOn" overrides first
  11.             if (state.basedOn != lastState)
  12.                 applyState(state.basedOn, lastState);
  13.  
  14.             // Apply new state overrides
  15.             var overrides:Array = state.overrides;
  16.  
  17.             for (var i:int = 0; i < overrides.length; i++)
  18.                 overrides[i].apply(this);
  19.  
  20.             // Dispatch the "enterState" event
  21.             state.dispatchEnterState();
  22.         }
  23.     }

This code is called from commitCurrentState() which is also a private method in UIComponent.