SOURCE CODE: Dynamic Options
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>Dynamic Options | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="widget Uize.Widget.Options Uize.Template"/>
  <meta name="description" content="See a demo of an options set widget, where the HTML for the widget's buttons can be dynamically regenerated just by setting new values for the widget."/>
  <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"/>
  <link rel="stylesheet" href="css/option-buttons-set.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>
    Dynamic Options
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/options-dynamic.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, the markup for an options widget is being wired up by an instance of <a href="../reference/Uize.Widget.Options.html"><code>Uize.Widget.Options</code></a>. Below the options are some links that execute snippets of code to demonstrate the programmatic interface of the widget. The <code>Uize.Widget.Options</code> class provides <code>value</code> and <code>tentativeValue</code> state properties in its interface. The <code>Changed.value</code> and <code>Changed.tentativeValue</code> instance events for these two properties can be used to watch for changes in the widget's state. The <code>value</code> state property can be set to programmatically change the selected option. Interact with both the options UI and the test links to see how they affect one another.</p>

    <p>What's most interesting about this example is that it uses the <a href="../reference/Uize.Widget.html"><code>Uize.Widget</code></a> class' support for inline JST (JavaScript Template) script blocks for declaring a widget's HTML generator, as well as the <code>Uize.Widget.Options</code> class' behavior of invoking the generator to rebuild the UI each time the options set changes (i.e. the <code>values</code> state property changes value). In the list of programmatic links below, you'll see some links that set the <code>values</code> state property (labeled "Set the values list"). Click these links and see how the widget dynamically rebuilds its UI to reflect the new values. View the source of the page and you'll see the <code>&lt;script type="text/jst"&gt;</code> block tucked inside the root node of the options widget.</p>
  </div>

  <!-- options UI -->

  <div id="page_options">
    <!-- inline JST (JavaScript Template) script block that is used to generate the widget's HTML -->
    <script type="text/jst">
    <table class="optionsShell" cellspacing="0" cellpadding="0">
      <tr>
        [% var values = input.values; %]
        [% for (var valueNo = -1; ++valueNo < values.length;) { %]
        <td>
          <div id="[% .idPrefix %]_option[%= valueNo %]" class="button">[%= values [valueNo].toUpperCase () %]</div>
        </td>
        [% } %]
      </tr>
    </table>
    </script>
  </div>
  <br/>

  <!-- programmatic interface examples -->

  <div class="programmaticInterface">
    <ul>
      <li>options.get ('value') == '<span id="page-optionsValue"></span>'</li>
      <li>options.get ('tentativeValue') == '<span id="page-optionsTentativeValue"></span>'</li>
      <li>Types of renewable energy...
        <ul>
          <li>Set the values list: <a href="javascript://" class="linkedJs">options.set ({values:['solar','wind','geothermal','efficiency','tidal'],value:'solar'})</a></li>
          <li>
            Set value:
            <a href="javascript://" class="linkedJs">options.set ({value:'solar'})</a>
            &nbsp;,&nbsp;
            <a href="javascript://" class="linkedJs">options.set ({value:'wind'})</a>
            &nbsp;,&nbsp;
            <a href="javascript://" class="linkedJs">options.set ({value:'geothermal'})</a>
            &nbsp;,&nbsp;
            <a href="javascript://" class="linkedJs">options.set ({value:'efficiency'})</a>
            &nbsp;,&nbsp;
            <a href="javascript://" class="linkedJs">options.set ({value:'tidal'})</a>
          </li>
        </ul>
      </li>
      <li>Types of fruits...
        <ul>
          <li>Set the values list: <a href="javascript://" class="linkedJs">options.set ({values:['apples','grapefruits','mangos','plums','strawberries'],value:'apples'})</a></li>
          <li>
            Set value:
            <a href="javascript://" class="linkedJs">options.set ({value:'apples'})</a>
            &nbsp;,&nbsp;
            <a href="javascript://" class="linkedJs">options.set ({value:'grapefruits'})</a>
            &nbsp;,&nbsp;
            <a href="javascript://" class="linkedJs">options.set ({value:'mangos'})</a>
            &nbsp;,&nbsp;
            <a href="javascript://" class="linkedJs">options.set ({value:'plums'})</a>
            &nbsp;,&nbsp;
            <a href="javascript://" class="linkedJs">options.set ({value:'strawberries'})</a>
          </li>
        </ul>
      </li>
      <li>Types of big cats...
        <ul>
          <li>Set the values list: <a href="javascript://" class="linkedJs">options.set ({values:['jaguar','cheetah','leopard','tiger','cougar'],value:'jaguar'})</a></li>
          <li>
            Set value:
            <a href="javascript://" class="linkedJs">options.set ({value:'jaguar'})</a>
            &nbsp;,&nbsp;
            <a href="javascript://" class="linkedJs">options.set ({value:'cheetah'})</a>
            &nbsp;,&nbsp;
            <a href="javascript://" class="linkedJs">options.set ({value:'leopard'})</a>
            &nbsp;,&nbsp;
            <a href="javascript://" class="linkedJs">options.set ({value:'tiger'})</a>
            &nbsp;,&nbsp;
            <a href="javascript://" class="linkedJs">options.set ({value:'cougar'})</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<script type="text/javascript">

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

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ({evaluator:function (code) {eval (code)}});

    /*** add the options child widget ***/
      var options = page.addChild (
        'options',
        Uize.Widget.Options,
        {
          html:true,
          built:false,
          values:['solar','wind','geothermal','efficiency','tidal'],
          value:'solar'
        }
      );

    /*** some code for demonstrating the widget's programmatic interface ***/
      function displayCurrentValue () {
        page.setNodeInnerHtml ('optionsValue',options);
      }
      function displayCurrentTentativeValue () {
        page.setNodeInnerHtml ('optionsTentativeValue',options.get ('tentativeValue'));
      }
      options.wire ({
        'Changed.value':displayCurrentValue,
        'Changed.tentativeValue':displayCurrentTentativeValue
      });

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

    /*** initialize ***/
      displayCurrentValue ();
      displayCurrentTentativeValue ();
  }
);

</script>

</body>
</html>