Testing states of skin classes in Flex 4 using WSSkinStatesTester
Posted on September 6, 2009
WSSkinStatesTester is a handy tool to test visually all states of any skin classes in Flex 4 (Gumbo).
Imagine you as a Flex developer or a designer have been created a lot of skins for your application, e.g. using Flash Catalyst. Now you want to check the behavior of these skins changing its states. Therefore you will run your application to change different states of components or you open Flash Catalyst to check all the states of a skin. Or you could use Flash Builders design view for this issue, but unfortunately it is unable to show transitions switching between states.
Anyway, how about switching between skin classes and all its states (incl. transitions) using only one (test-) view?
Live example
(Right mouse click to view source of example)
To see this content latest Flash Player Plugin is required.
Usage
Step one: Create an instance of WSSkinStatesTester
1 // Create an instance of WSSkinStatesTester using MXML
2 <ws:WSSkinStatesTester
3 xmlns:ws="http://websector.de"
4 id="skinTester"
5 width="100%" height="100%"
6 />Step two: Add all skins which have to be checked
1 // Add an instance of a skin to WSSkinStatesTester.
2 var skin: PanelSkin = new PanelSkin();
3 skin.width = 250;
4 skin.height =250;
5 skinTester.addSkin( skin ); 1 //
2 // Step 2a [ ALTERNATIVE ]
3 // Alternative you can add an array of skins to WSSkinStatesTester using ActionScript.
4 // BTW: This usage is recommend if you want test a bunch of skins and have to set properties before!
5 var skin0: ButtonSkin = new ButtonSkin();
6 skin0.width = 150;
7 skin0.height = 50;
8 skin0.labelDisplay.text = "ButtonSkin (Spark)";
9
10 var skin2: ComboBoxSkin = new ComboBoxSkin();
11 var skin3: MyButtonSkin = new MyButtonSkin();
12
13 skinTester.skins = [ skin1, skin2, skin3 ]; 1 //
2 // Step 2b [ ALTERNATIVE ]
3 // Or add an array of skins to WSSkinStatesTester using MXML
4 <ws:WSSkinStatesTester
5 xmlns:ws="http://websector.de"
6 id="skinTester"
7 width="100%" height="100%"
8 skins="{ [
9 new CheckBoxSkin(),
10 new VideoPlayerSkin(),
11 new ButtonSkin()
12 ] }"
13 />Full source available
Note: To run all code Flex SDK 4.0.0.9948 or higher is required.
- SWC of WSSkinStatesTester and example posted above: GumboTestSkinExample.zip
- Full source code of WSSkinStatesTester is hosted at Github: http://github.com/sectore/WSSkinStatesTester/
WSSkinStatesTester is open source licensed under Mozilla Public License 1.1.
Happy skin states testing ;)
-Jens