<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
  <title>Button | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="widget Uize.Widgets.Button.Widget"/>
  <meta name="description" content="See a demonstration of the button widget, with a logger that displays its events and state changes, and with links for modifying its state properties."/>
  <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>
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/button.html" class="buttonLink">SOURCE</a></div>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of the <a href="../reference/Uize.Widgets.Button.Widget.html"><code>Uize.Widgets.Button.Widget</code></a> widget class is being instantiated and wired up - it's the HTML element below this explanation that looks like a button and has the text <b>"BUTTON"</b> on it.</p>

    <p>Directly below the button widget is a log that logs the instance events that occur for the button widget. Interact with the widget to see which events are fired. The log displays both the custom instance events that are fired using the button widget's <code>fire</code> method, as well as all <code>Changed.*</code> property change events that result from values of the button's various state properties being changed (so, you can use the log to watch for changes in the state of the button widget).</p>

    <p>Below the instance event log for the button is a set of links for testing aspects of the programmatic interface of the button widget. The <b>"TOGGLE ENABLED"</b> link toggles the value of the button's <code>enabled</code> state property. The <b>"TOGGLE BUSY"</b> link toggles the value of its <code>busy</code> state property. The <b>"TOGGLE SELECTED"</b> link toggles the value of its <code>selected</code> state property. Finally, the <b>"CHANGE BUTTON TEXT"</b> link changes the value of its <code>text</code> state property.</p>


  <!-- button -->

  <div id="page-button" style="text-align:center;"></div>

  <div id="page-log" style="margin:20px 10px;"></div>

  <!-- programmatic interface examples -->

  <div class="programmaticInterface" style="text-align:center;">

    <a href="javascript://" class="linkedJs" title="button.set ({enabled:button.get ('enabled') === false ? 'inherit' : false})">TOGGLE ENABLED</a>
    <a href="javascript://" class="linkedJs" title="button.set ({busy:button.get ('busy') === true ? 'inherit' : true})">TOGGLE BUSY</a>
    <a href="javascript://" class="linkedJs" title="button.set ({selected:!button.get ('selected')})">TOGGLE SELECTED</a>

    <a href="javascript://" class="linkedJs" title="button.set ({text:'NEW BUTTON TEXT'})">CHANGE BUTTON TEXT</a>

<!-- JavaScript code to make the 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)}});

    /*** create the Uize.Widgets.Button.Widget instance ***/
      var button = page.addChild ('button',Uize.Widgets.Button.Widget,{built:false,text:'BUTTON'});

    /*** create the instance event log widget ***/
      page.addChild (
        {instance:button,built:false,title:'BUTTON EVENTS'}

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