I´ve recently done a nice little thingy in flash 8 (don´t ask).

As usual when using components, there are some things you want to customize, like coloring, borders and such.

I for one don´t find skinning very easy to manage. I´m a code mokey for crying out loud.

So i decided to roll with styling the component instead easy peasy or so i thought. The documentation should tell me how to do it. Yeah right!

I had forgotten how many un truths are in those pages.

Now i´ve spent some four work days trying to tap the internet resources about styling / skinning a flash 8 datagrid.

Let´s start by giving dues:
First stop. http://www.flashgamer.com  who has an old blogpost from 2006 about skinning the flash dataGrid.
http://www.flashgamer.com/2006/02/skinning_the_flash_datagrid.html

-Ah, ok, thats where you start!
I quickly realized this is way too much work for this budget.

-Hmmm...
I guess i need to rethink my strategy here.

-What to do?
Tell the client they have to roll with the basic look of the datagrid.

-Naaaah, too easy!
Wouldn´t feel right.

-Actually skin the component?
I gave this approach some research.
The datagrid component consists of a LOT of sub components.
There is the list component, the UIScrollbar component and the rectBorder component to name some.

The documentation is very vague about how to apply styles to the subcomponents. There is next to no information of what part does what.

Here you will find what i found during my extensive research and actually end up with a pretty customable component without having to skin it.

Along the way i had most help from a blog i think is discontinued. Last post is from 2008-01-10 but credits are due anyway. If you have information about the owner/ author, please let me know so i can thank her / him personaly.
http://www.nerdabilly.com
That blog has a post about scrollpane customization that to this day is the ONLY information about styling a scrollBar component i have found.
http://nerdabilly.com/blog/2006/09/26/on-scrollpane-or-scrollpian-customization/

OK, let´s take this from the begining.

Put a dataGrid component in your library.

To add it to the stage manually, drag it to the stage and give it an instance name of myDg.

To do the same with code:

[as]import mx.controls.DataGrid;
var myDg:DataGrid;
myDg = createClassObject(mx.controls.DataGrid, "myDg", 10, {initObject.parameters});[/as]

Let´s start with the easy part, styling the grid.
For the brevity of this article i assume you know how to populate your grid.
Here is a good article on the subject anyway:
http://philflash.inway.fr/dgperf/index_en.html

This is what took me all those hours to put together

To style a dataGrid you can use one of three ways. Well do this somewhat backwards and start by looking at two ways to do it.
First you can use:

This far, we haven´t really stumbled into anything tricky, have we?
Of course not, i put it all together in the end.

Styling the scrollBar.
This part was what took me the most time to track down. And it´s not simple, netiher straight forward, but it´s definitely doable.
Even though i almost forgot how to do it, before writing this.

To be able to style the scrollbar we have to change skin it´s skin. Very logical isn´t it?
You can change skins on a component by drag/dropping the components assets in your library.
The search path to the "sample theme" skin we´re after is:

..\Macromedia\Flash 8\en\Configuration\ComponentFLA\sampleTheme.fla



and in the library there finding the folder scrollBar Assets under Themes/MMDefault