In Flex terminology, a state is a collection of changes (called overrides) to a view. The overrides can comprise additions or removals of components as well as changes to their properties and behaviors. Every Flex application (and every Flex component) has at least one state, referred to as its base state. Flex states enable you to more easily change the view for an application, whether at a macro or a micro level. For example, you can define two states that act as screens in an application (e.g., a login screen and a menu screen). Using states for screens is an example of a macro-level use. At the micro level, you can use states to manage cascading forms and even different views for components (e.g., rollover changes).
The Flex framework provides an entire library for states and state management. You can create and manage states from MXML or ActionScript. Furthermore, you can use states in conjunction with other Flex features, such as transitions and history management, to create robust, responsive, and engaging applications and user interfaces with relative ease. In this chapter, you’ll learn how to work with Flex states.
You can create states for an application, and you can create states
for components. The process for creating states for either is identical
(remember that applications and components both inherit from UIComponent, which is what defines the ability
to work with states). You can create states using ActionScript or using
MXML. Practically speaking, it is usually much easier to create states
using MXML whenever possible. You’ll probably find that you define states
using ActionScript relatively infrequently. However, creating states with
ActionScript provides you with a level of runtime flexibility you couldn’t
otherwise achieve. Therefore, we’ll look at how to create states with both
MXML and ActionScript. Initially we’ll focus primarily on using MXML
because that is the most common way to work with states, but later in the
chapter we’ll look at using ActionScript.
Every application and component has a states property that allows you to define an array of states. From MXML you
can use the following syntax to populate the states array:
<mx:states>
<!-- State elements -->
</mx:states>The states themselves are instances of the mx.states.State class, and you can create a new state using the <mx:State> tag in MXML. When you create a
new state, you should—at a minimum—specify a name. The name for a state is the identifier by which you
can reference it. The following MXML creates a new state with a name of
exampleState:
<mx:State name="exampleState"></mx:State>
Within the opening and closing <mx:State> tags, you can specify the state
definition. A state definition consists of override elements that do the
following:
Add or remove components
Set properties of components/objects
Set styles of components
Set event handlers for objects
Perform custom overrides (meaning custom code to handle behaviors not handled by standard overrides)
The next several sections discuss each element type in more detail.