Enhancement Request: SuperTabCloseButton class

[nicoulaj]

Originally filed by seanbcus...@gmail.com on 2010-06-24T15:28:10

changes to flexlib.controls.tabBarClasses.SuperTab:

protected function getButtonClass():Class {
    return SuperTabCloseButton;
}
override protected function createChildren():void{
    ...
    closeButton = new ( getButtonClass() as Class )();
    var w:* = this.closeButton.getStyle( "width"  );
    var h:* = this.closeButton.getStyle( "height" );
    if( w == undefined ) w = 10;
    if( h == undefined ) h = 10;
    this.closeButton.width  = uint(w);
    this.closeButton.height = uint(h);
...
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
        ...
        if(closeButton.visible) 
        {
            var top:*   = this.closeButton.getStyle( "top"   );
            var right:* = this.closeButton.getStyle( "right" );
            if( top   == undefined ) top   = 4;
            if( right == undefined ) right = 4;
            closeButton.x = unscaledWidth - closeButton.width - uint(right);
            closeButton.y = uint(top);
        }

new flexlib.controls.tabBarClasses.SuperTabCloseButton class:

[Style(name="width",  type="uint", inherit="no")]
[Style(name="height", type="uint", inherit="no")]
[Style(name="top",    type="uint", inherit="no")]
[Style(name="right",  type="uint", inherit="no")]
public dynamic class SuperTabCloseButton extends mx.controls.Button
{
    public function SuperTabCloseButton() { super(); }
}

Then, skinning this sucker is as easy as:

@namespace supertabs "flexlib.controls.tabBarClasses.*";
supertabs|SuperTabCloseButton
{ 
    right:   4;
    top:     4;
    width:  10;
    height: 10;
    upSkin:   Embed("/assets/close-button-up.png"); 
    downSkin: Embed("/assets/close-button-down.png");
    overSkin: Embed("/assets/close-button-over.png"); 
} 

It will also make it a lot easier to subclass.

Oh, also please make closeButton and the other parts of SuperTab and SuperTabBar protected instead of private, it's very hard to latch onto things in subclasses.

(Sorry about the enhancement request going in as a defect, I can't find another entry mechanism for this.)

[nicoulaj]

Updated by seanbcus...@gmail.com on 2010-06-24T15:33:57

oh, override protected function measure():void needs to change as well, to take the widths into account, rather than the hard-coded "10". same code change as the updateDisplayList chunk above.

[nicoulaj]

Updated by seanbcus...@gmail.com on 2010-06-24T18:29:11

actually, while subclassing it i got height overrides to work, too. you can refactor the overrides here. with this, there's a top/bottom/right/left/width/height of the button in css that all work:

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList( unscaledWidth, unscaledHeight );
        if(closeButton.visible) 
        {
            var top:*    = this.closeButton.getStyle( "top"   );
            var right:*  = this.closeButton.getStyle( "right" );
            var bottom:* = this.closeButton.getStyle( "bottom"   );
            var left:*   = this.closeButton.getStyle( "left" );
            if( top    == undefined ) top    = 4;
            if( right  == undefined ) right  = 4;
            if( bottom == undefined ) bottom = 0;
            if( left   == undefined ) left   = 0;
            closeButton.x = unscaledWidth - closeButton.width - uint(right) + uint(left);
            closeButton.y = uint(top);
        }
    }

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

        var w:*      = this.closeButton.getStyle( "width"  );
        var h:*      = this.closeButton.getStyle( "height" );
        var top:*    = this.closeButton.getStyle( "top"   );
        var right:*  = this.closeButton.getStyle( "right" );
        var bottom:* = this.closeButton.getStyle( "bottom"   );
        var left:*   = this.closeButton.getStyle( "left" );
        if( top    == undefined ) top    = 4;
        if( right  == undefined ) right  = 4;
        if( bottom == undefined ) bottom = 0;
        if( left   == undefined ) left   = 0;
        if( w      == undefined ) w      = 10;
        if( h      == undefined ) h      = 10;

        if( closePolicy == SuperTab.CLOSE_ALWAYS || closePolicy == SuperTab.CLOSE_ROLLOVER ) {
            // the close icon is 10 px wide and 4px from the right - undo that (hack)
            measuredMinWidth  -= (10 /* +4 seems to have not been added, so don't subtract */ );
            measuredMinWidth  += (w+left+right);
            measuredMinHeight = Math.max( measuredMinHeight, h+top+bottom );
            measuredHeight    = Math.max(    measuredHeight, h+top+bottom );
        }
        else if( closePolicy == SuperTab.CLOSE_SELECTED && selected ) {
            // undo and reapply (hack)
            measuredMinWidth  -= (10 /* +4 seems to have not been added, so don't subtract */ );
            measuredMinWidth  += (w+left+right);
            measuredMinHeight = Math.max( measuredMinHeight, h+top+bottom );
            measuredHeight    = Math.max(    measuredHeight, h+top+bottom );
        }
    }