« Photorealistic drawing in Flash | Main | Need a new phone, what to get? »

Getting my head around the 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?

A word from our sponsors :)

Comments

no nibbles by ppl well versed in the tricks of the treeView control? awww...

I'm still getting used to Flex and getting my head around the treeview, so any enlightment is welcomed.

(this comment will subscribe me to this thread, yes?)

thanx

Hi Barry,
Don't think my Moveable Type setup offers subscription so I'm emailing you my reply as well. Flex 2 is really different from Flash I guess. Lot's of new stuff to absorb but the documentation leaves a lot to be desired. The lack of examples is terrible. My best bet is to check out what is on Devnet ( http://www.adobe.com/devnet/flex/quickstart/ ) and http://www.cflex.net. That's where I've found the most useful stuff this far.

J

Thanks for your post, I was having problems displaying my xml results in a tree and it was because I needed to set the resultFormat="e4x". Now it works!

Ethan - comments like that makes it worth the effort to maintain a blog! :)

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)