4 Replies Latest reply on Feb 27, 2007 12:44 AM by Oddsy

    Custom Component Styles

    Oddsy Level 1
      I have been looking through the Adobe documentation for a few hours
      now and have no suggestion of how to achieve what I want to do. I
      have a custom component that has some custom style attributes. I
      would like these style attributes to have default values. So, I
      followed what is described in the Live Docs
      ( http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/js/html/wwhelp.htm?href=\

      All is fine and dandy, except for a (rather major?) problem. This
      method of setting defaults forces someone using the component to set
      all the style values or none, because if they set a single style
      attribute the default values are not set for any of the other
      attributes. Am I missing something or is this styling malarky


        • 1. Re: Custom Component Styles
          peterent Level 2
          I'm not certain what article you are referring to since the link provided isn't complete. Try following this formula:

          var faceColor:Number = getStyle("faceColor");
          if( isNaN(faceColor) ) faceColor = 0xFF0000; // set default here

          Use the [Style] meta data to give your component's their custom styles. In your ActionScript code, get the style and test it. If you are expecting a numeric value, check to see if it is not-a-number. If isNaN returns true, then set the default value.

          Can you re-post that link?
          • 2. Re: Custom Component Styles
            Oddsy Level 1
            Thanks for the swift reply. For some reason the url of that livedocs page won't open. The page works fine if you navigate to it though.

            Creating And Extending Flex 2 Components > Creating Actionscript Components > Creating Custom Style Properties > Example: Creating style properties > Setting default style values

            Your approach is what I had before but this seemed somewhat crude. I delved into some of the charting source code (because I'm more familiar with its style than that of the standard framework) and found the following structure. It takes some of what the Live Docs suggest but results in the "proper" behaviour.

            private static var stylesInitialised:Boolean = initStyles();

            private static function initStyles():Boolean
            var sd:CSSStyleDeclaration = StyleManager.getStyleDeclaration("MyComponent");

            if (!sd)
            sd = new CSSStyleDeclaration();

            sd.defaultFactory = function():void
            this.myStyleProperty1 = value1;
            this.myStyleProperty2 = value2;

            return true;

            Maybe the Live Docs should be changed to something more along those lines?

            Thanks for the swift reply :-)
            • 3. Re: Custom Component Styles
              peterent Level 2
              I see what they are doing. They are defining a style type selector for the component class and populating it with default values. This is to avoid the if-test I was suggesting and it also allows you to use the StyleManager to access the values from other parts of your app. The way shown in the example docs is more correct, but I've not used it myself.
              • 4. Re: Custom Component Styles
                Oddsy Level 1
                I agree that the docs version is maybe more correct, but as I said in my first post it's a bit flawed. If a component has two style properties, myStyleProperty1 and myStyleProperty2, and a somebody using the component only defines myStyleProperty in a CSS file, then myStyleProperty has not been initiated anywhere so does not go to a default value. The framework components don't work in that way so it seems a little weird (in my oppinion) to lead people into a situation that results in different behaviour from the framework components.