The <state> tag allows you to declaratively describe a specific state of your application that you can selectively apply or remove at runtime using the apply() and remove() methods.

In this example, when the user moves the divider between the two panels, the x coordinate of the divider has to "follow" the position of the mouse: in the dragging state, the x coordinate of the divider is constrained to the x coordinate of the mouse. The dragging state is applied in the onmousedown event handler of the divider view, and removed in the onmouseup event handler.

Notice the other constraints used in this example:

• The width of the left view is constrained to the x attribute of the divider.
• The x attribute of the right view is constrained to the x attribute of the divider plus its width.
• The width of the right view is constrained to the width of the parent (the canvas), minus the x attribute of the right view itself.