6 Replies Latest reply on Aug 7, 2009 10:28 AM by Peter deHaan

    Datagrid styling in Flashbuilder

    Stellars_Jay,

      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!

        • 1. Re: Datagrid styling in Flashbuilder
          Peter deHaan Level 4

          Stellars,

           

          Not sure how great a solution this is, but you could try politely asking the DataGrid control to use the old HaloBorder.

           

          <?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="haloSilver">
              <s:layout>
                  <s:HorizontalLayout paddingLeft="20" paddingTop="20" />
              </s:layout>
              <mx:DataGrid id="dataGrid"
                      backgroundAlpha="0"
                      alternatingItemColors="[]"
                      borderSkin="mx.skins.halo.HaloBorder">
                  <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>
          

           

           

          Or, another approach would be to create a custom Spark skin for the Halo DataGrid control and try setting the background fill alpha to 0%. I don't have an exact example of that, but I do have one of a repeating bitmap fill background. You could probably tweak that example slightly to use a SolidColor fill again and set the alpha to 0% to make it transparent.

           

          Peter

          • 3. Re: Datagrid styling in Flashbuilder
            Peter deHaan Level 4

            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

            1 person found this helpful
            • 4. Re: Datagrid styling in Flashbuilder
              Peter deHaan Level 4

              Sorry, I missed your other original question (re: Font embedding),

               

              I'm using build 4.0.0.9118, so your syntax may be a little different if you're using an old build (ie: beta1 build that shipped w/ Flash Builder 4 beta), but this worked for me:

               

              <?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>
                  <fx:Style>
                      @namespace s "library://ns.adobe.com/flex/spark";
                      @namespace mx "library://ns.adobe.com/flex/halo";
                      @font-face {
                          src: url("C:\Windows\Fonts\ARIAL.ttf");
                          fontWeight: normal;
                          fontFamily: EmbeddedArial;
                          advancedAntiAliasing: true;
                          embedAsCFF: false;
                          unicode-range: U+0020-007E, /* englishRange + basic latin */
                                         U+00A0-00FF, /* basic latin with umlaut äöü*/
                                         U+20AC-20AC;
                      }
                      mx|DataGrid {
                          fontFamily: EmbeddedArial;
                          fontSize: 16;
                          fontWeight: normal;
                          color: white;
                          baseColor: black;
                          contentBackgroundColor: black;
                          alternatingItemColors: ClassReference(null);
                      }
                  </fx:Style>
                  <mx:DataGrid id="dataGrid">
                      <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>
              

              Peter

               

              (Sorry, I didn't have the specific font you mentioned, but I tried this with 4-5 other fonts and it worked for each)

              • 5. Re: Datagrid styling in Flashbuilder
                Stellars_Jay, Level 1

                Peter, thanks a lot for your replys. Both work like a charm.

                 

                I chose the CustomBorderSkin for the transparency. Actually I already did something similar when I made a transparent AIR application.

                Maybe another good place for backgroundAlpha would be the Application and WindowedApplication Control.

                 

                Regarding the Fonts, I was using:

                cff: true;
                

                but

                embedAsCFF: false;

                 

                does the job!

                 

                Thanks again.

                • 6. Re: Datagrid styling in Flashbuilder
                  Peter deHaan Level 4

                  Stellars,

                   

                  Glad we could help!

                  As for the cff->embedAsCFF issue, we have a fairly comprehensive list of API changes on the Flex SDK Open Source site at http://opensource.adobe.com/wiki/display/flexsdk/Rename+List, which may come in handy if you are switching from earlier (beta1) builds to newer, Nightly SDK builds.

                   

                  Peter