Enhancement Request: SuperTabCloseButton class

[GoogleCodeExporter]

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.)

Original issue reported on code.google.com by seanbcus...@gmail.com on 24 Jun 2010 at 3:28

[GoogleCodeExporter]

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.

Original comment by seanbcus...@gmail.com on 24 Jun 2010 at 3:33

[GoogleCodeExporter]

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 );
            }
        }

Original comment by seanbcus...@gmail.com on 24 Jun 2010 at 6:29