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.

We’re excited to announce that Andy McIntosh has joined the Degrafa development team. Andy has experience and passion in bridging the gap between designer and developer. His involvement will help us with Degrafa’s range of features, further optimize the framework and bring other perspectives on Degrafa’s capabilities. You can find out more about Andy on his blog.

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:

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.

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.

One of the driving forces behind Degrafa is the need to close the gap between Designers and Developers constructing applications in Flex. Typically when working on a project a designer will create the graphic assets in Flash, Illustrator, Fireworks or any other vector or bitmap authoring software and then hand it over to a developer to implement.

This is what I will do, except I do all the MXML implementation of skins or any other graphics necessary to get an application looking the way I want it to. Most of the time I work in Flash, then bring everything over to Flex. This works great.

However, there comes the redundancies of making changes to graphics when needed. So, I open Flash, make the changes, publish a SWF/SWC, then go back to Flex and make sure everything looks good. If not, repeat.

Wouldn’t it be great if you never needed to leave the Flex work environment to do this or if you could just repurpose similar buttons into different colored buttons instead of making a separate graphic or programmatic skin for those small variances? Well, with Degrafa you can, by utilizing the available Drawing APIs and more.

You might be thinking, the Drawing APIs? Don’t I have to know ActionScript and how to even use the Drawing APIs? Typically, yes. However, another part of bridging the gap between Designers and Developers is creating a legible and easy to use framework which uses MXML markup. Degrafa does this. So, you could create graphics assets very easily using Degrafa and they’re right there in MXML for a designer or a developer to manipulate as they see fit. Consider the following example:

The Clock

This clock was created with roughly 40 lines of MXML using methods mentioned in the last post and no ActionScript.

The Parts

There are several items that make up this clock. Fills, Strokes, layered Geometry Groups, Lines, a couple Filters and a Repeater. The first 4 items I mentioned in a former post and the Filters are just flash.filters.

The Repeater comes in handy for the hour tick marks on the face of the clock. Typically you might draw each line with it’s own X and Y positions, but with Degrafa’s Repeater you can specify one line, a rotation point, offset points, and a repeat count. With that you make what could have been 12 lines of MXML into about 3.

Add Additional Interactivity

Now that we have our clock we can have it do more than just tell time. The face of the clock could change colors to represent time of day or create an alarm clock where the face started turning redder as it got closer to the alarm time. We could change the shape of the hands or change the clock from circle to a square. Values of any attributes of the different shapes that make up the clock could be bound to any type of control or data set.

With static vector or bitmap assets it would be hard to do this. Not only that, but now a developer doesn’t need to get into Flash or Photoshop to change something as basic as a color. All they need is the new color values and they just plug them in.

A Visual Tool Set

With both designer and developer working on a common level with MXML some really great things can happen. However, there will be designers who don’t even want to look at code.

That’s understandable. Which is why we’re planning on creating a set of visual tools to accompany the framework. Then designer’s will be able to take advantage of the features of Degrafa without too much resistance. Sound good? We think so.

Degrafa, short for Declarative Graphics Framework, is a coordinated and concentrated effort to bring one of the principle items lacking in Flex to the surface and expose it as the MXML mark-up language we all love. The framework is a mark-up syntax for the Flex Graphics APIs and built from the ground up with both developers and designers in mind.

Primary Goals

• To provide a transparent and coordinated mechanism between designer and developer so that bridges of communication and collaboration can be achieved.
• To find a common, and readable syntax so that transition can be rewarding, educating, and productive.
• To allow the creation of complex graphics within Flex without wading through the muddy waters of the graphics api’s.
• To provide a mechanism through which any Flex user can get maximum benefit from the graphics api’s available, with a limited learning curve and still profit from optimum reusability opportunities.
• To make all of these easily accessible to both beginner and experienced Flex users.

Creating a Common Ground

Designers don’t speak Action Script and developers don’t speak Photoshop, Flash CS3, layers and masks (Okay, we know this isn’t entirely true, but you get what we’re saying). One language construct common between the two is MXML. However, the existing Flex framework doesn’t allow this common language where graphics and visual design is concerned. Degrafa provides a common dialog between these two areas of expertise.

Degrafa in Action

This is a basic example of a star which was drawn quite easily using Degrafa and without any necessary knowledge of ActionScript.

The star is comprised of three parts, a Linear Gradient Fill, a Stroke and a Geometry Polygon shape. To get the shape to look as it is above I first define the Fill, which can have multiple colors, alphas, gradient ratios and an angle value. Radial Gradients are also supported. In this case, a Linear Fill is created and given an id of OrangeFill:

Next, a basic Stroke is created with an id of OrangeStroke:

The final step is drawing the shape. In this case a Geometry shape of Polygon is used to create the star using a point structure and the Stroke and Fill attributes are assigned by referencing the Stroke and Fill ids that were created prior. This draws the star:

The point structure in the above MXML is noted using a short hand version of specifying the x and y values of each point. This is a quick way to specify points, but there is also a long hand version that will serve it’s own purposes. Specifying a set of points in long hand would look something like:

As progress is made we’ll be posting more complex examples, but this star example represents several core capabilities that will be further explored and expanded upon in future posts here. Stay tuned..

Welcome to the Degrafa blog! Jason and I will be using this blog as a means to broadcast our progress on the Declarative Graphics Framework (DeGraFa) we’re cooking up for Flex. We plan on sharing thoughts, samples and reasonings behind what we’re doing and welcome as much feedback as possible. What we’ve been able to do thus far is really exciting and we can’t wait to share more of the many features we plan on integrating into the framework. We’ll start posting samples pretty soon.