I’m trying to write a tutorial on creating a simple item renderer for the Tree control. Unfortunately I haven’t seen one example online where an item renderer is created in MXML. Can you be the first to create one? In my example I’m using the tree to show a list of items exactly the same as one of the blocks on the sidebar here, http://www.flexcapacitor.com/developer/. At that link I want to replicate the look of the pages section.

This is the code I have so far and it all falls apart:

<mx:Tree left="8" rowHeight="16"
	dataProvider="{pages1}" labelField="title" width="100%"
	styleName="sideBarTreeStyle" height="0%" alpha="1" indentation="10"
	creationComplete="{event.currentTarget.openItems = pages1}">
	<mx:itemRenderer>
		<mx:Component>
			<mx:Canvas width="100%" height="100%">
				<mx:Script>
					<![CDATA[
						import mx.controls.Tree;
					]]>
				</mx:Script>
				<mx:HBox width="100%" horizontalGap="0" height="100%">
				<mx:Image source="images/list_bullet.png"
				horizontalAlign="center" verticalAlign="middle"
					visible="{(!Tree(owner).dataDescriptor.isBranch(data))}"
					includeInLayout="{(!Tree(owner).dataDescriptor.isBranch(data))}"
					height="100%"/>
				<mx:Label text="{data.title}" height="100%" width="100%"/>
				</mx:HBox>
			</mx:Canvas>
		</mx:Component>
	</mx:itemRenderer>
</mx:Tree>

With this code the indentation is messed up, the label is not positioned correctly and the image is not positioned correctly. Basically everything in my component is not positioned correctly. This code works fine in a list component?

Judah
PS You’ve got to get this installed on this blog, http://txfx.net/code/wordpress/subscribe-to-comments/