Class zebkit.ui.tree.BaseTree
mixed with <zebkit.ui.DecorationViews>
extends <zebkit.ui.Panel>
<zebkit.ui.tree>

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:
zebkit.ui.tree.BaseTree (a, [nodeState])

Parameters:
  • a <zebkit.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>

    a default tree nodes state (expanded or collapsed)




Inherited methods:
$setConstraints(c)    add(constr, d)    byConstraints([p], c)    byPath(path, [cb])    calcPreferredSize(target)    doLayout( )    fire(event, [path], [params])    focused( )    getBottom( )    getCanvas( )    getComponentAt(x, y)    getHorPadding( )    getLeft( )    getPreferredSize( )    getRight( )    getTop( )    getVerPadding( )    hasFocus( )    indexOf(c)    insert(i, constr, d)    invalidate( )    invalidateLayout( )    kidAdded(index, constr, l)    kidRemoved(i, l)    laidout( )    load(JSON)    off([eventName], [path], [cb])    on([eventName], [path], cb)    paintComponent(g)    paintViewAt(g, ax, ay, v)    properties([path], props)    property([path], name, value)    recalc( )    relocated(px, py)    remove(c)    removeAll( )    removeAt(i)    removeByConstraints(ctr)    removeMe([after])    repaint([x], [y], [w], [h])    requestFocus( )    requestFocusIn([timeout])    resized(pw, ph)    setAt(i, d)    setBackground(v)    setBorder([v])    setBottomPadding(bottom)    setBounds(x, y, w, h)    setByConstraints(constr, c)    setConstraints(ctr)    setEnabled(b)    setId(id)    setKids(a)    setLayout(m)    setLeftPadding(left)    setLocation(xx, yy)    setPadding(v)    setParent(o)    setPreferredSize(w, h)    setProperties([path], props)    setRightPadding(right)    setSize(w, h)    setTopPadding(top)    setVisible(b)    toBack( )    toFront( )    toPreferredHeight( )    toPreferredSize( )    toPreferredWidth( )    toView(target)    validate( )    validateMetric( )    vrp( )   


protected <zebkit.ui.tree.ItemMetric> getIM (item)

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


Parameters:
Returns: <zebkit.ui.tree.ItemMetric>

a tree node metrics

public <zebkit.data.Item> getItemAt ([root], x, y)

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


Parameters:
  • [root] <zebkit.data.Item>

    a starting tree node

  • x <Integer>

    a x coordinate

  • y <Integer>

    a y coordinate


Returns: <zebkit.data.Item>

a tree model item

protected <Object> getItemBounds (root)

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


Parameters:
Returns: <Object>

a structure that keeps an item view location and size:

               {
                   x: {Integer},
                   y: {Integer},
                   width: {Integer},
                   height: {Integer}
               }
public <Object> getItemMetrics (i)

Get calculated for the given tree model item metrics


Parameters:
Returns: <Object>

an tree model item metrics. Th

protected <Object> getItemPreferredSize (root)

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:
Returns: <Object>

a structure that keeps an item preferred size:

{
     width: {Integer},
     height: {Integer}
}
protected <Object> getToggleBounds (root)

Get icon element bounds for the given tree model item.


Parameters:
Returns: <Object>

a structure that keeps an item icon location and size:

{
    x: {Integer},
    y: {Integer},
    width: {Integer},
    height: {Integer}
}
protected <Object> getToggleBounds (root)

Get toggle element bounds for the given tree model item.


Parameters:
Returns: <Object>

a structure that keeps an item toggle location and size:

{
    x: {Integer},
    y: {Integer},
    width: {Integer},
    height: {Integer}
}
protected <zebkit.draw.View> getToogleView (i)

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


Parameters:
Returns: <zebkit.draw.View>

a toggle element view

public <Boolean> isOpen (i)

Test if the given tree component item is opened


Parameters:
Returns: <Boolean>

true if the given tree component item is opened

public void 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:
protected <Boolean> paintChild (g, root, index)

Paint children items of the given root tree item.


Parameters:
Returns: <Boolean>
protected void paintItem (g, root, node, x, y)

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:
public void select (item)

Select the given item.


Parameters:
  • item <zebkit.data.Item>

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

public chainable 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

public chainable setLineColor (c)

Set tree component connector lines color


Parameters:
public chainable setModel (d)

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


Parameters:
public void setSelectable (b)

Say if items of the tree component should be selectable


Parameters:
  • b <Boolean>

    true is tree component items can be selected

@Override zebkit.ui.DecorationViews
public chainable 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:

  • "collapsedSign" - closed tree item icon view
  • "expandedSign" - opened tree item icon view
  • "leafSign" - leaf tree item icon view
  • "expandedToggle" - toggle on view
  • "collapsedToggle" - toggle off view
  • "focusOffSelect" - a view to express an item selection when tree component doesn't hold focus
  • "focusOnSelect" - a view to express an item selection when tree component holds focus

For instance:

       // build tree UI component
       var tree = new zebkit.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({
           "expandedToggle" : new zebkit.draw.TextRender(" [x] "),
           "collapsedToggle": new zebkit.draw.TextRender(" [o] ")
       });

Parameters:
  • v <Object>

    dictionary of tree component decorative elements views

public chainable toggle (item)

Toggle the given tree item


Parameters:
public chainable toggleAll (root, b)

Toggle off or on recursively all items of the given item


Parameters:
  • root <zebkit.data.Item>

    a starting item to toggle

  • b <Boolean>

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

protected void togglePressed (root)

Called every time a pointer pressed in toggle area.


Parameters:


Inherited attributes:
public zebkit.draw.View bg    public zebkit.draw.View border    public Boolean canHaveFocus    public Object constraints    public Integer height    public Boolean isEnabled    public Boolean isValid    public Boolean isVisible    public Array kids    public zebkit.layout.Layout layout    public zebkit.layout.Layoutable parent    public Integer width    public Integer x    public Integer y   



public <Integer> gapx

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

public <Integer> gapy

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

public <String> lnColor

Tree component line color

public <zebkit.data.Item> selected

Selected tree model item




editingStarted

Fired when a tree item editing has been started

     tree.on("editingStarted", function(src, item, editor) {
        ...
     });

Parameters:
editingStopped

Fired when a tree item editing has been stopped

     tree.on("editingStopped", function(src, item, oldValue, editor, isApplied) {
        ...
     });

Parameters:
  • src <zebkit.ui.tree.BaseTree>

    a tree component that triggers the event

  • item <zebkit.data.Item>

    a tree item that has been edited

  • oldValue <Object>

    an old value of the edited tree item

  • editor <zebkit.ui.Panel>

    an editor to be used to edit the given item

  • isApplied <Boolean>

    flag that indicates if the edited value has been applied to the given tree item

selected

Fired when a tree item has been selected

     tree.on("selected", function(src, prevItem) {
        ...
     });

Parameters:
toggled

Fired when a tree item has been toggled

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

Parameters: