Zebra API Doc

zebra.ui.EvStatePan Class

Event state panel class. The class implements UI component whose face, border and background view depends on its input events state. The component is good basis for creation dynamic view UI components.The state the component can be is:

  • over the mouse cursor is inside the component
  • out the mouse cursor is outside the component
  • pressed over the mouse cursor is inside the component and an action mouse button or key is pressed
  • pressed out the mouse cursor is outside the component and an action mouse button or key is pressed
  • disabled the component is disabled

The view border, background or face should be set as "zebra.ui.ViewSet" where an required for the given component state view is identified by an id. By default corresponding to component states views IDs are the following: "over", "pressed.over", "out", "pressed.out", "disabled". Imagine for example we have two colors and we need to change between the colors every time mouse cursor is over/out of the component:

// create state panel
var statePan = new zebra.ui.EvStatePan();

// add dynamically updated background
statePan.setBackground(new zebra.ui.ViewSet({
   "over": "red",
   "out": "blue"
}));

Alone with background border view can be done also dynamic

// add dynamically updated border
statePan.setBorder(new zebra.ui.ViewSet({
   "over": new zebra.ui.Border("green", 4, 8),
   "out": null
}));

Additionally the UI component allows developer to specify whether the component can hold input focus and which UI component has to be considered as the focus marker. The focus marker component is used as anchor to paint focus marker view. In simple case the view can be just a border. So border will be rendered around the focus marker component:

// create state panel that contains one label component
var statePan = new zebra.ui.EvStatePan();
var lab      = new zebra.ui.Label("Focus marker label");
lab.setPadding(6);
statePan.setPadding(6);
statePan.setLayout(new zebra.layout.BorderLayout());
statePan.add(zebra.layout.CENTER, lab);

// set label as an anchor for focus border indicator
statePan.setFocusAnchorComponent(lab);
statePan.setFocusMarkerView("plain");

Constructor

zebra.ui.EvStatePan

()

Methods

childInputEvent

(
  • e
)

Define children components events handler

Parameters:

keyPressed

(
  • e
)

Define key pressed events handler

Parameters:

keyReleased

(
  • e
)

Define key released events handler

Parameters:

mouseDragged

(
  • e
)

Define mouse dragged events handler

Parameters:

mouseEntered

(
  • e
)

Define mouse entered events handler

Parameters:

mouseExited

(
  • e
)

Define mouse exited events handler

Parameters:

mousePressed

(
  • e
)

Define mouse pressed events handler

Parameters:

mouseReleased

(
  • e
)

Define mouse released events handler

Parameters:

setState

(
  • s
)

Inherited from zebra.ui.StatePan:

Set the component state

Parameters:

  • s Object

    a state

stateUpdated

(
  • o
  • n
)

Inherited from zebra.ui.StatePan:

Called every time the component state has been updated

Parameters:

  • o Integer

    a previous component state

  • n Integer

    a new component state

syncState

() protected

Inherited from zebra.ui.StatePan:

Refresh state

toViewId

(
  • s
)
String

Inherited from zebra.ui.StatePan:

Define the method if the state value has to be somehow converted to a view id. By default the state value itself is used as a view id.

Parameters:

  • s Object

    a state to be converted


Return: String

a view ID

Attributes

state

Object readonly

Inherited from zebra.ui.StatePan:

Current component state