Zebra API Doc

zebra.ui.tree.Tree Class

Extends zebra.ui.Panel

Tree UI component that visualizes a tree data model. The model itself can be passed as JavaScript structure or as a instance of zebra.data.TreeModel. Internally tree component keeps the model always as zebra.data.TreeModel class instance:

var tree = new zebra.ui.tree.Tree({
     value: "Root",
     kids : [  "Item 1", "Item 2"]
});

or

var model = new zebra.data.TreeModel("Root");
model.add(model.root, "Item 1");
model.add(model.root, "Item 2");

var tree = new zebra.ui.tree.Tree(model);

Constructor

zebra.ui.tree.Tree

(
  • [model]
  • [b]
)

Parameters:

  • [model] Object | zebra.data.TreeModel optional

    a tree data model passed as JavaScript structure or as an instance

  • [b] Boolean optional

    the tree component items toggle state. true to have all items in opened state. of zebra.data.TreeModel class

Methods

getItemAt

(
  • root
  • x
  • y
)
zebra.data.Item

Get a tree item that is located at the given location.

Parameters:

  • root zebra.data.Item

    a starting tree node

  • x Integer

    a x coordinate

  • y Integer

    a y coordinate


Return: zebra.data.Item

a tree model item

getToogleView

(
  • i
)
zebra.ui.View protected

Get current toggle element view. The view depends on the state of tree item.

Parameters:


Return: zebra.ui.View

a toggle element view

isOpen

(
  • i
)
Boolean

Test if the given tree component item is opened

Parameters:


Return: Boolean

true if the given tree component item is opened

makeVisible

(
  • item
)

Make the given tree item visible. Tree component rendered content can takes more space than the UI component size is. In this case the content can be scrolled to make visible required tree item.

Parameters:

paintChild

(
  • g
  • root
  • index
)
Boolean protected

Paint children items of the given root tree item.

Parameters:

  • g 2DContext

    a graphical context

  • root zebra.data.Item

    a root tree item

  • index Integer

    an index


Return: Boolean

se

(
  • item
  • e
)
Boolean private

Initiate the given item editing if the specified event matches condition

Parameters:


Return: Boolean

return true if an item editing process has been started, false otherwise

select

(
  • an
)

Select the given item.

Parameters:

  • an zebra.data.Item

    item to be selected. Use null value to clear any selection

setEditorProvider

(
  • p
)

Set the given editor provider. The editor provider is a class that is used to decide which UI component has to be used as an item editor, how the editing should be triggered and how the edited value has to be fetched from an UI editor.

Parameters:

setLineColor

(
  • c
)

Set tree component connector lines color

Parameters:

  • c String

    a color

setModel

(
  • d
)

Set the given tree model to be visualized with the UI component.

Parameters:

setSelectable

(
  • b
)

Say if items of the tree component should be selectable

Parameters:

  • b Boolean

    true is tree component items can be selected

setViewProvider

(
  • p
)

Set tree component items view provider. Provider says how tree model items have to be visualized.

Parameters:

setViews

(
  • v
)

Set the number of views to customize rendering of different visual elements of the tree UI component. The following decorative elements can be customized:

  • "close" - closed tree item icon view
  • "open" - opened tree item icon view
  • "leaf" - leaf tree item icon view
  • "on" - toggle on view
  • "off" - toggle off view
  • "iselect" - a view to express an item selection when tree component doesn't hold focus
  • "aselect" - a view to express an item selection when tree component holds focus

For instance:

   // build tree UI component
   var tree = new zebra.ui.tree.Tree({
       value: "Root",
       kids: [
           "Item 1",
           "Item 2"
       ]
   });

   // set " [x] " text render for toggle on and 
   // " [o] " text render for toggle off tree elements
   tree.setViews({
       "on": new zebra.ui.TextRender(" [x] "),
       "off": new zebra.ui.TextRender(" [o] ")
   });

Parameters:

  • v Object

    dictionary of tree component decorative elements views

startEditing

(
  • item
)
protected

Start editing the given if an editor for the item has been defined.

Parameters:

stopEditing

(
  • true
)
protected

Stop editing currently edited tree item and apply or discard the result of the editing to tree data model.

Parameters:

  • true Boolean

    if the editing result has to be applied to tree data model

toggle

(
  • item
)

Toggle the given tree item

Parameters:

toggleAll

(
  • root
  • b
)

Toggle off or on recursively all items of the given item

Parameters:

  • root zebra.data.Item

    a starting item to toggle

  • b Boolean

    true if all items have to be in opened state and false otherwise

Attributes

editors

zebra.ui.tree.DefEditors readonly

A tree model editor provider

lnColor

String readonly

Tree component line color

model

zebra.data.TreeModel readonly

Tree data model the UI component visualizes

provider

zebra.ui.tree.DefsViews readonly

A tree model items view provider

selected

zebra.data.Item readonly

Selected tree item

Events

selected

Fired when a tree item has been selected

tree.bind(function selected(src, item) {
   ...
});

Event Parameters:

toggled

Fired when a tree item has been toggled

  tree.bind(function toggled(src, item) {
     ...    
  });

Event Parameters: