1 Reply Latest reply on Nov 20, 2007 7:56 AM by chucktangy

    Creating Reusable Skinning code


      I have written skins that allow you to use an image for your scrollbars, and I'd like to make them more general purpose so that other people could reuse my code without having to copy it. Then they could use CSS to style their scrollbars. However, I had to hard code the dimensions of my images in the actionscript. I'd like to move those out to the CSS so the skin wouldn't be specialized to my use of it. However, I'm having trouble implementing measuredWidth/Height. I've seen that in the Halo skin the sizes are hard coded. I tried moving those sizes out to CSS using getStyle, but it's hard to do that because I want separate values for each instance of the skin. For example here is my CSS for the scrollbar's arrows:

      downArrowDisabledSkin: ClassReference( "skins.ImageScrollArrowSkin" );
      downArrowDownSkin: ClassReference( "skins.ImageScrollArrowSkin" );
      downArrowOverSkin: ClassReference( "skins.ImageScrollArrowSkin" );
      downArrowUpSkin: ClassReference( "skins.ImageScrollArrowSkin" );

      downArrowDisabledImage: Embed( source="../images/DownScrollButton.png" );
      downArrowDownImage: Embed( source="../images/DownScrollButtonPressed.png" );
      downArrowOverImage: Embed( source="../images/DownScrollButton.png" );
      downArrowUpImage: Embed( source="../images/DownScrollButton.png" );

      As you can see I have a way of alternating all the various states of the arrows by prepending the skin name minus the word Skin and adding Image to it. I'd like to have the same mechanism in place for the size of the images like:

      downArrowDisabledSize: 22, 21;
      downArrowDownSize: 22, 21;
      downArrowOverSize: 22, 21;
      downArrowUpSize: 22, 21;

      However, when I tried to implement this inside measuredWidth/Height I found that the name was not set properly! This is a huge problem because it forced me to hard code the value in my code reducing the ability for it to be reusable. (I find building reusable skin code very hard by the way they work, not just trying to skin scrollbars. I have thoughts of this if anyone at adobe would be interested in talking).

        • 1. Creating Reusable Skinning code
          chucktangy Level 1
          Well I figured out why this is a problem. In ProgrammaticSkin it calls into your subclass before you have a chance to become fully instantiated. Hence name, or CSS properties you might want to read aren't ready. Here is the code from ProgrammaticSkin that causes the pain:

          public function ProgrammaticSkin()

          // If nobody explicitly sets a size for this object,
          // then set its width and height to be its measured size.
          _width = measuredWidth; <<<<<<<
          _height = measuredHeight; <<<<<<<

          The last two lines cause the constructors to call back into the subclass before the sublass' constructor has run. The work around I did was to return 0 or some fix constant. There is nothing you can do other than hard code values for the first call. After that the object is fully instantiated and you can use the style properties provided to find the width/height. Now I have code that is generalized enough to work in any case. Much better.