SOURCE CODE: Shared UI
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>Shared UI | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="Uize.Widget"/>
  <meta name="description" content="See how some widget HTML for a slider widget can be shared by multiple slider widget instances. The UIZE JavaScript Framework makes this possible."/>
  <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"/>
</head>

<body>

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

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Shared UI
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/shared-ui.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>On the surface of things, there may appear to be nothing terribly exceptional about this example. There is a slider widget that can control any of three selectable style properties: border width, padding, and font size. One way to achieve this effect would be to create one slider widget and write application logic that governs what the slider operates on, based upon the value selected in the select control. Of course, then you'd have to write your own code to update the configutation of this single slider widget when changing selection, since the value ranges for the different properties will differ. And if you later decided to offer the user a dedicated slider control for each style property, then your code would have to be significantly refactored. Instead, in this example there is a dedicated slider widget for each style property, but they all share the same DOM nodes in the document. Using the <code>wireUi</code> and <code>unwireUi</code> methods lets the code hand the slider DOM nodes back and forth between the different slider widgets, based upon the user's selection.</p>
  </div>

  <!-- sample node and slider UI -->

  <form>
    <table border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td class="heading">Sample Area</td>
        <td width="20"></td>
        <td>
          <select id="page-sliderSelector">
            <option value="" selected>- CHOOSE -</option>
            <option value="sliderBorderWidth">Border Width</option>
            <option value="sliderPadding">Padding</option>
            <option value="sliderFontSize">Font Size</option>
          </select>
        </td>
      </tr>
      <tr>
        <td style="width:500px; height:280px; border:1px solid #666;" class="insetBackgroundColor" align="center" valign="center">
          <div id="page-sampleNode" style="width:300px; border-width:10px; border-style:solid; padding:10px;" class="darkInsetBorderColor">
            This is some profound text. You cannot possibly comprehend how profound it truly is.
          </div>
        </td>
        <td></td>
        <td style="border:1px solid #666;" class="insetBackgroundColor" align="center">
          <div style="position:relative; left:0; top:0; width:44px; height:261px; background:#888;">
            <div id="slider-track" style="position:absolute; left:2px; top:2px; width:40px; height:235px;">
              <img src="images/slider/track-bg-vertical.gif" style="position:absolute; left:0; top:0; width:100%; height:100%;" alt=""/>
              <img id="slider-knob" src="images/slider/knob-vertical.gif" style="position:absolute; left:0; top:0; width:40px; height:28px; cursor:n-resize;" border="0" hspace="0" vspace="0" alt=""/>
            </div>
            <div id="slider-value" style="position:absolute; left:2px; top:239px; width:40px; height:20px; font-family:Arial; font-size:17px; font-weight:bold; color:#555; background:#adbebf url(../images/brushed-metal.jpg) repeat left top; text-align:center;"></div>
          </div>
        </td>
      </tr>
    </table>
  </form>
</div>

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

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widget.Bar.Slider'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    /*** code to manage sharing of the same UI HTML among different widget instances ***/
      var wiredSlider;
      function wireSelectedSliderUi () {
        if (wiredSlider)
          page.children [wiredSlider].unwireUi ()
        ;
        wiredSlider = page.getNodeValue ('sliderSelector');
        if (wiredSlider)
          page.children [wiredSlider].wireUi ()
        ;
      }
      page.wireNode ('sliderSelector','change',wireSelectedSliderUi);
      wireSelectedSliderUi ();

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

    /*** set up the slider for border width ***/
      page.addChild (
        'sliderBorderWidth',
        Uize.Widget.Bar.Slider,
        {
          idPrefix:'slider',
          minValue:1,
          maxValue:30,
          value:5
        }
      );
      function updateSampleBorderWidth () {
        page.setNodeStyle ('sampleNode',{borderWidth:page.children.sliderBorderWidth});
      }
      page.children.sliderBorderWidth.wire ('Changed.value',updateSampleBorderWidth);
      updateSampleBorderWidth ();

    /*** set up the slider for padding ***/
      page.addChild (
        'sliderPadding',
        Uize.Widget.Bar.Slider,
        {
          idPrefix:'slider',
          minValue:1,
          maxValue:30,
          value:5
        }
      );
      function updateSamplePadding () {
        page.setNodeStyle ('sampleNode',{padding:page.children.sliderPadding});
      }
      page.children.sliderPadding.wire ('Changed.value',updateSamplePadding);
      updateSamplePadding ();

    /*** set up the slider for font size ***/
      page.addChild (
        'sliderFontSize',
        Uize.Widget.Bar.Slider,
        {
          idPrefix:'slider',
          minValue:9,
          maxValue:25,
          value:12
        }
      );
      function updateSampleFontSize () {
        page.setNodeStyle ('sampleNode',{fontSize:page.children.sliderFontSize});
      }
      page.children.sliderFontSize.wire ('Changed.value',updateSampleFontSize);
      updateSampleFontSize ();
  }
);

</script>

</body>
</html>