6 Replies Latest reply on Aug 9, 2012 3:11 AM by Rode Indiaan

    Example: Creating a skinnable Spark component

    community help Level 1

      This question was posted in response to the following article: http://help.adobe.com/en_US/flex/using/WS460ee381960520ad-2811830c121e9107ecb-7feb.html

        • 1. Re:  Example: Creating a skinnable Spark component
          lemon blue

          Using setStyle() in component constructor will disallow skin definition via CSS. This is troublesome when one wants to provide default skins in its library without disabling the possibility to write other skins.

          • 2. Re:  Example: Creating a skinnable Spark component
            smgilson Level 1

            @lemon blue:

             

            You are corect. From the page above:

             

            "However, calling the setStyle() method in the component definition does not make it easy to reskin the component. You can also use an external style sheet or other mechanism to set the style that defines the skin class."

             

            Stephen

            • 3. Re:  Example: Creating a skinnable Spark component
              lemon blue Level 1

              Indeed Stephen but how to include a compiled CSS in a Flex library project? The flashbuilder contextual menu option is grayed out,  which kind of makes sense because my project is not a Flex webapp project.

               

              Also do you have more info about "other mechanism to set the style"?

               

              Regards

              • 4. Re:  Example: Creating a skinnable Spark component
                smgilson Level 1

                There is a section here on creating custom style properties that component users can then set: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7a20.html

                 

                This page has information about compilng a CSS: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f8c.html

                 

                Stephen

                • 5. Re:  Example: Creating a skinnable Spark component
                  lemon blue Level 1

                  Ok I solved my problem. For those who may have the same question, here is an effective way of creating a custom component with skinning ability:

                   

                  Create the component as explain in any tutorial (.as for the real code, .mxml for the skin) but do not use the setStyle method in constructor to set the skin. If once do that, the component won't be skinnable via CSS (though the skinClass mxml attribute works).

                   

                  Instead of setting the skin via the setStyle method, once need to set the skin via a default CSS file. This CSS file have requirements:

                   

                  - it needs to be called defaults.css

                  - it needs to be on the default package (under FlashBuilder)

                  - there should be only one CSS file per swc library.

                   

                  Inside that CSS file, you can define your custom component skin-class property and your users will be able to set their own skin via their own CSS.

                  • 6. Re:  Example: Creating a skinnable Spark component
                    Rode Indiaan Level 1

                    I think I solved the problem in another way.

                     

                    In commitProperties() you can also set the skinClass and there you also have access to the skinClass already set.

                    Because you know what the default skin is you can check if this skin is set and overwrite it with your own default skin if needed.

                    This allows the skinClass to be changed any time in any way during runtime.

                    The only limitation is that you cannot set the default skin of the class you are extending, in this case spark.skins.mobile.ButtonSkin of Button.

                     

                    Example:

                     

                     

                    package classes {
                         import skins.CustomSparkButtonSkin;
                         
                         import spark.components.Button;
                         import spark.skins.mobile.ButtonSkin;
                         
                         public class BitmapButton extends Button
                         {
                              // Default skin for this class
                              private var defaultSkinClass:Class = skins.CustomSparkButtonSkin;
                    
                              public function BitmapButton() {
                                   super();
                                   // Do not set the skinClass here
                              //     setStyle("skinClass", defaultSkinClass);
                              }
                              
                              override protected function commitProperties():void
                              {
                                   // Skin is default mobile skin for this class
                                   if ( getStyle("skinClass") == spark.skins.mobile.ButtonSkin )
                                        setStyle("skinClass", defaultSkinClass);
                    
                                   super.commitProperties();
                              }
                         }
                    }