JAVASCRIPT EXAMPLES Transferring State
This example demonstrates how the UIZE JavaScript Framework's state oriented design facilitates easy transfer of state from one widget instance to another. Transfer is as simple as getting a bucket of state from one widget instance using the get method, and then setting that bucket of state on the other widget instance using the set method.
In the example, two instances of Uize.Widget.Resizer.Marquee are wired up on the page. A button below each instance allows us to transfer its left, top, width, and height state to the other instance. The tooltip for each button indicates the code being executed by clicking. Mess around with a marquee: change its position and dimension, and then transfer its state to the other. In addition to the buttons for transferring state manually, there is also a checkbox for coupling the two marquees so that they remain continuously synchronized during user interaction: resize or move one and the other resizes and moves in lockstep. This coupling is accomplished with the help of the convenient Uize.Util.Coupler class, which lets you couple together two or more instances so that a definable set of properties remain synchronized.