How to create generically styled itemrenderer?

Question

G'day,
This is my first dabble with Flex 4, after we have been using Flex 3 for the past two years.
I want to style an ItemRenderer for a list. That is all cool, and the new state syntax makes it really easy for me to create transitions between states, as well as different styles for different states.
My problem:
If the item renderer is used in two different locations in the app, I want the controls within that item renderer to be different, but the styles to be the same. E.g. In a document management system, the list items will want to display an icon, a filename, filesize, and version number, whereas in the Project Management system, I may want to have just the project name and a progress bar depicting how far completed the project is. Both these lists will have the same styles (same background shape, same transitions between states, same padding, etc) but they will house different controls.
I have read a whole bunch of articles about skinning via google, and a lot of them are starting to blur into one. I am starting to get mixed up about when to use a skin, style, or itemrenderer for a particular rendering task, and which part is responsible for different parts of rendering.
What I thought the solution would be:
public class MyRenderer extends SkinnableComponent implements IItemRenderer { ... }
I set the skinClass of the renderer to the appropriate skin and in that skin, place a 'DataGroup id="contentGroup"', and then a bunch of components inside the renderer. Both modules have their own renderer, but use the same skin. This works in as far as the normal state is rendered in the skin, and the content group is correctly populated with the children of MyRenderer. It does not work in as far as I lose all of the state handling code found inside the ItemRenderer component, so the 'selected' and 'hovered' state are not rendered in the skin. It just sticks with the default state.
Any help would be greatly appreciated, and I am more than happy to attach some example code if my convoluted explanation is no good : )
cheers.
Edit:
Re: My confusion about skins/styles - I understand that the skin should take care of the components and all aspects of rendering, but I am asking the itemrender to deal with the components and the skin to do the styles. I also realise that this would normally be a job for styling rather than skinning, but the styles I want to share amongst modules are more than what CSS provides (such as transitions between the normal and hovered state).
Message was edited by: serwylo

Answer 1

Ok, I have figured out an ugly hack which works. After reading the response to this post: http://forums.adobe.com/message/2370902#2370902, it became clear that ItemRenderers are intentionally not SkinnableComponents. The rational is that the majority of use cases will not need to separate the skin from the component when dealing with item renderers.
This is fair enough, but to achieve what I want, I needed a skinnable ItemRenderer. I did the unthinkable, and copied the ItemRenderer code. The only change was to extend SkinnableContainer instead of DataRenderer. I then mirrored the componentState with the skinState as per this blog: http://saturnboy.com/2009/09/flex4-component-states-skin-states/ calling invalidateSkinState in a handler for StateChangeEvent.CURRENT_STATE_CHANGE.
cheers.