We will be introducing a couple more simple yet sophisticated decorations into Degrafa Beta 3.2 in order to show the multitude of ways this feature can be used. One of these is ShapeStrokeDecorator. This is a different type of decoration compared to the the SVGDashLine example in that in MXML it “wraps” the geometry you wish to decorate rather than being a nested tag. Consider the order of composition reversed between the two types.
ShapeStrokeDecorator achieves results similar to advanced path tools in a vector editor that allow placement of items along a path.
This decoration will be part of beta 3.2 due out this week. Here it is in action.
One of the benefits Degrafa offers as part of the framework is the ability to repurpose code to no end. This may be obvious for things like geometry, but if you find yourself writing redundant code for fills and strokes, this tip should help.
Rather than specifying the same common fills and strokes in every MXML file where you’re doing your drawing, you can separate fills and strokes in to their own MXML files. Then, whenever you need to access a fill or stroke, you can add that component to your MXML file and easily access them when appropriate. By doing this, you also have the advantage of code hinting, which makes for quick and easy coding.
As an example, I could make a Fills.mxml file where I specify a fill, like this:
Then, I can reference that MXML file wherever I’m drawing with Degrafa. For example, the following Circle.mxml code would reference the Fills.mxml:
Those two code samples represent some of the basic methods for cutting down on the amount of code you need to write. I could reference that Fills.mxml in any other component and use the fills defined in that file. You could do the same for strokes as well or make separate MXML files for each type of stroke or fill. It’s up to you. I put together a more evolved example than what was shown above and you can view it here:
You can expand on this example by making separate Fills and Strokes files for different parts of an application, share those files with other Degrafa users, adjust the structure for what makes most sense for you, etc. One thing that would be interesting is to make a separate Colors class that you can reference from the Fills and Strokes files. Then, when you change the color values in the Colors class the whole scheme of the app could change. Hook that Color class up to a color API like Kuler or COLOURlovers and you could get some really unique opportunities for custom UIs, data visualization, compositions, etc.
We’ve been thinking about a way to grab a color palette using a color API, present a user with a bunch of variations of Fills and Strokes based on that selected palette, allow for selection of which Fills and Strokes the user wants, then write out MXML files with those selections in it. The user could then drop those MXML files into their Flex project and they’re ready to go. It could work the other way too where a user could read an MXML file and be presented with Fill and Stroke swatches of which they can edit and write out a new MXML file.
The more we keep plugging away on Degrafa it seems there are more and more opportunities for creating some really unique tools. Imagine a Fills and Strokes palette that uses the Fills and Strokes MXML files as the model. Who knows what other kinds of things people will come up with as the framework progresses. Any suggestions?
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.
