There is an article up on InsideRIA that introduces some of the theory and features of Degrafa. I also put together a couple walkthroughs to get you started, but they just barely scratch the surface of what is possible. Definitely check it out if you’re looking for a quick shot of some beginning Degrafa knowledge.
One of the things we’re beginning to focus on is putting together more tutorials, samples and screencasts that really show off what you can do with Degrafa. This article is part of that initiative. With a new version of Degrafa on the horizon, it will be more important than ever to make sure we share the knowledge.
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.
There is an article up on InsideRIA that introduces some of the theory and features of Degrafa. I also put together a couple walkthroughs to get you started, but they just barely scratch the surface of what is possible. Definitely check it out if you’re looking for a quick shot of some beginning Degrafa knowledge.