Creating a multiline Spark RadioButton control in Flex 4

The following example shows how you can create a multiline Spark RadioButton control in Flex 4 by creating a custom RadioButton skin, setting the skinClass style, and removing the maxDisplayedLines property.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see 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/10/creating-a-multiline-spark-radiobutton-control-in-flex-4/ -->
<s:Application name="Spark_RadioButton_skinClass_maxDisplayedLines_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:Declarations>
        <s:RadioButtonGroup id="rbg1" />
    </fx:Declarations>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|RadioButton {
            skinClass: ClassReference("skins.CustomMultilineRadioButtonSkin");
        }
    </fx:Style>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0" width="250">
        <s:RadioButton id="rb1"
                label="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                group="{rbg1}"
                width="100%" />
        <s:RadioButton id="rb2"
                label="Sed pellentesque vehicula euismod. Pellentesque nulla sapien, tempor sit amet volutpat sed, condimentum vitae risus. Sed in purus sapien, ac vehicula nisl."
                group="{rbg1}"
                width="100%" />
        <s:RadioButton id="rb3"
                label="Phasellus tortor sem, scelerisque nec porta ornare, condimentum at enim. Vivamus eu mi nisl, et sollicitudin nisi."
                group="{rbg1}"
                width="100%" />
    </s:VGroup>
 
</s:Application>

And the custom Spark RadioButton skin, skins/CustomMultilineRadioButtonSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/10/creating-a-multiline-spark-radiobutton-control-in-flex-4/ -->
<s:SparkSkin name="CustomMultilineRadioButtonSkin"
             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.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="upAndSelected" stateGroups="selectedStates" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
        <s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.RadioButton")]
    </fx:Metadata> 
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized. 
            For button, the graphics are colorized but the label is not. */
            static private const exclusions:Array = ["labelDisplay", "dot"];
 
            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 = ["dotFill"];
 
            override public function get symbolItems():Array {
                return symbols;
            }
 
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
 
    <fx:Script>
        <![CDATA[
            private static const focusExclusions:Array = ["labelDisplay"];
 
            override public function get focusSkinExclusions():Array {
                return focusExclusions;
            }
        ]]>
    </fx:Script>
 
    <s:Group top="5" width="13" height="13">
        <!-- drop shadow -->
        <s:Ellipse left="-1" top="-1" right="-1" bottom="-1">
            <s:stroke>
                <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0x000000" color.downStates="0xFFFFFF" alpha="0.011" alpha.downStates="0" />
                    <s:GradientEntry color="0x000000" color.downStates="0xFFFFFF" alpha="0.121" alpha.downStates="0.57" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Ellipse>
 
        <!-- fill -->
        <s:Ellipse left="1" top="1" right="1" bottom="1">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color="0xFFFFFF" color.overStates="0xBBBDBD" color.downStates="0xAAAAAA" alpha="0.85" />
                    <s:GradientEntry color="0xD8D8D8" color.overStates="0x9FA0A1" color.downStates="0x929496" alpha="0.85" />
                </s:LinearGradient>
            </s:fill>
        </s:Ellipse>
 
        <!-- fill highlight -->
        <s:Path data="M 1 6 Q 2 2 6 1 Q 11 2 12 6 h -9">
            <s:fill>
                <s:SolidColor color="0xFFFFFF" alpha="0.33" />
            </s:fill>
        </s:Path>
 
        <!-- layer 6: highlight stroke (all states except down) -->
        <s:Ellipse left="1" right="1" top="1" bottom="1">
            <s:stroke>
                <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0xFFFFFF" color.downStates="0x939393" alpha.overStates="0.22" />
                    <s:GradientEntry color="0xD8D8D8" color.downStates="0xB1B1B1" alpha.overStates="0.22" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Ellipse>
        <s:Rect left="5" top="1" right="5" height="1">
            <s:fill>
                <s:SolidColor color="0xFFFFFF" color.downStates="0x939393" alpha.overStates="0.22" />
            </s:fill>
        </s:Rect>
 
        <!-- border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
        <s:Ellipse left="0" top="0" right="0" bottom="0">
            <s:stroke>
                <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0x000000" alpha="0.70" />
                    <s:GradientEntry color="0x000000" alpha="0.80" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Ellipse>
 
        <!-- dot -->
        <!--- Defines the appearance of the RadioButton's dot. To customize the appearance of the dot, create a custom RadioButtonSkin class. -->
        <s:Path id="dot" left="4" top="4" includeIn="selectedStates" itemCreationPolicy="immediate"
                data="M 2.5 0 Q 4.5 0.5 5 2.5 Q 4.5 4.5 2.5 5 Q 0.5 4.5 0 2.5 Q 0.5 0.5 2.5 0">
            <s:fill>
                <!--- Defines the appearance of the dot's fill. The default color is 0x000000. The default alpha is 0.9. -->
                <s:SolidColor id="dotFill" color="0" alpha="0.9" />
            </s:fill>
        </s:Path>
        <s:Path left="4" top="7" includeIn="selectedStates" 
                data="M 0 0 Q 0.5 2 2.5 2.0 Q 3.5 2.0 4 0">
            <s:stroke>
                <s:LinearGradientStroke>
                    <s:GradientEntry color="0xFFFFFF" alpha="0.3" />
                    <s:GradientEntry color="0xFFFFFF" alpha="0.7" />
                    <s:GradientEntry color="0xFFFFFF" alpha="0.3" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Path>
    </s:Group>
 
    <!-- Label -->
    <s:Label id="labelDisplay"
            textAlign="start"
            verticalAlign="middle"
            left="18" right="0" top="3" bottom="3"
            verticalCenter="2" />
 
</s:SparkSkin>

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.

3 thoughts on “Creating a multiline Spark RadioButton control in Flex 4

  1. Hello!

    Thanks for sharring this code.
    I’d like to do that but from code side. I call the Radiobutton from <fx:Script. How do i attach it to the skin class?

    Thanks for the answer!

Comments are closed.