SOURCE CODE: enabled/busy in Widget Tree

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
  <title>enabled/busy in Widget Tree | 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 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=""/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>


<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>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    enabled/busy in Widget Tree
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/enabled-busy-in-widget-tree.html" class="buttonLink">SOURCE</a></div>

  <!-- 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.Widgets.EnabledBusyDemo.Widget.html"><code>UizeSite.Widgets.EnabledBusyDemo.Widget</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>

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

  <div id="page-testWidget"></div>

  <!-- programmatic interface examples -->

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

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

<script type="text/javascript">

Uize.require (
  function () {
    'use strict';

    /*** create the example page widget ***/
      var 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.Widgets.EnabledBusyDemo.Widget child widget ***/
      UizeSite.Widgets.EnabledBusyDemo.Widget.set ({built:false});
        testWidget = page.addChild ('testWidget',UizeSite.Widgets.EnabledBusyDemo.Widget,{depth:0}),
        childWidget0 = testWidget.addChild (
      childWidget0.addChild ('childWidget0',UizeSite.Widgets.EnabledBusyDemo.Widget,{depth:2});
      childWidget0.addChild ('childWidget1',UizeSite.Widgets.EnabledBusyDemo.Widget,{depth:2});
      testWidget.addChild ('childWidget1',UizeSite.Widgets.EnabledBusyDemo.Widget,{depth:1});

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