Creating a multiline label inside a custom togglebuttonbar

问题

i have a custom toggleButtonBar class that allows label placement on the button, however, i would like to have the labels to be multiline. I'm not good at extending default components. Is there anyone that can help me out?

package com.vit2print.plugin.transvit.tools
{
    import mx.controls.Button;
    import mx.controls.ToggleButtonBar;
    import mx.core.IFlexDisplayObject;

    public class IconToggleButtonBar extends ToggleButtonBar
    {
        [Inspectable(enumeration="left,right,top,bottom", defaultValue="left")]
        public var labelPlacement:String = "left";

        override protected function createNavItem(label:String, icon:Class=null):IFlexDisplayObject {
            var b:Button = Button(super.createNavItem(label, icon));
            b.labelPlacement = labelPlacement;
            return b;
        }
    }
}

Any help would be appreciated.

回答1:

If you can use Spark components, you can accomplish this through a custom skin for the buttons of the ButtonBar. When skinning the ButtonBar, you'll have to create 4 skins though:

one for the ButtonBar itself
one for the first button
one for the middle buttons
one for the last button

Unless all the buttons can look the same, in which case you'll need only one skin for all three kinds of buttons.

First create the three (or one) skins for the buttons by copying the default Spark ToggleButtonSkin. In the FlashBuilder wizard that would look like this:

Scroll down to the bottom and find the Label tag with id labelDisplay. It has its masDisplayedLines property set to 1. Remove it or set it to a value that is more convenient for your use case.

Now create a skin for the ButtonBar itself by copying the default Spark ButtonBarSkin. Find the three button factories and replace the skinClass styles with the button skin(s) you've just created.

<fx:Declarations>
    <fx:Component id="firstButton">
        <s:ButtonBarButton skinClass="net.riastar.skins.MyButtonBarFirstButtonSkin" />
    </fx:Component>

    <fx:Component id="middleButton" >
        <s:ButtonBarButton skinClass="net.riastar.skins.MyButtonBarButtonSkin" />
    </fx:Component>

    <fx:Component id="lastButton" >
        <s:ButtonBarButton skinClass="net.riastar.skins.MyButtonBarLastButtonSkin" />
    </fx:Component>
</fx:Declarations>

Now apply this skin to your ButtonBar and you're all set.

<s:ButtonBar dataProvider="{dp}" skinClass="net.riastar.so.MyButtonBarSkin" width="200" />

Remember, in general with Spark components: if you want them to look different without really changing / customizing their behaviour, use skinning instead of custom components.

来源：https://stackoverflow.com/questions/11185055/creating-a-multiline-label-inside-a-custom-togglebuttonbar

标签

actionscript-3

apache-flex