RE: [flexcoders] Initializing styles for custom border skin

[Alex Harui]

A container border's styleName references the container so that styles
applied to the container also apply to the border.  If you put the
border on a Panel in MXML, then your MXML can look like:

 

<mx:Panel borderSkin="AngledBorderSkin" styleName="AngledRightBorder >

 

________________________________

From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Daniel Gold
Sent: Monday, April 07, 2008 9:41 PM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Initializing styles for custom border skin

 

I'm apparently still having problems grasping custom border skins. I'm
extending RectangularBorder and I have a few custom CSS styles declared
for my class. I'm trying to set defaults for these styles using the
static function method

private static const DEFAULT_STYLE_NAME:String = "AngledRightBorder";

private static var _stylesInitialized:Boolean = initStyles();

        private static function initStyles():Boolean
        {
            var styleDeclaration:CSSStyleDeclaration =
StyleManager.getStyleDeclaration(DEFAULT_STYLE_NAME);
        
            // If there's no default style declaration already, create
one.
            styleDeclaration = styleDeclaration ? styleDeclaration : new
CSSStyleDeclaration();
        
            styleDeclaration.defaultFactory = function ():void {
                this.angleWidth = 10;
                this.borderThickness = 3;
            }
        
 
StyleManager.setStyleDeclaration(DEFAULT_STYLE_NAME,styleDeclaration,tru
e);                
            
            return true;                
        }

but the defaultFactory function never runs because the styleName is
never set for the borderSkin, it is always null, it seems to just
inherit properties from the class that is declaring it. Is there some
trick I'm missing on how to set default styles for a border skin?

I've come up with something that seems to work but I'm sure there are
some holes in it. Basically I override getStyle, and attempt to get the
style, if it's null I get the DEFAULT_STYLE_NAME css declaration and
pull the style out of that. The problem there is if I want to specify a
different default for a style this is already set for the styleName of
the class using my borderSkin, I can't because getStyle will return the
default set for that class instead of my borderSkin class. At least it
works for the new custom styles defined by my class. Any thoughts?

This is my current hack, but as mentioned above only works if a style of
null is returned, so I can't override defaults set by the class using
the borderSkin

        override public function getStyle(styleProp:String):*
        {
            var style:* = super.getStyle(styleProp);
            if(style == null)
            {
                var styleDeclaration:CSSStyleDeclaration =
StyleManager.getStyleDeclaration(DEFAULT_STYLE_NAME);
                style = styleDeclaration.getStyle(styleProp);
            }
            return style;
        }