Wednesday, August 29th, 2007
Create your own iGoogle with Prototype
Category: Prototype
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.
Nice widget with the typical protocolous effects. Ghost dragging would be nice-to-have and that the viewport scrolls when the element is dragged over the borders. Hiding the widget content during dragging would make dragging faster, maybe … Netvibes just ported their portal from Prototype to MooTools.
…very very useful… nice!
Wow, it’s amazing how a simple reading mistake can cause one to loose so much of the intent of an article. I read it as Xilingus initially and was completely distracted for the entire article…. :p
Hm, I’ve seen portal(bes) before in AJAX, but none of them allow easy saving of current state/layout per user basis.
Damn usefull !
Very interesting and usefull, thanks for the info!
I agree with Mike Ritchie. It’s great that you can re-arrange this “widgets” but what good is it if you can’t save the state when you come to the page again.
Hi , Im new to this site,
i have a doubt about igoogle example.
how can i store the widget state in local machine..
i have build a site with asp.net with your igoogle prototype..
can one help plz…
very urgent!
Hi,
i’d like to know if is possible save positions and state of widgets in mysql database.
Thanks
how can we implement the minimizing and maximizing, with changing images from maximize to minimize and vice versa , onclick.
Wow. Useful post. Its really nice.
It seems like it works great IE6 and IE7 but crashes on IE8 with drag-and-drop. Anyone run into the same issue/found patch??
Anyone have a suggestion for how to modify this to allow some widgets to span multiple columns? Thanks.