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:

A couple of the principle goals for Degrafa is reusability, and minimizing the code required to draw visuals. There are a lot of different ways to achieve this in Degrafa, but here’s one that’s particularly fun and interesting. In a former post we mentioned a Repeater as a means to reuse an object in a structured manner. Let’s take a look at the Repeater in closer detail.

The Repeater

Working with Degrafa, each geometry object can have a Repeater associated with it. The Repeater allows you to repeat the geometry using offsets you specify. These offsets are incremented progressively for the repeat count. It draws into the parent geometry objects graphics surface so the ensemble is considered one object.

Using a Repeater

Let’s start by specifying a stroke with an id of OrangeStroke.

Next, a simple line is defined with the Stroke bound to the above Stroke Object.

To repeat this Line object lets add a Repeater. After doing so, our Line object will look like this:

The above Line object will be drawn 11 times with the offsets we specified.

So now we have 11 vertical lines. We can easily turn this into a grid by defining another Line geometry object similar to the one above but on the horizontal axis.

Here is the second Line object that draws 11 lines on the horizontal axis.

A perfect reusable grid in just a few lines of MXML mark-up. No action script required, no math, no loops, no need to define any classes, and it’s readable to anyone.

More Samples

With the Repeater you can do some pretty interesting things. Here’s some quick examples made with Circles and Arcs:


Among other things that will be added to the Repeater are variations of objects that are repeated. For example, repeating lines that are different colors, heights, widths, random, etc.

As Degrafa evolves, Jason and I are trying to make sure we can account for a number of features someone may find important when creating graphics with the framework. Fills and Strokes are very important because they literally make up the shapes that get drawn.

Without a strong solution for those two things you’re left with a something somewhat lackluster. Here’s an example of where things are at so far with Fills and Strokes:

Fills

Fills are created outside and independent of any shape to make sure they can be repurposed. Each type of fill is declared in between a tag, so the MXML for all these fills together would look like this:

Bitmap Fills

Let’s take a look at each Fill separately. The top-left circle is an example of using a Bitmap Fill and the Fill is created like this:

The imageSource variable name points to an embedded image, repeat allows you to specify if you’d like the image to repeat, rotation allows you to rotate the bitmap fill and smooth allows you to smooth out the bitmap fill. Smooth was helpful in this example where without it the edges of the repeated image were jagged.

Gradient Fills

Gradient fills allow you to create linear and radial gradient fills with multiple color, alpha, and ratio specifications. The top-middle circle is an example of a Gradient Fill. The MXML looks like this:

This creates a 3 color gradient fill with various ratios and alphas.

Solid Fills

Solid fills are pretty straight forward, it supports color and alpha. The MXML looks like this:

Working with Strokes

Just like Fills, Strokes are specified independent from any shape or object. Gradient Strokes, both linear and radial, and Solid Strokes are part of Degrafa. You can also specify things like joints, caps, spreadMethod, angle, miterLimit, scaleMode, pixelHinting and more. The MXML for a group of Strokes would look like this:

As things progress, the ability to created different stroke styles like dashed, dotted, random, etc. will be added as well as the ability to add start/end caps like arrow heads, shapes, images, etc. Here’s an example of some strokes:

Gradient Strokes

As mentioned above, Radial and Linear Gradient strokes can be created using Degrafa. The code for the top-left example looks like this:

The MXML for the radial stroke example to the top-right has square caps and bevel joints and looks like this:

Solid Strokes

Solid Strokes can have caps, joints, color, miterLimit, scaleMode, pixelHinting, etc. specified. The MXML:

Another thing worth mentioning is that we’re looking to allow the ability to specify Fills and Strokes properties through CSS, so there’s a way to maintain consistency throughout an app without code redundancy.