Class zebkit.ui.Tabs
mixed with <zebkit.ui.DecorationViews>
extends <zebkit.ui.Panel>
<zebkit.ui>

Tabs UI panel. The component is used to organize switching between number of pages where every page is an UI component.

Filling tabs component with pages is the same to how you add an UI component to a panel. For instance in the example below three pages with "Titl1", "Title2", "Title3" are added:

var tabs = new zebkit.ui.Tabs();
tabs.add("Title1", new zebkit.ui.Label("Label as a page"));
tabs.add("Title2", new zebkit.ui.Button("Button as a page"));
tabs.add("Title3", new zebkit.ui.TextArea("Text area as a page"));

You can access tabs pages UI component the same way like you access a panel children components

...
tabs.kids[0] // access the first page

And you can remove it with standard panel inherited API:

...
tabs.removeAt(0); // remove first tab page

To customize tab page caption and icon you should access tab object and do it with API it provides:

 // update a tab caption
 tabs.getTab(0).setCaption("Test");

 // update a tab icon
 tabs.getTab(0).setIcon("my.gif");

 // set a particular font and color for the tab in selected state
 tabs.getTab(0).setColor(true, "blue");
 tabs.getTab(0).setFont(true, new zebkit.Font("Arial", "bold", 16));

 // set other caption for the tab in not selected state
 tabs.getTab(0).setCaption(false, "Test");
Constructor:
zebkit.ui.Tabs ([o])

Parameters:
  • [o] <String>

    the tab panel orientation:

    "top"
    "bottom"
    "left"
    "right"



public void drawMarker (g, r)
public void enableTab (i, b)
public <zebkit.ui.Tabs.TabView> getTab (pageIndex)
public <Integer> getTabAt (x, y)
protected <Object> getTabBounds (i)
public <Boolean> isTabEnabled (index)
public void keyPressed (e)
public <Integer> next (page, d)
public void paintTab (g, pageIndex)
public void pointerClicked (e)
public void pointerDragEnded (e)
public void pointerExited (e)
public void pointerMoved (e)
public void recalc ( )
public void select (index)
public void setAlignment (o)
public void setPageGaps (vg, hg)
public void setSideSpace (sideSpace)
public void setViews (a)


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


public void drawMarker (g, r)

Draw currently activate tab page marker.


Parameters:
public chainable enableTab (i, b)

Set enabled state for the given tab page


Parameters:
  • i <Integer>

    a tab page index

  • b <Boolean>

    a tab page enabled state

public <zebkit.ui.Tabs.TabView> getTab (pageIndex)

Get the given tab. Using the tab you can control tab caption, icon.


Parameters:
  • pageIndex <Integer>

    a tab page index


public <Integer> getTabAt (x, y)

Get tab index located at the given location


Parameters:
  • x <Integer>

    a x coordinate

  • y <Integer>

    a y coordinate


Returns: <Integer>

an index of the tab that is detected at the given location. -1 if no any tab can be found

protected <Object> getTabBounds (i)

Get the given tab page title rectangular bounds


Parameters:
  • i <Integer>

    a tab page index


Returns: <Object>

a tab page rectangular bounds

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

public <Boolean> isTabEnabled (index)

Test if the given tab page is in enabled state


Parameters:
  • index <Integer>

    a tab page index


Returns: <Boolean>

a tab page state

public void keyPressed (e)

Define key pressed event handler


Parameters:
public <Integer> next (page, d)

Navigate to a next tab page following the given direction starting from the given page


Parameters:
  • page <Integer>

    a starting page index

  • d <Integer>

    a navigation direction. 1 means forward and -1 means backward navigation.


Returns: <Integer>

a new tab page index

public void paintTab (g, pageIndex)

Paint the given tab page title


Parameters:
public void pointerClicked (e)

Define pointer clicked event handler


Parameters:
public void pointerDragEnded (e)

Define pointer drag ended event handler


Parameters:
public void pointerExited (e)

Define pointer exited event handler


Parameters:
public void pointerMoved (e)

Define pointer moved event handler


Parameters:
@Override zebkit.layout.Layoutable
public void recalc ( )

Define recalc method to compute the component metrical characteristics

public chainable select (index)

Switch to the given tab page


Parameters:
  • index <Integer>

    a tab page index to be navigated

public chainable setAlignment (o)

Set the tab page element alignments


Parameters:
  • o <String>

    an alignment. The valid value is one of the following: "left", "right", "top", "bottom"

public chainable setPageGaps (vg, hg)

Set tab page vertical and horizontal gaps


Parameters:
  • vg <Integer>

    a vertical gaps

  • hg <Integer>

    a horizontal gaps

public chainable setSideSpace (sideSpace)

Set tab side spaces.


Parameters:
  • sideSpace <Integer>

    [description]

@Override zebkit.ui.DecorationViews
public void setViews (a)

Set number of views to render different Tab component elements


Parameters:
  • a <Object>

    set of views as dictionary where key is a view name and the value is a view instance, string(for color), or render function. The following view elements can be passed:

    {
       "out"       : <view to render not selected tab page>,
       "over"      : <view to render a tab page when pointer is over>
       "selected"  : <a view to render selected tab page>
       "marker"    : <a marker view to be rendered around tab page title>
    }


Inherited attributes:
public zebkit.draw.View bg    public zebkit.draw.View border    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 <Boolean> canHaveFocus /* Overwritten from canHaveFocus */

Declare can have focus attribute to make the component focusable

public <String> orient

Tab orientation

public <Integer> selectedIndex

Selected tab page index

public <Integer> sideSpace

Sides gap




selected

Fired when a new tab page has been selected

tabs.on(function(src, selectedIndex) {
   ...
});

Parameters:
  • src <zebkit.ui.Tabs>

    a tabs component that triggers the event

  • selectedIndex <Integer>

    a tab page index that has been selected