Custom <s:ToggleButton> Skin

[vivoices]

I started with a copy of the default skin class.

The lines:

    <!-- text -->
    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
                maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1"
             left="10" right="10" top="2" bottom="2">
    </s:Label>

display a different text for each instance of <s:ToggleButton label="x"><s:ToggleButton label="y"> . . .

How do I have to code the custom skin to be able to assign an "unselectedIcon" and "selectedIcon" to each instance of a <s:ToggleButton> ?

As in:

<s:ToggleButton width="50" height="50"
          horizontalCenter="0" verticalCenter="0"
          unselectedIcon="EmbeddedResources.firstToggleIconUnselected"
          selectedIcon="EmbeddedResources.firstToggleIconSelected"
          skinClass="Skins.CustomToggleButtonSkin" />
<s:ToggleButton width="50" height="50"
          horizontalCenter="60" verticalCenter="0"
          unselectedIcon="EmbeddedResources.secondToggleIconUnselected"
          selectedIcon="EmbeddedResources.secondToggleIconSelected"
          skinClass="Skins.CustomToggleButtonSkin" />

Thanks for any help,

David

[Guest · Accepted solution]

Hi,

You would need to extend the toggleButton, and add these as Styles to the extended component. These can then be used in the skinClass using getStyle. They have explained how to create a custom icon for a button here

http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7d9f.html (towards the end of the page).

So use the styles you created as sources for the Bitmap images in the skinClass. Hope this helps.

Nishad

[vivoices]

Thanks Nishad,

I will use vector graphics for the various icons and get them into the given button instance with getStyle.

David