Skinning Flex containers using WSDoubleBorderSkin

最新推荐文章于 2019-01-27 20:58:43 发布

shangmw

最新推荐文章于 2019-01-27 20:58:43 发布

阅读量458

点赞数

文章标签： containers flex properties mozilla styles colors

Skinning Flex containers using WSDoubleBorderSkin

July 4th, 2007

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