Setting a custom skin on an FxButton control in Flex Gumbo

The following example shows how you can set a custom skin on an Flex Gumbo FxButton control by setting the skinClass style.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/04/setting-a-custom-skin-on-an-fxbutton-control-in-flex-gumbo/ -->
<FxApplication name="FxButton_skinClass_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        backgroundColor="white">
    <layout>
        <BasicLayout />
    </layout>

    <FxButton label="FxButton"
            horizontalCenter="0"
            verticalCenter="0"
            skinClass="MyExternalSkin" />

</FxApplication>

View MyExternalSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/04/setting-a-custom-skin-on-an-fxbutton-control-in-flex-gumbo/ -->
<Skin xmlns="http://ns.adobe.com/mxml/2009" resizeMode="scale">

    <states>
        <State name="up"/>
        <State name="over"/>
        <State name="down"/>
        <State name="disabled"/>
    </states>

    <Metadata>[HostComponent("mx.components.FxButton")]</Metadata>

    <Path data.up="M 0 0 L 10 0 L 10 10 L 0 10 Z"
            data.over="M 0 0 L 20 0 L 20 20 L 0 20 Z"
            data.down="M 0 0 L 30 0 L 30 30 L 0 30 Z">
        <fill>
            <SolidColor color="#000000"/>
        </fill>
    </Path>

</Skin>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/04/setting-a-custom-skin-on-an-fxbutton-control-in-flex-gumbo/ -->
<FxApplication name="FxButton_skinClass_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        backgroundColor="white">
    <layout>
        <BasicLayout />
    </layout>

    <Style>
        FxButton {
            skinClass: ClassReference("MyExternalSkin");
        }
    </Style>

    <FxButton label="FxButton"
            horizontalCenter="0"
            verticalCenter="0" />

</FxApplication>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/04/setting-a-custom-skin-on-an-fxbutton-control-in-flex-gumbo/ -->
<FxApplication name="FxButton_skinClass_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        backgroundColor="white">
    <layout>
        <BasicLayout />
    </layout>

    <Script>
        <![CDATA[
            private function btn_click(evt:Event):void {
                btn.setStyle("skinClass", MyExternalSkin);
            }
        ]]>
    </Script>

    <FxButton id="btn"
            label="FxButton"
            horizontalCenter="0"
            verticalCenter="0"
            click="btn_click(event);" />

</FxApplication>

Finally, you can also define the skin directly in the MXML file by wrapping the Skin object in a <Component/> tag within the <Declarations/> section, as seen in the following example (big thanks to my co-worker Ryan Frishberg for the heads up on this solution):

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/04/setting-a-custom-skin-on-an-fxbutton-control-in-flex-gumbo/ -->
<FxApplication name="FxButton_skinClass_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        backgroundColor="white">
    <layout>
        <BasicLayout />
    </layout>

    <Declarations>
        <Component className="MyInlineSkin">
            <Skin xmlns="http://ns.adobe.com/mxml/2009" resizeMode="scale">
                <states>
                    <State name="up" />
                    <State name="over" />
                    <State name="down" />
                    <State name="disabled"/>
                </states>

                <Metadata>[HostComponent("mx.components.FxButton")]</Metadata>

                <Path data.up="M 0 0 L 10 0 L 10 10 L 0 10 Z"
                        data.over="M 0 0 L 20 0 L 20 20 L 0 20 Z"
                        data.down="M 0 0 L 30 0 L 30 30 L 0 30 Z">
                    <fill>
                        <SolidColor color="#000000"/>
                    </fill>
                </Path>
            </Skin>
        </Component>
    </Declarations>

    <FxButton label="FxButton"
            horizontalCenter="0"
            verticalCenter="0"
            skinClass="MyInlineSkin" />

</FxApplication>

This entry is based on a beta version of the Flex Gumbo 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 Gumbo SDK.

Tagged as: className, Gumbo, skinClass