Degrafa + Datagrids = Visual Display of Data

原文链接：http://www.insideria.com/2008/03/degrafa-datagrids-visual-displ.html

If you are a Flex developer, and you haven't checked out Degrafa yet, you should. Degrafa is an open source declarative graphics framework for Flex. It allows you to easily create complex shapes, patterns, skins, gradients, strokes, etc... without intimate knowledge of the drawing API. The framework allows you to do some really cool things, without a lot of code. Kudos to the Degrafa team for their efforts.

I decided to try out Degrafa on a concept from one of my Cynergy blog posts: "Thinking Outside Of The Grid", from last May. Datagrids are great for displaying tabular data. With a little creative coding, you can turn them into dynamic charting components. Here's a quick example of what can be done with a Flex datagrid, Degrafa, and some time to kill.

View this demo full screen at:

http://www.tricedesigns.com/portfolio/degrafadatagrid/main.html 

This example doesn't cover the broad range of renderers shown in my previous post, however Degrafa helped make the code for this simple enough for anyone to duplicate.

I used Degrafa to create bar-chart representations of data displayed within a datagrid. Its quite simple actually... I created datagrid item renderers that use degrafa to dynamically draw a rectangle that represents disk usage. The code is pretty simple actually. You just create a fill style, then declare a rectangle that uses the fill. The width of the rectangle is dynamcially calculated based on the available width of the item renderer, and the calculated values. All of the calculation is done within data bindings, thus making the code very simple.

<mx:DataGridColumn headerText="Free" dataField="free">
   <mx:itemRenderer>
      <mx:Component>
         <mx:Canvas>
               
            <degrafa:Surface>
         
             <degrafa:fills>
          <paint:LinearGradientFill id="greenGradient" angle="90">
          <paint:GradientStop alpha="1" color="#00FF00"/>
          <paint:GradientStop alpha=".5" color="#333333"/>
          </paint:LinearGradientFill>
          </degrafa:fills>
         
          <degrafa:GeometryGroup>
          <geometry:RoundedRectangle
             fill="{greenGradient}"
          cornerRadius="0"
          width="{ width * ( data.free / data.capacity ) }"
          height="{ height }" />
          </degrafa:GeometryGroup>
         
          </degrafa:Surface>
         
         </mx:Canvas>
      </mx:Component>
   </mx:itemRenderer>
</mx:DataGridColumn>

You can view this demo full screen at:
http://www.tricedesigns.com/portfolio/degrafadatagrid/main.html

You can view the source code at:
http://www.tricedesigns.com/portfolio/degrafadatagrid/srcview/index.html

You can download the source code at:
http://www.tricedesigns.com/portfolio/degrafadatagrid/Degrafa Datagrid.zip