SOURCE CODE: Transferring State
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Transferring State | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta name="keywords" content="touch ipad Uize.Class Uize.Widget.Resizer.Marquee Uize.Util.Coupler"/>
  <meta name="description" content="UIZE makes it easy to transfer state from one widget to another. See how to copy state from one marquee to another - or even how to keep them coupled."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <style type="text/css">
    .marquees {
      width:760px;
      margin:auto;
    }
    .marqueeShell {
      float:left;
      width:380px;
    }
    .marqueeShell .marqueeHeading {
      width:368px;
      margin:0;
    }
    .marqueeShell .marquee {
      position:relative;
      width:370px;
      height:200px;
    }
    .marqueeShell .buttonLink {
      display:block;
      width:355px;
      margin:0;
    }
  </style>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="document-title">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
  Transferring State
  <div id="page-actions" class="pageActions">
    <a href="source-code/transferring-state.html" class="buttonLink">SOURCE</a>
  </div>
</h1>

<div class="main">
  <!-- explanation copy -->

  <div class="explanation">
    <p>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 <code>get</code> method, and then setting that bucket of state on the other widget instance using the <code>set</code> method.</p>
    <p>In the example, two instances of <a href="../reference/Uize.Widget.Resizer.Marquee.html"><code>Uize.Widget.Resizer.Marquee</code></a> are wired up on the page. A button below each instance allows you to transfer its <code>left</code>, <code>top</code>, <code>width</code>, and <code>height</code> 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 <a href="../reference/Uize.Util.Coupler.html"><code>Uize.Util.Coupler</code></a> class, which lets you couple together two or more instances so that a definable set of properties remain synchronized.</p>
  </div>

  <!-- marquee UI wireframe -->

  <center style="margin:7px 0;">
    <input id="page-coupled" type="checkbox"/><label for="page-coupled">coupled</label>
  </center>

  <div class="marquees">
    <div class="marqueeShell">
      <div class="exampleSectionHeading marqueeHeading">Marquee 1</div>
      <div id="page_marquee1" class="marquee darkInsetBackgroundColor"></div>
      <a href="javascript://" class="buttonLink linkedJs" title="marquee2.set (marquee1.get (['left','top','width','height']))">TRANSFER MARQUEE 1 STATE TO MARQUEE 2 &nbsp;&gt;&gt;</a>
    </div>
    <div class="marqueeShell">
      <div class="exampleSectionHeading marqueeHeading">Marquee 2</div>
      <div id="page_marquee2" class="marquee darkInsetBackgroundColor"></div>
      <a href="javascript://" class="buttonLink linkedJs" title="marquee1.set (marquee2.get (['left','top','width','height']))">&lt;&lt;&nbsp; TRANSFER MARQUEE 2 STATE TO MARQUEE 1</a>
    </div>
  </div>
  <br style="clear:left;"/>
</div>

<!-- JavaScript code to make the static marquee HTML "come alive" -->

<script type="text/javascript">

Uize.module ({
  required:[
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widget.Resizer.Marquee',
    'Uize.Util.Coupler'
  ],
  builder:function () {
    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ({evaluator:function (code) {eval (code)}});

    /*** create the marquee instances ***/
      var
        marquee1 = page.addChild (
          'marquee1',
          Uize.Widget.Resizer.Marquee,
          {
            width:200,
            height:50,
            minWidth:20,
            minHeight:20,
            built:false
          }
        ),
        marquee2 = page.addChild (
          'marquee2',
          Uize.Widget.Resizer.Marquee,
          {
            top:20,
            left:50,
            width:50,
            height:150,
            minWidth:20,
            minHeight:20,
            built:false
          }
        )
      ;

    /*** wire up the page widget ***/
      page.wireUi ();

    /*** couple the alignX, alignY, inUse properties between the two collection items ***/
      var coupler = Uize.Util.Coupler ({
        coupled:false,
        instances:[marquee1,marquee2],
        properties:['left','top','width','height','creatingNew']
      });

    /*** wire up the coupled checkbox ***/
      function updateCoupledFromCheckbox () {coupler.set ({coupled:page.getNodeValue ('coupled')})};
      page.wireNode ('coupled','click',updateCoupledFromCheckbox);
      updateCoupledFromCheckbox ();
  }
});

</script>

</body>
</html>
SOURCE CODE: Transferring State VIEW EXAMPLE

SOURCE CODE: Transferring State
VIEW EXAMPLE
