First of all, using the Tree in Flex 2, it takes hierarchical data for the dataProvider, (I use XMLListCollection, and ArrayCollections) I find xml easier because by nature it is already hierarchical and there are a lot of posts out there about this, some of the ones that I used are of the following:

We have a gigantic project that is going to get large rather quick, so we have to make everything we do scalable. This application is going to be an online secure place to store all sorts of files, and share them between businesses, and end users. It’s a very secure microsoft sharepoint, but much prettier in my opinion. Right now it’s in contract with Alegent Health, which is a large Healthcare organization, and will meet all HIPAA standards. I didn’t want to make this blog post about the project, I wanted to briefly bring up scalability, and so I just mentioned that project because of it’s scale, so I’m moving on…

Besides that, back to the use of the mx:Tree in Flex. I typically would use an XMLListCollection,

but for the first time, I ran into some limits, I started using a filterFunction with the XMLListCollection, and it worked great, but when it came to things that had Children, it didn’t recursively search within those folders… I thought to myself when I was using the XMLListCollection, “huh, I wonder if the XMLListCollection is like the ArrayCollection, and I can embed other XMLListCollections, within XMLListCollections, just like I can do with the ArrayCollection, if I could do that, I could make it work with the folder objects having their own filterFunction, but the only thing you can do with and XMLListCollection is add XMLList objects. The XMLList does not have a filterFunction that can be used as easily as the collections do. You would have to do some sort of e4x search through the xml, and filter that way, so it may be possible, but I didn’t want to take that route, I wanted to use the filter Function.

Data Manager

What I am doing to import my data in this project, is using a DataManager class that extends the UIComponent Class, that way I can still dispatch Events. The UIComponent is the least heavy component that you would use to do this, so rather than extending a Canvas, or Panel, you can use a UIComponent to do this, and manage your data, and dispatch custom events to other visual components. You may want or need to do this when you have a custom data change event, and can’t use the CollectionEvent.COLLECTION_CHANGE event.

Take advantage of the Data Manager

I like the DataManager way, because say, I start a project, and have no clue what my database schema is going to be, so I construct an xml file that will house my test data to get my Interface up and running, and not only when you do this, you can show it to the customer to get any interface changes out of the way quicker, it’s much easier to add/update/delete the schema of a xml file than it is to do so to a database… there for trouble shooting and creation of the project just goes so much easier, if need be you can really take advantage of separation of “GUI” vs. “The Backend”

If I construct my program correctly with class files and Object Orientation, and inheritance, all I should have to do to change my data manager when it comes time to bring the data in from the database, and everything else in the program should be bound to class files that have the properties that your program is going to use.

Filter a Tree

We have a basic file system:

  • (C:)
  • Folders
  • Files

within the drive you can have files and folders, and folders can have files… What I have built is a filtering utility that goes within each folder of the drive and filters out the data, the only problem with the tree filtering is, that it doesn’t have it’s nodes expanded to see. This is due to the way you have to refresh the tree’s dataProvider.

The Demo Application:

  • -vo
  • –FileVO
  • —-id:int;
  • —-name:String;
  • —-type:String = ‘FileVO’;
  • –FolderVO
  • —-id:int;
  • —-name:String;
  • —-type:String = ‘FolderVO’;
  • —-children:ArrayCollection = new AC(getFiles());
  • —-public function getFiles():Array
  • —-public function processFilter(item:Object):Boolean

It also has a Model Locator from the cairngorm framework, and it has the datamanager I mentioned above. There were some things I rushed through, but I didn’t really plan on blogging to much about this, but the more it I wrote, the more I had to update the application to match what I’m talking about.

Things I would do differently

I would recurse into sub folders, it wouldn’t be that hard, you would need to look at the myTree.dataDescriptor.hasChildren method, and if it does, then run the function again for that folderVO…

I didn’t want my data to go that deep in the example.

I would like to see once, the length of the dataprovider got down to say 10 records or so, to have it expand all of the children…

Maybe the tracy spratt entry that I linked to above would help in this situation.

This could get slow once you get into a lot of records… so be careful. But hopefully if your doing that many records initially in the tree, you’ve come up with another solution, because of the length of time it takes to fill the tree with data… some of the things i’ve done, is not request child data until the node is clicked, then manually add each element into the node… and when it is changed, you recall the function that gets the data for that node, and it gets all of the children. Anyway this was a lengthy blog post, and hopefully someone got something out of it, if not, at least I’ll be able to use it in the future.