States

A state is a conditional constraint. With states, you can determine certain conditions under which the LZX constraints engine should work. Have a look at the constraint in Listing 6.3 which we reprint here.

<canvas height="300" width="700">
    <view bgcolor="red" id="display" width="200" height="200"
            opacity="${parent.adjuster.value/100}"/>
    <slider x="0" y="200" name="adjuster" value="100"/>
</canvas>

Here, the value of the opacity attribute of the view is a function of the value of the slider. As you can see, the view becomes invisible when its opacity is less than 18 or so. If you don’t want the view color to become too pale, you can use a state to restrict the constraint so that it won’t follow the slider if the slider moves to below, say, 50.

To use a state, you first identify the attribute you are currently applying a constraint to. Then, you write the state tag inside the object whose attribute is constrained. Rewriting the code above, we get the LZX application in Listing 6.7.

Listing 6.7. Using a state

<canvas height="300" width="700">
    <view bgcolor="red" id="display" width="200" height="200">
        <state apply="${adjuster.value > 50}">
            <attribute name="opacity"
       value="${adjuster.value/100}"/>
        </state>
    </view>
    <slider x="0" y="200" id="adjuster" value="100"/>
</canvas>

Now, the opacity only changes if the slider’s value is between 50 and 100. You can test the program by using this URL:

http://localhost:8080/lps-4.0.x/app06/constraintTest7.lzx

State objects are represented by the LzState class, which is a direct descendant of the LzNode class. The attributes of the LzState class are given in Table 6.1.

The LzState class adds the following methods:

apply()

Applies the state to its parent.

remove()

Removes the constraints and views created when the state was applied.

In addition, an LzState object can emit these events:

onapply

Occurs when the state is applied.

onremove

Occurs when the state is removed.