3 Replies Latest reply on Feb 29, 2012 6:49 AM by lemon blue

    Setting default skin of a custom component (setStyle overrides CSS definition)

    lemon blue

      Hello all, I have some troubles using the Spark skinning mechanism, I hope you can help me.

       

      In Flash Builder, I have a Flex library project that contains some SkinnableComponents written in AS (as suggested in http://help.adobe.com/en_US/flex/using/WS460ee381960520ad-2811830c121e9107ecb-7feb.html).

       

      For each of these component, I wrote a default skin that I set to the component in its constructor (setStyle("skinClass","MyComponentDefaultSkin)).

      But doing that, my users won't be able to set their custom skin using CSS.

       

      My question is, how one can set a default skin to its component without disabling skin definition in CSS? I know this is possible since spark components (like Button) provide a default skin but I still can change it in a CSS file.

       

      Your help would be greatly appriciated.

       

      Cheers

        • 1. Re: Setting default skin of a custom component (setStyle overrides CSS definition)
          drkstr_1 Level 4

          Why would setting a default style in the constructor disable the style override mechanisims? I thought styles were applied later on in the component life-cycle. Perhaps I am mistaken, but I don't see how this would effect the override process for applying styles...

           

          Other options would be to create a default CSS that defines all the default styles (any of which can be overwritten by loading a secondary style sheet), or you can check to see if (this.getStyle('foo') == undefined) when a call to stylesInitialized() is made, and set your default if none is provided.

           

           

          *edit*

           

          I just tested it. Make sure to set the default before the call to super();

           

           

          package
          {
                    import spark.components.Label;
          
                    public class MyLabel extends Label
                    {
                              public function MyLabel()
                              {
                                        this.setStyle('color', 0x000000);
                                        super();
          
                              }
                    }
          }
          

           

          <fx:Style>
          @namespace local "*";
          
          local|MyLabel
          {
                    color: #fff000;
          }
          
          
          </fx:Style>
          

           

          The Label came out yellow.

          • 2. Re: Setting default skin of a custom component (setStyle overrides CSS definition)
            lemon blue Level 1

            Hi,

             

            Thanks for answering.

             

            The solution you provided does not work with skins:

             

            I have a custom component inheriting from TitleWindow. It defines some required SkinPart. At runtime, Flex complains that he can't find my required skin parts. I checked: he tries to set my component skin to spark.skins.spark.TitleWindowSkin, which obviously doesnot contains my skin parts.

             

            I guess skin is a specific part of style mechanism.

             

            Message was edited by: lemon blue

            • 3. Re: Setting default skin of a custom component (setStyle overrides CSS definition)
              lemon blue Level 1

              I found and explain how to set effectively custom component default skin here: http://forums.adobe.com/message/4220491#4220491