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

The following example shows how you can set the background fill image on a Halo DataGrid control (with default Spark skin) in Flex 4 by setting the borderSkin and alternatingItemColors styles.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?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>

And the custom border skin class, skins/CustomBorderSkin.mxml, is as follows:

<?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>

[HaloSparkSkins]

View source is enabled in the following example.

[Squidfingers]
[GoogleAdsWide]

You can also set the borderSkin style in an external .CSS file or <Style/> block, as seen in the following example:

<?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>

Or, you can set the borderSkin style using ActionScript, as seen in the following example:

<?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>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

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

  1. How did you create the skin from scratch. What host component did you select? I cant seem to get past that point.

    1. @Alex,

      I’m pretty sure I just manually copy/pasted the default BorderSkin.mxml file from \frameworks\projects\sparkskins\src\mx\skins\spark\BorderSkin.mxml and made a few tweaks.

      Peter

Comments are closed.