Wednesday, August 29th, 2007

Create your own iGoogle with Prototype

Category: Prototype

<p>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.

Related Content:

Posted by Rey Bango at 7:30 am
13 Comments

+++--
3.6 rating from 97 votes

13 Comments »

Comments feed TrackBack URI

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.

Comment by Harald — August 29, 2007

…very very useful… nice!

Comment by Mark Holton — August 29, 2007

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

Comment by Mike Ritchie — August 30, 2007

Hm, I’ve seen portal(bes) before in AJAX, but none of them allow easy saving of current state/layout per user basis.

Comment by Huy — August 30, 2007

Damn usefull !

Comment by Samuel Lebeau — September 10, 2007

Very interesting and usefull, thanks for the info!

Comment by Javier — September 16, 2007

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.

Comment by Jared Dyck — November 22, 2007

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!

Comment by thirumaran007 — April 29, 2008

Hi,
i’d like to know if is possible save positions and state of widgets in mysql database.
Thanks

Comment by dearste — May 2, 2008

how can we implement the minimizing and maximizing, with changing images from maximize to minimize and vice versa , onclick.

Comment by titothoams — November 5, 2008

Wow. Useful post. Its really nice.

Comment by Tamilnadu — April 29, 2009

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??

Comment by lizkim270 — April 29, 2009

Anyone have a suggestion for how to modify this to allow some widgets to span multiple columns? Thanks.

Comment by waterox — July 28, 2009

Leave a comment

You must be logged in to post a comment.