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.
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:
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).
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?
Seems like an interesting approach… however, this is doomed to produce syntactically invalid markup. Sorry, boys and girls, adding your own attributes directly to the markup is a no-no.
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!
Discussion about how to declare widget attributes still continues. Several solutions are used in current frameworks.
Dojo uses custom dojoType attributes, although it states that dojo:type or class=”dojo-type” may be used instead.
Protowidget uses suspicious “dotted” pw.type attributes, and introduces complicated sub-syntax when defining e.g. bindings.
Other solutions, like just attributes! uses complicated class name subsyntax:
<div class="std ja=rollover:stdhl;href:home1.html;target:main">
just attributes???</div>
Another way I’ve found somewhere was to embed baroquesque microformat sections.
All these constructions have to be converted to JavaScript objects in each case.
My solution which I prefer is to define widget parameters in nested script tag instead of using custom ‘nono’ attributes or introduce namespaces, like in the following example:
<span class='Widget' id='Widget1'>
<script>
Widget1.type = 'DomWidget';
Widget1.style = {color : 'colorval', left : 'leftval'}
</script>
</span>
Generic widget is recognized by class=”Widget”.
Specific type, and all other specific attributes, parameters, options, and whatsoever are defined in embeded <script> section, referring to DOM object Widget1 just defined by id=”Widget1″.
This is straight, clear, syntactically valid, moreover it allows for easy structuralization of widget options and - being just JavaScript objects - may be directly used and e.g. easily combined with default values defined in script implementing widget behavior.
I use this construction effectively in my “protowidget” mechanism (i.e. widgets implemented on Prototype, although I am on the way to move it to jQuery instead).
Regards,
@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.
I wrote some widgets in http://www.linb.net/linb for it.
including: treegrid, sortedgrid, treebar, tabs, real window…
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!
Check out Western Construction and Development.
They are a Los Angeles based construction company.
Great work! Thanks.
wosoom
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
interesting blog nice coding hope to use it soon
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.
Pretty cool. I use some ajax on my discount perfume store and i will try to implement this on my something like this also. Pretty Cool !