xTree API 2 (WebFX)

arrayHelper

This object provides some useful methods for working with arrays.

Syntax

arrayHelper

Parameters

Static Methods

Name	Description
None.

Static Fields

Name	Type	Descripton
None.

Methods

Name Description

indexOf

Syntax

object.indexOf(a, o)

Arguments

Name	Type	Descripton
`a`		The array where the object is a member of
`o`		The object to get the index for

Return Type

void

Returns the index of an object in an array. If the object is not present in the array this returns -1

insertBefore

Syntax

object.insertBefore(a, o, o2)

Arguments

Name	Type	Descripton
`a`		The array to modify.
`o`		The object to insert
`o2`		The object to insert before

Return Type

void

Inserts an object before another object in an array. (The length increases by 1).

remove

Syntax

object.remove(a, o)

Arguments

Name	Type	Descripton
`a`		The array to remove the object from
`o`		The object to remove

Return Type

void

This removes the first instance of an object from an array (the length decreases with 1).

Fields

Name	Type	Descripton
None.

Events

Name	Descripton
None.

Remarks

None.

WebFXTree

This class extends WebFXTreeAbstractNode and therefore all methods and field available for WebFXTreeAbstractNode are also available for WebFXTree.

This is the root object of xTree and it is where everything begins. Create a WebFXTree object and then use add to add WebFXTreeItem objects to it.

Syntax

new WebFXTree(sText, oAction, sBehavior, sIcon, sOpenIcon)

Parameters

Name	Type	Descripton
`sText`		The text (HTML) to show as a label for the tree item
`oAction`		The action to do when the node is activated. If this is String then it is treated as an URL but you can also pass a Function object which will be called when activated.
`sBehavior`		This is used to decide when to show the open icon for folders. Supported values are "classic" and "explorer". When this is "explorer" selected folders show the open icon. For "classic" the open icon is shown for expanded folders.
`sIcon`		The image to use as icon
`sOpenIcon`		The image to use as open icon

Static Methods

Name	Description
None.

Static Fields

Name	Type	Descripton
None.

Methods

Name Description

getBehavior

Syntax

object.getBehavior()

Arguments

Name	Type	Descripton

Return Type

void

Returns the behavtion (classic or explorer) that is currently describing the open folder strategy.

getSelected

Syntax

object.getSelected()

Arguments

Name	Type	Descripton

Return Type

void

The currently selected tree node in the tree.

getShowExpandIcons

Syntax

object.getShowExpandIcons()

Arguments

Name	Type	Descripton

Return Type

void

Whether to show the expand (plus/minus) icons

getShowLines

Syntax

object.getShowLines()

Arguments

Name	Type	Descripton

Return Type

void

Whether to show the lines in the tree

getShowRootLines

Syntax

object.getShowRootLines()

Arguments

Name	Type	Descripton

Return Type

void

Whether to show the lines for the tree on the root level

getShowRootNode

Syntax

object.getShowRootNode()

Arguments

Name	Type	Descripton

Return Type

void

Whether to show the root node or not. Hiding the root node allows you to create a tree that looks like it has multiple roots.

getSuspendRedraw

Syntax

object.getSuspendRedraw()

Arguments

Name	Type	Descripton

Return Type

void

Whether redraws of the tree is suspended. Suspending redraws can be useful if a lot of changes are done to it which would each require a redraw.

onchange

Syntax

object.onchange()

Arguments

Name	Type	Descripton

Return Type

void

This method is called when the selected item is changed. Override this to provide custom handling for onchange.

setBehavior

Syntax

object.setBehavior()

Arguments

Name	Type	Descripton
		The desired icon behavior

Return Type

void

Sets the behavior for the tree. The behavior describes when to use the open icon for tree items.

setSelected

Syntax

object.setSelected(o)

Arguments

Name	Type	Descripton
`o`		The tree node to select

Return Type

void

Sets the selected node in the tree

setShowExpandIcons

Syntax

object.setShowExpandIcons(b)

Arguments

Name	Type	Descripton
`b`		Whether to show or hide the expand icons

Return Type

void

Sets whether to show the expand (plus/minus) icons

setShowLines

Syntax

object.setShowLines()

Arguments

Name	Type	Descripton
		Whether to show or hide

Return Type

void

Sets whether to show or hide the lines in the tree

setShowRoootNode

Syntax

object.setShowRoootNode(b)

Arguments

Name	Type	Descripton
`b`		Whether to show or hide the root node.

Return Type

void

Sets whether to show or hide the root node.

setShowRootLines

Syntax

object.setShowRootLines(b)

Arguments

Name	Type	Descripton
`b`		Whether to show or hide the lines

Return Type

void

Sets whether the root level lines should be drawn for the tree.

setSuspendRedraw

Syntax

object.setSuspendRedraw(b)

Arguments

Name	Type	Descripton
`b`		Whether to suspend redraws of the tree.

Return Type

void

Whether to suspend redraws of the tree.

write

Syntax

object.write()

Arguments

Name	Type	Descripton

Return Type

void

Does a document.write() of the HTML needed to draw the tree.

Fields

Name	Type	Descripton
None.

Events

Name	Descripton
None.

Remarks

WebFXTreeAbstractNode

This is the abstract base class for the nodes building up the tree.

Syntax

new WebFXTreeAbstractNode(sText, oAction)

Parameters

Name	Type	Descripton
`sText`		The HTML text to show as the label of the node
`oAction`		The action to do when the node is activated. If this is String then it is treated as an URL but you can also pass a Function object which will be called when activated.

Static Methods

Name	Description

Static Fields

Name	Type	Descripton
None.

Methods

Name Description

add

Syntax

object.add(oChild [, oBefore])

Arguments

Name	Type	Descripton
`oChild`		The child to add
`oBefore`		Optional. If provided then the new node is added before this one.

Return Type

void

Adds a node as a child to the current node.

collapse

Syntax

object.collapse()

Arguments

Name	Type	Descripton

Return Type

void

Collapses the node

collapseAll

Syntax

object.collapseAll()

Arguments

Name	Type	Descripton

Return Type

void

Collapses the node and all its descendants

collapseChildren

Syntax

object.collapseChildren()

Arguments

Name	Type	Descripton

Return Type

void

Collapse all the descendants of the node

contains

Syntax

object.contains(oDescendant)

Arguments

Name	Type	Descripton
`oDescendant`		The node to check if it is contained

Return Type

void

Whether this node contains another node. A node contains itself so if the argument is the same node this will return true.

create

Syntax

object.create()

Arguments

Name	Type	Descripton

Return Type

void

Creates the DOM element representing the node. This element can then be inserted into the document.

deselect

Syntax

object.deselect()

Arguments

Name	Type	Descripton

Return Type

void

Deselect the node

dispose

Syntax

object.dispose()

Arguments

Name	Type	Descripton

Return Type

void

This cleans up the objects. After the node has been disposed it cannot be used any more.

expand

Syntax

object.expand()

Arguments

Name	Type	Descripton

Return Type

void

Expands the node

expandAll

Syntax

object.expandAll()

Arguments

Name	Type	Descripton

Return Type

void

Expands the node and all its descendants

expandChildren

Syntax

object.expandChildren()

Arguments

Name	Type	Descripton

Return Type

void

Expands all the descendants of the node

findChildByText

Syntax

object.findChildByText(s [, n])

Arguments

Name	Type	Descripton
`s`		The text to look for. This can be either a string or a regular expression object.
`n`		Optional. The nth matching child to return. This is zero base so using 0 will return the first matching child. If this argument is not included the first matching child is returned.

Return Type

void

Returns the child with the given text. The second argument, which is optional tells which match to return. This allows you to return the second item that matches the text. You can also pass a regular expression as the first argument. If no child with a text matches then null is returned.

findNodeByText

Syntax

object.findNodeByText(s [, n])

Arguments

Name	Type	Descripton
`s`		The text to look for. This can be either a string or a regular expression object.
`n`		Optional. The nth matching node to return. This is zero base so using 0 will return the first matching node. If this argument is not included the first matching node is returned.

Return Type

void

Returns the node with the given text. The second argument, which is optional tells which match to return. This allows you to return the second item that matches the text. You can also pass a regular expression as the first argument. If no node with a text matches then null is returned. This searches the current node and all its descendants using inorder traversal.

focus

Syntax

object.focus()

Arguments

Name	Type	Descripton

Return Type

void

Focus the ndoe

getAction

Syntax

object.getAction()

Arguments

No Arguments.

Return Type

void

The action that should be invoked when clicking the item. This can be either a string or a function and if a string the browser will navigate to this page.

getChildrenElement

Syntax

object.getChildrenElement()

Arguments

No Arguments.

Return Type

void

Returns the element which contains all the children

getCreated

Syntax

object.getCreated()

Arguments

No Arguments.

Return Type

void

Whether the node has been rendered in the document

getDepth

Syntax

object.getDepth()

Arguments

No Arguments.

Return Type

void

The depth of the tree node

getElement

Syntax

object.getElement()

Arguments

No Arguments.

Return Type

void

Returns the element for the node.

getEventHandlersHtml

Syntax

object.getEventHandlersHtml()

Arguments

No Arguments.

Return Type

void

Returns the HTML needed to write the inline attribute event handlers. For example " onclick=\"something()\""

getExpanded

Syntax

object.getExpanded()

Arguments

No Arguments.

Return Type

void

Returns whether the node is expanded or not

getExpandIconElement

Syntax

object.getExpandIconElement()

Arguments

No Arguments.

Return Type

void

Returns the element used for the expand icon of the node

getExpandIconHtml

Syntax

object.getExpandIconHtml()

Arguments

No Arguments.

Return Type

void

The HTML code used to draw the expand (plus/minus) icon

getExpandIconSrc

Syntax

object.getExpandIconSrc()

Arguments

No Arguments.

Return Type

void

Returns the src for the image used as the expand icon.

getFirstChild

Syntax

object.getFirstChild()

Arguments

No Arguments.

Return Type

void

Returns the first child node

getFocused

Syntax

object.getFocused()

Arguments

No Arguments.

Return Type

void

Returns whether the node is currently focused.

getHtml

Syntax

object.getHtml()

Arguments

No Arguments.

Return Type

void

The HTML text shown on the label

getIcon

Syntax

object.getIcon()

Arguments

No Arguments.

Return Type

void

Returns the src for the icon

getIconElement

Syntax

object.getIconElement()

Arguments

No Arguments.

Return Type

void

Returns the element used for the icon of the node

getIconHtml

Syntax

object.getIconHtml()

Arguments

No Arguments.

Return Type

void

The HTML code for the icon part of the node.

getIconSrc

Syntax

object.getIconSrc()

Arguments

No Arguments.

Return Type

void

Returns the src for the image used for the icon.

getId

Syntax

object.getId()

Arguments

No Arguments.

Return Type

void

The id is used to identify the node and it needs to be unique.

getLabelElement

Syntax

object.getLabelElement()

Arguments

No Arguments.

Return Type

void

Returns the element used for the label part of the node

getLabelHtml

Syntax

object.getLabelHtml()

Arguments

No Arguments.

Return Type

void

Returns the HTML for the label part of the node.

getLastChild

Syntax

object.getLastChild()

Arguments

No Arguments.

Return Type

void

Returns the last child node

getLastShownDescendant

Syntax

object.getLastShownDescendant()

Arguments

No Arguments.

Return Type

void

Returns the last shown descendant in the subtree.

getLineStyle

Syntax

object.getLineStyle()

Arguments

No Arguments.

Return Type

void

Returns a fragment of style attribute value which is used to draw the line for the tree.

getLineStyle2

Syntax

object.getLineStyle2()

Arguments

No Arguments.

Return Type

void

Return the background position style value used with getLineStyle

getNextShownNode

Syntax

object.getNextShownNode()

Arguments

No Arguments.

Return Type

void

Returns the next shown node in the tree

getNextSibling

Syntax

object.getNextSibling()

Arguments

No Arguments.

Return Type

void

Returns the sibling after this or undefined if this is the last child.

getOpenIcon

Syntax

object.getOpenIcon()

Arguments

No Arguments.

Return Type

void

Returns the src for the open icon.

getParent

Syntax

object.getParent()

Arguments

No Arguments.

Return Type

void

This returns the parent node. For the root node this returns null.

getPreviousShownNode

Syntax

object.getPreviousShownNode()

Arguments

No Arguments.

Return Type

void

Returns the previous shown node in the tree

getPreviousSibling

Syntax

object.getPreviousSibling()

Arguments

No Arguments.

Return Type

void

Returns the node before this or undefined if there is no previous sibling

getRowClassName

Syntax

object.getRowClassName()

Arguments

No Arguments.

Return Type

void

Returns the class name for the row element

getRowElement

Syntax

object.getRowElement()

Arguments

No Arguments.

Return Type

void

Returns the element for the row part of the node.

getRowHtml

Syntax

object.getRowHtml()

Arguments

No Arguments.

Return Type

void

Returns the HTML needed to draw the row part of the node.

getTarget

Syntax

object.getTarget()

Arguments

No Arguments.

Return Type

void

Returns the target window/frame that the item should be opened in when this item is clicked.

getText

Syntax

object.getText()

Arguments

No Arguments.

Return Type

void

Returns the text of the label (this is the plain text version)

getToolTip

Syntax

object.getToolTip()

Arguments

No Arguments.

Return Type

void

The tool tip that should be shown for the item.

getTree

Syntax

object.getTree()

Arguments

No Arguments.

Return Type

void

Returns the root node of the tree

hasChildren

Syntax

object.hasChildren()

Arguments

Name	Type	Descripton

Return Type

void

Whether this node contains any children

isLastSibling

Syntax

object.isLastSibling()

Arguments

Name	Type	Descripton

Return Type

void

Whether this is the last child of the parent node

isSelected

Syntax

object.isSelected()

Arguments

Name	Type	Descripton

Return Type

void

Whether the node is selected.

openPath

Syntax

object.openPath(sPath [, bSelect [, bFocus]])

Arguments

Name	Type	Descripton
`sPath`		The path to open. For example: "/dhtml/xtree2/js"
`bSelect`		Optional. If true then the final node in the path is selected after it has been revealed
`bFocus`		Optional. If true then the final node in the path is focused after it has been revealed

Return Type

void

This takes a String representing the path of nodes and opens them all. The second and third argument are optional and the allow you to select and focus the last node in the path. The path consists of the text of the nodes separated with '/'. If the path starts with '/' then the path is relative to the root.

remove

Syntax

object.remove([oChild])

Arguments

Name	Type	Descripton
`oChild`		Optional. The child node to remove

Return Type

void

Removes a child node (or the node itself if no argument is provided)

reveal

Syntax

object.reveal()

Arguments

Name	Type	Descripton

Return Type

void

Expands all the parent nodes so that the node is revealed

select

Syntax

object.select()

Arguments

Name	Type	Descripton

Return Type

void

Select the node.

setAction

Syntax

object.setAction(oAction)

Arguments

Name	Type	Descripton
`oAction`		The action to do when the user activates the item.

Return Type

void

Sets the action that should be invoked when clicking the item. This can be either a string or a function and if a string the browser will navigate to this page.

setExpanded

Syntax

object.setExpanded(b)

Arguments

Name	Type	Descripton
`b`		Whether to expand or collapse the node

Return Type

void

Sets the expanded state

setHtml

Syntax

object.setHtml(s)

Arguments

Name	Type	Descripton
`s`		The HTML text to set on the label

Return Type

void

Sets the HTML text shown on the label. Be careful here so that you do not set this to invalid HTML because it might break the rendering

setIcon

Syntax

object.setIcon(s)

Arguments

Name	Type	Descripton
`s`		The URI (absolute or relative) to the icon image

Return Type

void

Sets the src for the icon image

setId

Syntax

object.setId(sId)

Arguments

Name	Type	Descripton
`sId`		The new id

Return Type

void

Changes the id of the node

setOpenIcon

Syntax

object.setOpenIcon(s)

Arguments

Name	Type	Descripton
`s`		The URI (absolute or relative) to the open icon image

Return Type

void

Sets the src for the open icon image

setTarget

Syntax

object.setTarget(s)

Arguments

Name	Type	Descripton
`s`		The window/frame name

Return Type

void

Sets the target window/frame that the item should be opened in when this item is clicked.

setText

Syntax

object.setText(s)

Arguments

Name	Type	Descripton
`s`		The plain text to set on the label

Return Type

void

Sets the text of the label. If this contains HTML code it will be encoded using entity references.

setToolTip

Syntax

object.setToolTip(s)

Arguments

Name	Type	Descripton
`s`		The tool tip text

Return Type

void

Sets the tool tip that should be shown for the item.

toggle

Syntax

object.toggle()

Arguments

Name	Type	Descripton

Return Type

void

Toggles the expand state of the node

toHtml

Syntax

object.toHtml()

Arguments

Name	Type	Descripton

Return Type

void

This generates the HTML needed to write the tree node and all its descendants

update

Syntax

object.update()

Arguments

Name	Type	Descripton

Return Type

void

Recreates the entire DOM tree for the node and replaces the old DOM tree with the new tree.

updateExpandIcon

Syntax

object.updateExpandIcon()

Arguments

Name	Type	Descripton

Return Type

void

This updates the expand (plus and minus) icon.

updateIcon

Syntax

object.updateIcon()

Arguments

Name	Type	Descripton

Return Type

void

This updates the icon of the node.

Fields

Name	Type	Descripton
None.

Events

Name	Descripton
None.

Remarks

None.

webFXTreeConfig

This object is used for some configuration options like the default icons and more.

Don't change these properties after your tree has been created.

Syntax

webFXTreeConfig

Parameters

Name	Type	Descripton
No parameters.

Static Methods

Name	Description
None.

Static Fields

Name	Type	Descripton
None.

Methods

Name	Description
None.

Fields

Name	Type	Descripton
`blankIcon`	`String`	Path to the image to use for an empty icon
`defaultAction`	`String`	The default action (address) to use for a node. Default is `null`
`defaultBehavior`	`String`	Whether to use 'classic' or 'explorer' behavior for the open icons
`defaultText`	`String`	The text to show if no text is set on the node
`fileIcon`	`String`	Path to the image to use for the file icon
`folderIcon`	`String`	Path to the image to use for the folder icon
`iIcon`	`String`	Path to the image to use for the I shaped line
`lIcon`	`String`	Path to the image to use for the L shaped line
`lMinusIcon`	`String`	Path to the image to use for the collapse icon in front of an L shaped line
`lPlusIcon`	`String`	Path to the image to use for the expand icon in front of an L shaped line
`minusIcon`	`String`	Path to the image to use for the collapse icon (no line behind)
`openFolderIcon`	`String`	Path to the image to use for the open folder icon
`openRootIcon`	`String`	Path to the image to use for the open root icon
`plusIcon`	`String`	Path to the image to use for the expand icon (no line behind)
`rootIcon`	`String`	Path to the image to use for the root icon
`tIcon`	`String`	Path to the image to use for the T shaped line
`tMinusIcon`	`String`	Path to the image to use for the collapse icon in front of an T shaped line
`tPlusIcon`	`String`	Path to the image to use for the expand icon in front of an T shaped line
`usePersistence`	`Boolean`	Whether persistance should be used or not.

Events

Name	Descripton
None.

Remarks

None.

WebFXTreeCookiePersistence

This class extends WebFXTreePersistence and therefore all methods and field available for WebFXTreePersistence are also available for WebFXTreeCookiePersistence.

This class is used to handle persistence of the expanded state of the tree nodes. It uses one cookie to store the id of all expanded nodes. The value of the cookie is the ids joined with a '+' character. For example:

"wfxt-3+wfxt-12+wfxt-22"

Syntax

new WebFXTreeCookiePersistence()

Parameters

Name	Type	Descripton
No parameters.

Static Methods

Name	Description

Static Fields

Name	Type	Descripton
None.

Methods

Name	Description
None.

Fields

Name	Type	Descripton
`cookieName`	This is the name of the cookie where the expand state is stored.

Events

Name	Descripton
None.

Remarks

webFXTreeHandler

This object is used to keep track of tree nodes.

Syntax

webFXTreeHandler

Parameters

Static Methods

Name	Description
None.

Static Fields

Name	Type	Descripton
None.

Methods

Name Description

addNode

Syntax

object.addNode(oNode)

Arguments

Name	Type	Descripton
`oNode`		The node to add

Return Type

void

Adds a node to the handler so that the handler can find it later. This is used internally and there is usually no need to call this method.

dispose

Syntax

object.dispose()

Arguments

Name	Type	Descripton

Return Type

void

Cleans up the tree handler and all the nodes it is currently handling.

getNodeById

Syntax

object.getNodeById(sId)

Arguments

Name	Type	Descripton
`sId`		The id of the tree node to return

Return Type

void

Returns the a node by a given id.

getUniqueId

Syntax

object.getUniqueId()

Arguments

Name	Type	Descripton

Return Type

void

Returns an id that is not previously used.

handleEvent

Syntax

object.handleEvent(e)

Arguments

Name	Type	Descripton
`e`		The event object used in the user initated event

Return Type

void

This is called internally when an UI even occured in a tree.

htmlToText

Syntax

object.htmlToText(s)

Arguments

Name	Type	Descripton
`s`		The HTML string to convert

Return Type

void

This takes an HTML formatted string and returns a plain text string.

removeNode

Syntax

object.removeNode(oNode)

Arguments

Name	Type	Descripton
`oNode`		The node to add

Return Type

void

Removes a node from the handler. This is used internally and there is usually no need to call this method.

textToHtml

Syntax

object.textToHtml(s)

Arguments

Name	Type	Descripton
`s`		The plain text string to convert

Return Type

void

This takes a plain text string and returns an HTML formatted string.

Fields

Name	Type	Descripton
`ie`	`Boolean`	Read only. Whether the user agent is Internet Explorer or not
`opera`	`Boolean`	Read only. Whether the user agent is Opera or not
`persistenceManager`	`WebFXTreePersistence`	The object handling the persistance of the expanded state for tree nodes

Events

Name	Descripton
None.

Remarks

None.

WebFXTreeItem

This class extends WebFXTreeAbstractNode and therefore all methods and field available for WebFXTreeAbstractNode are also available for WebFXTreeItem.

This is the basic tree item that the tree is built up from.

Syntax

new WebFXTreeItem(sText, oAction, eParent, sIcon, sOpenIcon)

Parameters

Name	Type	Descripton
`sText`		The text (HTML) to show as a label for the tree item
`oAction`		The action to do when the node is activated. If this is String then it is treated as an URL but you can also pass a Function object which will be called when activated.
`eParent`		Optional parent tree item. If provided then the item will be added as a child to eParent
`sIcon`		The image to use as icon
`sOpenIcon`		The image to use as open icon

Static Methods

Name	Description
None.

Static Fields

Name	Type	Descripton
None.

Methods

Name	Description
None.

Fields

Name	Type	Descripton
None.

Events

Name	Descripton
None.

Remarks

None.

WebFXTreePersistence

This class is used to handle persistence of the expanded state of tree items. This class is just a dummy implementation that does not persist the state. Use WebFXTreeCookiePersistence for a cookie based implementation.

Syntax

new WebFXTreePersistence()

Parameters

Name	Type	Descripton
No parameters.

Static Methods

Name	Description

Static Fields

Name	Type	Descripton
None.

Methods

Name Description

getExpanded

Syntax

object.getExpanded(oNode)

Arguments

Name	Type	Descripton
`oNode`		The node to test the expanded state for

Return Type

void

Whether the given node is expanded or not.

setExpanded

Syntax

object.setExpanded(oNode, bOpen)

Arguments

Name	Type	Descripton
`oNode`		The node to persist the expanded state for
`bOpen`		Whether the node is expanded or not

Return Type

void

Persists the expanded state for a node.

Fields

Name	Type	Descripton
None.

Events

Name	Descripton
None.

Remarks

Globals

Functions

Name	Description
None.

Objects

Name	Type	Descripton
`arrayHelper`	`Object`	This object provides some useful methods when working with arrays
`webFXTreeConfig`	`Object`	This object contains some configuration settings for the trees
`webFXTreeHandler`	`Object`	This object keeps track of tree nodes