Override get width or height for just one component- Flex Mobile

Question

Just a little background on what I am trying to do. I have a custom skin where I have a stylable text field to display the date. When clicking on the stylable text field, which is binded to the date, a date spinner comes up. Behind the datespinner I draw a sprite which needs to cover the whole screen so I can detect a click and make the datespinner go away.

Now the problem-

Without overriding the get width or get height I haven't been able to fill the whole screen. However when I do this the datespinner breaks because its getting the height from the override. Just wondering if anyone knew a way to override just one component and set all others to their default values. I know this might seem like a noob question and maybe I am missing something obvious, I am mostly new to as3.

Here is some code-

override protected function createChildren():void {
        super.createChildren();
            if(!img) {
                img = new dateButtonBG();
                addChild(img);
            }

            if (!maskSprite) {
                maskSprite =  new Sprite();
                maskSprite.graphics.beginFill(0xFFFFCC, .5);
                maskSprite.graphics.drawRect(-((stage.height)/2),-((stage.width)/2), stage.width, stage.height);
                maskSprite.graphics.endFill(); 
            }

if(!dateButton) {
                dateButton = new StyleableTextField();
                todayDate = new Date();
                BindingUtils.bindProperty(dateButton, "text", date, "selectedDate");
                dateButton.addEventListener(MouseEvent.CLICK, onDateButtonClick);
                addChild(dateButton);
            }
invalidateDisplayList();
}

protected function removeSpinner( event:Event):void{
            maskSprite.removeEventListener(MouseEvent.CLICK, removeSpinner);
            removeChild(date);
            removeChild(maskSprite);
        }

protected function onDateButtonClick (event:Event):void {
            addChild(maskSprite);
            addChild(date);
            maskSprite.addEventListener(MouseEvent.CLICK, removeSpinner);
        }

override public function get width () : Number {
            return _width;
        }

override public function get height () : Number {
            return _height;
        }

The code is not complete but is just for getting my point across. Thanks for reading and all your help.

EDIT- I figured out how to do it.Adding some information in case some one has the same problem- Flex limits the size of your sprite( or any UI component) to the size of the container. If you try to go over the size of the container it just returns the size of the container. In my code-

override public function get width () : Number {
            return _width;
        }

override public function get height () : Number {
            return _height;
        }

This is commonly touted as a fix to go over the size of the container. This approach is flawed however because it overrides everything that asks for width and height. In this case it tries to make everything the size of _height and _width. For any skin that has more than 1 component this is a huge problem, either you can try to set sizes for items indivigually, which for me didn't work or find an alternate approach. Here is what works-

public override function validateDisplayList():void {
            super.validateDisplayList();
            yourComponent.width = someConstantW;
            yourComponent.height = someConstantH;
        }

This is not going to be enough however. You might need to move your component outside of the container for this try-

override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void {
                super.layoutContents(unscaledWidth, unscaledHeight);
                setElementPosition(yourComponent, x, y);
            }

Hopefully I saved someone a few hours of work :)

Answer 1

It's not quite clear from the code you have posted, but perhaps you should be overriding the updateDisplayList() method instead of the width and height .

updateDisplayList() is the Flex life cycle method that components implement to size and position their child objects.

updateDisplayList() is called by the Flex framework, and it passes in two values: unscaledWidth and unscaledHeight . Your implmentation of updateDisplayList() should honor those values and size/position the child objects accordingly. You should use other life cycle methods (shown below) to do the actual sizing/positioning.

Here's an example implementation to get you started. It may be off a little, as I don't fully understand the code snippet you provided.

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    // size/position the background (or whatever it is that should occupy the whole screen)
    background.setLayoutBoundsPosition(0,0); // unnecessary because 0,0 is default
    background.setLayoutBoundsSize(unscaledWidth, unscaledHeight);
    // size/position the text in the center
    var textWidth:Number = text.getPreferredBoundsWidth;
    var textheight:Number = text.getPreferredBoundsHeight
    text.setLayoutBoundsPosition( (unscaledWidth - textWidth)/2, (unscaledHeight - textHeight)/2 );
    text.setLayoutBoundsSize(textWidth, textHeight); // probably not necessary

}