Question

I have a custom component called ButtonPanel written in Actionscript. Basically it’s just a panel that displays a mx:ButtonBar in the upper right of the mx:Panel title bar and responds to the clicks of the buttons in the bar.

A ButtonBar has three styles available for the buttons: buttonStyleName, firstButtonStyleName, and lastButtonStyleName. I want to write these styles for the ButtonPanel so that if it is declared as such:

<comp:ButtonPanel buttonStyleName="myButtonStyle" ... />

then the ButtonPanel will pass the style through and set the corresponding style of the ButtonBar.

I really have no clue where to start on this because I’ve never messed with defining styles. Can someone help?

Answer 1

What you refer to as “pass-through” styles are actually called inheriting styles. The solution to your question is in fact quite simple.

You use the style metadata on your custom component to declare that ButtonPanel has a stylename called ‘buttonStyleName’:

[Style(name="buttonStyleName", inherit="yes")]

public class ButtonPanel extends Panel {
     ....
}

Note the ‘inherit’ flag which is set to true: this will make sure that any component inside your custom Panel that has the same style will inherit the value that you’ve given to that style at the Panel level.

Setting this metadata will make sure that FlashBuilder will suggest buttonStyleName as a style and not as a property (as would happen with Sam’s solution).

---

Edit: already defined styles

I didn’t realize at first that you were referring to the mx ButtonBar (as it’s not explicitly mentioned). The reason this is not working for you is that mx:ButtonBar already has these styles defined as not inheriting. Look at the source code:

[Style(name="firstButtonStyleName", type="String", inherit="no")]
[Style(name="buttonStyleName", type="String", inherit="no")]
[Style(name="lastButtonStyleName", type="String", inherit="no")]

Because of this the compiler will complain when you try to override that definition in your custom Panel, because it simply wouldn’t know which of the contradictory instructions to pick. So we’ll have to do a little more work if you want to stick with mx:ButtonBar.

First define the styles on ButtonPanel exactly as they are defined in mx:ButtonBar so they have the same signature (you can just copy/paste the three lines above). This will shut up the compiler but the styles won’t be inherited anymore, right?

So we’ll have to pass them on manually: in your custom Panel skin, override the updateDisplayList() method and – assuming that the ButtonBar’s id is ‘buttonBar’ – add the following:

    private const buttonStyles:Array = [
        "firstButtonStyleName",
        "buttonStyleName",
        "lastButtonStyleName"
    ];

    override protected function updateDisplayList(unscaledWidth:Number, 
                                                  unscaledHeight:Number):void 
    {
        if (buttonBar) 
            for each (var buttonStyle:String in buttonStyles)
                buttonBar.setStyle(buttonStyle, getStyle(buttonStyle));

        //some other code

        super.updateDisplayList(unscaledWidth, unscaledHeight);
    }

This will take the styles from the host Panel and pass them on to the ButtonBar.