Jan
29Adobe Flex: Styling the DataGrid header separators
29
Posted: 29th January 2008
Posted in AIR, Flex, as3
Comments: 4 Comments »
Although the default alo theme in Flex can be easily styled through CSS (made especially easy using the Flex Style Explorer), there are elements such as separators between the column headers that cannot easily be styled. As the Halo skin for such elements are overridable, we can use the following solution to change their colour or remove them altogether.
By default Flex places two vertical, 1 pixel wide lines between each column header on a data grid (1 line white with a 50% transparency, the other the border colour). However in some instances this style does not look right, espeically if you are trying to create a dark charcol grey theme, the white vertical line stands out too much, or you don’t want any separators.
We could override this functionality by creating a 1×1px transaparent .png and use that as the skin, but I am going to show you how we can create programmatic skin to get rid of a UI skin such as this, that we can then take a step further and customise into our own CSS stylable skin.
So firstly to create a NullSkin class that we can use to rid ourselves of the separators alltogether. Programmatic skins can be created by extending either the ProgrammaticSkin, Border or RectBorder classes. In this case we are going to extend ProgrammicSkin, overriding it’s measuredWidth(), measuredHeight() and updateDisplayList(w:Number, h:Number) methods.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | package com.triggersoft.skins { import mx.skins.ProgrammaticSkin; import flash.display.Graphics; public class NullSkin extends ProgrammaticSkin { public function NullSkin() { super(); } override public function get measuredWidth():Number { return 0; } override public function get measuredHeight():Number { return 0; } override protected function updateDisplayList(w:Number, h:Number):void {} } } |
Above we return a skin size of 0 x 0px and in the updateDisplayList method (where we would draw the skin) we do nothing.
We can then easily apply this skin to the DataGrid in CSS using the following CSS declaration:
header-separator-skin: ClassReference("com.triggersoft.skins.NullSkin");
Removing the separator is all well and good but what if we want to create a more customisable skin? For example we could make a 1px wide vertical line that was the same colour as the data grid’s border colour as follows:
package com.triggersoft.skins { import mx.skins.ProgrammaticSkin; import flash.display.Graphics; public class DGHeaderColourSeparator extends ProgrammaticSkin { public function DGHeaderColourSeparator() { super(); } override public function get measuredWidth():Number { return 1; } override public function get measuredHeight():Number { return 10; } override protected function updateDisplayList(w:Number, h:Number):void { var borderColor:uint = getStyle("borderColor"); var g:Graphics = graphics; g.moveTo(0,0); g.lineStyle(1,borderColor); g.lineTo(0,h); } } }
The code above is based heavily on the original programmatic skin for the header separators in the Halo theme. Above we return a width of 1px and a height of 10px (Halo’s is 2 x 10px) we then move our drawing cursor to 0,0 (top left hand corner of skin), set the line style to be 1px wide and use the value set by borderColor in our CSS (or the default) and draw a line down to (0,h) which is the full height of the skin.
Again we need to set the skin in our application’s CSS file:
header-separator-skin: ClassReference("com.triggersoft.skins.DGHeaderColourSeparator ");
Now whatever colour the border is around our datagrid, our header separator will be the same colour. As you can see, programmatic skins give a little advantage over their .png cousins as we can use CSS styling to easily customise them and make them reusable across projects.
The best place to look and learn how Programmatic Skinning is done is to look at the source code for the Halo theme, this is located in [Flexbuilder installation]/Flex SDK 2/framework/source/mx/skins/halo/ but there are several great resources on skinning in general that I have listed below:
More information on skinning and themes:
- Flex Developer Center (UI Design)
- ScaleNine (in particular the resources page)
- fle[ks]ray
Awesome information. This is something I’ve been meaning to look into, just haven’t taken the time yet.
One thing I’ve found slightly irritating and haven’t been able to correct, Flex draws a header separator AFTER the last column in a DataGrid. If your entire grid has a border, you end up with a double border to the right of the header, and you also get the resize cursos when hovering even though you can’t resize from that point. Any ideas on how to keep a separator from being drawn in this case?