Navigation

Widgets Manual

This document basically attempts to be a basic guide to using Widgets, a FOSS Javascript UI toolkit. It covers the Widget object, its different settings, and all of the UI methods availible to a developer.

This manual covers Widgets version 0.2.4

Table of Contents

1. The Widget Object
1. Supported UI Elements
2. Catch-All Methods
2. Specific Element References
1. Buttons
2. Text Boxes
3. Select (Drop-Down Box)
1. The Option Element
4. Radio Button
5. Checkbox
3. Widget Features
1. Actions
2. Text
4. Code Samples
1. Simple Elements
2. A Selection Box
3. Adding In Some Functions

The Widget Object

The Widget object is the absolute core of the Widgets framework. It handles all of the UI display and configuration. It uses the Javascript object style, in that it is a function that is called through varible = new Widget(type, id[, text, action]);

The constructor takes between 2 and 4 parameters, in this order: type of element, element id, [text, action]. Each parameter is important in its own way. The type must be one of the strings below, which correlate to a type of interface widget. The ID is the HTML ID the widget will use; it's required as well. The text is the text to be displayed on/in the widget (see the Text section in this manual): for buttons, it's the text; for text areas, it's the inital value. The action (described in detail in Actions) is the Javascript function to be called when the element is clicked or changed.

Supported UI Elements

A Widget must be given a type before it can be used. This type defines what kind of UI element the Widget will appear to the user as. It's the first argument of the Widget constructor function, and must be one of the following strings:
button — A simple button.
text — A one-line text input area.
textarea — A multi-line text input area
checkbox — A simple checkbox.
select — A selection box.
option — An option for a selection Widget.

Catch-All Methods

The Widget object contains 21 methods, as of 0.2.4. Not all of them apply to each type of widget; they're there for when you do use that kind of UI element. However, the following apply to every Widget, and should be used accordingly. The methods specific to each Widget can be found in Specific Element References. These methods are presented in alphabetical order for convenience.
$(id) — This is not a Widget method. It's a shortcut, used by the object and for use by coders. It is one line of rather useful code: return document.getElementById(i)
Widget.add(element) — Adds the element element to this Widget. It will gain more use as container elements are introduced. For now, it is important to know that element can be either a Widget or a DOM element (through $).
Widget.addTo(element) — This adds the Widget to element. Just like Widget.add(), it doesn't matter if the element is a DOM or Widget object. The type is autodetected by the function.
Widget.disable() — Disables the UI element by setting the disabled= attribute.
Widget.enable() — Enables the Widget.
Widget.hide() — Hides the widget from view. This also frees up the space it would take up.
Widget.set(property, value) — A shortcut for the setAttribute(p,v) DOM function. Sets the HTML property property to value.
Widget.setAction(action) — Sets the Widget's action to action. This will update the HTML object.
Widget.setText(text) — This function updates the Widget's text to the provided value. It does not, however, change the HTML value at all.
Widget.setValue(value) — This sets the value= HTML attribute to the new value. This should not be used by most objects.
Widget.show() — Un-hides the Widget by clearing the disabled= attribute.
Widget.update() — Updates the HTML object in its entirety. This includes the action, text, and value.

Formatting:
[b] for bold, [i] for italicized text, [u] for underline, and links are [url=link]Text[/url] or [url]link location[/url]

Comment
Indicate you're human by typing that word:

| News | About | NanoCMS