Skinning Flex containers using WSDoubleBorderSkin
Posted on July 4, 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
1) Define style properties
1 <mx:Style>
2 .wsDoubleBorder
3 {
4 borderSkin: ClassReference("skins.WSDoubleBorderSkin");
5 borderTopThickness: 3;
6 borderTopColor: #3ad2ed;
7 borderRightThickness: 3;
8 borderRightColor: #3399CC;
9 borderBottomThickness: 3;
10 borderBottomColor: #FF6600;
11 borderLeftThickness: 3;
12 borderLeftColor: #99CC00;
13 backgroundColor: #FFFFFF;
14 backgroundAlpha: 90;
15 /* Optionally: using one border only
16 doubleBorder: false;
17 */
18 }
19 </mx:Style>2) Point these styles to a container, e.g. Canvas:
1 <mx:Canvas id="standardCanvas"
2 styleName="wsDoubleBorder" />2b) Optionally: Using common properties borderThickness and borderColor for using one color or one thickness without any style definitions within <mx:Style>:
1 <mx:Canvas id="standardCanvas"
2 width="300" height="200"
3 borderSkin="skins.WSDoubleBorderSkin"
4 borderThickness="3" borderColor="#99CC00" backgroundColor:"#FFFFFF" />That's all ;)
Example (incl. source code)
Here you'll find an example including the source code. WSDoubleBorderSkin is open source licensed under the Mozilla Public License 1.1.
Have fun! ;-)