10 Replies Latest reply on Oct 19, 2011 12:29 PM by FM_Flame

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

    FM_Flame Level 1

      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 !

        • 1. Re: [Flex 4.5.1] How does Button's fontSize property gets applied to labelDisplay?
          Flex harUI Adobe Employee

          CSS defines certain properties as inheriting.  When the label is added to the skin, its styles are set up to reference the parent’s styles.

          • 2. Re: [Flex 4.5.1] How does Button's fontSize property gets applied to labelDisplay?
            FM_Flame Level 1

            CSS defines certain properties as inheriting

            I got this part - I noticed there are inheriting and non-inheriting styles.

             

            When the label is added to the skin, its styles are set up to reference the parent’s styles.

            I am missing this part - you mean that this happens in compile time because there is no actual code? Can I see this code somewhere, I am curious...

            • 3. Re: [Flex 4.5.1] How does Button's fontSize property gets applied to labelDisplay?
              Flex harUI Adobe Employee

              The styles are setup at runtime.  There is a call to initProtoChain that sets up the references so that calls to getStyle(“fontSize”) return the right thing.  In Spark with TLF, the call to getStyle should be in TextBase.as, for Spark on Mobile and mx components, I believe the getStyle is in the TextField subclass.

              • 4. Re: [Flex 4.5.1] How does Button's fontSize property gets applied to labelDisplay?
                FM_Flame Level 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

                • 5. Re: [Flex 4.5.1] How does Button's fontSize property gets applied to labelDisplay?
                  Flex harUI Adobe Employee

                  I believe you can put an id on a skin part and style it using an id selector in CSS.

                  • 6. Re: [Flex 4.5.1] How does Button's fontSize property gets applied to labelDisplay?
                    FM_Flame Level 1

                    Oh Right, thanks! I don't know why it didn't come to my mind sooner, maybe cause it's in the skin and I didn't think about it this way. So I can remove my custom styles and use selectors, but should I keep the second label/content properties I have for the second Label, or there's a way to do the 2 label button without extending the Button?

                     

                    Still, could you please say a few words about questions 1) 3) and 5) (I've lost the 4th question somewhere lol ) ? They are pretty simple but would confirm /  explain what I ponder. Thanks!

                    • 7. Re: [Flex 4.5.1] How does Button's fontSize property gets applied to labelDisplay?
                      Flex harUI Adobe Employee

                      1) If you don’t use styles, then you should go with properties.

                       

                      3) There can be major changes to the chain of styles that cause styleProp to be null.

                       

                      5) I’m not sure I understand this question.

                      • 8. Re: [Flex 4.5.1] How does Button's fontSize property gets applied to labelDisplay?
                        FM_Flame Level 1

                        Hi again

                         

                        There can be major changes to the chain of styles that cause styleProp to be null.

                        When does that happen.. I am asking because from the link in the docs I gave you this is not mentioned at all, and now I don't know when should I use this or not. Also what about styleProp == "styleName". Maybe this has something to do with the property styleName - so when is this used?

                        Summarizing: When do we come in these 2 cases:

                        if (!styleProp ||styleProp == "styleName")

                         

                        I need to know that in order to know when should I use this if statements and when not.

                         

                         

                        About the 5) question: In ButtonBase we have label setter/getter and content setter/getter and for the label it just says it is acting as a proxy for the content, but I see no reason for that. The label is string and the content is object type. I know this question is less important but I try to follow the ideas with which are the spark components build...

                        • 9. Re: [Flex 4.5.1] How does Button's fontSize property gets applied to labelDisplay?
                          Flex harUI Adobe Employee

                          “styleName” is passed in if someone changes the styleName on the component.

                          Null is passed in when the component is first hooked up to the parent, but could be called at other times.  The semantic in both cases is that every style that could affect your component may have changed so re-run all the validation phases.

                           

                          There is both a label and content property so you can add non-string data and have the skin interpret it.

                          • 10. Re: [Flex 4.5.1] How does Button's fontSize property gets applied to labelDisplay?
                            FM_Flame Level 1

                            Thanks I understood what you've said and although I am still kinda confused when would I want to override the styleChanged method lets wrap this up for now There's too little info on the docs about that which makes it harder to build a custom component properly. And I know asking you more stuff won't help me out much cause I need a full and detailed description of how things work from function to function to function etc... which is quite hard to request and get on this forum since it's complicated So I will be looking out for some articles ot blog posts on the topic and if I don't find I will try to dig put the code from ground up to figure it out... when I have the time of course

                             

                            Thanks a lot for your help!