Flex4相对FLex3的组件变化

customizations much more straightforward. Here is a table showing Flex 3 Halo components and their Flex 4 beta Spark counterparts:

Flex 3 Halo Component Flex 4 beta Spark Component

mx.controls.Button	spark.components.Button
mx.controls.ButtonBar	spark.components.ButtonBar
mx.controls.CheckBox	spark.components.CheckBox
mx.controls.ComboBox	spark.components.DropDownList (w/o editability)
mx.controls.HorizontalList	spark.components.List (with a HorizontalLayout)
mx.controls.HRule	spark.primitives.Line
mx.controls.HScrollBar	spark.components.HScrollBar
mx.controls.HSlider	spark.components.HSlider
mx.controls.Image	spark.primitives.BitmapImage
mx.controls.LinkBar	spark.components.ButtonBar (with a custom skin)
mx.controls.LinkButton	spark.components.Button (with a custom skin)
mx.controls.List	spark.components.List
mx.controls.NumericStepper	spark.components.NumericStepper
mx.controls.RadioButton	spark.components.RadioButton
mx.controls.RadioButtonGroup	spark.components.RadioButtonGroup
mx.controls.TextArea	spark.components.TextArea
mx.controls.TextInput	spark.components.TextInput
mx.controls.TileList	spark.components.List (with a TileLayout)
mx.controls.ToggleButtonBar	spark.components.ButtonBar
mx.controls.VideoDisplay	spark.components.VideoPlayer
mx.controls.VRule	spark.primitives.Line
mx.controls.VScrollBar	spark.components.VScrollBar
mx.controls.VSlider	spark.components.VSlider
mx.core.Application	spark.components.Application
mx.core.Window	spark.components.Window
mx.core.WindowedApplication	spark.components.WindowedApplication
mx.containers.Canvas	spark.components.Group
mx.containers.HBox	spark.components.HGroup
mx.containers.Panel	spark.components.Panel
mx.containers.Tile	spark.components.Group (with a TileLayout)
mx.containers.VBox	spark.components.VGroup

Adobe encourages you to use Halo components and containers along with Spark components. Because Adobe continues to build components atop the same base class (UIComponent), there should be full interoperability between Spark and Halo. Here is a table of the components and containers that do not currently have direct Spark equivalent classes.

Flex 3 classes with no direct Flex 4 beta counterpart

mx.controls.Alert

mx.controls.ColorPicker

mx.controls.DataGrid

mx.controls.DateChooser

mx.controls.DateField

mx.controls.Menu

mx.controls.MenuBar

mx.controls.PopUpButton

mx.controls.PopUpMenuButton

mx.controls.ProgressBar

mx.controls.RichTextEditor

mx.controls.TabBar

mx.controls.Tree

mx.containers.Accordion

mx.containers.ApplicationControlBar

mx.containers.ControlBar

mx.containers.DividedBox

mx.containers.Form

mx.containers.Grid

mx.containers.TabNavigator

mx.containers.TitleWindow

mx.containers.ViewStack

Changes in states syntax

Flex 4 beta has promoted the states functionality to a full MXML language feature. As a result, you will likely find states to be much more flexible and direct. The new states syntax is more inline, allowing state-specific changes to be specified in context. Here are the key differences in the Flex 4 beta syntax:

• Only states are defined within the states array.
• In the new states syntax, you cannot use de>AddChildde> and de>RemoveChildde>. Instead, you define a component's role in a particular state on the component itself using the de>includeInde> and de>excludeFromde> attributes.

In the following Flex 3 example, states are used to include a Button and remove a TextInput only when the de>currentStatede> of the document is de>submitStatede>. This approach can get very verbose with more complex states.

<mx:states>
    <mx:State name="submitState" basedOn="">
        <mx:AddChild relativeTo="{loginForm}" >
           <mx:Button label="submit" bottom="10" right="10"/>
        </mx:AddChild>
        <mx:RemoveChild target="{firstTextInput}"/>
    </mx:State>
</mx:states>
 
<mx:TextInput id="firstTextInput" />
<mx:Canvas id="loginForm" />

Here is the simpler Flex 4 beta code using de>includeInde> and de>excludeFromde>.

<s:states>
    <s:State name="submitState" />
</s:states>
<s:TextInput id="firstTextInput" excludeFrom="submitState" />
<s:Group id="loginForm" >
    <s:Button label="submit" bottom="10" right="10" includeIn="submitState"/>
</s:Group>

• de>SetPropertyde>, de>SetStylede>, and de>SetEventHandlerde> have been replaced by a new dot syntax, which allows you to qualify MXML attribute values with a specific state identifier.

In the following Flex 3 example, the code defines a property, style, and event for a Button in de>submitStatede>.

<mx:states>
    <mx:State name="submitState" basedOn="">
        <mx:SetProperty target="{submitButton}" name="label" value="submit" />
        <mx:SetStyle target="{submitButton}" name="textDecoration" value="underline"/>
        <mx:SetEventHandler target="{submitButton}" name="click" handler="trace('done');"/>
    </mx:State>
    <mx:State name="clearState" basedOn="">
        <mx:SetProperty target="{submitButton}" name="label" value="clear" />
        de><mx:SetEventHandler target="{submitButton}" name="click" de>handler="emptyDocument()" />
    </mx:State>
</mx:states>
 
<mx:Button id="submitButton" />

In Flex 4 beta, the code looks like this:

<s:states>
    <s:State name="submitState" />
    <s:State name="clearState" />
</s:states>
 
<s:Button label.submitState="submit" textDecoration.submitState="underline"
   click.submitState="trace('done')" click.clearState="emptyDocument()"
   label.clearState="clear" textDecoration.clearState="none"/>

• A component can no longer be in an undefined or null state. By default, the first declared state is the initial state of a component.
  The new syntax is available when a document uses the MXML 2009 language namespace. You cannot mix the legacy syntax and the new states syntax. The old syntax is available only in the MXML 2006 namespace.

Additionally, each component now supports a set of states defined in its skin class, which makes it simpler to apply visual changes depending on the state of a component. For example, if you look at the skin for the Spark Button, you will find the following states defined:

<s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
</s:states>

The ButtonSkin class defines what happens visually to a Spark Button in each one of these states.

This is only a brief introduction to the new Flex 4 beta states syntax. Visit the Enhanced States Syntax Spec to find more details.