Class
zebkit.ui.Checkbox
mixed with <zebkit.ui.DrawFocusMarker> extends <zebkit.ui.EvStatePan> |
<zebkit.ui> |
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
ch.kids[0].setView(new zebkit.draw.ViewSet({
"*": "red",
"pressed.*": "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 check box component
var ch = new zebkit.ui.Checkbox("Checkbox");
// register a check box listener
ch.on(function(src) {
var s = src.getValue();
...
});
public | <Boolean> | getValue ( ) |
public | void | setGroup (g) |
public | void | setValue (v) |
public | void | switched (ch) |
public | void | toggle ( ) |
protected
|
<String> | toViewId (state) |
public
chainable
setGroup (g )
Attach the given check box tho the specified group Parameters:
|
public
chainable
setValue (v )
Set the check box state. Parameters:
|
public
void
switched (ch )
Called every time the check box state has been updated Parameters:
|
public
chainable
toggle ( )
Toggle check box state. |
@Override
zebkit.ui.StatePan
protected
<String>
toViewId (state )
Map the specified state into its symbolic name. Parameters:
Returns:
<String>
a symbolic name of the state |















