Removing Grid Lines from Spark DataGrid Skin

Creating a datagrid with no column or row seperator lines is just a matter of creating a new DataGrid skin and applying it to the DataGrid.

The first thing to do is to create a new MXML class (BlankDataGridSkin.mxml) which extends the spark "DataGridSkin" class.  Essentially, we'll be extending the basic DataGridSkin and overriding two components:

1. columnSeparator

2.  rowSeparator

The code to override those two components follows:

<spark:DataGridSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:spark="spark.skins.spark.*">
  <fx:Declarations>
    <fx:Component id="columnSeparator">
      <s:Line/>
    </fx:Component>
    <fx:Component id="rowSeparator">
      <s:Line/>
    </fx:Component>
  </fx:Declarations>
</spark:DataGridSkin>

Pretty simple, right?  If we wanted to change the appearance of the seperators all we would need to do is change around what is drawn by the components.  For instance, if we wanted red seperator lines we could write components like this:

<fx:Component id="columnSeparator">
  <s:Line>
    <s:stroke>
      <s:SolidColorStroke color="0xFF0000" weight="1" caps="square" alpha="1"/>
    </s:stroke>
  </s:Line>
</fx:Component>
<fx:Component id="rowSeparator">
  <s:Line>
    <s:stroke>
      <s:SolidColorStroke color="0xFF0000" weight="1" caps="square" alpha="1"/>
    </s:stroke>
  </s:Line>
</fx:Component>

Now, how do we apply our new skin?  Thankfully, that's pretty simple too.  All we need to do is define our new class as the skinClass of a DataGrid.  That code looks like this:

<s:DataGrid skinClass="BlankDataGridSkin">
  <s:columns>
    <s:ArrayCollection>
      <s:GridColumn headerText="Header 1" width="200"/>
      <s:GridColumn headerText="Header 2" width="200"/>
      <s:GridColumn headerText="Header 3" width="200"/>
    </s:ArrayCollection>
  </s:columns>
</s:DataGrid>

That's pretty much everything.  Now you should have a datagrid where you can completely define what the seperators look like.

Below, you can see an example of the DataGrid with no seperator lines with view source right click enabled.

Styling an Alert in Flex 4

There is a cookbook request on Adobe Cookbooks requesting information on how to style an Alert in Flex 4.  So naturally, we'll be discussing that here topic.

The truth is, styling an Alert in Flex 4 is almost exactly the same as styling an Alert in Flex 3 since Alert is still just a Halo component.  Rather simply, we'll just need to define a style tag (could also be defined in a CSS file) within our application to change the style of an Alert.  Here's a brief example of a Style tag which will give an Alert a yellow/red theme:

<fx:Style>
  @namespace mx "library://ns.adobe.com/flex/mx";
  mx|Alert{
    borderColor: red;
    backgroundColor: yellow;
    dropShadowVisible: true;
    chromeColor: red;
    titleStyleName: alertTitle;
    messageStyleName: alertMessage;
    buttonStyleName: alertButton;
  }
  .alertTitle{
    fontSize: 20;
    fontWeight: bold;
    color: yellow;
  }
  .alertMessage {
    fontWeight: bold;
    color: red;
  }
  .alertButton {
    color: yellow;
  }
</fx:Style>

Notice we're defining an "mx|Alert" section which is selecting the mx:Alert class to apply styles.  Within that section we are referencing other named styles such as alertTitle, alertMessage and alertButton which are logically named.

That's pretty much all we need to do.  Now when we create an Alert, it will have an unsightly red/yellow theme applied to it's text, borders and chrome!

See below for a demo with view source enabled in the right click menu:

Skinning A Flex Spark DataGrid Header

Creating a custom background color or a custom skin for a DataGrid in Spark is not as simple as it was for Halo components.  To create a custom skin for all headers in a DataGrid is accomplished by extending the DataGridSkin class as a new MXML component.  Here is a simple example of a "RedDataGridSkin" class where we will just be worrying about the "headerRenderer":

<spark:DataGridSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                              xmlns:s="library://ns.adobe.com/flex/spark"
                              xmlns:mx="library://ns.adobe.com/flex/mx"
                              xmlns:spark="spark.skins.spark.*"
                              xmlns:local="*"
  <fx:Declarations>
    <fx:Component id="headerRenderer">
      <local:RedGridHeaderRenderer />
    </fx:Component>
  </fx:Declarations
</spark:DataGridSkin>

Notice, that the only custom component we declared in our skin is the RedGridHeaderRenderer.  All of the other default skin components will remain since we are extending the base DataGridSkin.

So what does the RedGridHeaderRenderer do?  The RedGridHeaderRenderer extends the SDK's DefaultGridHeaderRenderer and reimplements it's visual skinning components.  Since the full implementation of the renderer is lengthy I will only post a small portion in line (see the code demo/source at the bottom of this post for the full example).  Here is a code snippet from a GridItemRenderer called "RedGridHeaderRenderer":

<!-- layer 2: fill -->
 <!--- @private -->
 <s:Rect id="fill" left="0" right="0" top="0" bottom="0">
   <s:fill>
     <s:LinearGradient rotation="90">
       <s:GradientEntry color="0xFFFFFF" 
                        color.hovered="0xBBBDBD" 
                        color.down="0xAAAAAA" 
                        alpha="0.85" />
       <s:GradientEntry color="0xFF030D" 
                        color.hovered="0x9FA0A1" 
                        color.down="0x929496" 
                        alpha="0.85" />
     </s:LinearGradient>
   </s:fill>
</s:Rect>

The only thing I changed here from the default implementation of this renderer is the second GradientEntry's color.  I changed the color to a red hex code (0xFF030D) which will give all of my DataGrid's that use the skin and renderer a red gradient.

To use our new skin and renderer we need to set our DataGrid's skinClass to "RedDataGridSkin" and all of the DataGrid headers will use the new skin/renderer.  A simple example:

<s:DataGrid skinClass="RedDataGridSkin">

If we want to get more fancy, we can also alter column header renderers on a column by column basis.  I have also created a "BlueGridHeaderRenderer" (see the code demo/source at the bottom of this post for the full example).  Here we will use the "BlueGridHeaderRenderer" to create a single blue column header while the rest of the coumns are using the "RedGridHeaderRenderer" defined in "RedDataGridSkin":

<s:DataGrid skinClass="RedDataGridSkin">
  <s:columns>
    <s:ArrayCollection>
      <s:GridColumn headerText="Header 1" width="200"/>
      <s:GridColumn headerText="Header 2" width="200"/>
      <s:GridColumn headerText="Header 3" width="200"
            headerRenderer="{new ClassFactory(BlueGridHeaderRenderer)}"/>
    </s:ArrayCollection>
  </s:columns>
</s:DataGrid>

The full code of this example (right click ->view source) inside of a running demo can be viewed HERE.