AIR

June 19th, 2011
Comments Off on Spark Component Model

Spark Component Model

More articles by »
Written by: Nouman Naveed
Tags:
Flexatom.com

The construction of the new Spark components in Flex 4 supersedes the Halo components of Flex 3. Upon learning how to leverage the  architecture of Spark components, you will find the perfection to be quite extensive.

Finally, the new component architecture with the Spark library makes creating, updating, and designing custom components a lot easier and far more intuitive. The most considerable architectural changes are internal state management and decoupled visual appearance.

Internal State Management

The creation 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://ns.adobe.com/mxml/2009″>
<states>
<State name=”up” />
<State name=”over” />
<State name=”down” />
<State name=”disabled” />
</states>

</Skin>

In the sample code above, state changes are controlled by the component, as the component class is responsible for internal behaviors. Anyhow, a single state change could include the attachment of a new skin class.   Also for 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://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=”0×808080″ 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=”0×444444″ 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();
}

// 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;
}

}
}
}

}

Also we 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 complex 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 design change to components for this new iteration.


About the Author

Nouman Naveed
My name is Mohammed Nouman Naveed. I work and play with Flash Platform technologies and has experience of 11 years. Consulting and Training is part of my job. I am Adobe Certified Instructor, Adobe User Group Manager, Adobe Certified Expert and Adobe Community Champion.


Comments Off on Spark Component Model


 
 

 
CQ5
adobe aem56 dam logo

Setting Images in DAM

All images are loaded into the DAM (Digital Assets Management). To upload an image, you’ll need to use your Activator login. From the tree, click +Digital Assets Find the way to the tree to suitable folder (AAFP, images, ANN,...
by Nouman Naveed
0

 
 
 

Apache Flex 4.10.0 Available

Here comes Apache Flex 4.10. This project, the all-volunteer group of developers, and stakeholders in the development framework, today announced the release of Apache Flex 4.10.0. This release makes some important improvements ...
by Nouman Naveed
0

 
 
CQ5
aem 5.6.1 features pic

Many New Features in AEM 5.6.1

AEM 5.6.1 is a easy to use, unified experience management collection for marketers in the digital sphere to use in creating, managing, and delivering unique online experiences that are brand-entered and increase demand across d...
by Nouman Naveed
0

 

 
CQ5
Adobe CQ5 WEM, SOCO, Tagging, DAM

What’s New in CQ 5.6

1: It’s called AEM (Adobe Experience Manager) now Though I guess not that essential, it’s going to be exciting if the name is going to attach – there were other occasions where Adobe tried to rename this result and at the...
by Nouman Naveed
0

 
 
CQ5
content management for web and mobile

Content Management for Web & Mobile

Adobe CQ is a WCM and gives a better browser-based user interface. It is best suitable for business and IT for creating interactive, multimedia rich, multichannel consumer understanding to make an engaging digital existence, ma...
by Nouman Naveed
0

 




0 Comments


Comments are closed.