Setting the background fill image on a Halo DataGrid in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/04/setting-the-background-fill-image-on-a-halo-datagrid-in-flex-4/ -->
<s:Application name="Halo_DataGrid_borderSkin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <mx:DataGrid id="dataGrid"
            dataProvider="{Font.enumerateFonts(true)}"
            borderSkin="skins.CustomBorderSkin"
            alternatingItemColors="[]"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/04/setting-the-background-fill-image-on-a-halo-datagrid-in-flex-4/ -->
<local:SparkSkinForHalo name="CustomBorderSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:local="mx.skins.spark.*"
        implements="mx.core.IRectangularBorder">
 
    <fx:Script>
        <![CDATA[
            import mx.core.EdgeMetrics;
            import mx.core.IUIComponent;
            import mx.graphics.RectangularDropShadow;
 
            /* Define the skin elements that should not be colorized. */
            static private const exclusions:Array = ["background"];
            override public function get colorizeExclusions():Array {return exclusions;}
 
            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = [];
            override public function get contentItems():Array {return contentFill};
 
            /* Define the border item. */
            static private const borderItem:Array = ["borderStroke"];
            override protected function get borderItems():Array {return borderItem;}
            override protected function get defaultBorderItemColor():uint {return 0x696969;}
 
            static private const metrics:EdgeMetrics = new EdgeMetrics(1, 1, 1, 1);
 
            private var dropShadow:RectangularDropShadow;
 
            public function get borderMetrics():EdgeMetrics {
                return metrics;
            }
 
            public function get backgroundImageBounds():Rectangle {
                return null;
            }
 
            public function set backgroundImageBounds(value:Rectangle):void {
            }
 
            public function get hasBackgroundImage():Boolean {
                return false;
            }
 
            public function layoutBackgroundImage():void {
            }
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                graphics.clear();
 
                super.updateDisplayList(unscaledWidth, unscaledHeight);
 
                if (parent && parent is IUIComponent && !IUIComponent(parent).enabled) {
                    alpha = 0.5;
                } else {
                    alpha = 1.0;
                }
 
                // Draw drop shadow, if needed
                if ((getStyle("dropShadowEnabled") == false) || 
                        (getStyle("dropShadowEnabled") == "false") ||
                        (width == 0) || (height == 0)) {
                    return;
                }
 
                // Create a RectangularDropShadow object, set its properties,
                // and draw the shadow
                if (!dropShadow) {
                    dropShadow = new RectangularDropShadow();
                }
 
                dropShadow.distance = 5;
                dropShadow.angle = 90;
                dropShadow.color = 0;
                dropShadow.alpha = 0.8;
                dropShadow.blurX = 20;
                dropShadow.blurY = 20;
 
                dropShadow.drawShadow(graphics, x, y, width, height);
            }
 
            private function getDropShadowAngle(distance:Number, direction:String):Number {
                if (direction == "left") {
                    return distance >= 0 ? 135 : 225;
                } else if (direction == "right") {
                    return distance >= 0 ? 45 : 315;
                } else { // direction == "center" 
                    return distance >= 0 ? 90 : 270;
                }
            }
        ]]>
    </fx:Script>
 
    <s:Group left="0" right="0" top="0" bottom="0">
        <!-- border --> 
        <s:Rect left="0" right="0" top="0" bottom="0">
            <s:stroke>
                <s:SolidColorStroke id="borderStroke" />
            </s:stroke>
        </s:Rect>
 
        <!-- fill -->
        <s:Rect id="background" left="1" right="1" top="1" bottom="1" alpha="0.6">
            <s:fill>
                <s:BitmapFill source="@Embed('assets/pattern_147.gif')" />
            </s:fill>
        </s:Rect>
    </s:Group>
 
</local:SparkSkinForHalo>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/04/setting-the-background-fill-image-on-a-halo-datagrid-in-flex-4/ -->
<s:Application name="Halo_DataGrid_borderSkin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|DataGrid {
            alternatingItemColors: ClassReference(null);
            borderSkin: ClassReference("skins.CustomBorderSkin");
        }
    </fx:Style>
 
    <mx:DataGrid id="dataGrid"
            dataProvider="{Font.enumerateFonts(true)}"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/04/setting-the-background-fill-image-on-a-halo-datagrid-in-flex-4/ -->
<s:Application name="Halo_DataGrid_borderSkin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Script>
        <![CDATA[
            import skins.CustomBorderSkin;
 
            protected function btn_click(evt:MouseEvent):void {
                dataGrid.setStyle("borderSkin", CustomBorderSkin);
            }
        ]]>
    </fx:Script>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <s:Button id="btn"
                label="Set border skin"
                click="btn_click(event);" />
    </mx:ApplicationControlBar>
 
    <mx:DataGrid id="dataGrid"
            dataProvider="{Font.enumerateFonts(true)}"
            alternatingItemColors="[]"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>