[FLEX-21179] SkinnableComponent can not be used as item renderer

• Type: Bug
• Status: Closed
• Priority: Major
• Resolution: Not A Problem
• Affects Version/s: Adobe Flex SDK 4.1 (Release)
• Fix Version/s: Adobe Flex SDK Previous
• Component/s: Spark: Group, Spark: HorizontalLayout, Spark: List, Spark: SkinnableComponent, Spark: VerticalLayout
• Environment: Affected OS(s): Windows; Affected OS(s): ; Browser: Other (specify version); Language Found: English
• Assignee: Adobe JIRA
• Reporter: Adobe JIRA
• Created: 20/Sep/09 14:02
• Updated: 21/Sep/09 15:56
• Resolved: 21/Sep/09 06:37

Description

FlexSDK version: 4.0.0.10396
Flash player: WIN 10,0,32,18 standalone

There has been chosen to make the item renderers non-skinnable. In normal cases users would just extend the item renderer. For consistency however I wanted to make a skinnable item renderer. A discussion has been documented here: http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Updated+Item+Renderer

So I created a component that extends SkinnableComponent and implements IItemRenderer. I assign this component to a list like this:

<s:List>
	<s:itemRenderer>
		<fx:Component>
			<spark:SkinnableItemRenderer skinClass="skins.ItemRenderer" />
		</fx:Component>
	</s:itemRenderer>
</s:List>

The problem now is that the renderers are not positioned correctly. This is caused by the height not being measured correctly (it is still at 0). I tracked that down to the skin not being initialized and thus no height is available (if I understand correctly).

The Horizontal- and VerticalLayout components play a big part in this. As far as I can tell the LinearLayoutVector is used to cache the height of the typicalLayoutElement. The height seems to be requested too early.

It seems to have something to do with the difference between Group and SkinnableComponent and how they initialize their children.

Anyway, since the code that is causing this problem is pretty deep I could not track down the exact problem.

Steps to reproduce:

1. Create item renderer skin

skins.ItemRender.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" width="0" height="0">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	
	<s:Label id="labelDisplay" />
</s:Skin>

2. Create skinnable item renderer

fly.spark.SkinnableItemRenderer (see attachment)

3. Create application

test2.mxml

<?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" minWidth="1024" minHeight="768" xmlns:spark="fly.spark.*">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	
	<s:List>
		<s:itemRenderer>
			<fx:Component>
				<spark:SkinnableItemRenderer skinClass="skins.ItemRenderer" />
			</fx:Component>
		</s:itemRenderer>	
		<s:dataProvider>
			<mx:ArrayCollection>
				<fx:String>test1</fx:String>
				<fx:String>test2</fx:String>
				<fx:String>test3</fx:String>
			</mx:ArrayCollection>
		</s:dataProvider>
	</s:List>
</s:Application>

Actual Results:

All items in the list are placed on top of each other.

Expected Results:

A nice list of items.

Workaround (if any):

Setting the height (or minHeight) to a value like this:

<spark:SkinnableItemRenderer height="20" skinClass="skins.components.ItemRenderer" />