Getting my head around Flex 2 and the tree control

28 Aug

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?

28 August 2006 at 4:29 pm

4 Responses to Getting my head around Flex 2 and the tree control

  1. avatar photo
    barry.b 28 August 2006 at 6:25 pm #

    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

  2. avatar photo
    Jensa 28 August 2006 at 6:46 pm #

    Hi Barry,

    J

  3. avatar photo
    Ethan 23 May 2007 at 2:42 am #

    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!

  4. avatar photo
    Jensa 23 May 2007 at 3:31 pm #
  5.