Wednesday, May 31st, 2006

Protowidget: Widget system on top of Prototype

Category: JavaScript, Library, Prototype

Terry Laurenzo found that he liked “the simplicity of Prototype, the widgets/templates from Dojo and the event-based property binding support from OpenLaszlo/Flex”. This caused him to create Protowidget which builds on Prototype to add widget support a la Dojo.


As the name implies, Protowidget is based on widgets. While some widgets are provided (and more will come in the future), Protowidget’s primary focus is on providing a rich environment for constructing complicated widgets.

A widget is always bound to an HTML element. This will typically be a div, but can really be anything (depending on the widget). We take the Dojo approach of leveraging custom attributes in order to do all of the wiring. This has the advantage of letting us bypass the ID-madness when it comes to hooking widgets to DOM elements. Here is an example:

  1. <span pw.type='Text' pw.text='#{`[currentSection].model.title`}'></span>

This HTML declaration tells Protowidget to bind the span to the built-in Text widget. It further sets up a property binding so that the text property will be bound to the value of model.title on the current section (this example came from the Accordian title-bar template so the currentSection reference is an Accordian.SectionWidget in this context).


Posted by Dion Almaer at 8:36 am

3.7 rating from 46 votes


Comments feed TrackBack URI

Heh! He stole our accordion widget styling! – which is based on prototype anyway ;)

I prefer a html / css avenue to widget creation – but these early prototypes show promise so will keep an eye on in the future!

Comment by Ross — May 31, 2006

You Ajax guys are funny. Have you been drinking the stuff?

Comment by Dick — May 31, 2006

Lots of things may be a ‘nono’ but they serve to make life easier and are cross browser… css hacks are a ‘nono’ but are required for some. javascript eval() is considered a ‘nono’ but is required for some. blending javascript/php/markup should be a ‘nono’ but its done all the time… what about making a custom DTD that uses the custom attribs..

Comment by Mario — May 31, 2006

by the way.. great work on protowidget, I will have to try it out.

Comment by Mario — May 31, 2006

Adding attributes doesn’t have to be troublesome. That’s what namespaces are for. Hey presto, valid html again!

Comment by Dominic Mitchell — May 31, 2006


> Widget1 just defined by id=”Widget1″.

That’s a proprietary microsoft extension. What you should be doing is this:

<span class='Widget' id='Widget1'>
var Widget1 = document.getElementById('Widget1');
Widget1.type = 'DomWidget'; = {color : 'colorval', left : 'leftval'}

Obviously that’s even clunkier, but at least it’s valid. I think the main problem here is that you have to use unique ids for every widget, a problem addressed in the linked article.

Comment by henrah — May 31, 2006

Its built off Prototype so it should be:

var Widget1 = $(‘Widget1’);

//use the framework guys, its there for a reason.

Comment by Mario — June 1, 2006

I thought I’d provide a blurb about adding custom attributes and why I think it’s ok:
First, the current syntax of prefixing the attribute with ‘pw.’ is a placeholder until I get namespaced attributes working. The big culprit here is IE and its poor support for XHTML. I considered getting the relevant features to work is slightly more important in the short term than getting it to validate. And do recall that the ‘X’ in XHTML stands for eXstensible. It really isn’t my fault that the standards bodies didn’t think very hard about how to actually make those extensions validate within browsers. Schemas would have been nice, but in their absence, we can still extend XHTML. Getting it to validate is a headache, though.

Comment by Terry Laurenzo — June 2, 2006

I also forgot to mention that the presented color scheme for the accordion widget was derived from looking at the colors on the OpenRico widget. It’s not exact but it is close. I meant to attribute it to the OpenRico project but forgot. Apologies, and thanks for the color scheme!

Comment by Terry Laurenzo — June 2, 2006

haha, when I stumbled accross your page I thought it was one of those pages that were trying to rank for ‘widgets’ in a large SEO competition some years ago, took a while for me to understand what you were talking about! Great stuff

Comment by Simon — February 6, 2007

Good stuff. I used to be a webmaster back in 2001. Now i have other people dealing with this but things like this help.

Comment by Jerome Black — March 22, 2007

Check out Western Construction and Development.

Comment by suggs — April 17, 2007

great coding

Comment by Erik — June 6, 2007


This is one of your best posts! And, one of the best blogs i read!


Comment by Andy — September 8, 2007


Comment by eco2you — September 8, 2007

Great coding, thanks for sharing it with us.

Comment by SlackAlice — September 12, 2007

thanks for sharing

Comment by Samantha — September 12, 2007

My web guy has written some widgets which some people may find of use, I will get him to post the links here.

Comment by Graham Brabham — September 13, 2007

Leave a comment

You must be logged in to post a comment.