Testing states of skin classes in Flex 4 using WSSkinStatesTester

September 6th, 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)

 

Usage

Two steps only:

  1. Just create an instance of WSSkinStatesTester
  2. And add all skins which have to be checked

Usage code example ( Download code )

  1.  
  2. //
  3. // Step 1
  4. // Create an instance of WSSkinStatesTester using MXML
  5. <ws:WSSkinStatesTester
  6.     xmlns:ws="http://websector.de"
  7.     id="skinTester"
  8.     width="100%" height="100%"
  9.     />
  10.    
  11. //
  12. // Step 2
  13. // Create and add an instance of a skin to WSSkinStatesTester.
  14. var skin: PanelSkin = new PanelSkin();
  15. skin.width = 250;
  16. skin.height =250;
  17. skinTester.addSkin( skin );
  18.  
  19.  
  20. //
  21. // Step 2a  [ ALTERNATIVE ]
  22. // Alternative you can add an array of skins to WSSkinStatesTester using ActionScript.
  23. // BTW: This usage is recommend if you want test a bunch of skins and have to set properties before!
  24. var skin0: ButtonSkin = new ButtonSkin();
  25. skin0.width = 150;
  26. skin0.height = 50;
  27. skin0.labelDisplay.text = "ButtonSkin (Spark)";
  28.  
  29. var skin2: ComboBoxSkin = new ComboBoxSkin();
  30. var skin3: MyButtonSkin = new MyButtonSkin();
  31.  
  32. skinTester.skins = [ skin1, skin2, skin3  ];
  33.  
  34.  
  35. //
  36. // Step 2b [ ALTERNATIVE ]
  37. // Or add an array of skins to WSSkinStatesTester using MXML
  38. <ws:WSSkinStatesTester
  39.     xmlns:ws="http://websector.de"
  40.     id="skinTester"
  41.     width="100%" height="100%"
  42.     skins="{ [  
  43.                 new CheckBoxSkin(),
  44.                 new VideoPlayerSkin(),
  45.                 new ButtonSkin()
  46.             ] }"
  47.     />

Full source available

Note: To run all code Flex SDK 4.0.0.9948 or higher is required.

WSSkinStatesTester is open source licensed under Mozilla Public License 1.1.

Happy skin states testing ;)

-Jens

Posted by sectore Filed in Flex, Open Source
3 Comments »

3 Responses to “Testing states of skin classes in Flex 4 using WSSkinStatesTester”

  1. Tweets that mention WS-Blog ยป Testing states of skin classes in Flex 4 using WSSkinStatesTester -- Topsy.com Says:
    September 6th, 2009 at 2:37 pm

    [...] This post was recently mentioned on Twitter by kajorn (http://twitter.com/kajorn), who said: RT @AdobeApps: Testing states of skin classes in Flex 4 using WSSkinStatesTester http://bit.ly/1YQZVb. [...]

  2. Ely Greenfield Says:
    September 6th, 2009 at 5:34 pm

    Nicely done, Jens. Seems like a very handy tool. And, I love your custom skins.

    Ely Greenfield.
    Adobe, Flex SDK.

  3. inj Says:
    September 11th, 2009 at 11:58 pm

    Hi, Jens!
    I translate your post to russian: http://injun.ru/?p=849
    Thank you for your work!

Leave a Reply

Follow sectore on Twitter