Zebra API Doc

zebra.ui.StatePan Class

State panel class. The class is UI component that allows to customize the component face, background and border depending on the component state. Number and names of states the component can have is defined by developers. To bind a view to the specified state use zebra.ui.ViewSet class. For instance if a component has to support two states : "state1" and "state2" you can do it as following:

   // create state component
   var p = new zebra.ui.StatePan();

   // define border view that contains views for "state1" and "state2"
   p.setBorder({
       "state1": new zebra.ui.Border("red", 1),
       "state1": new zebra.ui.Border("blue", 2)

   });

   // define background view that contains views for "state1" and "state2"
   p.setBorder({
       "state1": "yellow",
       "state1": "green"
   });

   // set component state
   p.setState("state1");

State component children components can listening when the state of the component has been updated by implementing "parentStateUpdated(o,n,id)" method. It gets old state, new state and a view id that is mapped to the new state. The feature is useful if we are developing a composite components whose children component also should react to a state changing.

Constructor

zebra.ui.StatePan

()

Item Index

Attributes

Methods

setState

(
  • s
)

Set the component state

Parameters:

  • s Object

    a state

stateUpdated

(
  • o
  • n
)

Called every time the component state has been updated

Parameters:

  • o Integer

    a previous component state

  • n Integer

    a new component state

syncState

() protected

Refresh state

toViewId

(
  • s
)
String

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

Current component state