| Flex 2 Developer's Guide > Flex Programming Topics > Using View States > Building applications by using view states | |||
|
|||
|
|||
|
|||
You can use the following features and techniques to structure and build efficient, feature-rich, view state-based components and applications:
If one or more view states apply to a single component or set of components, you define a custom component that comprises this component or components, and specify the view states in the component definition, rather than at the Application tag level. For example, if a view state adds a Button control to an HBox container, consider making the HBox a custom component and defining a state in the component that adds the button. You should consider doing this particularly if you have multiple states that do nothing but modify the HBox container.
Similarly, if a custom component has multiple view states, define the view states in the component code, not in the main application. For example, if a custom TitleWindow component has a collapsed view state and a expanded view state, you should define these view states in the panel MXML component, not in the main application file.
This way, you segregate the view state definitions into the specific components to which they apply. A item renderer is one example of good use of a multiple view state MXML component.
The following example shows a custom component for a TitleWindow component that has two view states, collapsed and expanded:
<?xml version="1.0"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
close="checkCollapse();" headerHeight="40" showCloseButton="true">
<mx:Script>
<![CDATA[
// Skins for the close button when the
// TitleWindow container is collapsed.
[Embed(source="closeButtonUpSkin.jpg")]
[Bindable]
public var closeBUp:Class;
[Embed(source="closeButtonDownSkin.jpg")]
[Bindable]
public var closeBDown:Class;
[Embed(source="closeButtonOverSkin.jpg")]
[Bindable]
public var closeBOver:Class;
private function checkCollapse():void {
currentState =
currentState == "collapsed" ? "" : "collapsed";
}
]]>
</mx:Script>
<mx:states>
<mx:State name="collapsed">
<mx:SetProperty
name="height"
value="{getStyle('headerHeight')}"/>
<mx:SetStyle
name="closeButtonUpSkin"
value="{closeBUp}"/>
<mx:SetStyle
name="closeButtonDownSkin"
value="{closeBDown}"/>
<mx:SetStyle
name="closeButtonOverSkin"
value="{closeBOver}"/>
</mx:State>
</mx:states>
</mx:TitleWindow>
This example replaces the default close icon for a TitleWindow when the component is in the collapsed state.
You can then use this component in an application, as the following example shows:
<?xml version="1.0"?>
<!-- states\StatesTitleWindowMain.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:MyComp="myComponents.*">
<MyComp:StateTitleWindow id="myP" title="My Application">
<mx:HBox width="100%">
<mx:Button/>
<mx:TextArea/>
</mx:HBox>
<mx:ControlBar width="100%">
<mx:Label text="Quantity"/>
<mx:NumericStepper/>
<!-- Use Spacer to push Button control to the right. -->
<mx:Spacer width="100%"/>
<mx:Button label="Add to Cart"/>
</mx:ControlBar>
</MyComp:StateTitleWindow>
</mx:Application>
By default, a Flex application starts in the base view state. The base view state corresponds to the currentState property set to "".
However, an application or component can set the initial view state to a non-base view state. In a search interface component, for example, the most commonly used interface might be the initial expanded view, not the collapsed view.
To use a view state other than the base state as the initial view state, set the currentState property to the specific view state. Use code such as the following, for example, to specify that a component is initially in its collapsed state:
<mx:VBox currentState="collapsed">
Consider the following additional techniques for structuring and implementing a state-based applications:
basedOn property to explicitly base one view state on another view state. Use this technique when you have multiple view states that all include some common elements. You separate all the common elements into one view state on which you base the other view states. The drill-down search interface described in Use case: Login interface uses this technique.Revised: 3/29/2007: Removed the clause "...use the following code to ..." from the previous paragraph. Please see the "Using Transitions" chapter for more examples.
Flex 2.01
