Degrafa for Flex Enables Control of Background Images

If you've ever wrestled with background images for Flex components, there's a powerful library to make your life easier: Declarative Graphics Framework (Degrafa). I'd implemented a paging mechanism for an AdvancedDataGrid; then I added a background image to the Application container,

<mx:Style>
Application {
 background-image: Embed("global/media/flower.png");
}
</mx:Style>

The height property on the AdvancedDataGrid was set to 100% and the variableRowHeight="true"; however, this was giving me grief: For whatever reason, the record at the bottom of the grid was cut off. And the scrollbar stopped a few steps before it could completely reach it. After some trial-and-error, two solutions emerged:

1. Take the height property off completely and keep variableRowHeight="true".
2. Or set the rowHeight to some value and set variableRowHeight="false". The trouble was, this meant all the rows would be the same height. Not very aesthetically pleasing.

I opted for the first solution. But with this choice, it caused the grid to expand and contract as you paged through the records (the rows have different height values depending on their content). Not a big issue for the grid to resize vertically; but it was also causing the application's background image to grow and shrink as you paged the records. Again, not very pretty.

Some research led me to this great blog by Brendon Wildbore. The solution was to use his code example along with the Degrafa SWC file in the project's lib folder. Instructions on downloading and installing the SWC can be found on the Degrafa web site. Following Brendon's example, I changed the CSS to look like this,

<mx:Style>
Application {
 background-image: Embed("global/media/flowers.png");
 background-repeat: repeat;
 background-position: center;
 background-blend: normal;
 borderSkin: ClassReference("com.degrafa.skins.CSSSkin");
}
</mx:Style>

And the problem disappeared. The image now stays the same size. However, the image was too dark; a check of the values and it was clear that the background-blend: multiply; was the culprit. Changed it to normal and all is well.

The Degrafa library allows for much more than this. Check out their site to see the capabilities.