Datagrid styling in Flashbuilder

Question

Hey everyone,
I have some issues styling a Datagrid with Flashbuilder.
My problem is skinning the Datagrid. I wan't to have the Datagrid transparent, which I used to achieve by setting backgroundAlpha="0" and alternatingItemColors="{[]}" in Flexbuilder. This doesn't work when the compiler uses the Spark Theme. The thing is I don't want to use the Halo Theme on all my Components like Peter explains here: http://blog.flexexamples.com/2009/07/14/using-the-halo-theme-in-flex-4/ Is there a way of getting the Datagrid transparent without using the halo theme?
The second issue I have is regarding fonts in the Datagrid. I managed to embed system fonts like Arial or Verdana, but when it comes to the .ttf the designer wants me to use, no text is displayed. I found out, that the Datagrid uses bold fonts for default. I've set the font-weight to normal on the columns but they still stay empty.
Here's my css code:
@font-face
    src:                        url("assets/fonts/FuturaCom-Medium.ttf");
    fontWeight:                 normal;
    fontFamily:                 myFuturaMedium;
    advancedAntiAliasing:       true;
    cff:                        true;
    unicode-range:              U+0020-U+007E,  /* englishRange & basic latin */
                                U+00A0-U+00FF, /* basic latin with umlaut äöü*/
                                U+20AC-U+20AC;
.myDatagrid{
    fontFamily: myFuturaMedium;
    font-weight:normal;
    color: #FFFFFF;   
Thanks in advance. Help is highly appreciated!

Answer 1

Or the other approach (a custom skin) would be something like this:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        backgroundColor="red">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingTop="20" />
    </s:layout>
    <mx:DataGrid id="dataGrid"
            alternatingItemColors="[]"
            borderSkin="skins.CustomBorderSkin">
        <mx:dataProvider>
            <s:ArrayList>
                <fx:Object c1="0.One" c2="0.Two" />
                <fx:Object c1="1.One" c2="1.Two" />
                <fx:Object c1="2.One" c2="2.Two" />
                <fx:Object c1="3.One" c2="3.Two" />
                <fx:Object c1="4.One" c2="4.Two" />
                <fx:Object c1="5.One" c2="5.Two" />
                <fx:Object c1="6.One" c2="6.Two" />
                <fx:Object c1="7.One" c2="7.Two" />
                <fx:Object c1="8.One" c2="8.Two" />
                <fx:Object c1="9.One" c2="9.Two" />
            </s:ArrayList>
        </mx:dataProvider>
    </mx:DataGrid>
</s:Application>
And the custom border skin, skins/CustomBorderSkin.mxml, is as follows:
<?xml version="1.0" encoding="utf-8"?>
<local:SparkSkinForHalo 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 = ["bgFill"];
        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;
            // 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">
            <s:fill>
                <s:SolidColor id="bgFill" color="0xFFFFFF" />
            </s:fill>
        </s:Rect>
    </s:Group>
</local:SparkSkinForHalo>
(The border skin was taken from %FLEX SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\BorderSkin.mxml and I basically only added that alpha="0" bit on the background Rect fill.
This is one of the areas we are still trying to improve in Spark (backgroundImage, backgroundAlpha). If you have any list of styles that worked in Halo but aren't working any more in the default Halo control/container Spark skins, let us know.
Peter