Flex - Part of spark Button bold label

Question

Quick question.

Is it possible to have part of the label on a spark button be bold?

I'd like a toggleButton with label "Map ON/OFF". Toggling it on will set the "ON" part to bold.

Is this possible witout too much rework of the button itself?

Thanks =)

Answer 1

Quick answer.

You can use a custom skin if you're willing to make it a one-off.
It goes something like this:

• create a custom skin for your ToggleButton by copying spark.skins.spark.ToggleButtonSkin
• scroll down to the bottom of the code and find the Label with id 'labelDisplay'
• replace it with something like this:

.

<s:HGroup gap="1" horizontalCenter="0" verticalCenter="1"
          left="10" right="10" top="2" bottom="2" verticalAlign="middle">

    <s:Label id="labelDisplay" maxDisplayedLines="1"/>
    <s:Label text=" ON" maxDisplayedLines="1" 
             fontWeight.selectedStates="bold"/>
    <s:Label text="/" maxDisplayedLines="1"/>
    <s:Label text="OFF" maxDisplayedLines="1"
             fontWeight="bold" fontWeight.selectedStates="normal"/>
</s:HGroup>

• now assign your custom skin like this:

.

<s:ToggleButton label="Map" skinClass="path.to.skin.MyToggleButtonSkin"/>

As you can see, the first part of the label can still be set externally, but the ON/OFF part has been baked into the skin. This is a compromise to give you a quick solution. It'll be harder if you want it to be truly generic.

Answer 2

More flexible case - create custom ToggleButton skin and use RichText. If you will set label in mxml - use html entities. See example:

Main application:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        s|ToggleButton
        {
            skinClass: ClassReference("skins.ToggleButtonSkinBold");
        }

    </fx:Style>

    <s:ToggleButton id="btn" label="Map &lt;span fontWeight='bold'&gt;ON&lt;/span&gt;"
                    change="{btn.label = 'Map &lt;span fontWeight=\'bold\'&gt;' +  ((btn.selected) ? 'OFF': 'ON') + '&lt;/span&gt;'}" 
                    width="200" height="50" />

</s:Application>

In skin class disable default labelDisplay component with includeInLayout=false and add richtext component.

.. some code
    <!-- layer 8: text -->
    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
    <s:Label id="labelDisplay"
             includeInLayout="false" visible="false" />

    <s:VGroup width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
        <s:RichText id="labelDisplayRich" />    
    </s:VGroup>


</s:SparkButtonSkin>

Override commiteProperties method and update richtext text in skin script block:

.. some code
         /**
         * @private
         */

        override protected function commitProperties():void
        {
            super.commitProperties();

            var tf:TextFlow = TextFlowUtil.importFromString(labelDisplay.text);

            if (tf.getText() != labelDisplayRich.textFlow.getText())
            {
                labelDisplayRich.textFlow = tf; 
            }

        }

Answer 3

For this purpose, you can do this by manually designing two buttons in Adobe, 1 with ON bold and 1 with OFF bold. and make two skins with designed buttons.

after that on click, switch skins dynamically.

if(toggle){
   myButton.setStyle("skinClass", onButtonSkin);
}else {
   myButton.setStyle("skinClass", offButtonSkin);
}

in mx button add two styles in CSS and set

myButton.setStyle("styleName", onButtonSkin);