degrafa

We are diligently working on getting things ready for the Degrafa beta release. Things like documentation, samples, getting set up on Google Code and Google Groups, etc. are all being worked out as I write this.

Of course, with New Year’s celebration and the team being distributed all over the world, the roll out of all the components (documentation, samples, etc.) will probably be distributed throughout the day of the 1st. Then more will be added as the days go by. The main thing we want to get out there is the framework itself, so people can start playing. So stay tuned…

By the way, information will be distributed across these URLs:

• code.degrafa.com : Points to the Degrafa Google Code page.
• group.degrafa.com : Points to the Degrafa Google Group.
• samples.degrafa.com : This is where links to samples in the documentation will point to.
• docs.degrafa.com : This is where the Degrafa documentation will go.

This is all subject to change, but we’ll let you know if it does.

Flex has always supported some level of CSS, which allows you to externalize styling elements and repurpose them throughout an application. However a few features have always been lacking from the standard Flex skins. With the public beta release of Degrafa on January 1st, we’re going to be raising the bar for CSS support in Rich Internet Applications, and the features we’re showing today are only the beginning. Degrafa isn’t just MXML and ActionScript anymore!

Want to see this example in action? Try it out for yourself: Degrafa CSS Example

Before we get into the similarities and differences between Degrafa and Thermo (Flex 4 framework) I thought I’d give a little perspective of how we got to where we’re at now. When Ted Patrick announced the graphics tag at 360Flex | Seattle, people started asking us how Degrafa compared.ﾠ

Then, when Adobe demoed Thermo at MAX, showing the use of the graphics tag, we got even more questions. The thing is, we knew the graphics tag was coming before that knowledge was made public, but we decided to keep developing.ﾠ

We kept developing, not because of what we did know, but because of what we didn’t know. Everyone on the team had different goals for Degrafa, each of which could have been developed as a separate, stand-alone framework. However, we didn’t know if the next version of the Flex framework would do all the things we wanted and we didn’t want to wait.ﾠ

As time passed, others like Andy McIntosh, Ben Stucki and Pavan Podila got involved, which meant more features and more people to help. Some of these features will be making it into the beta we’re getting ready to release. Other features need a little more thought and development before we feel comfortable releasing them into the wild. We also want to gauge what we do next based on the feedback from this first beta.ﾠ

So, Degrafa versus Thermo? It’s a good question, but without having access to Thermo (or the Flex 4 framework) we can only give an answer based on what was shown at MAX and in the videos available online.ﾠ

First off, Thermo is an application and Degrafa is not. Degrafa is a declarative graphics framework similar to the framework Thermo interfaces with (the graphics tag). We keep hearing from Adobe that with Thermo “you can draw basic shapes“, but we want to do more than that.ﾠ

Degrafa was started to be very versatile and robust so it could be used to create skins, UI graphics, data visualization and more without having to use Illustrator, Flash, etc or Drawing API knowledge. We also wanted to be able to do a lot more with CSS (post on that soon).

There is some overlap, but without having Thermo in our hands we can’t really say how much, or how little, overlap there is. One difference that we can mention is that Degrafa will be out sooner :)ﾠ

Also, the changes coming in the Flex 4 framework, like being able to radically control the visuals in components, will only help Degrafa become more powerful. Degrafa will always be an extension of the Flex framework and not compete with it. Hopefully others will like it as much as we do.

ﾠ

It’s about time, right? So, what’s taking so long? Well, our team grew a bit and we’ve spent the time to integrate some extra features that we felt would be important to have in the first release. When we set out to create this framework we definitely had some feature sets in mind, but in many cases the first beta will exceed them.

The public beta will finally be available January 1st under the MIT License. What a great way to start off 2008, right? For the public release, Degrafa will be available on Google Code, which will also provide a bug management system and integration with our new Google Group.

UPDATE: We moved our Google Group here. So if you signed up for the other one that was listed you’ll need to sign up for the new one to get current info. Sorry for the inconvenience.

As we work to polish things off, here’s a feature summary of what will be available in Beta 1. Keep in mind these are all accessible via MXML.

Stay tuned for more info and examples as we get closer to the date.

Shapes

Degrafa has a number of predefined shapes that can be used to create your graphics compositions:
ﾠ

• Rectangles
• Circles
• Ellipses
• Lines
• Polygons
• etc.

ﾠ

Freeform

If the Degrafa shapes aren’t flexible enough you can create your own using the following, including using SVG path data:

• Arcs (elliptical)
• Bezier Curves (cubic and quadratic)
• Paths
• etc.

or download from an ever growing library.

ﾠ

Segments

Draw using segments:

• ﾠMoveTo
• LineTo
• ArcTo
• Bezier To
• etc.

ﾠ

Repeaters

Repeat an object to create advanced visuals.ﾠ

Paint

Add fills or strokes using the following:

• Solid Fill and Stroke
• Gradient Fills and Strokes
• Bitmap Fill (position and repeat)
• Complex Fill (layer and blend fills)
• etc.

Binding & API Access

Degrafa supports the full MXML binding mechanism with runtime access, API access, collection support, etc.

Skins

Degrafa can be used for all your skinning needs. No more ActionScript and/or extending complex classes.

CSS

You may never create a skin again. Do more with CSS:

• background color (solid and gradients)
• background images (position, repeat, layer, and blend)
• border widths (left, top, right, and bottom independently)
• border colors (left, top, right, and bottom independently)
• border radii (left, top, right, and bottom independently)
• etc.

ﾠ