Pimp your Flex app using WSBackgroundPixelSkin
Posted on July 6, 2007
WSBackgroundPixelSkin is a free Flex component for creating patterns within Flex containers such as Application, Canvas, HBox, VBox, Form etc. It based on pure CSS and ActionScript without any images. It creates pretty patterns using the powerful BitmapData classes of Flex.
For determining complex patterns I've written a small Flex app, which loads images reading colors based on its pixels and prints this pattern as CSS code. Let me know if there anyone out there who is interested in this app. Then I'll publish it including source, too.
Note: Programmatic skins used to extends mx.skins.Border or mx.skins.ProgrammaticSkin classes, but in this case WSBackgroundPixelSkin needs the addChild() method for adding instances of DisplayObjects and therefore it extends the UIComponent.
Screen shot
Instructions
1) Define the style properties of your pattern as follow. This example describes a simple pattern based on blue and white columns
1 <mx:Style>
2 .bg
3 {
4 // point WSBackgroundPixelSkin as a borderSkin
5 borderSkin: ClassReference("skins.WSBackgroundPixelSkin");
6 // define a pixelbased pattern
7 // which uses the indexes of the bgColors array below
8 bgPattern: "001010001",
9 "001010001";
10 // bgColors defines color using by its pattern definition
11 bgColors: #3399CC, #FFF;
12 // measure of all pixels,
13 // the default value is 1
14 bgPixelMeasure: 12;
15 //
16 background-color: #3399CC;
17 }
18 </mx:Style>2) Point the pixel based style to a container, e.g. Canvas:
1 <mx:Canvas id="standardCanvas"
2 styleName="bg" />That's all ;)
Example (incl. source code)
Have a look on these examples including the source code. Feel free to use it, WSBackgroundPixelSkin is open source licensed under the Mozilla Public License 1.1.
Have fun! ;-)
Update (07/10/07)
The source code has been updated. Check out the "WSPatternStyleGenerator" to simplify the creation of its CSS patterns, too.