SOURCE CODE: enabled/busy in Widget Tree
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>enabled/busy in Widget Tree | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta name="keywords" content="Uize.Widget"/>
  <meta name="description" content="See a demonstration of the busy and enabled mechanisms of the widget base class, and how busy and enabled state can be inherited within a widget tree."/>
  <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">
    .widgetShell {
      border:1px solid #ccc;
      margin:8px;
      padding:0;
    }
    .widgetShell .heading {
      text-align:center;
      font-size:10px;
      letter-spacing:3px;
      padding:2px;
      background:#000;
      color:#fff;
    }
    .widgetShell .body {
      color:#000;
      padding:8px;
      padding-left:20px;
      padding-right:20px;
    }
    #page_testWidget .body {
      background:#888;
    }
    #page_testWidget_childTestWidget0 .body, #page_testWidget_childTestWidget1 .body {
      background:#aaa;
    }
    #page_testWidget_childTestWidget0_childTestWidget0 .body,
    #page_testWidget_childTestWidget0_childTestWidget1 .body {
      background:#ddd;
    }
  </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>
  enabled/busy in Widget Tree
  <div id="page-actions" class="pageActions">
    <a href="source-code/enabled-busy-in-widget-tree.html" class="buttonLink">SOURCE</a>
  </div>
</h1>

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

  <div class="explanation">
    <p>This example demonstrates how the <code>enabled</code> and <code>busy</code> state properties behave in a hierarchical tree of widgets. In the example, a widget tree is created from instances of a dummy <a href="../reference/UizeSite.TestWidget.html"><code>UizeSite.TestWidget</code></a> class. The root widget has two child widgets of the same class, and one of those children has a further two children of the same class. The widget exposes controls for <code>enabled</code> and <code>busy</code>, and provides two buttons to demonstrate the effect of different combinations of enabled and busy at different levels of the tree. Tweak the values to see how the inheritance for these properties operates.</p>
  </div>

  <!-- HTML "wireframe" for widget tree -->

  <div id="page_testWidget"></div>

  <!-- programmatic interface examples -->

  <div class="programmaticInterface">
    ACTIONS ON ROOT WIDGET:
    &nbsp;
    <a href="javascript://" class="linkedJs" title="testWidget.resetEnabledAndBusy ()">RESET TREE</a>
    &nbsp;|&nbsp;
    <a href="javascript://" class="linkedJs" title="testWidget.set ({enabled:testWidget.get ('enabled') === false ? 'inherit' : false})">TOGGLE ENABLED</a>
    &nbsp;|&nbsp;
    <a href="javascript://" class="linkedJs" title="testWidget.set ({busy:testWidget.get ('busy') === true ? 'inherit' : true})">TOGGLE BUSY</a>
    &nbsp;|&nbsp;
    <a href="javascript://" class="linkedJs" title="beBusyForSomeTime ()">BUSY FOR 4 SECONDS</a>
  </div>
</div>

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

<script type="text/javascript">

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

    function beBusyForSomeTime () {
      testWidget.set ({busy:true});
      setTimeout (function () {testWidget.set ({busy:'inherit'})},4000);
    }

    /*** add the UizeSite.TestWidget child widget ***/
      UizeSite.TestWidget.set ({built:false});
      var testWidget = page.addChild ('testWidget',UizeSite.TestWidget);
        testWidget.addChild ('childTestWidget0',UizeSite.TestWidget);
          testWidget.children.childTestWidget0.addChild ('childTestWidget0',UizeSite.TestWidget);
          testWidget.children.childTestWidget0.addChild ('childTestWidget1',UizeSite.TestWidget);
        testWidget.addChild ('childTestWidget1',UizeSite.TestWidget);

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

</script>

</body>
</html>
SOURCE CODE: enabled/busy in Widget Tree VIEW EXAMPLE

SOURCE CODE: enabled/busy in Widget Tree
VIEW EXAMPLE
