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.

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.