Getting my head around Flex 2 and the tree control

Finally had some days to look at Flex 2 again this weekend and discovered some odd things about the tree control that’s worth posting for future reference. I wanted to see how much time it would take to port our CMS to Flex, but I didn’t get longer than adding the tree control. The CMS uses XML that is formatted as nodes with labels and values so I thought I was ready to go. I was wrong. The Treeview refused to display anything but the first node.

Being a noob at Flex 2, I went looking for answers in all the wrong places. I thought it had to be something wrong with the XML since it wasn’t displayed directly (it was after all formatted correctly) so I went through XMLList, XMLListCollection and even making a custom ITreeDataDescriptor. After a lot of fumbling I stumbled upon the resultFormat setting. For some reason, setting this to “e4x” would display something in the tree - it displayed all the XML as the label for every node in the tree… Here’s the odd part: if you set resultFormat to e4x, you have to specify a “labelField”? This in mentioned at the very bottom of the ninth search result for “labelField” in the built-in help. Took me forever to find that information. Something interesting discovered - you can also fix this by specifying a “labelFunction”. In my case, I use it to unescape the XML label nodes because of the Nordic special characters Æ, Ø and Å.

A couple other things discovered is how different XML is treated. It’s really odd for me to access the label attribute of a XML node in ActionScript using “item.@label”, but I guess it’s a good way to do it? e4x is certainly a much better way to work with XML than in former versions of AS. Another thing, unescape(str) no longer converts plus signs to spaces as in former versions. Probably a good thing since “%20” is the technically correct way to encode spaces. Messing with this I discovered the new RegEx classes in AS3. Briliiant! Makes me think back to all that funky string parsing I did with Perl many years ago.

Think I found a bug in the tree as well. If you paste this code into Flex, you’ll see that the horisontal scrollbar fails to display when needed:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="treeXML.send()">
	<mx:Script>
		<![CDATA[
			public function fixLabel(item:XML):String {
				return unescape(item.@label);
			}
		]]>
	</mx:Script>
	<mx:HTTPService id="treeXML" url="http://www.flashgamer.com/f/smenu.xml" resultFormat="e4x" />
	<mx:Tree x="10" y="95" width="196" horizontalScrollPolicy="auto" height="281" id="mytree" dataProvider="{treeXML.lastResult.node}" labelField="@label" labelFunction="fixLabel" />
</mx:Application>

horizontalScrollPolicy is supposedly set to “auto” by default, but the only way to display it is turning it on permanently?