Zebra API Doc

zebra.ui.tree.BaseTree Class

Extends zebra.ui.Panel

Abstract tree component that can used as basement for building own tree components. The component is responsible for rendering tree, calculating tree nodes metrics, computing visible area, organizing basic user interaction. Classes that inherit it has to provide the following important things:

A tree model item metric Developers have to implement "getItemPreferredSize(item)" method to say which size the given tree item wants to have. Tree node item rendering If necessary developers have to implement the way a tree item has to be visualized by implementing "this.paintItem(...)" method

Constructor

zebra.ui.tree.BaseTree

(
  • a
  • [nodeState]
)

Parameters:

  • a zebra.data.TreeModel | Object

    tree model. It can be an instance of tree model class or an object that described tree model. An example of such object is shown below:

       {
           value : "Root",
           kids  : [
               {
                   value: "Child 1",
                   kids :[
                       "Sub child 1"
                   ]
               },
               "Child 2",
               "Child 3"
           ]
       }
  • [nodeState] Boolean optional

    a default tree nodes state (expanded or collapsed)

Methods

getIM

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

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

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

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

Get calculated for the given tree model item metrics

Parameters:


Return: Object

an tree model item metrics. Th

getItemPreferredSize

(
  • root
)
Object protected

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}
           }

getToggleBounds

(
  • root
)
Object protected

Get icon element bounds for the given tree model item.

Parameters:


Return: Object

a structure that keeps an item icon location and size:

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

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

paintItem

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

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

select

(
  • an
)

Select the given item.

Parameters:

  • an zebra.data.Item

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

setGaps

(
  • gx
  • gy
)

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
)

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

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

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

gapx

Integer readonly

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

Default: 2

gapy

Integer readonly

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

Default: 2

lnColor

String readonly

Tree component line color

selected

zebra.data.Item readonly

Selected tree model item

Default: null

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: