troubleshooting Question

Open child nodes by click - tree view

Avatar of Trying_to_Learn
Trying_to_LearnFlag for Canada asked on
Apache Flex
9 Comments1 Solution1736 ViewsLast Modified:
I have a tree view in one of my views, in which I display several folders and the files within them. I am having a usability issue when I deploy it to my playbook.

The issue is that the contents of a folder only open when the small arrow is clicked beside a specific folder. This is really hard on a playbook and takes a long time to open a folder.

Is there a way to open the contents of the folder just by clicking on the folder or on that row as opposed to just the small arrow on the left?

I've attached my code:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:mx="library://ns.adobe.com/flex/mx"
		actionBarVisible="true" creationComplete="initCollections()" overlayControls="false"
		tabBarVisible="true" title="Courses"> 
	
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			
			import mx.collections.*;
			import mx.events.ItemClickEvent;
			
			[Embed(source="MxTree.swf", mimeType="application/octet-stream")]
			private var treeSWF:Class;
			
			private var loader:Loader;
			private var tree:*;
			
			public var xmlBalanced:XMLList =
				<>
					<node label="Folders">
						<node label="Assignments">
							<node label="HW 1 - Application Layer" url="https://docs.google.com/open?id=0B0QcsxqNzD75ZjM0YTRmYTItM2JhMC00OGVlLTkzMmItZjllZTI4NzNhZTU4"/>
							<node label="HW 2 - Transport Layer" url="https://docs.google.com/spreadsheet/ccc?key=0AkQcsxqNzD75dFdaTkFPeVREMXEwd20yTU9BbTIwYVE"/>
							<node label="HW 3 - Network Layer" url="https://docs.google.com/document/d/1nMbPxogZgLWGE8liY01W9jPFmzl6Wn9pnFksyTesBDQ/edit"/>
							<node label="HW 4 - Link Layer" url="https://www.cs.wustl.edu/~jain/cse473-05/ftp/lab1.pdf"/>
							<node label="HW 5 - Physical Layer"/>
						</node>
					</node>
				</>;
			
			private function initCollections():void {
				var lc:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);
				lc.allowLoadBytesCodeExecution = true;
				loader = new Loader(); 
				loader.width = treeHolder.width;
				loader.height = treeHolder.height;
				loader.loadBytes(new treeSWF(), lc); 
				loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
				treeHolder.addChild(loader);
			}
			
			private function onComplete(event:Event):void{
				event.target.removeEventListener(Event.COMPLETE, onComplete);
				var timer:Timer = new Timer(100);
				timer.addEventListener(TimerEvent.TIMER, handleTimer);
				timer.start();
			}
			
			private function handleTimer(event:TimerEvent):void{
				var content:MovieClip = loader.content as MovieClip;
				if(content && content.currentFrame == 2 && content.numChildren > 0) {
					event.target.addEventListener(TimerEvent.TIMER, handleTimer);
					event.target.stop();
					tree = content["application"].tree;
					tree.labelField = "@label";
					tree.dataProvider = xmlBalanced;
					tree.width = treeHolder.width;
					tree.height = treeHolder.height;
					tree.setStyle("borderStyle", "none");
					tree.addEventListener(ItemClickEvent.ITEM_CLICK, onItemClick);
					addElement(tree);
				}
			}
			
			private function onItemClick(event:*):void{
				var data:XML = event.itemRenderer.data;
				if(data.@url.length())
					parentDocument.rightView.webView.loadURL(data.@url);
			}
		]]>
	</fx:Script>
	
	<mx:UIComponent id="treeHolder" width="100%" height="100%"/>
</s:View>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 9 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 9 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros