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:
<Skin xmlns="http:>
<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 Button class 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 and ButtonSkin classes both have their own currentState property, which is accessible by the parent container. This is a good example of the Template design pattern.
The following code sample is taken from ButtonSkin.mxml and provides a nice depiction of what we are talking about here:
<?xml version="1.0" encoding="utf-8"?>
<Skin xmlns="http:>
<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 <code>Button</code> component, let’s take a look at the code for the <code>Button</code> component in the Spark library:
package spark.components {
/**
* 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();
}
protected override function getUpdatedSkinState():String
{
if (!isEnabled)
return "disabled";
if (isDown())
return "down";
if (isHoveredOver || isMouseCaptured )
return "over";
return "up";
}
protected function mouseEventHandler(event:Event):void
{
var mouseEvent:MouseEvent = event as MouseEvent;
switch (event.type)
{
case MouseEvent.ROLL_OVER:
{
if (mouseEvent.buttonDown && !isMouseCaptured)
return;
setHoveredOver(true);
break;
}
case MouseEvent.ROLL_OUT:
{
setHoveredOver(false);
break;
}
}
}
}
}
As you can see in the third code listing, a SkinState meta data declaration is used to define the states of the attached skin. To change skin states, you should use invalidateSkinState() and getCurrentSkinState(). The invalidateSkinState() method is what invalidates the skin state, and sets the skin’s state to that which is returned by the getCurrentSkinState() method. The getCurrentSkinState() 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.
Possibly Related Posts:
Posted by Dan Orlando on June 13th, 2009 :: Filed under
TutorialsTags ::
components,
Flex 4,
Spark
