The architecture of the new Spark components in Flex 4 supercedes the Halo components of Flex 3. Upon learning how to leverage the architecture of Spark components, you will find the improvements to be quite substantial.
Ultimately, the new component architecture with the Spark library makes building, modifying, and designing custom components a lot easier and far more intuitive. The most significant architectural changes are internal state management and decoupled visual appearance.
Internal State Management
The declaration of global application states is still possible, but the trick to getting a Flex application to closely resemble a native desktop application is by changing the state of individual container components while holding the state of others. This is what gives the application a "seamless" flow. This is accomplished by creating multiple skins for a single component, and just swap them out in an event handler. The code for the skin itself should have the following structure:
<states>
<State name="up" />
<State name="over" />
<State name="down" />
<State name="disabled" />
</states>
...
</Skin>
In the example above, state changes are controlled by the component, as the component class is responsible for internal behaviors. However, a single state change could include the attachment of a new skin class. In addition to controlling it's currentState property, the component broadcasts this value to its parent through the use of meta data. That means the parent can still override the built-in states of a component, and most importantly, the parent application is able to easily find out the current state of any of its children.
Decoupled Visual Appearance
HOWEVER, skin states are not the same as component states. A component state can change without the skin state changing. In other words, component states are decoupled from skin states. Component states define changes to the behavioral state of a component, while Skin states define changes to the display state of the component that they are attached to. For example, the Buttonclass has a set of states that include: up, down, selected, and disabled. The Button drives state changes to ButtonSkin, which is the skin that is attached to the Button component. The Button andButtonSkin classes both have their own currentState property, which is accessible by the parent container. This is a good example of the Template design patternThe following code sample is taken from ButtonSkin.mxml and provides a nice depiction of what we are talking about here:
<Skin xmlns="http://ns.adobe.com/mxml/2009">
<Metadata>
[HostComponent("spark.components.Button")]
</Metadata>
<states>
<State name="up" />
<State name="over" />
<State name="down" />
<State name="disabled" />
</states>
<!-- border -->
<Rect left="0" right="0" top="0" bottom="0" minWidth="70" minHeight="24">
<stroke>
<SolidColorStroke color="0x808080" color.disabled="0xC0C0C0" />
</stroke>
</Rect>
<!-- fill -->
<Rect left="1" right="1" top="1" bottom="1" minWidth="68" minHeight="22">
<stroke>
<SolidColorStroke color="0xFFFFFF" color.over="0xFAFAFA" color.down="0xEFEFEF" />
</stroke>
<fill>
<SolidColor color="0xFFFFFF" color.over="0xF2F2F2" color.down="0xD8D8D8" />
</fill>
</Rect>
<!-- label -->
<TextBox text="{hostComponent.label}"
fontFamily="Arial" fontSize="11"
color="0x444444" color.disabled="0xC0C0C0"
horizontalCenter="0" verticalCenter="0"
left="10" right="10" top="4" bottom="2"
textAlign="center" verticalAlign="middle">
</TextBox>
</Skin>
Now that you have reviewed the code for the default Spark skin class that is used by the Button component, let's take a look at the code for the Button component in the Spark library:
/**
* Up State of the Button
*/
[SkinState("up")]
/**
* Over State of the Button
*/
[SkinState("over")]
/**
* Down State of the Button
*/
[SkinState("down")]
/**
* Disabled State of the Button
*/
[SkinState("disabled")]
public class Button extends SkinnableComponent implements IFocusManagerComponent {
/**
* @return Returns true when the mouse cursor is over the button.
*/
public function get isHoveredOver():Boolean {
return flags.isSet(isHoveredOverFlag);
}
/**
* Sets the flag indicating whether the mouse cursor
* is over the button.
*/
protected function setHoveredOver(value:Boolean):void {
if (!flags.update(isHoveredOverFlag, value))
return;
invalidateSkinState();
}
// GetState returns a string representation of the component's state as
// a combination of some of its public properties
protected override function getUpdatedSkinState():String
{
if (!isEnabled)
return "disabled";
if (isDown())
return "down";
if (isHoveredOver || isMouseCaptured )
return "over";
return "up";
}
//--------------------------------------------------------------------------
//
// Event handling
//
//--------------------------------------------------------------------------
protected function mouseEventHandler(event:Event):void
{
var mouseEvent:MouseEvent = event as MouseEvent;
switch (event.type)
{
case MouseEvent.ROLL_OVER:
{
// if the user rolls over while holding the mouse button
if (mouseEvent.buttonDown && !isMouseCaptured)
return;
setHoveredOver(true);
break;
}
case MouseEvent.ROLL_OUT:
{
setHoveredOver(false);
break;
}
}
}
}
As you can see in the third code listing, aSkinStatemeta data declaration is used to define the states of the attached skin. To change skin states, you should useinvalidateSkinState()andgetCurrentSkinState(). TheinvalidateSkinState()method is what invalidates the skin state, and sets the skin's state to that which is returned by thegetCurrentSkinState()method. ThegetCurrentSkinState()method keeps track of any internal properties on the component and figures out what state the skin should be in.
This may seem a bit complicated at first, but as you begin to develop your own custom Flex 4 components, it will quickly become apparent that this is a very valuable architectural change to components for this new iteration.
from link