This page contains a demo console and sample widgets to play with. Each widget has a Javascript variable attached to them, and you may use the Javascript console at the bottom of this page to play with them. The name of the Widget type is linked to the documentation for that Widget.
The next paragraph is a LabelWidget, one of the simplest widgets there is. The Javascript variable for this widget is label.
A FormSubmitWidget named form is included here, but it has no visible appearance on the screen. Try form.submit({a: 1, b: [2, 3]}), and look at the URL. (Note you'll lose your Javascript Console session, of course. jerf.org has no CGI set up on it, but you can form.set("action", yourUrlHere) to one of your scripts and try it out.)
A SelectWidget named "select" is the next paragraph. Note it starts out empty, so populate it with something like select.set("values", [1, 2, [3, 4]]). Note that when 3 is selected, select.get("value") will return a 4.
The preceding widgets are defined in widgetsBasic.js.
If you have an XHTML browser that can view SVG directly embedded into XHTML, see the SVG Demo. This is cutting edge stuff; most likely your browser doesn't support it, and even if it does, no guarentees that it'll work. (The XBLinJS is fairly solid, I think, but your browser's SVG support may not be.)
Finally, here is the JavascriptConsole, which can be used to enter the code snippets above. The console itself is contained in the variable console.
Other useful thing to do:
- View Source on this page to see the <widget> tags.
- Run display(label) (or one of the other widgets).
- Create a new widget: x = new LabelWidget({value: "cheese"}); DOM(console).appendChild(DOM(x)); (Notice the DOM() call; regrettably, the DOM manipulation functions can't handle the addition of non-DOM nodes at all.)
