Wednesday, May 31st, 2006
Protowidget: Widget system on top of Prototype
Category: JavaScript, Library
, Prototype
Widgets
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:
HTML:
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).
Related Content:
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!
You Ajax guys are funny. Have you been drinking the stuff?
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..
by the way.. great work on protowidget, I will have to try it out.
Adding attributes doesn’t have to be troublesome. That’s what namespaces are for. Hey presto, valid html again!
@Krzysztof:
> Widget1 just defined by id=â€Widget1″.
That’s a proprietary microsoft extension. What you should be doing is this:
<span class='Widget' id='Widget1'>
<script>
var Widget1 = document.getElementById('Widget1');
Widget1.type = 'DomWidget';
Widget1.style = {color : 'colorval', left : 'leftval'}
</script>
</span>
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.
Its built off Prototype so it should be:
var Widget1 = $(‘Widget1′);
//use the framework guys, its there for a reason.
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.
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!
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
Good stuff. I used to be a webmaster back in 2001. Now i have other people dealing with this but things like this help.
Check out Western Construction and Development.
great coding
Amazing!
This is one of your best posts! And, one of the best blogs i read!
:)
Cracking!
Great coding, thanks for sharing it with us.
thanks for sharing
My web guy has written some widgets which some people may find of use, I will get him to post the links here.