[Flex 4.5.1] How does Button's fontSize property gets applied to labelDisplay?

Question

How does Button's fontSize property gets applied to labelDisplay when lableDisplay's fontSize is not explicitly set. I just tested it it works but I don't know how. I looked through the ButtonBase class but I don't see any code applying the fontSize to the labelDisplay nor I see code in the Label to get parent's fontSize property if not set. Could someone explain to me how this works? I would be very grateful! Thanks !

Answer 1

Ok I found it, thanks for the heads up. I pretty much get the idea of how things work now
Could you please take a look at one more probably very simple to you question. I had to customize a button to be able to have 2 lables in it with different fontSize and topPadding in this case. I kinda copied some of the code from ButtonBase + added the styles and some code I needed to make it work.
Here it is:
package
    import flash.events.Event;
    import spark.components.Button;
    import spark.components.Label;
    [Style(name="numberFontSize", type="Number", format="Length", inherit="yes", minValue="1.0", maxValue="720.0")]
    [Style(name="numberPaddingTop", type="Number", format="Length", inherit="no", minValue="0.0", maxValue="1000.0")]
    public class DialPadButton extends Button
        public function DialPadButton()
            super();
        private var _numberContent:*;
        [SkinPart(required="false")]
        public var numberLabelDisplay:Label;
        [Bindable("numberContentChange")]
        public function get numberContent():Object
            return _numberContent;
        public function set numberContent(value:Object):void
            _numberContent = value;
            if (numberLabelDisplay)
                numberLabelDisplay.text = label;
            dispatchEvent(new Event("numberContentChange"));
        public function set numberLabel(value:String):void
            numberContent = value;
        public function get numberLabel():String         
            return (numberContent != null) ? numberContent.toString() : "";
        override protected function partAdded(partName:String, instance:Object):void
            super.partAdded(partName, instance);
            if (instance == numberLabelDisplay)
                if (_numberContent !== undefined)
                    numberLabelDisplay.text = numberLabel;
                if(getStyle("numberFontSize"))
                    numberLabelDisplay.setStyle("fontSize", getStyle("numberFontSize"));
                if(getStyle("numberPaddingTop") || getStyle("numberPaddingTop") == 0)
                    numberLabelDisplay.setStyle("paddingTop", getStyle("numberPaddingTop"));
        override public function styleChanged(styleProp:String):void
            if (!styleProp ||
                styleProp == "styleName" ||
                styleProp == "numberFontSize" ||
                styleProp == "numberPaddingTop")
                if (numberLabelDisplay){
                    if(getStyle("numberFontSize"))
                        numberLabelDisplay.setStyle("fontSize", getStyle("numberFontSize"));
                    if(getStyle("numberPaddingTop"))
                        numberLabelDisplay.setStyle("paddingTop", getStyle("numberPaddingTop"));
            super.styleChanged(styleProp);
So here are the questions:
1) If I am not going to use the styles in css then maybe I should better declare them as variables ?
2) I don't really understand how does the button gets updated and redrawn when I set Styles or properties like that cause there is nowhere a call to invalidate the display list (at least I couldn't find in the Button and ButtonBase classes) as I read in the Flex docs: Overriding the styleChanged() method
UPDATE: I forgot that setStyle calls invalidateDisplayList... and I just figured out that when the lable sets the text on the TextBase it calls the invalidates. I answered this one myself
3) I don't understand why do I have this code (copied from the buttonBase):
if (!styleProp ||
    styleProp == "styleName" ||
    styleProp == "numberFontSize" ||
    styleProp == "numberPaddingTop")
instead of just the code below:
if (styleProp == "numberFontSize" ||
   styleProp == "numberPaddingTop")
5) I am also not sure why I had to use content and label (again copied from the ButtonBase) when they are basicly the same thing
Currently with this Custom Component I've made, I am able to put 2 lables in the skin. One is the default. And the other one takes the default values I put on the label itself + uses the two styles numberFontSize and numberTopPadding to change that default values in case they need to be altered.
Although this works, I am not sure if I did it the best way or why does it work as you can say from my 5 questions
I hope you or someone who understands this have the time to answer them for me and anyone who reads this Thanks
Message was edited by: FM_Flame