gecko-dev/xpfe/browser/samples/dexanimdialog.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
<!DOCTYPE window>
<!-- DO NOT LOCALIZE: this file is source documentation; not part of the build -->
<!-- dialog containing a control requiring initial setup, including some
     JavaScript-testing animations -->
<xul:window
    xmlns:html="http://www.w3.org/TR/REC-html40"
    xmlns:xul ="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    onload = "Startup()"
    title = "Things to do today"
    width = "400" height = "300">

  <html:script>
    // dialog initialization code

    // preload an array of offscreen images
    var images = new Array(4);
    var imageNames = new Array("up.gif", "right.gif", "down.gif", "left.gif");
    var animationFrame = 0;
    var animationFunction = null;
    for(var i = 0; i &lt; 4; i++) {
      images[i] = new Image();
      images[i].src = "sampleimages/" + imageNames[i];
    }
    function Startup() {
      var checkbox = ElementByID("remind");
      if (checkbox)
        checkbox.checked = true;
    }

    // OK button handler
    function DoOK() {
      var toolkitCore = GetToolkitCore();
      if (toolkitCore)
        toolkitCore.CloseWindow(window);
      return;

      // get checkbox
      // (using a document method available on HTML and XUL
      // documents, but not on XML documents)
      var checkbox = document.getElementById("remind");
      if (checkbox) {
        // load some hypothetical appcore interested in
        // the outcome of this dialog
        var donationsCore = XPAppCoresManager.Find("DonationsCore");
        if (!donationsCore) {
          donationsCore = new DonationsCore();
          if (donationsCore)
            donationsCore.Init("DonationsCore");
        }
        // tell the appcore about the new setting
        if (donationsCore)
          donationsCore.SetRemindFlag(checkbox.checked);
      }
    }

    // find and return the DOM element with the given ID
    // the equivalent of document.getElementById(), but also
    // works for XML documents (unused in the example)
    function ElementByID(id) {
      var element;
      var ctr;
      var taglist = document.getElementsByTagName("*");

      element = null;
      for (ctr = 0; ctr &lt; taglist.length; ctr++)
        if (taglist[ctr].getAttribute("id") == id) {
          element = taglist[ctr];
          break;
        }
      return element;
    }

    function GetToolkitCore() {
      var toolkitCore = XPAppCoresManager.Find("ToolkitCore");
      if (!toolkitCore) {
        toolkitCore = new ToolkitCore();
        if (toolkitCore)
          toolkitCore.Init("ToolkitCore");
      }
      return toolkitCore;
    }

    function animateButtonImage() {
      var button = document.getElementById("animation");
      if (button) {
        button.src = images[animationFrame].src;
        animationFrame = (animationFrame + 1) % 4;
        animationFunction = setTimeout("animateButtonImage()", 250);
      }
    }
    function startAnimation() {
      if (animationFunction == null)
        animateButtonImage();
    }
    function stopAnimation() {
      if (animationFunction)
        clearTimeout(animationFunction);
      animationFunction = null;
    }
  </html:script>

  <html:table>
    <html:tr>
      <html:td>Give me your money</html:td>
    </html:tr>
    <html:tr>
      <html:td>
        <!-- note the html namespace on the id attribute, which
             seems at this time to be required by getAttribute() -->
        <html:input type="checkbox" html:id="remind"/>Remind me
      </html:td>
    </html:tr>
    <html:tr>
      <html:td><html:img src="sampleimages/bongo.gif"/></html:td>
      <html:td><html:img id="animation" src="sampleimages/right.gif"/></html:td>
    </html:tr>
    <html:tr>
      <html:td><html:button onclick="startAnimation()">Start Animation</html:button></html:td>
      <html:td><html:button onclick="stopAnimation()">Stop Animation</html:button></html:td>
    </html:tr>
    <html:tr>
      <html:td><button onclick="DoOK()">OK</html:button></html:td>
      <html:td><button>Cancel</html:button></html:td>
    </html:tr>
  </html:table>

</xul:window>