| « Follow up on Stateful vs. Stateless skinning | Microsoft Expression Blend 3 » |
Stateful vs. Stateless now vs. Degrafa
I just wrote a post about stateless vs. stateful graphical skins with Flash and Flex. We discovered there are some big performance issues with using stateful skins created in Flash (swc).
Greg Owen, a fellow coworker and lead developer at EffectiveUI, help me create a test app for this. The app is a Flex app wrapped in AIR, and has 3 style sheets which you can swap out to test the various skin options for a CheckBox which is being instantiated 500 times. (if you download the source, you can alter this value). This provides enough load to actually see the CPU hit.
I had a recent comment about using Degrafa and the comparisons, so with the help of Juan Sanchez, I was able to add a skin that is created in Degrafa programmatically and is a very close resemblance to the other skins being used in regards to colors and appearance of states.
We ran some tests today using 500 CheckBoxes and these were the results:
No skin/CSS - CPU = 13.5%
Stateless - CPU = 13.5% to 14%
Stateful - CPU = 47% to 50% Whoa!
Degrafa - CPU = 13.5% to 14.2%
So, it looks like Degrafa does not have that large of a hit on the performance and if you are using it to skin yoru Flex apps, then you should be good to go!
(results are on a MacBook Pro 2.33GHZ Intel Core 2 Duo 2GB RAM.
Please note, to get a true reading, the app should be in focus)
Download the source here:
http://www.patrickhansen.com/demos/flex/SkinningTest_v2.zip
9 comments
Cheers,
Mark
http://www.patrickhansen.com/demos/flex/SkinningTest_v2.zip
you can go into the assets directory and CheckBox_icon.mxml.
or
Here is the MXML just for the CheckBox_icon in the example:
http://patrickhansen.com/demo/flex/CheckBox_icon.mxml.zip
Sorry, my comment replies don't allow for rich text, so I will provide the links to the source files instead of just pasting it all in here.
I did create the actual checkMark icon in Adobe Illustrator, and then saved out as SVG path data via File>Save As> SVG. You do not actually need to save the file out, you can click on the "Show SVG code" and that will open up the the data in another window. You will see all types of "path fill" tags, but you can just scroll through to the very bottom and just grab the final "path fill" info after the "d". That is the path data you will take into the Degrafa "Path" tag.
Thanks to Juan Sanchez for assisting with the CheckBox_icon in Degrafa.
been waiting for it. :D
i wonder why mine is not working.. damn!
well i got to check this out again!
yipee!!!
I am loving this blog more and more...
:D
oh add this tag skinning checkbox icon in degrafa.. i think lots of people uses this as search keywords in google...
-----------------
so how about. the icon inside the buttons?
this thing i need most. :D
cheers!
People actually read my blog?!
I will add that tag to the post - thanks for the idea.
The icon inside the buttons? I'm not sure I quite understand the question.
so, could you give an example for this one (with degrafa in flex)?
or its the same as the checkbox?
:D
Maybe this could help me solve some problems i encountered before.
Since this actually has irritated me to some point because i cant get to position my paths where i wanted them (whenever i use paths in rendering surfaces of containers).
So. More Power and keep blogging (please!)
I have kept the skins in a SWF where they are stateless (i.e. Button_upSkin, Button_overSkin, Button_downSkin, etc.), ad then using the following CSS to pull it in:
Button
{
disabledSkin: Embed(source="flex_skins.swf", symbol="Button_disabledSkin");
downSkin: Embed(source="flex_skins.swf", symbol="Button_downSkin");
overSkin: Embed(source="flex_skins.swf", symbol="Button_overSkin");
upSkin: Embed(source="flex_skins.swf", symbol="Button_upSkin");
}
This is the traditional Stateless approach using Swf's or other graphical methods such as bitmaps. And this has been proven to maintain optimal performance with CPU hit with a Flex application.
I have not created individual Classes for each state, I'm not sure if I understand the question clearly.
Comment feed for this post