We are nearing the end of this series (3+) but this one may be the longest of them all. Today we are going to go over adding the ability to add/rename/remove directories. There are many things and some pretty important concepts that go into this part of the series so pay close attention.

To allow the user the ability to add/remove/rename folders we are going to add a right click context menu to each folder. That's right we are going to add it to each folder not the tree. The tree has a property context menu but that will apply it to the whole tree. This is where I actually started but quickly realized there was no easy way to figure out exactly what branch is being clicked. If you want an explination of why you should take this approach check out this post I came across.

The first thing we are going to do is create a custom item renderer. We are going to create the file com/rocketfm/CustomTreeItemRenderer.as. What we are doing here is creating menu for every item in the tree. The add/remove/rename items will call a method thanks to our event listeners when they are clicked. Another tip about this class is we need some way to get the base directory of this application. We can do so by using Application.application and changing the baseDir to a public variable. Each of these items are going to popup a custom view which we will go over in a second. Finally using our base directory we are going to check on the rename/remove methods because we don't want the user performing either of those actions on our root folder.

I am not going to go through each of the custom views because they are pretty much the same but you can checkout the code from svn if you want to. We are going to focus on the add menu item. When its clicked it calls our addDirectory method which simply opens up our custom add view component located in our views/ folder. There are many things going on here so lets break them down. First we are simply displaying a text box with a save button. The user enters the folder name and then clicks save to call the addDirectory method. You will notice we also have a keyDown event for our text box. This is a way to handle the user typing the directory and clicking enter instead of the save button. Next we take our path the directory that was clicked and the new folder name and pass that to an addDirectory method in our file manager component. After that is done we dispatch a custom event of type RefreshTreeEvent. This is a custom event I created and it basically announces to our application that something has changed and we need to update our UI.

Now we have add/remove/rename methods working we need to do some things back in our main application. The first thing that we need to do is to listen for that refresh tree event. We want to know when one of the popup windows dispatches this event so we can handle it and refresh our tree. This was pretty tricky at first because you can just attach the listener to the stage. You actually need to register the event listener with the system manager. The system manager is actually the parent to all displayable objects so it actually sits above the application. In our init method we can add a listener, when that event is caught we will call our refresh tree event.

Our refresh tree method makes use of a pretty important concept. I might come back and devote a whole post to this because its quite interesting. My refresh tree event knows the path of the or the parent path of the item that was manipulated. What I needed to do is somehow find the object of the passed in path. The reason is because i needed to set our node place holder to reference that particular object. If you don't take this approach then you have no way of knowing where you are adding the directory so you have no way of listing the directory (or parents) contents. This may be confusing to some but if you download the code and play around with it you will see why this works. To make that work we update a dictionary map every time will list the directories. This works because every directory will have a unique path and using that path we can find the object. Like I said, if you don't understand this yet, don't worry I will go through it in another post.

We are really moving right along now. This application is coming together nicely and today we added some important features to our application. Here is a quick screen shot of our application in action.

 

This entry was posted on January 10, 2009 at 4:49 PM and has received 11447 views. Comments 1 | Print this entry.