Joost™ Widgets Language (JWL)

This document specifies the Joost™ Widgets Language (JWL, pronounced "jewel") which can be used in widgets in order to be consistent with the Joost UI.

Any and all use of the Joost API is subject to the Joost API Terms of Use

The API may change and although we will try and keep these changes to a minimum, some API calls may be deprecated in the future.

Table of Contents

• 1. Overview
• 2. Common Attributes
• 3. The <button> element
• 4. The <checkbox> element
• 5. The <scrollarea> element
• 6. The <textbox> element
• 7. The <window> element
• 8. References

1. Overview

Please note: JWL is being progressively phased out in favour of using pure XHTML+CSS.

Instead, use body onload="yourFunction" in your HTML or XML main file instead of window:onShow and height and width in config.xml instead of height and width in <jwl:window>. title is simply the html title in your main-file.

Do keep in mind that the document a widget is built upon is simply a mix of HTML, SVG, CSS, and Javascript, and that apart from the <window> element which is used to provide some specific details about your widget, the other elements are only useful as means to provide a UI closer to that used in the rest of Joost.

When we fully deprecate JWL we will provide a CSS file that gives standard HTML UI components similar appearance in Joost Widgets.

2. Common Attributes

The following attributes are reused on several elements.

Attributes list

id

The 'id' attribute provides an XML identifier to the corresponding JWL element. Due to a severely annoying bug in Mozilla Gecko, the 'id' attribute does not currently function correctly (e.g. it will not work with getElementById()). It is expected going forward, as soon as Mozilla is fixed, that it will be replaced with the xml:id attribute which is much better suited to this task.

label

The 'label' attribute contains a human readable string that is associated with the given control (e.g. a button). Given that it is poor design to include human readable text inside an XML attribute, it is expected that going forward this attribute will be phased out in favour of element content. That being said, backwards compatibility will be preserved.

3. The <button> element

The <button> element is used to create buttons in the style of Joost.

Attributes list

onclick

Contains some Javascript code to be executed when the button is clicked.

width

Specifies the width of the <button>.

Other attributes

See 'id' , 'label' (required).

4. The <checkbox> element

The <checkbox> element produces a checkbox in the style of Joost.

Attributes list

checked

If set to "true" then the default value of the checkbox will be checked, unchecked otherwise.

Other attributes

See 'id' , 'label' (required).

5. The <scrollarea> element

The <scrollarea> element produces a scrollable area consistent with the other scrollable parts of the Joost UI.

Attributes list

height

An integer indicating the height of the scrollable area.

style

CSS style to be applied to the container and inherited into its descendants.

visibility

Toggle between hidden and visible to make this element visible.

width

An integer indicating the width of the scrollable area.

Other attributes

See 'id' .

6. The <textbox> element

The <textbox> element produces a text box in the style of Joost.

Attributes list

type

If set to password will cause it to hide the characters being typed, all other values make it a regular text box.

value

A default value, if any.

width

An integer indicating the width of the box.

Other attributes

See 'id' (required).

7. The <window> element

The <window> element is used to specify various aspects concerning the small window that contains widgets.

Attributes list

autohide

If set to true, the decoration will be hidden and only show upon hover.

height

(required) The height, using CSS units (e.g. 42px), of the window.

minHeight

The minimal height, using CSS units (e.g. 42px), below which the window will not be resized.

minWidth

The minimal width, using CSS units (e.g. 42px), below which the window will not be resized.

onclose

Javascript code to be called when the widget is closed.

oninvalidate

Javascript code to be called when the widget is invalidated (when it is redrawn as the user re-enters the widget area).

onshow

Javascript code to be called when the widget is shown.

padding

A boolean indicating whether there should be padding inside the window.

persist

A boolean requesting that the widget be persisted or not (it is by default).

resizehandle

If set to hidden, the window will not be resizable.

title

(required) A title for the window.

width

(required) The width, using CSS units (e.g. 42px), of the window.

Other attributes

See 'id' (required).

8. References