Zebra API Doc

zebra.ui.tree.Tree Class

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);

Tree model rendering is fully customizable by defining an own views provider. Default views provider renders tree model item as text. The tree node can be made editable by defining an editor provider. By default tree modes are not editable.

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.

Methods

getIM

(
  • i
)
zebra.ui.tree.$IM protected

Inherited from zebra.ui.tree.BaseTree:

Get a tree node metrics by the given tree model item.

Parameters:


Return: zebra.ui.tree.$IM

a tree node metrics

getItemAt

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

Inherited from zebra.ui.tree.BaseTree:

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

Parameters:

  • [root] zebra.data.Item optional

    a starting tree node

  • x Integer

    a x coordinate

  • y Integer

    a y coordinate


Return: zebra.data.Item

a tree model item

getItemBounds

(
  • root
)
Object protected

Inherited from zebra.ui.tree.BaseTree:

Get tree model item metrical bounds (location and size).

Parameters:


Return: Object

a structure that keeps an item view location and size:

           {
               x: {Integer},
               y: {Integer},
               width: {Integer},
               height: {Integer}
           }

getItemMetrics

(
  • i
)
Object

Inherited from zebra.ui.tree.BaseTree:

Get calculated for the given tree model item metrics

Parameters:


Return: Object

an tree model item metrics. Th

getItemPreferredSize

(
  • root
)
Object protected

Inherited from zebra.ui.tree.BaseTree:

An abstract method that a concrete tree component implementations have to override. The method has to return a preferred size the given tree model item wants to have.

Parameters:


Return: Object

a structure that keeps an item preferred size:

           {
               width: {Integer},
               height: {Integer}
           }

getToggleBounds

(
  • root
)
Object protected

Get toggle element bounds for the given tree model item.

Parameters:


Return: Object

a structure that keeps an item toggle location and size:

           {
               x: {Integer},
               y: {Integer},
               width: {Integer},
               height: {Integer}
           }

getToogleView

(
  • i
)
zebra.ui.View protected

Inherited from zebra.ui.tree.BaseTree:

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

Inherited from zebra.ui.tree.BaseTree:

Test if the given tree component item is opened

Parameters:


Return: Boolean

true if the given tree component item is opened

makeVisible

(
  • item
)

Inherited from zebra.ui.tree.BaseTree:

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

Inherited from zebra.ui.tree.BaseTree:

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

paintItem

(
  • g
  • root
  • node
  • x
  • y
)
protected

Inherited from zebra.ui.tree.BaseTree:

An abstract method that a concrete tree component implementations should override. The method has to render the given tree node of the specified tree model item at the given location

Parameters:

  • g 2DContext

    a graphical context

  • root zebra.data.Item

    a tree model item to be rendered

  • node zebra.ui.tree.$IM

    a tree node metrics

  • x Ineteger

    a x location where the tree node has to be rendered

  • y Ineteger

    a y location where the tree node has to be rendered

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
)

Inherited from zebra.ui.tree.BaseTree:

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:

setGaps

(
  • gx
  • gy
)

Inherited from zebra.ui.tree.BaseTree:

Set the given horizontal gaps between tree node graphical elements: toggle, icon, item view

Parameters:

  • gx Integer

    horizontal gap

  • gy Integer

    vertical gap

setLineColor

(
  • c
)

Inherited from zebra.ui.tree.BaseTree:

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
)

Inherited from zebra.ui.tree.BaseTree:

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
)

Inherited from zebra.ui.tree.BaseTree:

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
)

Inherited from zebra.ui.tree.BaseTree:

Toggle the given tree item

Parameters:

toggleAll

(
  • root
  • b
)

Inherited from zebra.ui.tree.BaseTree:

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

Default: null

gapx

Integer readonly

Inherited from zebra.ui.tree.BaseTree:

Horizontal gap between a node elements: toggle, icons and tree item view

Default: 2

gapy

Integer readonly

Inherited from zebra.ui.tree.BaseTree:

Vertical gap between a node elements: toggle, icons and tree item view

Default: 2

lnColor

String readonly

Inherited from zebra.ui.tree.BaseTree:

Tree component line color

provider

zebra.ui.tree.DefsViews readonly

A tree model items view provider

Default: an instance of zebra.ui.tree.DefsViews

selected

zebra.data.Item readonly

Inherited from zebra.ui.tree.BaseTree:

Selected tree model item

Default: null

Events

selected

Inherited from zebra.ui.tree.BaseTree:

Fired when a tree item has been selected

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

Event Parameters:

toggled

Inherited from zebra.ui.tree.BaseTree:

Fired when a tree item has been toggled

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

Event Parameters: