noisylime

Sébastien Gruhier, AKA Mr. Proto, is at it again coming up with a new Portal class for Prototype which gives you that ability to create a UI like NetVibes or iGoogle. For those that don't know, Sébastien is also the author of the very sweet and popular Prototype Window and Carousel classes.

The Prototype Portal Class continues along the same lines providing a straightforward method of adding portlets and styling them. The portlets include DnD and selectables functionality making them fall neatly into place when dragging them around. The code to implement this is VERY easy to understand:

You need to instanciate a Portal class with those columns:

var portal = new Xilinus.Portal("#page div")

Add widgets to this portal. There is a Widget class, fully CSS skinnable (there is a default theme), just create a new Widget instance and add it to the portal by specifying the column index. For example:

portal.add(new Xilinus.Widget(), 0)

// Or with title and content
portal.add(new Xilinus.Widget().setTitle("Widget Title").setContent("bla bla bla"), 1);

While you still have to do the advanced legwork to build a Netvibe-like application, the Prototype Portal class gives you the foundation to build upon.

You can an example here and download the code here.

[via Ajaxian]