Saturnboy
 3.27

Degrafa Button Explorer

, ,

Recently, I’ve been playing around with Degrafa in preparation for actually using it on an upcoming project at work. For those that aren’t in the know, Degrafa is a badass graphics framework for Flex. One of my favorite parts so far is the amazing leverage it brings to building custom-styled components. It’s terse and powerful, just the way I like it.

Building Buttons

With a very minimal amount of effort, I was able to create a few “web 2.0″ button skins. I just followed one of the millions of glass button photoshop tutorials, but did the work in mxml code using Degrafa’s declarative syntax. Here are my results (view source enabled):

Flash is required. Get it here!
Button Explorer

But then I decided to take it a step further and build out a Degrafa Button Explorer (with a small tip of the hat to the original Flex Style Explorer). The Degrafa Button Explorer allows you to adjust a bunch of properties and colors for all three buttons styles. It goes a step further than the original and provides not only the CSS, but also the full code of the stateful Degrafa-powered button components.

 »  Degrafa Button Explorer

Digging Deeper: I’ve been following the skinning performance issues discovered by the guys at EffectiveUI. The most recent benchmarks appear to show that stateful Degrafa skins (like those produced by the Degrafa Button Explorer) are safe to use.


Comments

3.27.2009

1

That totally rocks, great job on the button explorer!

3.28.2009

2

This is great! We’ve been talking about making something like this for a while, but for entire skins. It would be great if there was also a CSS component to this making it even easier for customizing. The final output would be the Degrafa MXML skin and a CSS file that drives the colors, alphas, etc. for the skin.

I’m glad you found the article on the Stateful skins issue. At one point we yanked Degrafa from a project thinking it was the problem. Turned out it was the stateful skins and we went back to Degrafa.

Looks like you’re in Boulder. Let me know if you’re ever in Denver or swing by the EffectiveUI office.

Nice work!

3.28.2009

3

@Juan: The Degrafa Button Explorer does provide both dynamic CSS and code. Maybe you missed it because the CSS element is collapsed (it’s a WindowShade, as are all the UI boxes).

sitron

4.14.2009

4

great job!

josh

5.6.2009

5

Any chance of getting view source enabled on the button explorer?

5.6.2009

6

@josh: I’m working on a new Degrafa Skin Explorer that I hope to release soon (along with its source). The old code is a hacked mess that is just too embarrassing to show. But if you want to see some dynamic Degrafa skinning code then check out the iPhone skin example from my More Degrafa Skins post.

jay

6.6.2009

7

When will the Degrafa Skin Explorer be released?

10.16.2009

8

Why don’t you submit this to the tools section of degrafa.org? It’s very useful. Thanks.

Jesús Zazueta

1.13.2010

9

Hello. Kudos for this application. I noticed that the application’s layout uses collapsible panels to conserve display space. Would it be possible for you to share some ideas or source code of how these components were done? Thanks for your time and help!

1.13.2010

10

The collapsing panel is a WindowShade for Flexlib. I wrote about styling Flexlib’s WindowShade in an earlier post.

Jesús Zazueta

1.14.2010

11

Thanks indeed for these examples. Much appreciated!

1.31.2010

12

Thanx!, you’ve done great work, I’m gonna start using Degrafa right away

3.2.2010

13

Thanks matey – I learnt alot from just playing with it. Superb job

Jatin

8.18.2010

14

Excellent demonstration…became of Fan of Degrafra.

Its amazing…

Cheers
Jatin

© 2017 saturnboy.com