Dynamic, Persistent Skins with Degrafa

Degrafa is a declarative graphics framework for Flex. This means that programatic graphic instructions like:

graphics.lineStyle( 1, 0xffffff );

graphics.moveTo( 10, 10 );

graphics.lineTo( 30, 30 );

graphics.lineTo( 10, 30 );

can be expressed in simplified and elegant MXML source code.

From this post you’ll take away an intro to Degrafa, how to dynamically modify your Degrafa skins, and how to persist those dynamically modified skins.

To start with, let’s take a look at a simple Flex Button skinned using Degrafa:

View Application

In this example I’m using three Degrafa classes: GraphicBorderSkin, SolidFill, and RoundedRectangle to create the skin:

ButtonSkin.mxml

Then, that skin is applied to a Flex Button in:

ButtonSkinExample.mxml

GraphicBorderSkin is one of a few classes that implement the IGraphicSkin interface. These classes are the foundation for a Degrafa skin. Extensions of IGraphicSkin classes are typically written in MXML. For this example I’ve extended GraphicBorderSkin to add a few bindable properties for width and height. If you’re interested in that implementation, take a look at the BaseGraphicBorderSkin in the source code.

SolidFill is fairly self descriptive. As you can imagine, it fills an area with a color. SolidFill may also have an alpha quality.

Finally, the shape of our skin is implemented using the class RoundedRectangle. RoundedRectangle implements the IGeometry interface, the classes used in the tag to draw the shapes of the skin. In our example there are 3 RoundedRectangles, each with increasingly more rounded corners. Each of these three shapes map to three states of the Flex Button; upSkin, overSkin, and downSkin. These shapes are filled using their respective SolidFill instances upFill, overFill, and downFill.

With just a little extra work we can make this skin dynamically configurable. The first step is to create a model to externalize the data of the skin. Our data model includes 9 properties:

This class is called ButtonDynamicSkinData. The next step is to have our skin bind to the values set in ButtonDynamicSkinData. You can view this in the ButtonDynamicSkin class:

The final step is to create a few controls to modify the values in the model. I’ve added these controls to the Application class ButtonSkinDynamicExample… and voila:

View Application

The final step is to persist this data and load it at a later instantiation of the skin. There are many ways to persist data in Flex. For this example I’ve used the simple approach of persisting the data via url encoded variables. In the final example a button labeled “Goto New URL” is added. If you modify the settings of the skin and then click the button, a new instance of the application loads with the persistent skin that was modified.

To facilitate the persistence I’ve added two methods to the class ButtonDynamicPersistentSkinData. The method toUrlVariables() expresses the data model as URLVariables and the setValues() method sets each property of the model based on the values of the URLVariables method parameter.