Styling the different states on a Spark CheckBox control in Flex 4

The following example shows how you can style the various states on a Flex 4 Spark CheckBox control using a <Style> block.

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 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 SDK in Flex Builder 3".

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/17/styling-the-different-states-on-an-fxcheckbox-control-in-flex-gumbo/ -->
<s:Application name="FxCheckBox_statesStyle_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:layout>
        <s:BasicLayout />
    </s:layout>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        /* all states */
        s|CheckBox {
            fontWeight: bold;
            fontSize: 24;
            symbolColor: black;
        }
 
        /* deselected states */
        s|CheckBox:up,
        s|CheckBox:over,
        s|CheckBox:down,
        s|CheckBox:disabled {
            baseColor: red;
            color: red;
        }
 
        /* selected states */
        s|CheckBox:upAndSelected,
        s|CheckBox:overAndSelected,
        s|CheckBox:downAndSelected,
        s|CheckBox:disabledAndSelected {
            baseColor: green;
            color: green;
        }
    </fx:Style>
 
    <s:CheckBox id="ch"
                label="enabled"
                selected="true"
                color="black"
                baseColor="white"
                x="10"
                y="10" />
 
    <s:CheckBox id="checkBox"
                label="FxCheckBox"
                enabled="{ch.selected}"
                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.

Tagged as: Gumbo

{ 5 comments… read them below or add one }

1 Richard February 17, 2009 at 8:25 am: I must be missing something, you show the working .swf somewhere, right?

2 Peter deHaan February 17, 2009 at 5:13 pm: Richard,

Nope, due to limited time lately I haven’t been posting SWFs. But these are pretty easy to copy/paste into Flex Builder and compile using the latest Gumbo SDK.

Peter

3 Jian(China) February 17, 2009 at 9:17 pm: Hi, I compile the code on http://blog.flexexamples.com/2009/02/11/styling-specific-states-in-an-fxtogglebutton-control-in-flex-gumbo/ by flex 4(Gumbo), and the compiler does not report any error, but in Flash Player 10, the selected states style has no effect, could you help me? Thank you.

4 Peter deHaan February 18, 2009 at 9:05 am: Jian(China),

I’m not sure which version of the Gumbo SDK you’re using, but try downloading the latest version from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4 and see if that helps.

Peter

5 Jian(China) February 18, 2009 at 6:40 pm: Peter,

Thank you for your reply. I download the latest stable build(4.0.0.4904 ), and it works.thx.