Mapping variable changes to widget states
Introduction
Consider a simple button:
<button label="myButton' label="Test"> </button>
Now, if you want to link a variable's value to a widget property like "state", the interface designer wizard will create a binding element for you which set's the widget property "state" to the variables value:
<button label="myButton' label="Test">
<d-xscript bidirectional="false"
mode="1"
targetproperty="state"
sourceevent="onDriverVariableChanged"
sourceeventvaluepath="item.value"
sourceeventnamepath="item.name"
block="variable://deviceScope=user_devices&device=bc09b5c4-cfe6-b621-c412-407dbb7bcef8&driver=9db866a4-bb3e-137b-ae23-793b729c44f8&driverScope=user_drivers&block=74e15697-d98e-a96b-f57f-6b8199ed7ca1"/>
</button>
Every time the variable changes, it will set the widget property "state" to the variable's value.
Now lets add some states which add CSS classes:
<button label="PlayState" state="1">
<d-xscript bidirectional="false"
mode="1"
targetproperty="state"
sourceevent="onDriverVariableChanged"
sourceeventvaluepath="item.value"
sourceeventnamepath="item.name"
block="variable://deviceScope=user_devices&device=bc09b5c4-cfe6-b621-c412-407dbb7bcef8&driver=9db866a4-bb3e-137b-ae23-793b729c44f8&driverScope=user_drivers&block=74e15697-d98e-a96b-f57f-6b8199ed7ca1"/>
<d-xstate-css name="1" cssClass="state_1"></d-xstate-css>
<d-xstate-css name="2" cssClass="state_2"></d-xstate-css>
</button>
As soon the variable's value is 1, it will activate the state with the name "1". In this case, it's adding the CSS class "state_1" to the button.
Rejecting state selection for variable changes
There are moments where you don't want to apply a state when the variable changes. This can be done with the "accept" function. Such expression
can be defined as part of the
<button label="PlayState" state="1">
<d-xscript .... accept="accept">
<d-script name="accept">
var value = arguments[0]; //variable value
return value ==1 || value ==2;
</d-script>
</d-xscript>
<d-xstate-css name="1" cssClass="state_1"></d-xstate-css>
</button>
Transforming variable value to another state name
Sometimes a variable may not have very friendly values or at least values which can't be used as state name. In this case you can "transform" or map a variable value to a state name. For this you can define a transform function:
For example, we want to activate the state named "another state" when our variable value is "foo";
<button label="PlayState" state="1">
<d-xscript .... transform="transform">
<d-script name="transform">
var value = arguments[0]; //variable value
if(value === "foo"){
return "another state";
}
return null; //return nothing if you want let the default behaviour take place
</d-script>
</d-xscript>
<d-xstate-css name="1" cssClass="state_1"></d-xstate-css>
<d-xstate-css name="another state" cssClass="anotherStateClassName"></d-xstate-css>
</button>