123 lines
3.6 KiB
Markdown
123 lines
3.6 KiB
Markdown
### Mapping variable changes to widget states
|
|
|
|
#### Introduction
|
|
|
|
Consider a simple button:
|
|
|
|
```html
|
|
|
|
<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:
|
|
|
|
```html
|
|
|
|
<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:
|
|
|
|
```html
|
|
|
|
<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 <d-xscript> binding element to our variable.
|
|
|
|
```html
|
|
|
|
<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";
|
|
|
|
|
|
```html
|
|
|
|
<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>
|
|
|
|
```
|
|
|