Setting a label’s font weight on a Flex LinkBar and ToggleButtonBar control

The following example shows how you can set the font weight of a label on LinkBar control and ToggleButton control in Flex by setting the linkButtonStyleName style and buttonStyleName style respectively.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .myCustomLinkButtonStyleName {
            fontWeight: normal;
        }

        .myCustomButtonStyleName {
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
    </mx:Array>

    <mx:LinkBar id="linkBar"
            dataProvider="{arr}"
            linkButtonStyleName="myCustomLinkButtonStyleName" />

    <mx:ToggleButtonBar id="toggleButtonBar"
            dataProvider="{arr}"
            buttonStyleName="myCustomButtonStyleName" />

</mx:Application>

View source is enabled in the following example.

Or, you can set the styles a bit more globally by using the following snippet:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        LinkBar {
            linkButtonStyleName: regularFontWeight;
        }

        ToggleButtonBar {
            buttonStyleName: regularFontWeight;
        }

        .regularFontWeight {
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
    </mx:Array>

    <mx:LinkBar id="linkBar"
            dataProvider="{arr}" />

    <mx:ToggleButtonBar id="toggleButtonBar"
            dataProvider="{arr}" />

</mx:Application>

View source is enabled in the following example.

Tagged as: buttonStyleName, fontWeight, linkButtonStyleName

{ 3 comments… read them below or add one }

MArcio July 28, 2008 at 12:08 pm: It´s possible set in array of ToggleButtonBar a option “visible” or “enable”

For example

How to use to display or not ?

Bhaskar Ghosh March 9, 2009 at 4:37 am: How is it possible to add “close” buttons to the end of each of the link buttons of a LinkBar control?

I want to have the close buttons, which when clicked should remove the corresponding child from the corresponding ViewStack (and also would remove the linkButton corresponding to it from the LinkBar)

Any help?

Thanks in advance :P

–Bhaskar

Patrick July 1, 2009 at 3:46 pm: Hi,

Does anyone know how to assign a unique style for each button in togglebuttonbar.
I want that the last three buttons link to facebook, twitter an d myspace and therefore I need to color-code them.

Please let me know if anyone has some input.

Cheers,
Patrick