Enjoy my first screencast: Degrafa component skinning.

Degrafa Skinning Tutorial (part 1) from Mike Huntington on Vimeo.

In my last post I introduced you to Degrafa. Now I want to go a little deeper into what Degrafa can do.

One pet-peeve that many Flex developers have is that the CSS is pretty limiting in some cases.. but on the other end of the stick HTML/CSS developers don’t get access to some of the CSS abilities that Flex developers get. Degrafa brings together the best of both worlds and beyond.

In the following example I take a simple HBox and style it with css defined rounded corners, gradients, and blend mode. I also fill the background with a pattern. As you look at the CSS code, notice I’m using HTML style CSS syntax.

The MXML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:degrafa="http://www.degrafa.com/2007" width="500" height="400"
	layout="absolute">
 
	<mx:Style source="assets/styles.css"/>
 
	<mx:HBox verticalCenter="0" horizontalCenter="0" width="400" height="300"/>
 
</mx:Application>

The CSS

Application
{
	background-image: Embed("assets/pattern_148.gif");
	background-repeat: repeat;
	borderSkin: ClassReference("com.degrafa.skins.CSSSkin");
}
 
HBox
{
	border-width: "5px 5px 5px 5px";
	border-top-right-radius: 50px;
	border-bottom-left-radius: 50px;
	border-color: #000000;
	background-blend: "normal";
	background-color: "-45deg #FF0000 #FFFFFF";
	borderSkin: ClassReference("com.degrafa.skins.CSSSkin");	
}

Degrafa is a Declarative Graphics Framework that basically allows you to draw shapes and objects in your Flex application using an MXML type syntax. I personally love Degrafa, because it eliminates the need for me to open up Photoshop or Illustrator every time I need to have basic shaps inserted into my app.

But the power of Degrafa doesn’t stop there. There are some powerful CSS enhancements in the Degrafa framework that allows for some very creative skinning in your Flex application (I’ll dive more into that later). You can download Degrafa HERE

To show how simple it is to start using Degrafa I’ve created an app that draws two circles. The code is below..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:degrafa="http://www.degrafa.com/2007"
	layout="absolute">
 
	<degrafa:Surface horizontalCenter="0" verticalCenter="0">
 
		<degrafa:strokes>
			<degrafa:SolidStroke id="whiteStroke" weight="4" color="#FFFFFF"/>
 
			<degrafa:SolidStroke id="redStroke" weight="6" color="#FF0000"/>
		</degrafa:strokes>
 
		<degrafa:fills>
			<degrafa:SolidFill id="greyFill" color="#CCCCCC"/>
 
			<degrafa:SolidFill id="blackFill" color="#000000"/>
		</degrafa:fills>
 
		<degrafa:GeometryGroup>
			<degrafa:Circle fill="{greyFill}" stroke="{whiteStroke}" radius="140"/>
			<degrafa:Circle fill="{blackFill}" stroke="{redStroke}" radius="100"/>
		</degrafa:GeometryGroup>
 
	</degrafa:Surface>
 
</mx:Application>

HELLO WORLD! Sorry, my blog database was destroyed but I’m back in the blogsphere once again.. and this time I can officially “reintroduce” myself as a FLEX Developer. When I started this blog a little over a year ago I was just starting out as a programmer. Now with my first post on this “new” Blog I’m glad to say I’m now a FLEX Developer for AT&T and they have some big things planned with FLEX!!!

BUT, FLEX isn’t the only thing that’s been keeping me busy… I’ve also been programming with Cocoa / Objective-C. And as of last week I’ve been doing a little .NET work. As in the past I will keep this blog updated with “tech” news and hopefully some good tutorials every now and then.

Glad to be back!!!

- Mike