Home > Flex 4 Examples > Using Spark skins to style Halo components

Using Spark skins to style Halo components

Most of the halo components in the flex framework have a skin style. Sometimes it is labeled skin, others with border-skin, and if no general one skin style for the component exists, there are typically skin styles for individual pieces.

Lets use the halo vertical scroll bar as an example (svn) (zip) (swf):

1. Create the skins (7 skin classes for this simple example) for the spark component. I used the generate skin auto complete MXML feature as shown here:
Creating a custom skin part using MXML auto complete.

Here is a shot of the finished skin on the spark list:
Creating a custom skin for part of the VScrollbar skin

2. Setup the styles for the vertical scroll bar on the halo component.

<mx:AdvancedDataGrid width="97" height="100" headerHeight="0" borderStyle="none" verticalScrollBarStyleName="sampleVScrollBarStyle">
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
			thumb-skin: ClassReference("CustomVScrollBarThumbSkin");
			track-skin: ClassReference("VScrollBarTrackSkin");
			down-arrow-skin: ClassReference("CustomScrollBarDownButtonSkin");
			up-arrow-skin: ClassReference("CustomScrollBarUpButtonSkin");

3. The key part. Once the styles are in place for the scroll bar, you will notice that the track is overlapping as the following shot shows. The fix is simple: Modify the track skin to take the owner into account.

Overlapping track

Since we know the track’s skin owner in the halo data grid won’t be a spark button, we can use the layout style attributes top and bottom that the spark VSCrollBarSkin uses.

<?xml version="1.0" encoding="utf-8"?>


    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.


<!--- The default skin class for the track of a Spark VScrollBar component.  

       @see spark.components.VScrollBar
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"

         * @copy spark.skins.spark.ApplicationSkin#hostComponent
    <fx:Script fb:purpose="styling">
         * @private
        override protected function initializationComplete():void
            useChromeColor = true;
        <s:State name="up" />
        <s:State name="down" />
        <s:State name="over" />
        <s:State name="disabled" />

    <s:Rect top="{hostComponent==null?9:0}" bottom="{hostComponent==null?9:0}" left="0" right="0" minWidth="7" minHeight="6" radiusX="4" radiusY="4">
            <s:SolidColorStroke color="0x000000" weight="1"/>

And finally, when we are finished:
The halo grid vertical scroll bar skinned.

  1. April 23, 2010 at 5:17 PM

    I like the way you’re displaying your code syntax. Can I ask what wordpress plugin you use for that?

  2. roustalski
    June 18, 2010 at 8:08 AM

    It is built in. [ sourcecode language=”actionscript3″ ]

  3. jana
    November 11, 2010 at 5:16 AM

    Dear Erich Cervantez,
    Thank you very much for providing this example and source code, i did soo much search for this finally i could found you. Appreciate your help to public.

    Thank you

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: