YUI Treeview with Drag and Drop and Context Menu's

I've been developing more with the YUI library for the implementation of a concept demo relating to a new project at work. The demo UI is coming along nicely. For one screen I've got two treeview controls, I've managed to get drag and drop between the tree's working and I also have context menu's on the tree nodes for the creation and deletion of new nodes. I didn't want to move the actual nodes from tree to tree but create a copy when the drag and drop was complete. So I created an override for the onDragDrop function of the YAHOO.util.DDProxy by extending the object. Doing this allowed me to return the dragged element and create a new TextNode.

The dynamic creation of nodes, either via a context menu or a drag and drop operation was causing the context menu's and drag and drop targets to be lost after any change to the tree was made. I did some searching and discovered that when the tree refreshes the DOM elements for the tree nodes are recreated. Meaning the context menu's and drag and drop targets were being dropped. To solve this, after the draw() call on the tree (required to see new nodes), I used the following:

...
tree.draw();
parentNode.expand();
YAHOO.util.onAvailable(newNodeID, function(){
createContextMenusAndDDTargets();
});

Although this works very well, I don't like recreating the menu's each time a change is made. It just seems wrong. Perhaps there is a better way? Maybe I can store the context menu's on the TextNode instances and reassign them when the tree is refreshed... Will have to look into that.

YUI Layout: Set a minimum width for the 'centre' cell

The YUI layout class is great. And the ability to resize 'cells' within the layout is really useful. But you cannot set a minimum width for the 'center' cell. So, below is an example of how to add a resize event handler to make sure the 'center' cell doesn't become too thin. This assumes a layout with a 'left' and 'center' cell, but no 'right' cell. Also ensure that the minimum width of the 'left' cell and the 'center' cell combined does not exceed the minimum width of the layout itself.

var layout;
...
var minWidth = 200;
layout.on('resize', function(args){
var leftWidth = layout.getUnitByPosition('left').get("width");
var centerWidth = layout.getUnitByPosition('center').get("width");
if (centerWidth < minWidth) {
leftWidth = leftWidth - (minWidth - centerWidth);
centerWidth = minWidth;
layout.getUnitByPosition('left').set("width", leftWidth);
layout.getUnitByPosition('center').set("width", centerWidth);
}
}, layout, true);

This can be extended to cover layouts with both 'left' and 'right' cells. It can also be converted to set a minimum height for the 'center' cell.

I Heart YUI

Over the course of my career to date, my work has involved developing browser based UI for several projects. All of which have relied heavily on the use of Javascript and the ubiquitous DIV element. A fantastic and very powerful combination, especially when supported with AJAX, that I have used to make web applications look and feel like desktop applications. The problem is, going from one job to the another means that you leave all the code behind and you start again from scratch.

Even with the advantage of previous experience, recreating the same key building blocks becomes tedious. In the early days, being used to the availability of different code libraries in Java and C++ I did look into what was available for Javascript. Whilst there were some very good libraries available, in comparison to todays libraries they were very basic and I never felt that they warranted the investment, as I could easily reproduce them myself. Therefore bug fixing or enhancements would be easier, which in turn would also save a lot of time in the long run.

I've recently finished the latest release of a product for my employer and we are in the process of determining the UI design template for future products as the company's portfolio grows. As a part of this I have looked at the current batch of Javascript libraries, and after careful consideration chose Yahoo's 'YUI' Javascript library. Now that I have had time to examine it in more detail and develop a prototype UI, I appreciate why hand rolling your own UI library is futile. YUI is a product that has taken a team of people several years to refine. Aided by a large network of testers, the developers who use it.

That's not to say that by using a library such as YUI leaves no room for innovation or further refinement in terms of UI development. Having a toolkit like that is very empowering. I've managed to do some cool things with the YUI tree component. If I had to develop the tree component aswell it would have taken me many times longer to accomplish. With an abundance of rich features in such libraries, to me at least, it feels like Javascript is entering a slightly more grown up realm.

Of course, it does mean that in some ways web apps will become more uniform, as have desktop apps over time. There are UI conventions common to most desktop applications, in terms of controls and layout. Now, as web apps become more complex, these conventions are spilling over into the browser. This shift is reinforced by the intrisic need to use these libraries. The libraries themselves, or at least the good ones, will follow convention. A good thing, but I imagine that web UI design will become less 'arty' and more functional.

So the moral of all this waffle. There's no need to feel lazy when it comes to Javascript development by using libraries such as YUI. Use your Javascript skills to put these tools to good use.