« Clock Component in Flex | Main | Central/Flex Hex Editor »
December 06, 2004
File Explorer in Flex
Okay, this one's coming at you straight from the customer request files! Last week I had a customer ask for an example showing Tree control manipulation based off RemoteObject calls. The customer asked for an example where node data would be appended dynamically as data was returned. They were displaying hierarchical data specific to their business, so I went for the next best thing - system file data.
It turned out to be easy enough to emulate file system structure in a Tree control based off service call results, so I couldn't just stop there. I figured that I'd keep going and provide additional display metaphors. Windows Explorer displays additional file data in a grid, and upon deconstructing its behavior, reflects navigation in the tree in a somewhat complex fashion as well. The example is available for your convenience.
I implemented a simple Java object as the service, and that provides me with some convenience methods for accessing the data in the form I want/need. I'd likely refactor that code somewhat, so don't use it as a pure reference of what should be done on the server-side (outside of the pattern of providing a service adapter). I've also roughed in the MXML for direct file access through an address bar. I haven't hooked it up, but the code is there for you to expand upon if you so please.
My favorite part of the application is the formatting, totaling, and summation that take place at various points. In the following Captivate demonstration for example, you'll notice that right out of the gate there's a total for the number of objects, and their combined size (in GB) in the status bar. As the Tree is navigated, those values will change - and they're even intelligent about the units in which they display (not always GB). Formatting also takes place in the DataGrid through labelFunction properties on the DataGridColumns.
Posted by khoyt at December 6, 2004 05:13 PM
Comments
Hi, that was a very intersting example. But, I would like you to share some info on a very undesirable result (in all tree renderings that I have come across or implemented), if you do the following.
1. Click on a node.
2. Before the children of that node are displayed click on another node (you have do this really fast :). Prmoinent result when you are accessing web services over the net!)
The result would be that the children of the previous node (fist click) will be displayed as children of the subsequently clicked node.
Is there any way we can avoid this.!
Posted by: Sree at January 3, 2005 03:04 AM
Sree,
Good find! There certainly is a way (probably multiple ways) to avoid this, and I've updated the example to handle a rapid double-click. If you download the example again, look to make sure the explorer.as has the date of Jan 3, 2004 (just to be sure the archive isn't getting pulled from your browser cache).
In the update I've added blocking such that only the first click (request) is handled. I accomplished this by setting a boolean flag in the method that is called when a node is opened. Subsequent node expansion (requests) will simply be ignored until the initial service result (response) has be recieved and the values have been displayed. Clearing the flag is managed through the service result method (in this case the directories() method).
Ideally there'd be message queueing in the Flex application on the client, but I suspect that would involve some intelligence on the server as well (remoting runtime service). For now, mine is quick and easy. We'll see what the future brings.
Posted by: Kevin Hoyt at January 3, 2005 09:19 AM
Hi Kevin, that works!
Posted by: Sree at January 5, 2005 05:43 AM