Here’s a quick demo showing how you can use SVG path data to draw shapes in Flex via Degrafa. I know it’s a bit hard to see the code because of the video size, but you can at least get a general sense of what’s going on.

What I’m going through here is a pretty manual process that were going to try to eliminate with some import/export and visual tool sets. You can see a slightly larger video here.

So far, some of the examples of the drawing capabilities of Degrafa have been relatively simple in order to stress key concepts and features. We think it’s important that users of the framework are in no way limited in what they can create and as we progress with Degrafa we will try to put together complex examples of the capabilities when ever possible.

In this case we’ve taken an SVG from here and ported it over to Degrafa in under 1900 lines of MXML (minus some line breaks). Also, we added the ability to change the color of the tiger’s eyes just as a quick example of affecting the graphic dynamically. Here’s the sample:

Click here to open this example in a larger window.

Drawing with SVG Path Data

This tiger is drawn using shorthand path data that maps directly to SVG path data in that they are the same. However, you are not limited to that drawing method. The SVG path data for this example was copied and pasted into the Degrafa markup. Here’s an example of how one whisker is drawn, including Fills and Strokes:

Each shape is drawn as a Path and uses short hand markup for moveTo, cubicBezierTo and positioning. With this method you can create objects similar to the way SVGs are drawn and you can get very detailed. Once the objects are drawn, you are free to manipulate them as you see fit.

In the short term we’d like to integrate the ability for someone to create artwork in Illustrator, export it as an SVG, and then bring it right into Flex via Degrafa to leverage the benefits of having a dynamic graphic versus a static one.

Here’s another skinning sample done with the Degrafa framework using the same methods mentioned in previous posts. It’s a thermometer type component created using a VSlider. Skins were created for the VSlider trackSkin and thumbSkin.

And another variation:

Degrafa not only gives you the ability to draw graphical shapes and objects, but it also allows you to use anything you can create with it as a skin for any component in Flex. Here’s is a simple example of a Button using graphics drawn with Degrafa as skins:

Like the basic shape example, these skins are comprised of shapes, fills and strokes. The only difference is that separate MXML files have been created for the different skin states of the Button. For example, the code for the UpSkin.mxml file used in this example looks like this (not including MXML for Fills and Strokes):

After a skin is created for each Button state we can assign the skins to a Button inside an Application just like any other skin, like this:

This simple example offers a small glimpse at what is possible and as the framework continues to grow, skinning will definitely be one of our focuses.