Zebra API Doc

zebra.ui.tree.CompTree Class

Component tree component that expects other UI components to be a tree model values. In general the implementation lays out passed via tree model UI components as tree component nodes. For instance:

var tree = new zebra.ui.tree.Tree({
     value: new zebra.ui.Label("Label root item"),
     kids : [
           new zebra.ui.Checkbox("Checkbox Item"),
           new zebra.ui.Button("Button item"),
           new zebra.ui.Combo(["Combo item 1", "Combo item 2"])
    ]
});

But to prevent unexpected navigation it is better to use number of predefined with component tree UI components:

  • zebra.ui.tree.CompTree.Label
  • zebra.ui.tree.CompTree.Checkbox
  • zebra.ui.tree.CompTree.Combo

You can describe tree model keeping in mind special notation

var tree = new zebra.ui.tree.Tree({
     value: "Label root item",  // zebra.ui.tree.CompTree.Label
     kids : [
           "[ ] Checkbox Item 1", // unchecked zebra.ui.tree.CompTree.Checkbox
           "[x] Checkbox Item 2", // checked zebra.ui.tree.CompTree.Checkbox
           ["Combo item 1", "Combo item 2"] // zebra.ui.tree.CompTree.Combo
    ]
});

Constructor

zebra.ui.tree.CompTree

(
  • [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

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

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
)

Inherited from zebra.ui.tree.BaseTree:

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

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

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

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

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: