Synopis

Source

xbTreeWidgetStatic.js

Uses

• Nothing

See Also

Description

xbTreeWidgetStatic is a JavaScript object which allows the flexible construction of HTML Tree Widgets using a simple API along with HTML. DHTML manipulation of the tree is possible in browsers which support the Internet Explorer proprietary HTMLElement.innerHTML property. For browsers which do not support this property, xbTreeWidgetStatic will generate a simple hierarchal layout.

xbTreeWidgetStatic is designed to be used before a page load event fires by writing the HTML into the document. xbTreeWidgetStatic is Static because it can not modify the contents of the Tree widget after it has been written to the document.

xbTreeWidgetStatic requires the use of JavaScript 1.2 in it's implementation of it's data structures.

Notes

Script Location/Invocation

xbTreeWidgetStatic must be used inside the BODY Tag to document.write the HTML representation of the tree into the document. The xbTreeWidgetStatic itself must be constructed in full either in the HEAD of the document or prior to the document.write in the BODY.

Netscape Navigator 4

Netscape Navigator 4 is supported for a simple Non-DHTML version of the Tree Widget.

Opera 5+

Opera 5 and above are supported for a simple Non-DHTML version of the Tree Widget.

Examples

Download

xbTreeWidgetStatic-examples.zip

Basic Example

This example illustrates the basic steps for creating a simple tree widget using xbTreeWidgetStatic

  
    

    

        

    
    
    

    
  
  
    
  

]]>
        

Simple Example 01

This example illustrates the basics of a working xbTreeWidgetStatic widget using simple text handles and labels.

Simple Example 02

This example expands on the Simple Example 01 by using images and styled labels.

Object Example 01

This example illustrates the basics of a working xbTreeWidgetStatic widget created from a JavaScript object using simple text handles and labels. Note this example will not work in Navigator 4 since it uses a DOM object not available in Navigator 4.

Object Example 02

This example expands on the Object Example 01 by using images and styled labels.

Combined Example 01

This example illustrates using more than one xbTreeWidgetStatic on a page by combining the Simple and Object examples.

CSS Classes

The display of xbTreeWidgetStatic trees are controlled via the use of three CSS classes. These class names can be customized by specifying the classprefix when creating the xbTreeWidgetStatic. If not otherwise specified, classprefix defaults to 'treewidget'.

classprefixcontainer

Name of CSS class for the container of the Tree Widget. Use this to position the tree widget or to style the widget as a whole.

classprefixhandle

Name of CSS class for the handles in a Tree Widget. Use this to style the widget's handles.

classprefixchildren

Name of CSS class for the child nodes in a Tree Widget. Use this to style the widget's children. For example, you can have an indented list by specifying position: relative; left:2em; or have a vertical collapsing list by specifying position: relative; left: 0em;

Properties

id

readonly Number - unique number for a particular instance of an xbTreeWidgetStatic which is managed via the constructor and the static class property xbTreeWidgetStatic._id. This property is used to generate unique ID's for the HTML Elements used to represent the tree data.

handles

readonly Object - with two properties, open and closed each containing a string of HTML to be used to represent the handle of an xbTreeWidgetStatic node in the open or closed state respectively.

labels

readonly Object - with two properties, open and closed each containing a string of HTML to be used to represent the label of an xbTreeWidgetStatic node in the open or closed state respectively.

classprefix

readonly String - containing the prefix of CSS classnames to be used when displaying the DHTML version of the Tree Widget. If not specified elsewhere the default value is 'treewidget'.

children

readonly Array - containing the children of the xbTreeWidgetStatic node.

Methods

xbTreeWidgetStatic(Object handles, Object labels, String classprefix)

Constructs an instance of the xbTreeWidgetStatic class.

Arguments:

• Object handles - contains two properties open and closed which contain the HTML strings used to represent the Tree Widget's handle in the open and closed state respectively.

• Object labels - contains two properties open and closed which contain the HTML strings used to represent the Tree Widget's handle in the open and closed state respectively.

• String classprefix - prefix of CSS classes used to style the Tree Widget. By specifying different classprefixes for different Tree Widgets on the same page you can customize the appearance of each Tree independently of the others.

Returns:

nothing

Support

Gecko/Netscape 6.x, Netscape Navigator 4+, Internet Explorer 4+, Opera

appendChild(xbTreeWidgetStatic child)

append a xbTreeWidgetStatic to the list of child nodes for this node

Arguments:

xbTreeWidgetStatic to be added as a child of this xbTreeWidgetStatic node.

Returns:

xbTreeWidgetStatic node that was appended.

toHTML()

returns the HTML representation of the xbTreeWidgetStatic node and it's children.

Arguments:

None

Returns:

String containing the HTML of the Tree Widget.

Global Functions

xbGetNextElement(HTMLElement element)

Used internally by the Tree Widget DHTML routines to locate the next sibling element.

Arguments:

HTMLElement element - starting point in the search.

Returns:

HTMLElement that is the next sibling of the specified element.

Support

Gecko/Netscape 6.x, Internet Explorer 5+, DOM HTML Compliant browsers

xbCreateTreeWidgetStaticFromObject(Function getChildren, Function getHandles, Function getLabels, Object obj, String classprefix)

Create a TreeWidget from a hierarchal JavaScript object.

Arguments:

• Function getChildren - reference to function which takes a JavaScript object as input and returns an array containing the list of objects/properties that are to be displayed as child nodes. Note that xbTreeWidgetStatic does not support recursive JavaScript data structures since all nods of the Tree Widget are added at construction. If you return a recursive reference in the list of child nodes you will cause infinite recursion... So DON'T DO THAT!

• Function getHandles - reference to function which takes a JavaScript object and a classprefix as input and returns an object which contains open and closed properties containing the HTML representing the Tree Widget's handle in open and closed states respectively.

• Function getLabels - reference to function which takes a JavaScript object and a classprefix as input and returns an object which contains open and closed properties containing the HTML representing the Tree Widget's label in open and closed states respectively.

• Object obj - reference to the JavaScript object to be displayed as a Tree Widget.

• String classprefix - prefix of CSS classnames to be used when displaying the Tree Widget.

Returns:

xbTreeWidgetStatic tree that was created.