Degrafa: Declarative Graphics Framework

Degrafa Blog

Get Degrafa Now

Archive for June, 2008

Spread the Degrafa Word

Friday, June 27th, 2008

The Degrafa Team is really excited about Degrafa Beta 3 and the continuing progress on to Degrafa 1.0. A lot of people have expressed how happy they’ve been with Degrafa so far and have even offered to donate funds to the development. Right now the most we can hope for is people spreading the word about Degrafa and let people know about your experiences with with it. Seeing people using the framework is what keeps us going, so the more blog posts, tutorials, or shout outs Degrafa gets, the more people start using it. That all in turn makes it all worth it to us.

We know not everyone has the time to go to such lengthy efforts to get the word out there. Heck, we have to squeak hours in here and there to keep development moving forward. So, if you wanna do something quick to help the Degrafa user-base grow, feel free to slap the banners and icons below wherever you see fit. You might remember the “I [ Degrafa ] Fx” design from the shirts we handed out at the last 360|Flex.

Thanks to everyone for their continued support and comments to continually push Degrafa forward. We’re also looking for success stories to share, so if you have a story to tell email us at info [ at ] degrafa [ dot ] com.

Banners Click images for the link

Degrafa Banner

Degrafa Banner

Degrafa Banner

Degrafa Banner

Degrafa Banner

Degrafa Banner

Degrafa Banner

Degrafa Beta 3 Preview: Transforms

Sunday, June 22nd, 2008

In the last post we previewed the revamped Repeaters in Degrafa Beta 3. Another feature we’re excited about is transforms, which will include Scale, Skew, Translate, Rotate and Matrix. Transforms will allow you to further manipulate the graphics you create with Degrafa and with bindable properties Transforms can change graphics “on the fly” and bring things closer to cleanly converting SVG (and other formats) to Degrafa.

All this is similar to what you might expect from a graphics editing tool like Illustrator. What’s cool is in Degrafa the children inherit the parent transform but each can also have their own individual transform as well (without incurring the overhead and provides a more compact markup). Also, transforms are applied at render time and are none destructive (i.e. do not actually modify the geometry properties).

In most cases a single Transform may suit your needs for multiple transform types. If not, you can use a TransformGroup to create your own sequence in which the transforms will be applied, so you have complete flexibility. We also allow you to specify a registration point beyond top-left to include center, top-center, bottom-right, etc., as well as centerX and centerY providing additional control. This saves you from having to come up the math to set the registration point on your own.

Below is a basic example of a RegularRectangle with the following transforms applied to it from left to right: Scale, Skew, Rotate. (Matrix and Translate not shown).

Rectangle Transform

Click to View and View Source

As you might expect Degrafa Transforms will work on any geometry drawn using Degrafa. However, there’s a bit more to it than that. You can also apply transforms to Fills (like a bitmap fill and any gradient fill) and Gradient-based Strokes. For example, below is a basic sample of a BitmapFill with a Scale, Skew and Rotate transform applied (images from COLOURlovers).

BitmapFill Transform

Click to View and View Source

Transforms allow you to manipulate geometry very easily rather than having to manually change properties or points. However, the real power comes from using Transforms with other features of Degrafa. Below are several examples of using a Repeater with different transforms. The one with the orange, white and grey “tick marks” actually has a transform applied to a Repeater with a transform on its children (mind-boggling, right?). This also shows that transforms are propagated to the children and that the parent can have a transform that also gets applied to the children, yet each child could add to their final transform with a transform of their own.

Transformed Repeaters

Click to View and View Source

When you start thinking about all the unique combinations of using transforms you can begin to see just how powerful they can be. As we preview more features of Degrafa Beta 3 you’ll be able to see how adding a single transform can drastically change graphics drawn with Degrafa to create very unique and interesting visuals.

Degrafa Beta 3 Preview: Revamped Repeaters

Monday, June 16th, 2008

Degrafa Beta 3 Repeaters

If you follow Degrafa on Twitter you may recall a mention of Degrafa Beta 3 potentially being the biggest release ever. Our initial focus was the core, but now we get to implement the fun stuff that will make people think differently about what’s easily possible with graphics in Flex. As we get closer to the Degrafa Beta 3 release we will be posting previews of some of these features. The first we’d like to discuss is Repeaters.

If you’re familiar with Degrafa Repeaters you know that the way they are now they aren’t entirely flexible and only provided solutions for a small number of use cases. That is totally changing in Degrafa Beta 3. We’ve revamped Repeaters to be very powerful and flexible, so in a minimal amount of code you can create repeating geometry for any number of scenarios.

In the current version of Degrafa you have geometry-specific repeaters, like CircleRepeater, LineRepeater, etc. You can also only manipulate repeated geometry in a small number of ways. In Degrafa Beta 3 you can repeat ANY geometry, change each individual item in a number of ways, hook the repeater to a data provider and so much more.

Tom Gonzalez, a Degrafa Team member, took the time to put together a quick sample and a nice blog post about the revamped Repeaters. His post illustrates just the tip of the iceberg of what is possible. He’s already shown me some of the stuff he’s been working on behind closed doors and it just blows me away. The best part is it takes such minimal code to do some awesome stuff. The image above is from his post and if you’re interested in learning more about the revamped Repeaters in Degrafa Beta 3 be sure to check out his post and follow his blog. Tom has some more great stuff to show off.