Class zebkit.ui.Checkbox
mixed with <zebkit.ui.FocusableComposite>
extends <zebkit.ui.EvStatePan>

Check-box UI component. The component is a container that consists from two other UI components:

  • Box component to keep checker indicator
  • Label component to paint label

Developers are free to customize the component as they want. There is no limitation regarding how the box and label components have to be laid out, which UI components have to be used as the box or label components, etc. The check box extends state panel component and re-map states to own views IDs:

  • "pressed.out" - checked and pointer cursor is out
  • "out" - un-checked and pointer cursor is out
  • "pressed.disabled" - disabled and checked,
  • "disabled" - disabled and un-checked ,
  • "pressed.over" - checked and pointer cursor is over
  • "over" - un-checked and pointer cursor is out

Customize is quite similar to what explained for zebkit.ui.EvStatePan:

  // create checkbox component
  var ch = new zebkit.ui.Checkbox("Checkbox");

  // change border when the component checked to green
  // otherwise set it to red
  ch.setBorder(new zebkit.draw.ViewSet({
      "*": new zebkit.draw.Border("red"),
      "pressed.*": new zebkit.draw.Border("green")

  // customize checker box children UI component to show
  // green for checked and red for un-cheked states[0].setView(new zebkit.draw.ViewSet({
      "*": "red",
      "pressed.*": "green"
  // sync current state with new look and feel

Listening checked event should be done by registering a listener in the check box switch manager as follow:

  // create check box component
  var ch = new zebkit.ui.Checkbox("Checkbox");

  // register a check box listener
  ch.on(function(src) {
      var s = src.getValue();
zebkit.ui.Checkbox ([label])


public <Boolean> getValue ( )
public void setGroup (g)
public void setValue (v)
public void switched (ch)
public void toggle ( )
protected <String> toViewId (state)

Inherited methods:
$setConstraints(c)    add(constr, d)    byConstraints([p], c)    byPath(path, [cb])    calcPreferredSize(t)    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( )    keyPressed(e)    keyReleased(e)    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)    pointerDragged(e)    pointerEntered(e)    pointerExited(e)    pointerPressed(e)    pointerReleased(e)    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)    setCanHaveFocus(b)    setConstraints(ctr)    setEnabled(b)    setFocusAnchorComponent(c)    setFocusMarkerView(c)    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)    setState(s)    setTopPadding(top)    setView(v)    setVisible(b)    stateUpdated(o, n)    syncState( )    toBack( )    toFront( )    toPreferredHeight( )    toPreferredSize( )    toPreferredWidth( )    toView(target)    validate( )    validateMetric( )    vrp( )   

public <Boolean> getValue ( )

Get the check box state

Returns: <Boolean>

a state

public chainable setGroup (g)

Attach the given check box tho the specified group

public chainable setValue (v)

Set the check box state.

  • v <Boolean>

    a state of the check box

public void switched (ch)

Called every time the check box state has been updated

public chainable toggle ( )

Toggle check box state.

@Override zebkit.ui.StatePan
protected <String> toViewId (state)

Map the specified state into its symbolic name.

Returns: <String>

a symbolic name of the state

Inherited attributes:
public zebkit.draw.View bg    public zebkit.draw.View border    public Boolean canHaveFocus    public Boolean catchInput    public Object constraints    public zebkit.ui.Panel focusComponent    public Number focusMarkerGaps    public zebkit.ui.Panel focusMarkerView    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 Object state    public zebkit.draw.View view    public Integer width    public Integer x    public Integer y   

public <zebkit.ui.Panel> box

Reference to box component

protected <Boolean> value

Check box state