Flex Examples » skin http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting the disabled alpha on a Spark TextInput control in Flex 4 http://blog.flexexamples.com/2010/04/08/setting-the-disabled-alpha-on-a-spark-textinput-control-in-flex-4/ http://blog.flexexamples.com/2010/04/08/setting-the-disabled-alpha-on-a-spark-textinput-control-in-flex-4/#comments Thu, 08 Apr 2010 17:47:30 +0000 Peter deHaan http://blog.flexexamples.com/?p=2703 In a previous example, “Styling the disabled state on a Spark TextInput control in Flex 4″, we saw how you could style the disabled state on a Spark TextInput control in Flex 4 using CSS.

The following example shows how you can set the alpha of the disabled state of a Spark TextInput control [...]]]> In a previous example, “Styling the disabled state on a Spark TextInput control in Flex 4″, we saw how you could style the disabled state on a Spark TextInput control in Flex 4 using CSS.

The following example shows how you can set the alpha of the disabled state of a Spark TextInput control in Flex 4 by creating a custom Spark TextInput skin and setting the alpha property on the disabled skin state.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/08/setting-the-disabled-alpha-on-a-spark-textinput-control-in-flex-4/ -->
<s:Application name="Spark_TextInput_skin_alpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
    <s:controlBarContent>
        <s:CheckBox id="chckBx" label="enabled" selected="true" />
    </s:controlBarContent>
 
    <s:TextInput id="txtInp1"
            text="Default Spark TextInput"
            enabled="{chckBx.selected}"
            width="300" />
 
    <s:TextInput id="txtInp2"
            text="Spark TextInput w/ custom skin"
            enabled="{chckBx.selected}"
            skinClass="skins.CustomTextInputSkin"
            width="300" />
 
</s:Application>

And the custom Spark TextInput skin, skins/CustomTextInputSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/08/setting-the-disabled-alpha-on-a-spark-textinput-control-in-flex-4/ -->
<s:SparkSkin name="CustomTextInputSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        alpha.disabled="0.2"
        blendMode="normal">
    <!-- states -->
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.TextInput")]
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            private var paddingChanged:Boolean;
 
            /* Define the skin elements that should not be colorized. */
            static private const exclusions:Array = ["background", "textDisplay"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = ["bgFill"];
 
            override public function get contentItems():Array {
                return contentFill;
            }
 
            override protected function commitProperties():void
            {
                super.commitProperties();
 
                if (paddingChanged)
                {
                    updatePadding();
                    paddingChanged = false;
                }
            }
 
            override protected function initializationComplete():void
            {
                useChromeColor = true;
                super.initializationComplete();
            }
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                if (getStyle("borderVisible") == true)
                {
                    border.visible = true;
                    shadow.visible = true;
                    background.left = background.top = background.right = background.bottom = 1;
                    textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 1;
                }
                else
                {
                    border.visible = false;
                    shadow.visible = false;
                    background.left = background.top = background.right = background.bottom = 0;
                    textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 0;
                }
 
                borderStroke.color = getStyle("borderColor");
                borderStroke.alpha = getStyle("borderAlpha");
 
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
 
            private function updatePadding():void
            {
                if (!textDisplay)
                    return;
 
                // Push padding styles into the textDisplay
                var padding:Number;
 
                padding = getStyle("paddingLeft");
                if (textDisplay.getStyle("paddingLeft") != padding)
                    textDisplay.setStyle("paddingLeft", padding);
 
                padding = getStyle("paddingTop");
                if (textDisplay.getStyle("paddingTop") != padding)
                    textDisplay.setStyle("paddingTop", padding);
 
                padding = getStyle("paddingRight");
                if (textDisplay.getStyle("paddingRight") != padding)
                    textDisplay.setStyle("paddingRight", padding);
 
                padding = getStyle("paddingBottom");
                if (textDisplay.getStyle("paddingBottom") != padding)
                    textDisplay.setStyle("paddingBottom", padding);
            }
 
            override public function styleChanged(styleProp:String):void
            {
                var allStyles:Boolean = !styleProp || styleProp == "styleName";
 
                super.styleChanged(styleProp);
 
                if (allStyles || styleProp.indexOf("padding") == 0)
                {
                    paddingChanged = true;
                    invalidateProperties();
                }
            }
        ]]>
    </fx:Script>
 
    <fx:Script>
        <![CDATA[
            private static const focusExclusions:Array = ["textDisplay"];
 
            override public function get focusSkinExclusions():Array {
                return focusExclusions;
            }
        ]]>
    </fx:Script>
 
    <!-- border -->
    <s:Rect left="0" right="0" top="0" bottom="0" id="border">
        <s:stroke>
            <s:SolidColorStroke id="borderStroke" weight="1" />
        </s:stroke>
    </s:Rect>
 
    <!-- fill -->
    <!--- Defines the appearance of the TextInput component's background. -->
    <s:Rect id="background" left="1" right="1" top="1" bottom="1">
        <s:fill>
            <!--- Defines the background fill color. -->
            <s:SolidColor id="bgFill" color="0xFFFFFF" />
        </s:fill>
    </s:Rect>
 
    <!-- shadow -->
    <s:Rect left="1" top="1" right="1" height="1" id="shadow">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>
 
    <!-- text -->
    <s:RichEditableText id="textDisplay"
            verticalAlign="middle"
            widthInChars="10"
            left="1" right="1" top="1" bottom="1" />
 
</s:SparkSkin>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/04/08/setting-the-disabled-alpha-on-a-spark-textinput-control-in-flex-4/feed/ 0 Creating a toggleable MX LinkButton control in Flex 4 http://blog.flexexamples.com/2010/02/04/creating-a-toggleable-mx-linkbutton-control-in-flex-4/ http://blog.flexexamples.com/2010/02/04/creating-a-toggleable-mx-linkbutton-control-in-flex-4/#comments Fri, 05 Feb 2010 01:54:52 +0000 Peter deHaan http://blog.flexexamples.com/?p=2391 In a previous example, “Creating a toggleable LinkButton control in Flex”, we saw how you could create a toggleable Flex LinkButton control by extending the mx.skins.halo.LinkButtonSkin and adding custom “selectedUpSkin”, “selectedOverSkin”, “selectedDownSkin”, and “selectedDisabledSkin” skin states.

The following example shows how you can create a toggleable MX LinkButton control in Flex 4 by creating [...]]]> In a previous example, “Creating a toggleable LinkButton control in Flex”, we saw how you could create a toggleable Flex LinkButton control by extending the mx.skins.halo.LinkButtonSkin and adding custom “selectedUpSkin”, “selectedOverSkin”, “selectedDownSkin”, and “selectedDisabledSkin” skin states.

The following example shows how you can create a toggleable MX LinkButton control in Flex 4 by creating a custom MX LinkButton skin and specifying a background fill for the selected (“selectedUp”, “selectedOver”, “selectedDown”, and “selectedDisabled”) states.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/04/creating-a-toggleable-mx-linkbutton-control-in-flex-4/ -->
<s:Application name="MX_LinkButton_toggle_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <mx:LinkButton id="lb1"
                label="Default ({lb1.selected})"
                toggle="true" />
        <mx:LinkButton id="lb2"
                label="Custom ({lb2.selected})"
                toggle="true"
                skin="skins.MyLinkButtonSkin" />
    </s:VGroup>
 
</s:Application>

The default Spark skins for the MX/Halo controls/containers can be found in the Flex SDK at:
%Flex SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\*.

And the custom MX LinkButton skin class, skins/MyLinkButtonSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/04/creating-a-toggleable-mx-linkbutton-control-in-flex-4/ -->
<s:Skin name="MyLinkButtonSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        minWidth="21" minHeight="21"
        alpha.disabledStates="0.5">
 
    <!-- states -->
    <s:states>
        <s:State name="up" stateGroups="upStates"/>
        <s:State name="over" stateGroups="overStates"/>
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates"/>
        <s:State name="selectedUp" stateGroups="selectedStates"/>
        <s:State name="selectedOver" stateGroups="selectedStates"/>
        <s:State name="selectedDown" stateGroups="selectedStates"/>
        <s:State name="selectedDisabled" stateGroups="selectedStates"/>
    </s:states>
 
    <!-- layer 1: fill -->
    <s:Rect left="0" right="0" top="0" bottom="0" 
            radiusX="{getStyle('cornerRadius')}"
            excludeFrom="upStates,disabledStates" >
        <s:fill>
            <s:SolidColor color.overStates="{getStyle('rollOverColor')}" 
                    color.downStates="{getStyle('selectionColor')}"
                    color.selectedStates="{getStyle('selectionColor')}"
                    alpha="1.0" />
        </s:fill>
    </s:Rect>
 
</s:Skin>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/02/04/creating-a-toggleable-mx-linkbutton-control-in-flex-4/feed/ 7 Viewing the skin states on a Spark Button control in Flex 4 http://blog.flexexamples.com/2009/12/19/viewing-the-skin-states-on-a-spark-button-control-in-flex-4/ http://blog.flexexamples.com/2009/12/19/viewing-the-skin-states-on-a-spark-button-control-in-flex-4/#comments Sat, 19 Dec 2009 15:09:56 +0000 Peter deHaan http://blog.flexexamples.com/?p=2271 The following example shows how you can create a simple skin-state browser in Flex 4 by calling the setCurrentState() method on an object’s skin property.

Full code after the jump.

<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2009/12/19/viewing-the-skin-states-on-a-spark-button-control-in-flex-4/ --> <s:Application name="Spark_Button_skin_setCurrentState_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init();">   <s:Button id="btn" label="CheckBox" includeInLayout="false" visible="false" />   <fx:Script> <![CDATA[ private function init():void [...]]]> The following example shows how you can create a simple skin-state browser in Flex 4 by calling the setCurrentState() method on an object’s skin property.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/12/19/viewing-the-skin-states-on-a-spark-button-control-in-flex-4/ -->
<s:Application name="Spark_Button_skin_setCurrentState_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        creationComplete="init();">
 
    <s:Button id="btn" label="CheckBox" includeInLayout="false" visible="false" />
 
    <fx:Script>
        <![CDATA[
            private function init():void {
                arrList.source = btn.skin.states;
            }
        ]]>
    </fx:Script>
 
    <s:DataGroup id="dg" horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList id="arrList" />
        </s:dataProvider>
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer autoDrawBackground="false">
                    <s:Button label="{data.name}"
                              creationComplete="event.currentTarget.skin.setCurrentState(data.name);"
                              mouseEnabled="false" />
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:DataGroup>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/12/19/viewing-the-skin-states-on-a-spark-button-control-in-flex-4/feed/ 8 Setting a gradient background fill on a Spark TextArea control in Flex 4 http://blog.flexexamples.com/2009/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/ http://blog.flexexamples.com/2009/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/#comments Sat, 24 Oct 2009 22:44:20 +0000 Peter deHaan http://blog.flexexamples.com/?p=2079 In a previous example, “Setting a gradient background fill on a Halo TextArea control in Flex 4″, we saw how you could create a linear gradient background on a Halo/MX TextArea control in Flex 4 by creating a custom border skin with a LinearGradient fill and setting the borderSkin style.

The following example shows [...]]]> In a previous example, “Setting a gradient background fill on a Halo TextArea control in Flex 4″, we saw how you could create a linear gradient background on a Halo/MX TextArea control in Flex 4 by creating a custom border skin with a LinearGradient fill and setting the borderSkin style.

The following example shows how you can create a linear gradient background on a Spark TextArea control in Flex 4 by modifying the background fill in the TextArea control’s skin to a LinearGradient.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_skin_background_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <s:Button id="btn"
                label="Set TextArea background gradient"
                click="btn_click(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.graphics.GradientEntry;
            import mx.graphics.LinearGradient;
            import mx.utils.ObjectUtil;
            import spark.skins.spark.TextAreaSkin;
 
            protected function btn_click(evt:MouseEvent):void {
                var grad1:GradientEntry = new GradientEntry(0xFF0000);
                var grad2:GradientEntry = new GradientEntry(0xFF00FF);
 
                var linearGrad:LinearGradient = new LinearGradient();
                linearGrad.entries = [grad1, grad2];
                linearGrad.rotation = 90;
 
                TextAreaSkin(ta.skin).background.fill = linearGrad;
            }
        ]]>
    </fx:Script>
 
    <s:TextArea id="ta"
            text="{Capabilities.serverString}"
            verticalScrollPolicy="on"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

View source is enabled in the following example.


You can also set the background fill to a gradient using a custom TextArea skin and then set the skinClass style, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_skin_background_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <s:TextArea id="ta"
            text="{Capabilities.serverString}"
            skinClass="skins.CustomTextAreaSkin"
            verticalScrollPolicy="on"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

And the custom Spark TextArea skin, skins/CustomTextAreaSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!--  -->
<s:SparkSkin name="CustomTextAreaSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        alpha.disabled="0.5"
        blendMode="normal">
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>
 
    <fx:Metadata>
        <![CDATA[
            [HostComponent("spark.components.TextArea")]
        ]]>
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            private var paddingChanged:Boolean;
 
            /* Define the skin elements that should not be colorized.
            For text area, the skin itself is colorized but the individual parts are not. */
            static private const exclusions:Array = ["background", "scroller"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = [];
 
            override public function get contentItems():Array {
                return contentFill
            };
 
            override protected function commitProperties():void {
                super.commitProperties();
 
                if (paddingChanged) {
                    updatePadding();
                    paddingChanged = false;
                }
            }
 
            override protected function initializationComplete():void {
                useBaseColor = true;
                super.initializationComplete();
            }
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (getStyle("borderVisible") == true) {
                    border.visible = true;
                    shadow.visible = true;
                    background.left = background.top = background.right = background.bottom = 1;
                    textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 1;
                } else {
                    border.visible = false;
                    shadow.visible = false;
                    background.left = background.top = background.right = background.bottom = 0;
                    textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 0;
                }
 
                borderStroke.color = getStyle("borderColor");
                borderStroke.alpha = getStyle("borderAlpha");
 
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
 
            private function updatePadding():void {
                if (!textDisplay) {
                    return;
                }
 
                // Push padding styles into the textDisplay
                var padding:Number;
 
                padding = getStyle("paddingLeft");
                if (textDisplay.getStyle("paddingLeft") != padding) {
                    textDisplay.setStyle("paddingLeft", padding);
                }
 
                padding = getStyle("paddingTop");
                if (textDisplay.getStyle("paddingTop") != padding) {
                    textDisplay.setStyle("paddingTop", padding);
                }
 
                padding = getStyle("paddingRight");
                if (textDisplay.getStyle("paddingRight") != padding) {
                    textDisplay.setStyle("paddingRight", padding);
                }
 
                padding = getStyle("paddingBottom");
                if (textDisplay.getStyle("paddingBottom") != padding) {
                    textDisplay.setStyle("paddingBottom", padding);
                }
            }
 
            override public function styleChanged(styleProp:String):void {
                super.styleChanged(styleProp);
 
                if (!styleProp || styleProp.indexOf("padding") == 0) {
                    paddingChanged = true;
                    invalidateProperties();
                }
            }
        ]]>
    </fx:Script>
 
    <fx:Script>
        <![CDATA[
            override public function get focusSkinExclusions():Array {
                return [ textDisplay ]
            };
        ]]>
    </fx:Script>
 
    <!-- border -->
    <s:Rect id="border"
            left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke id="borderStroke" weight="1"/>
        </s:stroke>
    </s:Rect>
 
    <!-- fill -->
    <!--- Defines the appearance of the TextArea component's background. -->
    <s:Rect id="background"
            left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="red" />
                <s:GradientEntry color="purple" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- shadow -->
    <s:Rect id="shadow"
            left="1" top="1" right="1" height="1">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>
 
    <!--- Defines the scroller used to scroll the RichEditableText. -->
    <s:Scroller id="scroller"
            left="0" top="0" right="0" bottom="0"
            minViewportInset="1"
            measuredSizeIncludesScrollBars="false">
        <s:RichEditableText id="textDisplay"
                widthInChars="15" heightInLines="10" />
    </s:Scroller>
 
</s:SparkSkin>

You can also set the skinClass style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_skin_background_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        s|TextArea {
            skinClass: ClassReference("skins.CustomTextAreaSkin");
        }
    </fx:Style>
 
    <s:TextArea id="ta"
            text="{Capabilities.serverString}"
            verticalScrollPolicy="on"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

Or, you can set the skinClass style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_skin_background_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <s:Button id="btn"
                label="Set TextArea background gradient"
                click="btn_click(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import skins.CustomTextAreaSkin;
 
            protected function btn_click(evt:MouseEvent):void {
                ta.setStyle("skinClass", CustomTextAreaSkin);
            }
        ]]>
    </fx:Script>
 
    <s:TextArea id="ta"
            text="{Capabilities.serverString}"
            verticalScrollPolicy="on"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/feed/ 5 Setting the fill colors on a Halo Button control in Flex 4 http://blog.flexexamples.com/2009/08/18/setting-the-fill-colors-on-a-halo-button-control-in-flex-4/ http://blog.flexexamples.com/2009/08/18/setting-the-fill-colors-on-a-halo-button-control-in-flex-4/#comments Tue, 18 Aug 2009 13:56:39 +0000 Peter deHaan http://blog.flexexamples.com/?p=1672 The following example shows how you can set the fill colors on a Halo Button control (with default Spark skin) in Flex 4 by creating a custom skin and setting the gradient colors in the fill layer:

<!-- layer 2: fill --> <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="red" color.overStates="haloGreen" [...]]]> The following example shows how you can set the fill colors on a Halo Button control (with default Spark skin) in Flex 4 by creating a custom skin and setting the gradient colors in the fill layer:

<!-- layer 2: fill -->
<s:Rect left="1" right="1" top="1" bottom="1"
        radiusX="2" radiusY="2">
    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="red"
                    color.overStates="haloGreen"
                    alpha="0.85"
                    alpha.selectedOver="1" />
            <s:GradientEntry color="haloOrange"
                    color.overStates="haloBlue"
                    alpha="0.85"
                    alpha.selectedOver="1" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/18/setting-the-fill-colors-on-a-halo-button-control-in-flex-4/ -->
<s:Application name="Halo_Button_fillColors_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <s:HGroup horizontalCenter="0" verticalCenter="0">
        <mx:Button id="btn1"
                label="Halo Button with default Halo skin"
                fillColors="[red,haloOrange,haloGreen,haloBlue]"
                skin="mx.skins.halo.ButtonSkin" />
        <mx:Button id="btn2"
                label="Halo Button with custom Spark skin"
                skin="skins.CustomHaloButtonSkin" />
    </s:HGroup>
 
</s:Application>

And the custom Halo Button skin, skins/CustomHaloButtonSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/18/setting-the-fill-colors-on-a-halo-button-control-in-flex-4/ -->
<local:SparkSkinForHalo name="CustomHaloButtonSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:local="mx.skins.spark.*"
        minWidth="21" minHeight="19"
        alpha.disabled="0.5">
    <!-- states -->
    <local:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="selectedUp" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="selectedOver" stateGroups="overStates, selectedStates" />
        <s:State name="selectedDown" stateGroups="downStates, selectedStates" />
        <s:State name="selectedDisabled" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </local:states>
 
    <fx:Script>
        /* Define the border items.*/
        static private const borderItem:Array = ["borderEntry1", "borderEntry2"];
        override protected function get borderItems():Array {
            return borderItem;
        }
    </fx:Script>
 
    <!-- layer 1: shadow -->
    <s:Rect left="-1" right="-1" top="-1" bottom="-1"
            radiusX="2" radiusY="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000"
                        color.downStates="0xFFFFFF"
                        alpha="0.01"
                        alpha.downStates="0" />
                <s:GradientEntry color="0x000000"
                        color.downStates="0xFFFFFF"
                        alpha="0.07"
                        alpha.downStates="0.5" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 2: fill -->
    <s:Rect left="1" right="1" top="1" bottom="1"
            radiusX="2" radiusY="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="red"
                        color.overStates="haloGreen"
                        alpha="0.85"
                        alpha.selectedOver="1" />
                <s:GradientEntry color="haloOrange"
                        color.overStates="haloBlue"
                        alpha="0.85"
                        alpha.selectedOver="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 3: fill lowlight -->
    <s:Rect left="1" right="1" bottom="1" height="9"
            radiusX="2" radiusY="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" alpha="0.0099" />
                <s:GradientEntry color="0x000000" alpha="0.0627" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 4: fill highlight -->
    <s:Rect left="1" right="1" top="1" height="9"
            radiusX="2" radiusY="2">
        <s:fill>
            <s:SolidColor color="0xFFFFFF"
                    alpha="0.33"
                    alpha.selectedUpStates="0.22"
                    alpha.overStates="0.22"
                    alpha.downStates="0.12" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 5: highlight stroke (all states except down) -->
    <s:Rect left="1" right="1" top="1" bottom="1"
            radiusX="2" radiusY="2"
            excludeFrom="downStates">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xFFFFFF"
                        alpha.overStates="0.22"
                        alpha.selectedUpStates="0.33" />
                <s:GradientEntry color="0xD8D8D8"
                        alpha.overStates="0.22"
                        alpha.selectedUpStates="0.33" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 6: highlight stroke (down state only) -->
    <s:Rect left="1" top="1" bottom="1" width="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect left="2" top="1" right="2" height="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="1" height="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.09" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <s:Rect left="0" right="0" top="0" bottom="0"
            width="69" height="20"
            radiusX="2" radiusY="2">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry id="borderEntry1"
                        alpha="0.5625"
                        alpha.down="0.6375"
                        alpha.selectedStates="0.6375" />
                <s:GradientEntry id="borderEntry2"
                        alpha="0.75"
                        alpha.down="0.85"
                        alpha.selectedStates="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
</local:SparkSkinForHalo>

The default Spark skins for the MX/Halo controls/containers can be found in the Flex SDK at:
%Flex SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\*.

View source is enabled in the following example.

You can also set the skin style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/18/setting-the-fill-colors-on-a-halo-button-control-in-flex-4/ -->
<s:Application name="Halo_Button_fillColors_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|Button#btn1 {
            fillColors: red, haloOrange, haloGreen, haloBlue;
            skin: ClassReference("mx.skins.halo.ButtonSkin");
        }
 
        mx|Button#btn2 {
            skin: ClassReference("skins.CustomHaloButtonSkin");
        }
    </fx:Style>
 
    <s:HGroup horizontalCenter="0" verticalCenter="0">
        <mx:Button id="btn1"
                label="Halo Button with default Halo skin" />
        <mx:Button id="btn2"
                label="Halo Button with custom Spark skin" />
    </s:HGroup>
 
</s:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/18/setting-the-fill-colors-on-a-halo-button-control-in-flex-4/ -->
<s:Application name="Halo_Button_fillColors_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.controls.Button;
            import mx.skins.halo.ButtonSkin;
            import spark.components.HGroup;
            import skins.CustomHaloButtonSkin;
 
            protected var btn1:Button;
            protected var btn2:Button;
 
            protected function init():void {
                btn1 = new Button();
                btn1.label = "Halo Button with default Halo skin";
                btn1.setStyle("fillColors", ["red", "haloOrange", "haloGreen", "haloBlue"]);
                btn1.setStyle("skin", ButtonSkin);
 
                btn2 = new Button();
                btn2.label = "Halo Button with custom Spark skin";
                btn2.setStyle("skin", CustomHaloButtonSkin);
 
                var hGr:HGroup = new HGroup();
                hGr.horizontalCenter = 0;
                hGr.verticalCenter = 0;
                hGr.addElement(btn1);
                hGr.addElement(btn2);
                addElement(hGr);
            }
        ]]>
    </fx:Script>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/08/18/setting-the-fill-colors-on-a-halo-button-control-in-flex-4/feed/ 2 Creating a custom link button skin on the MX LinkBar control in Flex 4 http://blog.flexexamples.com/2009/08/13/creating-a-custom-link-button-skin-on-the-halo-linkbar-control-in-flex-4/ http://blog.flexexamples.com/2009/08/13/creating-a-custom-link-button-skin-on-the-halo-linkbar-control-in-flex-4/#comments Thu, 13 Aug 2009 14:46:12 +0000 Peter deHaan http://blog.flexexamples.com/?p=1578 The following example shows how you can create a custom LinkButton skin on the MX LinkBar control in Flex 4 by setting the linkButtonStyleName and skin styles.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/08/13/creating-a-custom-link-button-skin-on-the-halo-linkbar-control-in-flex-4/ --> <s:Application name="MX_LinkBar_linkButtonStyleName_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">   <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx";   .linkButtonStyles { skin: ClassReference("skins.CustomLinkButtonSkin"); } </fx:Style>   [...]]]> The following example shows how you can create a custom LinkButton skin on the MX LinkBar control in Flex 4 by setting the linkButtonStyleName and skin styles.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/13/creating-a-custom-link-button-skin-on-the-halo-linkbar-control-in-flex-4/ -->
<s:Application name="MX_LinkBar_linkButtonStyleName_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        .linkButtonStyles {
            skin: ClassReference("skins.CustomLinkButtonSkin");
        }
    </fx:Style>
 
    <mx:LinkBar id="lnkBar"
            linkButtonStyleName="linkButtonStyles"
            separatorWidth="0"
            horizontalCenter="0" verticalCenter="0">
        <mx:dataProvider>
            <fx:Array>
                <fx:Object label="Red" icon="@Embed('assets/bullet_red.png')" />
                <fx:Object label="Orange" icon="@Embed('assets/bullet_orange.png')" />
                <fx:Object label="Yellow" icon="@Embed('assets/bullet_yellow.png')" />
                <fx:Object label="Green" icon="@Embed('assets/bullet_green.png')" />
                <fx:Object label="Blue" icon="@Embed('assets/bullet_blue.png')" />
            </fx:Array>
        </mx:dataProvider>
    </mx:LinkBar>
 
</s:Application>

And the custom LinkButton skin, skins/CustomLinkButtonSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/13/creating-a-custom-link-button-skin-on-the-halo-linkbar-control-in-flex-4/ -->
<s:Skin name="CustomLinkButtonSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        minWidth="21" minHeight="21"
        alpha.disabledStates="0.5">
    <!-- states -->
    <s:states>
        <s:State name="up" stateGroups="upStates"/>
        <s:State name="over" stateGroups="overStates"/>
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates"/>
        <s:State name="selectedUp" stateGroups="upStates"/>
        <s:State name="selectedOver" stateGroups="overStates"/>
        <s:State name="selectedDown" stateGroups="downStates"/>
        <s:State name="selectedDisabled" stateGroups="disabledStates"/>
    </s:states>
 
    <fx:Declarations>
        <fx:uint id="cornerRad">10</fx:uint>
    </fx:Declarations>
 
    <!-- layer 1: fill -->
    <s:Rect left="0" right="0" top="0" bottom="0"
            radiusX="{cornerRad}" radiusY="{cornerRad}"
            excludeFrom="upStates,disabledStates">
        <s:fill>
            <s:SolidColor id="fill"
                    color.overStates="haloGreen" color.downStates="haloBlue"
                    alpha.overStates="0.5" alpha.downStates="1.0" />
        </s:fill>
    </s:Rect>
 
</s:Skin>

The default Spark skins for the MX/Halo controls/containers can be found in the Flex SDK at:
%Flex SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\*.

View source is enabled in the following example.

You can also set the linkButtonStyleName style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/13/creating-a-custom-link-button-skin-on-the-halo-linkbar-control-in-flex-4/ -->
<s:Application name="MX_LinkBar_linkButtonStyleName_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        mx|LinkBar {
            linkButtonStyleName: linkButtonStyles;
            separatorWidth: 0;
        }
 
        .linkButtonStyles {
            skin: ClassReference("skins.CustomLinkButtonSkin");
        }
    </fx:Style>
 
    <mx:LinkBar id="lnkBar"
            horizontalCenter="0" verticalCenter="0">
        <mx:dataProvider>
            <fx:Array>
                <fx:Object label="Red" icon="@Embed('assets/bullet_red.png')" />
                <fx:Object label="Orange" icon="@Embed('assets/bullet_orange.png')" />
                <fx:Object label="Yellow" icon="@Embed('assets/bullet_yellow.png')" />
                <fx:Object label="Green" icon="@Embed('assets/bullet_green.png')" />
                <fx:Object label="Blue" icon="@Embed('assets/bullet_blue.png')" />
            </fx:Array>
        </mx:dataProvider>
    </mx:LinkBar>
 
</s:Application>

Or, you can set the linkButtonStyleName style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/13/creating-a-custom-link-button-skin-on-the-halo-linkbar-control-in-flex-4/ -->
<s:Application name="MX_LinkBar_linkButtonStyleName_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        .linkButtonStyles {
            skin: ClassReference("skins.CustomLinkButtonSkin");
        }
    </fx:Style>
 
    <fx:Script>
        <![CDATA[
            protected function btn_click(evt:MouseEvent):void {
                lnkBar.setStyle("linkButtonStyleName", "linkButtonStyles");
            }
        ]]>
    </fx:Script>
 
    <s:Button id="btn"
            label="Set link button style name"
            left="10" top="10"
            click="btn_click(event);" />
 
    <mx:LinkBar id="lnkBar"
            separatorWidth="0"
            horizontalCenter="0" verticalCenter="0">
        <mx:dataProvider>
            <fx:Array>
                <fx:Object label="Red" icon="@Embed('assets/bullet_red.png')" />
                <fx:Object label="Orange" icon="@Embed('assets/bullet_orange.png')" />
                <fx:Object label="Yellow" icon="@Embed('assets/bullet_yellow.png')" />
                <fx:Object label="Green" icon="@Embed('assets/bullet_green.png')" />
                <fx:Object label="Blue" icon="@Embed('assets/bullet_blue.png')" />
            </fx:Array>
        </mx:dataProvider>
    </mx:LinkBar>
 
</s:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/13/creating-a-custom-link-button-skin-on-the-halo-linkbar-control-in-flex-4/ -->
<s:Application name="MX_LinkBar_linkButtonStyleName_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.controls.LinkBar;
            import skins.CustomLinkButtonSkin;
 
            [Embed("assets/bullet_red.png")]
            private const BULLET_RED:Class;
 
            [Embed("assets/bullet_orange.png")]
            private const BULLET_ORANGE:Class;
 
            [Embed("assets/bullet_yellow.png")]
            private const BULLET_YELLOW:Class;
 
            [Embed("assets/bullet_green.png")]
            private const BULLET_GREEN:Class;
 
            [Embed("assets/bullet_blue.png")]
            private const BULLET_BLUE:Class;
 
            private var lnkBar:LinkBar;
 
            private function init():void {
                var dp:Array = [];
                dp.push({label:"Red", icon:BULLET_RED});
                dp.push({label:"Orange", icon:BULLET_ORANGE});
                dp.push({label:"Yellow", icon:BULLET_YELLOW});
                dp.push({label:"Green", icon:BULLET_GREEN});
                dp.push({label:"Blue", icon:BULLET_BLUE});
 
                var linkButtonStyles:CSSStyleDeclaration = new CSSStyleDeclaration(".linkButtonStyles");
                linkButtonStyles.setStyle("skin", CustomLinkButtonSkin);
 
                lnkBar = new LinkBar();
                lnkBar.dataProvider = dp;
                lnkBar.setStyle("linkButtonStyleName", "linkButtonStyles");
                lnkBar.setStyle("separatorWidth", 0);
                lnkBar.horizontalCenter = 0;
                lnkBar.verticalCenter = 0;
                addElement(lnkBar);
            }
        ]]>
    </fx:Script>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/08/13/creating-a-custom-link-button-skin-on-the-halo-linkbar-control-in-flex-4/feed/ 5 Removing the vertical separator from the Halo ComboBox control in Flex 4 http://blog.flexexamples.com/2009/07/11/removing-the-vertical-separator-from-the-halo-combobox-control-in-flex-4/ http://blog.flexexamples.com/2009/07/11/removing-the-vertical-separator-from-the-halo-combobox-control-in-flex-4/#comments Sun, 12 Jul 2009 06:59:31 +0000 Peter deHaan http://blog.flexexamples.com/?p=1486 In a previous example, “Removing the vertical separator from the ComboBox control in Flex”, we saw how you could remove the vertical separator from the Flex ComboBox control by creating a custom ComboBox skin using ActionScript.

The following example shows how you can remove the vertical separator fro a Halo ComboBox control (with default [...]]]> In a previous example, “Removing the vertical separator from the ComboBox control in Flex”, we saw how you could remove the vertical separator from the Flex ComboBox control by creating a custom ComboBox skin using ActionScript.

The following example shows how you can remove the vertical separator fro a Halo ComboBox control (with default Spark skin) in Flex 4 by creating a custom skin and setting the skin style.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/11/removing-the-vertical-separator-from-the-halo-combobox-control-in-flex-4/ -->
<s:Application name="Halo_ComboBox_skin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <mx:ComboBox id="comboBox"
            dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]"
            skin="skins.CustomComboBoxSkin"
            horizontalCenter="0" verticalCenter="-60" />
 
</s:Application>

And the custom ComboBox skin class, skins/CustomComboBoxSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/11/removing-the-vertical-separator-from-the-halo-combobox-control-in-flex-4/ -->
<local:SparkSkinForHalo name="CustomComboBoxSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:local="mx.skins.spark.*"
        minWidth="21" minHeight="21"
        alpha.disabled="0.5">
    <!-- states -->
    <local:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </local:states>
 
    <fx:Script>
        /* Define the skin elements that should not be colorized. 
           For button, the graphics are colorized but the arrow is not. */
        static private const exclusions:Array = ["arrow"];
        override public function get colorizeExclusions():Array {
            return exclusions;
        }
 
        /* Define the symbol fill items that should be colored by the "symbolColor" style. */
        static private const symbols:Array = ["arrowFill1", "arrowFill2"];
        override public function get symbolItems():Array {
            return symbols
        }
 
        /* Define the border items.*/
        static private const borderItem:Array = ["borderEntry1", "borderEntry2"];
        override protected function get borderItems():Array {
            return borderItem;
        }
    </fx:Script>
 
    <!-- layer 1: shadow -->
    <s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" 
                        color.down="0xFFFFFF"
                        alpha="0.01"
                        alpha.down="0" />
                <s:GradientEntry color="0x000000" 
                        color.down="0xFFFFFF" 
                        alpha="0.07"
                        alpha.down="0.5" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 2: fill -->
    <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" 
                        color.over="0xBBBDBD" 
                        color.down="0xAAAAAA" 
                        alpha="0.85" />
                <s:GradientEntry color="0xD8D8D8" 
                        color.over="0x9FA0A1" 
                        color.down="0x929496" 
                        alpha="0.85" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 3: fill lowlight -->
    <s:Rect left="1" right="1" bottom="1" height="9" radiusX="2" radiusY="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" alpha="0.0099" />
                <s:GradientEntry color="0x000000" alpha="0.0627" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 4: fill highlight -->
    <s:Rect left="1" right="1" top="1" height="9" radiusX="2" radiusY="2">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" 
                    alpha="0.33" 
                    alpha.over="0.22" 
                    alpha.down="0.12" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 5: highlight stroke (all states except down) -->
    <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2" excludeFrom="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
                <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 6: highlight stroke (down state only) -->
    <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect left="2" top="1" right="2" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.09" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry id="borderEntry1" 
                        alpha="0.5625"
                        alpha.down="0.6375" />
                <s:GradientEntry id="borderEntry2" 
                        alpha="0.75" 
                        alpha.down="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 8: arrow -->
    <s:Path right="6" verticalCenter="0" id="arrow"
          data="M 4.0 4.0 L 4.0 3.0 L 5.0 3.0 L 5.0 2.0 L 6.0 2.0 L 6.0 1.0 L 7.0 1.0 L 7.0 0.0 L 0.0 0.0 L 0.0 1.0 L 1.0 1.0 L 1.0 2.0 L 2.0 2.0 L 2.0 3.0 L 3.0 3.0 L 3.0 4.0 L 4.0 4.0">
        <s:fill>
            <s:RadialGradient rotation="90" focalPointRatio="1">
                <s:GradientEntry id="arrowFill1" color="0" alpha="0.6" />
                <s:GradientEntry id="arrowFill2" color="0" alpha="0.8" />
            </s:RadialGradient>
        </s:fill>
    </s:Path>
 
</local:SparkSkinForHalo>

The default Spark skins for the MX/Halo controls/containers can be found in the Flex SDK at:
%Flex SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\*.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/07/11/removing-the-vertical-separator-from-the-halo-combobox-control-in-flex-4/feed/ 0 Setting a background image on a Halo Button control in Flex 4 http://blog.flexexamples.com/2009/07/10/setting-a-background-image-on-a-halo-button-control-in-flex-4/ http://blog.flexexamples.com/2009/07/10/setting-a-background-image-on-a-halo-button-control-in-flex-4/#comments Sat, 11 Jul 2009 06:59:25 +0000 Peter deHaan http://blog.flexexamples.com/?p=1480 The following example shows how you can set a background image fill on a Halo Button control (with default Spark skin) in Flex 4 by creating a custom Button skin and setting the skin style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/07/10/setting-a-background-image-on-a-halo-button-control-in-flex-4/ --> <s:Application name="Halo_Button_skin_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo">   <mx:Button id="btn" [...]]]> The following example shows how you can set a background image fill on a Halo Button control (with default Spark skin) in Flex 4 by creating a custom Button skin and setting the skin style.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/10/setting-a-background-image-on-a-halo-button-control-in-flex-4/ -->
<s:Application name="Halo_Button_skin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <mx:Button id="btn"
            label="Halo Button"
            skin="skins.CustomButtonSkin"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

And the custom Button skin class, skins/CustomButtonSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/10/setting-a-background-image-on-a-halo-button-control-in-flex-4/ -->
<local:SparkSkinForHalo name="CustomButtonSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:local="mx.skins.spark.*"
        minWidth="21" minHeight="19" 
        alpha.disabled="0.5">
    <!-- states -->
    <local:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="selectedUp" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="selectedOver" stateGroups="overStates, selectedStates" />
        <s:State name="selectedDown" stateGroups="downStates, selectedStates" />
        <s:State name="selectedDisabled" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </local:states>
 
    <fx:Script>
        /* Define the border items.*/
        static private const borderItem:Array = ["borderEntry1", "borderEntry2"];
        override protected function get borderItems():Array {
            return borderItem;
        }
    </fx:Script>
 
    <!-- layer 1: shadow -->
    <s:Rect left="-1" right="-1" top="-1" bottom="-1"
            radiusX="2" radiusY="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                    <s:GradientEntry color="0x000000" 
                            color.downStates="0xFFFFFF"
                            alpha="0.01"
                            alpha.downStates="0" />
                    <s:GradientEntry color="0x000000" 
                            color.downStates="0xFFFFFF" 
                            alpha="0.07"
                            alpha.downStates="0.5" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 2: fill -->
    <s:Rect left="1" right="1" top="1" bottom="1"
            radiusX="2" radiusY="2"
            alpha="0.6">
        <s:fill>
            <s:BitmapFill source="@Embed('assets/pattern_149.gif')" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 3: fill lowlight -->
    <s:Rect left="1" right="1" bottom="1" height="9"
            radiusX="2" radiusY="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" alpha="0.0099" />
                <s:GradientEntry color="0x000000" alpha="0.0627" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 4: fill highlight -->
    <s:Rect left="1" right="1" top="1" height="9"
            radiusX="2" radiusY="2">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" 
                        alpha="0.33" 
                        alpha.selectedUpStates="0.22"
                        alpha.overStates="0.22" 
                        alpha.downStates="0.12" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 5: highlight stroke (all states except down) -->
    <s:Rect left="1" right="1" top="1" bottom="1"
            radiusX="2" radiusY="2"
            excludeFrom="downStates">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xFFFFFF"
                        alpha.overStates="0.22"
                        alpha.selectedUpStates="0.33" />
                <s:GradientEntry color="0xD8D8D8"
                        alpha.overStates="0.22"
                        alpha.selectedUpStates="0.33" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 6: highlight stroke (down state only) -->
    <s:Rect left="1" top="1" bottom="1" width="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect left="2" top="1" right="2" height="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="1" height="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.09" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <s:Rect left="0" right="0" top="0" bottom="0"
            width="69" height="20"
            radiusX="2" radiusY="2">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry id="borderEntry1" 
                        alpha="0.5625"
                        alpha.down="0.6375"
                        alpha.selectedStates="0.6375" />
                <s:GradientEntry id="borderEntry2" 
                        alpha="0.75" 
                        alpha.down="0.85"
                        alpha.selectedStates="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
</local:SparkSkinForHalo>

The default Spark skins for the MX/Halo controls/containers can be found in the Flex SDK at:
%Flex SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\*.

View source is enabled in the following example.

Background image pattern copyright of Squidfingers.com.


You can also set the skin style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/10/setting-a-background-image-on-a-halo-button-control-in-flex-4/ -->
<s:Application name="Halo_Button_skin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|Button {
            skin: ClassReference("skins.CustomButtonSkin");
        }
    </fx:Style>
 
    <mx:Button id="btn"
            label="Halo Button"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

Or, you can set the skin style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/10/setting-a-background-image-on-a-halo-button-control-in-flex-4/ -->
<s:Application name="Halo_Button_skin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Script>
        <![CDATA[
            import skins.CustomButtonSkin;
 
            protected function btn2_click(evt:MouseEvent):void {
                btn.setStyle("skin", CustomButtonSkin);
            }
        ]]>
    </fx:Script>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <s:Button id="btn2"
                label="Set Button skin"
                click="btn2_click(event);" />
    </mx:ApplicationControlBar>
 
    <mx:Button id="btn"
            label="Halo Button"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

Finally, you can set the skin style globally using the StyleManager class, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/10/setting-a-background-image-on-a-halo-button-control-in-flex-4/ -->
<s:Application name="Halo_Button_skin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import skins.CustomButtonSkin;
 
            private function init():void {
                var buttonStyles:CSSStyleDeclaration = StyleManager.getStyleDeclaration("mx.controls.Button");
                buttonStyles.setStyle("skin", CustomButtonSkin);
            }
        ]]>
    </fx:Script>
 
    <mx:Button id="btn"
            label="Halo Button"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/07/10/setting-a-background-image-on-a-halo-button-control-in-flex-4/feed/ 2 Setting an image background on a Halo ButtonBar control in Flex 4 http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/ http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/#comments Fri, 10 Jul 2009 06:59:17 +0000 Peter deHaan http://blog.flexexamples.com/?p=1474 The following example shows how you can set an image background on a Halo ButtonBar control (with default Spark skin) in Flex 4 by setting the buttonStyleName, firstButtonStyleName, lastButtonStyleName, and skin styles.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/ --> <s:Application name="Halo_ButtonBar_buttonStyleName_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo">   <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace [...]]]> The following example shows how you can set an image background on a Halo ButtonBar control (with default Spark skin) in Flex 4 by setting the buttonStyleName, firstButtonStyleName, lastButtonStyleName, and skin styles.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/ -->
<s:Application name="Halo_ButtonBar_buttonStyleName_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        .buttonBarButtonStyles {
            skin: ClassReference("skins.CustomButtonBarButtonSkin");
        }
    </fx:Style>
 
    <mx:ButtonBar id="btnBar"
            dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]"
            buttonStyleName="buttonBarButtonStyles"
            firstButtonStyleName="buttonBarButtonStyles"
            lastButtonStyleName="buttonBarButtonStyles"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

The custom ButtonBar button skin class, skins/CustomButtonBarButtonSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/ -->
<s:SparkSkin name="CustomButtonBarButtonSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        minWidth="21" minHeight="21"
        alpha.disabledStates="0.5">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="selectedUp" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="selectedOver" stateGroups="overStates, selectedStates" />
        <s:State name="selectedDown" stateGroups="downStates, selectedStates" />
        <s:State name="selectedDisabled" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>
 
    <!-- layer 1: shadow -->
    <s:Rect left="0" right="0" bottom="-1" height="1">
        <s:fill>
            <s:SolidColor color="black" 
                    color.downStates="white" 
                    alpha="0.07"
                    alpha.downStates="0.5" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 2: fill -->
    <s:Rect left="1" right="1" top="1" bottom="1" alpha="0.6">
        <s:fill>
            <s:BitmapFill source="@Embed('assets/pattern_149.gif')" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 3: fill lowlight -->
    <s:Rect left="1" right="1" bottom="1" height="9">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="black" alpha="0.0099" />
                <s:GradientEntry color="black" alpha="0.0627" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 4: fill highlight -->
    <s:Rect left="1" right="1" top="1" height="9">
        <s:fill>
            <s:SolidColor color="white" 
                    alpha="0.33" 
                    alpha.selectedUpStates="0.22"
                    alpha.overStates="0.22" 
                    alpha.downStates="0.12" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 5: highlight stroke (all states except down) -->
    <s:Rect left="1" right="1" top="1" bottom="1" excludeFrom="downStates">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="white" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
                <s:GradientEntry color="0xD8D8D8" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 6: highlight stroke (down state only) -->
    <s:Rect left="1" top="1" bottom="1" width="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="black" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="black" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="1" right="1" height="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="black" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="1" height="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="black" alpha="0.09" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="black" 
                        alpha="0.5625"
                        alpha.down="0.6375"
                        alpha.selectedStates="0.6375" />
                <s:GradientEntry color="black" 
                        alpha="0.75" 
                        alpha.down="0.85"
                        alpha.selectedStates="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
</s:SparkSkin>

You can also set the buttonStyleName style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/ -->
<s:Application name="Halo_ButtonBar_buttonStyleName_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|ButtonBar {
            buttonStyleName: buttonBarButtonStyles;
            firstButtonStyleName: buttonBarButtonStyles;
            lastButtonStyleName: buttonBarButtonStyles;
        }
 
        .buttonBarButtonStyles {
            skin: ClassReference("skins.CustomButtonBarButtonSkin");
        }
    </fx:Style>
 
    <mx:ButtonBar id="btnBar"
            dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

Or, you can set the buttonStyleName style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/ -->
<s:Application name="Halo_ButtonBar_buttonStyleName_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import skins.CustomButtonBarButtonSkin;
 
            private function init():void {
                var buttonBarButtonStyles:CSSStyleDeclaration = new CSSStyleDeclaration(".buttonBarButtonStyles");
                buttonBarButtonStyles.setStyle("skin", CustomButtonBarButtonSkin);
 
                var buttonBarStyles:CSSStyleDeclaration = StyleManager.getStyleDeclaration("mx.controls.ButtonBar");
                buttonBarStyles.setStyle("buttonStyleName", "buttonBarButtonStyles");
                buttonBarStyles.setStyle("firstButtonStyleName", "buttonBarButtonStyles");
                buttonBarStyles.setStyle("lastButtonStyleName", "buttonBarButtonStyles");
            }
        ]]>
    </fx:Script>
 
    <mx:ButtonBar id="btnBar"
            dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/ -->
<s:Application name="Halo_ButtonBar_buttonStyleName_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import skins.CustomButtonBarButtonSkin;
            import mx.controls.ButtonBar;
 
            private var btnBar:ButtonBar;
 
            private function init():void {
                var buttonBarButtonStyles:CSSStyleDeclaration = new CSSStyleDeclaration(".buttonBarButtonStyles");
                buttonBarButtonStyles.setStyle("skin", CustomButtonBarButtonSkin);
 
                btnBar = new ButtonBar();
                btnBar.dataProvider = ["The", "Quick", "Brown", "Fox", "Jumps", "Over", "The", "Lazy", "Dog"];
                btnBar.setStyle("buttonStyleName", "buttonBarButtonStyles");
                btnBar.setStyle("firstButtonStyleName", "buttonBarButtonStyles");
                btnBar.setStyle("lastButtonStyleName", "buttonBarButtonStyles");
                btnBar.horizontalCenter = 0;
                btnBar.verticalCenter = 0;
                addElement(btnBar);
            }
        ]]>
    </fx:Script>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/feed/ 0 Creating a custom MX Accordion header skin in Flex 4 http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/ http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/#comments Mon, 22 Jun 2009 06:59:12 +0000 Peter deHaan http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/ The following example shows how you can style the MX Accordion header (with default Spark skin) in Flex 4 by creating a new skin based on the default Spark skin and modifying the various skin parts.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/ --> <s:Application name="Accordion_SparkSkin_headerStyleName_skin_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">   <fx:Style> .customAccordionHeadStyles { skin: ClassReference("skins.CustomAccordionHeaderSkin"); } [...]]]> The following example shows how you can style the MX Accordion header (with default Spark skin) in Flex 4 by creating a new skin based on the default Spark skin and modifying the various skin parts.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/ -->
<s:Application name="Accordion_SparkSkin_headerStyleName_skin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Style>
        .customAccordionHeadStyles {
            skin: ClassReference("skins.CustomAccordionHeaderSkin");
        }
    </fx:Style>
 
    <mx:Accordion id="accordion"
            headerStyleName="customAccordionHeadStyles"
            left="20" right="20" top="20" bottom="20">
        <mx:VBox label="Red" width="100%" height="100%">
            <mx:Text text="Panel 1" />
        </mx:VBox>
        <mx:VBox label="Orange" width="100%" height="100%">
            <mx:Text text="Panel 2" />
        </mx:VBox>
        <mx:VBox label="Yellow" width="100%" height="100%">
            <mx:Text text="Panel 3" />
        </mx:VBox>
        <mx:VBox label="Green" width="100%" height="100%">
            <mx:Text text="Panel 4" />
        </mx:VBox>
        <mx:VBox label="Blue" width="100%" height="100%">
            <mx:Text text="Panel 5" />
        </mx:VBox>
    </mx:Accordion>
 
</s:Application>

The default Spark skins for the MX/Halo controls/containers can be found in the Flex SDK at:
%Flex SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\*.

And the custom Accordion header skin, skins/CustomAccordionHeaderSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/ -->
<s:SparkSkin name="CustomAccordionHeaderSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" 
        minWidth="21" minHeight="21"
        alpha.disabled="0.5">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
        <s:State name="selectedUp" />
        <s:State name="selectedOver" />
        <s:State name="selectedDown" />
        <s:State name="selectedDisabled" />
    </s:states>
 
    <fx:Script>
        <![CDATA[
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
 
    <!-- layer 3: fill -->
    <s:Rect left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:SolidColor color="white"
                          color.up="red"
                          color.over="haloOrange"
                          color.down="yellow"
                          color.selectedUp="haloGreen"
                          color.selectedOver="haloBlue"
                          color.selectedDown="purple" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 4: fill lowlight -->
    <s:Rect left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:LinearGradient rotation="270">
                <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
                <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
                <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 5: fill highlight -->
    <s:Rect left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.0"
                                 alpha="0.33" 
                                 alpha.over="0.22" 
                                 alpha.down="0.12"/>
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.48"
                                 alpha="0.33"
                                 alpha.over="0.22"
                                 alpha.down="0.12" />
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.48001"
                                 alpha="0" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 6: highlight stroke (all states except down) -->
    <s:Rect left="1" right="1" top="1" bottom="1" excludeFrom="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90">
                <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
                <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 6: highlight stroke (down state only) -->
    <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="1" right="1" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.09" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 2: border -->
    <s:Rect left="0" right="0" top="0" bottom="0"
            width="69" height="20">
        <s:stroke>
            <s:SolidColorStroke color="0x696969" 
                                alpha="1" 
                                alpha.over="1" 
                                alpha.down="1" />
        </s:stroke>
    </s:Rect>
 
</s:SparkSkin>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/feed/ 14