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.

Mandelbrot Set Sub-sampling

Below is a very basic approach for sub-sampling pixels within the Mandelbrot Set. Instead of iterating through the equation for each pixel, iterate through the equation for each cell of the sub-sample grid and then divide by the number of sub-samples taken.

It's a basic piece of code but the difference between a plot with and a plot without (sub-sampling) is worth waiting that extra bit of processing time for. There are some ways of limiting the sub-sampling to noisy areas only (where it's needed). I'll provide some examples another time.

Let mX let be the x coordinate of the current pixel (the real part of the complex number), let mY be the y coordinate of the current pixel (the imaginary part of the complex number) and let delta be the width/height of a pixel within the plot:

double dDelta = delta/subSamples;
double halfWidth = delta/2.0d;
double total = 0;
for (double xI = 0; xI < subSamples; xI++){
for (double yI = 0; yI < subSamples; yI++){
double pX = mX+(xI*dDelta)-halfWidth;
double pY = mY+(yI*dDelta)-halfWidth;
total += iterate(pX, pY);
}
}
values[screenX, screenY] = total/Math.pow(subSamples, 2);

A Start....

I've decided to become more involved on the internet. I'm forever searching forums and blogs for the solution to a particular software development problem. Or reading about the next big thing. So, I thought I'd start sharing my thoughts, my experiences, and technical solutions with others. I know how difficult it is sometimes, finding a solution to a really obscure programming or configuration problem.

I work with Java and 'Web 2.0', but over the years I have developed in a whole host of languages - as, I think, most good developers can. I don't know everything. The more I learn, the more I realise how much there is to learn. But I do have over two decades of experience with the last 12 years spent at university and then in industry. I've worked on a lot of cool things too. R&D at IBM as a student placement, the voice controlled element of a unified messaging system, a number plate recognition system, a browser based e-learning framework and CMS, and most recently working on an AJAX based web app with a scaleable serverside n-tier architecture for the processing of very complex user requests.

I also develop software\code in my spare time. Mostly things I like that I find challenging. My main personal project is a Mandelbrot\Julia set explorer with the ability to render the plots in semi 3D (the plotted values act like contours on the model). Although, I am interested in extending the software to render 'true' 3D models of the fractal. I need to do some research for that though. Anyway, the URL is:

http://java-apps.org/content/show.php?content=118577

You can also find it on a few other sites such as under the Mac content on Softpedia.com and on Freshmeat.net. I wrote the 3D API for the software too. A heavily refined and much faster version of the API I wrote for my final year project at Uni.

I do plan to make the software open source at some point. And also share a lot of the 3D research I've done over the years.