Widgets for HTML

Why a Widget set?

There are various widget sets available already, so why another one?

This widget set is designed specifically to be cross platform, 100% standards compliant, and to function across all browsers (e.g. XUL is only available on Firafox).

It uses standard HTML and Javascript. It also fits in with the same design philosophy as the Karoo Project surf dynamic web server.

Each of the widgets use a simple set of HTML elements to define their contents, css to define their layout and appearance, and a specially formatted HTML comment to identify them as widgets.

When the page is loaded, a javascript initialisation script runs and picks up all the widget elements, and embelishes them with functionality. In effect, you get a lot of functionality and professional appearance, with very little effort, and you do it by creating standard HTML and optionally CSS.

Keep watcing this page, because its being updated constantly with more widgets. The Karoo Project presented here is the second version of the project. The first version is in use in a production environment, and although its Open Source, it was not advertised like it is now... and this is an improvement on the first version... but, since we already know what we want and how to do it, the second version of The Karoo Project is alive and growing rapidly.

There is a Tutorial for designing GUIs using the widgets http://www.zwartberg.com/tutorial_1.html

Syntax

All of the widgets have the following syntax:

<{html-element} ... > ... </{html-element}>
<!-- widget {type} [parameters] -->

... where the "{html-element}" is replaced with a standard HTML element, e.g. "span",
and "{type}" is the (required) widget type, e.g."text",
and "[parameters]" is an optional parameter or parameters, separated by spaces.

The "[parameters]" can be whole words, e.g. "numeric" (as used with a text widget that only receives numbers), or key:value pairs, separated by a ":" (colon) character. The most common example of this is the "action" parameter, whose value is the name of the javascript function to be called when the widget action is done, e.g. if its a button, when it is clicked on.

Initialiser

Most importantly, the page must have the following in it, just before the end of the <body>

    
    <script type="text/javascript">
      //<![CDATA[
        initWidgets();
      //]]>
    </script>
  </body>
</html>

The initWidgets() function could be called by the onload callback of the body tag, but that would cause it to be called after rendering. Using the method described above, the initWidgets() function is called after the body of the page has loaded, but before rendering.

CSS

The widgets also get assigned a default CSS class (if you have not already done so.) The default class is always "widget_" followed by the widget type, and sometimes also followed by "_selected" or "_highlight", or (in the case of the horizbar), also "_done_selected", "_done_highlight", "_started_selected", "_started_highlight" "_started", and "_done"

E.g. for a button widget, the following standard CSS classes exist:

widget_button
widget_button_highlight
widget_button_selected

These classes can be ommitted in your HTML... the system will automatically make them. Or you can create your own CSS classes. E.g. for a button, you could declare the button as so:

<span class="my_button">OK</span>
<!-- widget button action:myButtonAction -->

Then you will need to define your own CSS entry for this button, e.g.

.my_button {
    cursor: hand;
    cursor: pointer;
    text-align: center;
    border: 1px solid #c0c0c0;
    margin-left: 1px;
    margin-right: 1px;
    vertical-align: middle;
    background-color: white;
}
.my_button_highlight {
    cursor: hand;
    cursor: pointer;
    text-align: center;
    border: 1px solid #909090;
    margin-left: 1px;
    margin-right: 1px;
    vertical-align: middle;
    background-color: #e0e0f0;
}
.my_button_selected {
    cursor: hand;
    cursor: pointer;
    text-align: center;
    border: 1px solid black;
    margin-left: 1px;
    margin-right: 1px;
    vertical-align: middle;
    background-color: #d0d0ff;
}

Note that you must also specify the classes named with the same name and "_selected" and "_highlight" appended. This is because when the widget is highlighted or selected, the system uses the base class name and appends "_selected" or "_highlight" to it.

More...

Tutorial The Karoo Project Documentation Web Hosting

Documents
Downloads
Sourceforge