Zebra API Doc

zebra.ui.Checkbox Class

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:

  • "on.out" - checked and mouse cursor is out
  • "off.out" - un-checked and mouse cursor is out
  • "don" - disabled and checked,
  • "doff" - disabled and un-checked ,
  • "on.over" - checked and mouse cursor is over
  • "off.over" - un-checked and mouse cursor is out

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

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

   // change border when the component checked to green
   // otherwise set it to red
   ch.setBorder(new zebra.ui.ViewSet({
       "off.*": new zebra.ui.Border("red"),
       "on.*": new zebra.ui.Border("green")
   }));

   // customize checker box children UI component to show
   // green for checked and red for un-cheked states 
   ch.kids[0].setView(new zebra.ui.ViewSet({
       "off.*": "red",
       "on.*": "green"
   }));
   // sync current state with new look and feel
   ch.syncState();

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

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

   // register a checkbox listener
   ch.manager.bind(function(sm) {
       var s = sm.getValue();
       ...
   });

Constructor

zebra.ui.Checkbox

(
  • [label]
  • [m]
)

Parameters:

Methods

catchInput

(
  • c
)
Boolean

Inherited from zebra.ui.Composite:

The method is called to ask if the given children UI component has to be input events transparent

Parameters:


Return: Boolean

true if the given children component has to be input events transparent

getValue

() Boolean

Get the check box state


Return: Boolean

a check box state

setCanHaveFocus

(
  • b
)

Says if the component can hold focus or not

Parameters:

  • b Boolean

    true if the component can gain focus

setFocusAnchorComponent

(
  • c
)

Set the specified children component to be used as focus marker view anchor component. Anchor component is a component over that the focus marker view is painted.

Parameters:

setFocusMarkerView

(
  • c
)

Set the view that has to be rendered as focus marker when the component gains focus.

Parameters:

  • c String | zebra.ui.View | Function

    a view. The view can be a color or border string code or view or an implementation of zebra.ui.View "paint(g,x,y,w,h,t)" method.

setSwicthManager

(
  • m
)

Set the specified switch manager

Parameters:

  • m zebra.ui.SwicthManager

    a switch manager

setValue

(
  • b
)
chainable

Set the check box state

Parameters:

  • b Boolean

    a state

switched

(
  • b
)

Callback method that is called whenever a state of switch manager has been updated.

Parameters:

  • b Boolean

    a new state

toViewId

(
  • state
)
String protected

Map the specified state into its symbolic name.

Parameters:

  • state Integer

    a state


Return: String

a symbolic name of the state

Attributes

box

zebra.ui.Panel readonly

Reference to box component

canHaveFocus

Boolean readonly

Indicates if the component can have focus

focusMarkerView

zebra.ui.Panel readonly

Reference to an anchor focus marker component

manager

zebra.ui.SwitchManager readonly

A switch manager