Documentation Link: SwatProgressBar

SwatML for this demo:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE swatml SYSTEM "http://swat.silverorange.com/swatml1.dtd">
<swatml>
  <widget class="SwatForm">
    <widget class="SwatFrame">
      <property name="title">JavaScript Demos</property>
      <widget class="SwatMessageDisplay" id="note" />
      <widget class="SwatFormField">
        <property name="title" type="string">Download Progress</property>
        <widget class="SwatProgressBar" id="download_progress">
          <property name="value" type="float">0</property>
          <property name="text">%s%% complete</property>
          <property name="text_value" type="string">0</property>
        </widget>
      </widget>
      <widget class="SwatFormField">
        <property name="title" type="string">Upload Progress</property>
        <widget class="SwatProgressBar" id="upload_progress">
          <property name="value" type="float">0</property>
          <property name="text">%s%% complete</property>
          <property name="text_value" type="string">0</property>
        </widget>
      </widget>
    </widget>
    <widget class="SwatFrame">
      <property name="title">Other Orientations</property>
      <widget class="SwatFormField">
        <property name="title" type="string">Right to Left</property>
        <widget class="SwatProgressBar">
          <property name="value" type="float">0.30</property>
          <property name="orientation" type="constant">ORIENTATION_RIGHT_TO_LEFT</property>
        </widget>
      </widget>
      <widget class="SwatFormField">
        <property name="title" type="string">Bottom to Top</property>
        <widget class="SwatProgressBar">
          <property name="value" type="float">0.30</property>
          <property name="orientation" type="constant">ORIENTATION_BOTTOM_TO_TOP</property>
        </widget>
      </widget>
      <widget class="SwatFormField">
        <property name="title" type="string">Top to Bottom</property>
        <widget class="SwatProgressBar">
          <property name="value" type="float">0.30</property>
          <property name="orientation" type="constant">ORIENTATION_TOP_TO_BOTTOM</property>
        </widget>
      </widget>
    </widget>

    <!-- make the progress bars do something interesting -->
    <widget class="SwatContentBlock">
      <property name="content"><![CDATA[<script type="text/javascript">
      // update status bar text when value changes
      function handleDownloadValueChange(type, value)
      {
        value = Math.round(value * 100000) / 1000;
        download_progress_obj.setText(value + '% complete');
      }

      // show generic text when in pulse-mode
      function handleDownloadPulse(type)
      {
        download_progress_obj.setText('downloading...');
      }

      // increase value on mouse movement
      function handleMouseMove(event, progress_bar)
      {
        var value = progress_bar.getValue();
        if (value > 1) {
          progress_bar.pulse();
        } else {
          var value = progress_bar.getValue() + 0.01;
          progress_bar.setValue(value);
        }
      }

      YAHOO.util.Event.addListener('download_progress', 'mousemove',
        handleMouseMove, download_progress_obj);

      download_progress_obj.changeValueEvent.subscribe(
        handleDownloadValueChange);

      download_progress_obj.pulseEvent.subscribe(handleDownloadPulse);

      // update status bar text when value changes
      function handleUploadValueChange(type, value)
      {
        value = Math.round(value * 100000) / 1000;
        upload_progress_obj.setText(value + '% complete');
      }

      // set random value on mouse click
      function handleClick(event, progress_bar)
      {
        var value = Math.round(Math.random() * 100) / 100;
        progress_bar.setValueWithAnimation(value);
      }

      YAHOO.util.Event.addListener('upload_progress', 'click',
        handleClick, upload_progress_obj);

      upload_progress_obj.changeValueEvent.subscribe(
        handleUploadValueChange);

      </script>]]></property>
      <property name="content_type">text/xml</property>
    </widget>
  </widget>
</swatml>

PHP for this demo:

<?php

/* vim: set noexpandtab tabstop=4 shiftwidth=4 foldmethod=marker: */

require_once 'Demo.php';

/**
 * A demo using progress bars
 *
 * This demo sets up the message explaining the first JavaScript enabled
 * progress bar.
 *
 * @package   SwatDemo
 * @copyright 2007 silverorange
 * @license   http://www.gnu.org/copyleft/lesser.html LGPL License 2.1
 */
class ProgressBarDemo extends Demo
{
  // {{{ public function buildDemoUI()

  public function buildDemoUI(SwatUI $ui)
  {
    $message = new SwatMessage(
      'Progress bars are easily controlled from JavaScript.');

    $message->secondary_content =
      'Mouse over the Download Progress bar or click the Upload '.
      'Progress bar for a demonstration.';

    $ui->getWidget('note')->add($message, SwatMessageDisplay::DISMISS_OFF);
  }

  // }}}
}

?>