<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>WebDeely &#187; Flex</title>
	<atom:link href="http://blog.webdeely.com/category/flex/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.webdeely.com</link>
	<description></description>
	<lastBuildDate>Thu, 18 Feb 2010 14:55:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>&#8220;Fixing&#8221; the FileSystemTree</title>
		<link>http://blog.webdeely.com/2009/07/fixing-the-filesystemtree/</link>
		<comments>http://blog.webdeely.com/2009/07/fixing-the-filesystemtree/#comments</comments>
		<pubDate>Fri, 24 Jul 2009 03:10:46 +0000</pubDate>
		<dc:creator>Chris Deely</dc:creator>
				<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flex]]></category>

		<guid isPermaLink="false">http://blog.webdeely.com/?p=44</guid>
		<description><![CDATA[I recently ran into some painfully slow performance issues using the FileSystemTree to display file system contents in an AIR app. It seemed that when accessing directories containing a large number of files, the app would simply hang for ages, never populating the tree. This occurred most readily when accessing network drives. I chased the [...]]]></description>
			<content:encoded><![CDATA[<p>I recently ran into some painfully slow performance issues using the FileSystemTree to display file system contents in an AIR app.  It seemed that when accessing directories containing a large number of files, the app would simply hang for ages, never populating the tree.</p>
<p>This occurred most readily when accessing network drives.  I chased the issue down a number of avenues, including looking at &#8220;funky&#8221; file types and network speed.  Nothing pointed me in the right direction.</p>
<p>Finally, I spent some time placing breakpoints directly into the FileSystemTree class and dug into the guts to find the answer.  As I stepped through the code, I found that the file records for the large directory in question were returned from the OS almost instantaneously.  This was not what I expected to find, but it was great news, as it meant the processing delay was somewhere inside the Flex SDK or my own code.</p>
<p>Sure enough, there is some code in the FileSystemTree class that significantly slows down the processing of large directories.  After loading the raw directory listing from the AIR framework, the child items are processed through the following function:</p>
<div class="codecolorer-container actionscript3 default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">&nbsp;mx_internal <span style="color: #339966; font-weight: bold;">function</span> insertChildItems<span style="color: #000000;">&#40;</span>subdirectory<span style="color: #000066; font-weight: bold;">:</span>File<span style="color: #000066; font-weight: bold;">,</span> childItems<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=array%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:array.html"><span style="color: #004993;">Array</span></a><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span><br />
&nbsp;<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #6699cc; font-weight: bold;">var</span> childCollection<span style="color: #000066; font-weight: bold;">:</span>ArrayCollection = <span style="color: #0033ff; font-weight: bold;">new</span> ArrayCollection<span style="color: #000000;">&#40;</span>childItems<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; childCollection<span style="color: #000066; font-weight: bold;">.</span>filterFunction =<br />
&nbsp; &nbsp; &nbsp; &nbsp; helper<span style="color: #000066; font-weight: bold;">.</span>directoryEnumeration<span style="color: #000066; font-weight: bold;">.</span>fileFilterFunction<span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; childCollection<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">sort</span> = <span style="color: #0033ff; font-weight: bold;">new</span> Sort<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; childCollection<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">sort</span><span style="color: #000066; font-weight: bold;">.</span>compareFunction =<br />
&nbsp; &nbsp; &nbsp; &nbsp; helper<span style="color: #000066; font-weight: bold;">.</span>directoryEnumeration<span style="color: #000066; font-weight: bold;">.</span>fileCompareFunction<span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; childCollection<span style="color: #000066; font-weight: bold;">.</span>refresh<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<br />
&nbsp; &nbsp; FileSystemTreeDataDescriptor<span style="color: #000000;">&#40;</span>dataDescriptor<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">setChildren</span><span style="color: #000000;">&#40;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; subdirectory<span style="color: #000066; font-weight: bold;">,</span> childCollection<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<br />
&nbsp; &nbsp; expandItem<span style="color: #000000;">&#40;</span>subdirectory<span style="color: #000066; font-weight: bold;">,</span> <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<br />
&nbsp; &nbsp; helper<span style="color: #000066; font-weight: bold;">.</span>itemsChanged<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
<span style="color: #000000;">&#125;</span></div></div>
<p>The problem here is that the file records returned from the OS are now filtered and sorted before populating the Tree.  This is fine for relatively small sets of data, but when dealing with large directories (1600+ files in my case) it grinds to a halt.</p>
<p>The only way I have found to improve the performance of this component is to prevent the filtering and sorting from taking place for large directories.  I extended the FileSystemTree (source attached) and overrode the insertChildItems function.</p>
<p>The full class is below:</p>
<div class="codecolorer-container actionscript3 default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;height:300px;"><div class="actionscript3 codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #9900cc; font-weight: bold;">package</span> com<span style="color: #000066; font-weight: bold;">.</span>webdeely<span style="color: #000066; font-weight: bold;">.</span>file<br />
<span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">import</span> flash<span style="color: #000066; font-weight: bold;">.</span>filesystem<span style="color: #000066; font-weight: bold;">.</span>File<span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">import</span> mx<span style="color: #000066; font-weight: bold;">.</span>collections<span style="color: #000066; font-weight: bold;">.</span>ArrayCollection<span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">import</span> mx<span style="color: #000066; font-weight: bold;">.</span>collections<span style="color: #000066; font-weight: bold;">.</span>Sort<span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">import</span> mx<span style="color: #000066; font-weight: bold;">.</span>controls<span style="color: #000066; font-weight: bold;">.</span>FileSystemTree<span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">import</span> mx<span style="color: #000066; font-weight: bold;">.</span>controls<span style="color: #000066; font-weight: bold;">.</span>fileSystemClasses<span style="color: #000066; font-weight: bold;">.</span>FileSystemTreeDataDescriptor<span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">import</span> mx<span style="color: #000066; font-weight: bold;">.</span>core<span style="color: #000066; font-weight: bold;">.</span>mx_internal<span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">import</span> mx<span style="color: #000066; font-weight: bold;">.</span>utils<span style="color: #000066; font-weight: bold;">.</span>DirectoryEnumerationMode<span style="color: #000066; font-weight: bold;">;</span><br />
<br />
&nbsp; &nbsp; use <span style="color: #004993;">namespace</span> mx_internal<span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span style="color: #3f5fbf;">/**<br />
&nbsp; &nbsp; * This class overrides the AIR FileSystemTree class' insertChildItems to prevent sorting of directory contents when <br />
&nbsp; &nbsp; * there are a great number of children in the folder. This is far from perfect, as the children may be listed randomly,<br />
&nbsp; &nbsp; * however it is better than the default behavior where the app chokes.<br />
&nbsp; &nbsp; **/</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #9900cc; font-weight: bold;">class</span> FastFileSystemTree <span style="color: #0033ff; font-weight: bold;">extends</span> FileSystemTree<br />
&nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #3f5fbf;">/** Adjust this number to set an acceptable threshold for sorted/unsorted children **/</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #6699cc; font-weight: bold;">var</span> largeDirectoryThreshold<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html"><span style="color: #004993;">Number</span></a> = <span style="color: #000000; font-weight:bold;">500</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> FileSystemTreeAsync<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">super</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; override mx_internal <span style="color: #339966; font-weight: bold;">function</span> insertChildItems<span style="color: #000000;">&#40;</span>subdirectory<span style="color: #000066; font-weight: bold;">:</span>File<span style="color: #000066; font-weight: bold;">,</span> childItems<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=array%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:array.html"><span style="color: #004993;">Array</span></a><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #6699cc; font-weight: bold;">var</span> childCollection<span style="color: #000066; font-weight: bold;">:</span>ArrayCollection = <span style="color: #0033ff; font-weight: bold;">new</span> ArrayCollection<span style="color: #000000;">&#40;</span>childItems<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #3f5fbf;">/* This is the only change to the function. &nbsp;If this directory contains a large number of children, <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; just append them as they are listed from the OS, rather than filtering or sorting them. */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0033ff; font-weight: bold;">if</span><span style="color: #000000;">&#40;</span> childCollection<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">length</span> <span style="color: #000066; font-weight: bold;">&lt;</span> largeDirectoryThreshold <span style="color: #000000;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; childCollection<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">sort</span> = <span style="color: #0033ff; font-weight: bold;">new</span> Sort<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; childCollection<span style="color: #000066; font-weight: bold;">.</span>filterFunction = helper<span style="color: #000066; font-weight: bold;">.</span>directoryEnumeration<span style="color: #000066; font-weight: bold;">.</span>fileFilterFunction<span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; childCollection<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">sort</span><span style="color: #000066; font-weight: bold;">.</span>compareFunction = helper<span style="color: #000066; font-weight: bold;">.</span>directoryEnumeration<span style="color: #000066; font-weight: bold;">.</span>fileCompareFunction<span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; childCollection<span style="color: #000066; font-weight: bold;">.</span>refresh<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; FileSystemTreeDataDescriptor<span style="color: #000000;">&#40;</span>dataDescriptor<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">setChildren</span><span style="color: #000000;">&#40;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; subdirectory<span style="color: #000066; font-weight: bold;">,</span> childCollection<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; expandItem<span style="color: #000000;">&#40;</span>subdirectory<span style="color: #000066; font-weight: bold;">,</span> <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; helper<span style="color: #000066; font-weight: bold;">.</span>itemsChanged<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #000000;">&#125;</span><br />
<span style="color: #000000;">&#125;</span></div></div>
<p>This is definitely not a great solution, as the contents of large directories may not appear in exactly the right order.  I&#8217;ve had mixed results.</p>
<p>The real issue is that this type of operation on large quantities of file references should really be executed within the AIR framework itself, and not by the AS3 components running on top of it.</p>
<p>I am very open to suggestions on how to approach a better solution, but for now this at least allows the user to access their files; albeit in possibly the wrong order.</p>
<p><a href='http://blog.webdeely.com/wp-content/uploads/2009/07/fastfilesystemtree.zip'>Get the class source</a> </p>
]]></content:encoded>
			<wfw:commentRss>http://blog.webdeely.com/2009/07/fixing-the-filesystemtree/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
