I’ve been using Degrafa lately to build programmatic skins for a Flex theme. Degrafa is a ‘Declarative Graphics Format’ that allows you to draw graphics using MXML. This isn’t all it does though. You can use binding to dynamically adapt the graphics and it also extends your ability to change the styles of skins with CSS. I’ll be looking closely at that next as it does look rather interesting.
Degrafa is very powerful and I think I will continue to use it even when I’m deep into Flex 4 and FXG which uses very similar syntax.
The latest version of Degrafa allows you to add states to a skin so you can easily change the visual appearance based on the state of the skinned object. Here’s an example …
If you view the source (right-click in the iFrame) and take a look at the PopButtonSkin class you can see how this simple PopMenuButton component was skinned without any graphics files.
And here’s the Application file for you to look over. You can also grab the source from the example above by right-clicking and ‘viewing the source’.
The main thing to know about PopButton components in Flex is that they have extra button states that you need to know about. They are the pop-up-over and pop-up-down states. It is these states that are triggered when the user is interacting with the ‘arrow’ part of the popButton although this symbol is only part of the default halo skin. Also, the arrow can be changed for any icon. Remember that the skin for these states covers the entire button and isn’t an overlay over the hit area. In my example I’m drawing a backslash where my arrow should be until you roll over and it prompts the interaction.
Notice in the skin file that the fills and strokes are created separately from the Geometry. This is very useful as it means you could create a completely separate file to manage the palette of your app. I don’t just mean the colour scheme though. You can set out all your grads, stroke weights and fills and then reference them in different skins to ensure consistency.
The geometry is very straightforward and the skinWidth and skinHeight properties ensure the skin fits the component perfectly. Notice my borders are comprised of three rectangles overlaid and I’m offsetting them to create a border around my button. I could have used two rectangles with strokes to get the same result. The strokes use gradients too.
Before Degrafa introduced states you would have a whole bunch of objects declared in your geometry and would differentiate each object with the button state by using the objects state property. This could get quite messy. Now you will notice that the states are set separately and work in just the same way that you would expect. You can adjust the properties of objects, add and remove children and you can base one state on another to avoid any duplication of code. Overall this is a very neat way of creating skins.
Notice I add the IsocelesTriangle AutoShape to the geometry only on the over state. The down state is based on the over state so it will retain the arrow. This arrow could also be animated when you click by creating a tween and effecting the RotateTransform angle property.
The next step is to add filter support and transitions. I’ve seen some animation done with Degrafa that seemed very easy to implement … it’s time to play some more.
Recent Comments