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.
To start with, let’s take a look at a simple Flex Button skinned using Degrafa:
Then, that skin is applied to a Flex Button in:
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.
Finally, the shape of our skin is implemented using the class RoundedRectangle. RoundedRectangle implements the IGeometry interface, the classes used in the
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:
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:
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.
This example shows a method for implementing a fully dynamic and persistent skinned Flex application.
The source for the examples in the post can be found here.
This post is a result of recently using Degrafa to implement similar features on a project I was working on. I was very pleased with how rapid the development process was, as well as the opportunity it gave for an elegant skinning solution. Degrafa comes highly recommended by me for any Flex project.