[jQuery] Widget Framework
Hey all,
I'm working on a simplistic "widget framework" to better standardize
how widgets work (if only for those that I'm writing) - I'd like to
share it to hopefully generate some ideas with it before I get too
involved
The goals behind it (thus far) are to:
* wrap widgets in such a way that you can treat them more or less as
a single DOM Node via jQuery
* as part of the above point, widgets should be able to semantically
redefine various jQuery methods - for example, if you have a dropdown
menu widget, and call show() on it, it will hide any currently
displayed dropdown widgets in the same call
* have a simple interface to do all this with, and easily package
widgets
I have a working example of this (tested only in Safari at the
moment), in very early stages:
http://safis-project.net/Designer/tests/canvas.html
Code of note:
http://safis-project.net/Designer/javascripts/canvas.js (canvas
widget)
http://safis-project.net/Designer/javascripts/table.js (table widget)
http://safis-project.net/Contrib/jQuery/jquery.widget.js (the actual
code that drives this)
How it works:
you register a widget type with the widget framework; currently, each
widget can define the following:
type: this is the unique "name" of the widget (required)
detector: given a DOM node, this determines whether the node is an
instance of that widget type. By default it looks for a class name
that is the same as the widget type name. This allows for a seamless
use of find() and jQuery(). For example, if I define a "dropdown"
type widget, where each widget is defined as <div class="dropdown"...
any jQuery that returns that top level div of the widget would treat
it as a widget (e.g. $("div.dropdown") would return a jQuery.Widget
rather than a normal jQuery object)
methods: each method defined here can be called on any instance of the
widget. For example: $("div.dropdown").addEntry("A New Entry")
find: this function will search the entire document for all instances
of the widget, primarily used by:
initialize: this is called every time an instance of the widget is
created (or at page load for "in-html" widgets) - for registering
events, etc.
One major change that this brings about is the concept of
"conditional" methods for jQuery objects. Using the dropdown example
- if I run the query $("div") and it returns both widgets and non-
widgets - any jquery function you run should still work as semantics
would dictate. For example, $("div").text("new text") would rename
every div as expected - but, any widget that defines its own version
of text() would use the custom version instead
Also, one strange result of this (for performance reasons) is that if
you select a set of all non-widget nodes, a normal jQuery object will
be returned, and any widget-related functions will /not/ be avaliable
to the object. For example, the dropdown widget defines addEntry() -
calling $("h1").addEntry() would result in a runtime (Type) error, as
the function would not be defined on a non-widget result.
Still in the works:
I would like to extend the jQuery find syntax to allow for treating
widgets as nodes. perhaps something like $("~dropdown")
I also need to work an easy method for calling "super" versions of any
function (inside the overridden method)