While at 360|Flex there were a lot of questions regarding how Degrafa got started and whether or not we were “inspired” by MXML-G. I thought I’d (Juan) share a little of that information in case anyone else was wondering.

ï¾ 

About six months after I started ScaleNine I picked up on a blog post by Jason Hawryluk about a “Primitive Explorer” he had created that allows for programmatic drawing of shapes via set parameters. My initial interest in that blog post was exploring the potential for programmatic drawing for various purposes, but mainly skinning. Jason picked up on the link I had on ScaleNine to his blog and he sent me an email asking if I’d be interested in collaborating on the “next version” of the Primitive Explorer.

ï¾ 

Initially I just created a logo for the new Primitive Explorer (now the Degrafa logo), but as Jason and I carried on more conversations we realized that some of the things we were talking about lent themselves to more than an explorer and into a full framework. This framework would allow for programmatic graphics via MXML markup. The more we talked about it we started to realize that the framework could be capable of doing a lot of unique things, so we forged ahead with trying to pull it together.

ï¾ 

The process of getting the framework started was a collaborative one. I looked at things from a designer’s perspective and Jason from a developer’s. For the name of the framework, we decided on Degrafa, which is DEclarative GRaphics FrAmework compressed together. Plus, it was a short URL.

ï¾ 

As progress was being made, Jason made a comment on FlexCoders about graphics definable via MXML and it evolved into an email conversation with Ely Greenfield. That email conversation turned into an opportunity to show Ely and Glenn Ruehle what we were working on, as well as see what they had in the works. We had no prior knowledge that Adobe was working on something similar, so we were excited to share.

ï¾ 

Via an Adobe Connect session we got to see the first implementations of what Adobe was working on for graphics defined in MXML (later this became known as MXML-G). We were happy to see that Adobe had similar interests, but we weren’t sure how soon what they were working on would be available to the public, so we forged ahead.

ï¾ 

Adobe MAX 2007 rolled around and we got to see where Adobe was going with MXML-G. It was Thermo and Flex 4. Now we could see where things were going, but then we heard dates in 2009 for when some of the things we saw would be public. Again, we decided to forge ahead and in the process we were able to pick up other developers who saw potential in Degrafa. Guys like Ben Stucki, Pavan Podila, Andy McIntosh, Jim Cheng and others got involved, which helped push things forward.

ï¾ 

On January 1st, 2008, we released the first beta of Degrafa, dubbed “Origins”, and we were surprised by the response. People started using it for all types of things, like skinning, data visualization, product customizers, and more. Seeing this added fuel to the fire and since we’ve laid the initial groundwork for Degrafa we’re able to start doing some really interesting stuff. Everyone on the team likes to think that what we’re contributing to is something that may potentially change the way people think about graphics in Flex. Our hope is do offer up a lot of powerful features that are easily accessible and don’t sacrifice performance.

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..