Skinning Flex containers using WSDoubleBorderSkin

WSDoubleBorderSkin is a programmatic skin extending mx.skins.Border for adding double borders on Flex containers such as Canvas, HBox, VBox, Form etc. It supports properties for different border positions such as borderTop or borderBottom, colors and thicknesses using CSS. It’s designed for using Flex states based on mx.states.Transition. The WSDoubleBorderSkin is tested under Flex 2 and 3 (Moxie).

Screen shot

Instructions

Code snippets for using WSDoubleBorderSkin

//
//  [1] Define style properties:
<mx:Style>
    .wsDoubleBorder
    {
        borderSkin: ClassReference("skins.WSDoubleBorderSkin");
        borderTopThickness: 3;
        borderTopColor: #3ad2ed;
        borderRightThickness: 3;
        borderRightColor: #3399CC;
        borderBottomThickness: 3;
        borderBottomColor: #FF6600;
        borderLeftThickness: 3;
        borderLeftColor: #99CC00;         
        backgroundColor: #FFFFFF;
        backgroundAlpha: 90;
        /*  Optionally: using one border only
        doubleBorder: false;
        */
    }
</mx:Style>
// 
//  [2] Point these styles to a container, e.g. Canvas:
<mx:Canvas id="standardCanvas"
    styleName="wsDoubleBorder" />   
// 
//  [2 b] Optionally: Using common properties "borderThickness" 
//  and "borderColor" for using one color or one thickness
//  without any style definitions within <mx:Style>:
<mx:Canvas id="standardCanvas"
    width="300" height="200"
    borderSkin="skins.WSDoubleBorderSkin"
    borderThickness="3" borderColor="#99CC00" backgroundColor:"#FFFFFF" />
//  
//  That’s all  
 
 