XUL events management

The XUL library support the following XUL events through the following widgets attributes:

• oncommand for command events on XUK widgets. Note that these events correspond to events sent by widget after the end of a change. Contrary to the onchange events, events sent before the end of a continuous change (such as the moving of a scale won't be sent
• onclick for click events on XUL widgets. It will have the same result that "oncommand", for widgets which have click events (such as button)
• onchange for change events on XUL widgets. In this case, events sent before the end of a continuous change will be sent
• onselect for selection events on XUL widgets
• onmouseover for mouse over events on XUL widgets. This event is available on all widgets
• onmouseout for mouse exit events on XUL widgets. This event is available on all widgets
• onload for load events on XUL window. In this case, events sent before the end of a continuous change will be sent. The "onload" event is only available for the window element. This event will be sent for all XUL document windows when the framework is started

The value of the oncommand, onclick or onchange attribute must correspond to a function in a Javascript script.

Event model

The way events are handled in the javaXUL framework is the following:

• The user performs an action on a Swing widget
• The associated event is listened by the associated XUL widget
• The XUL widget process the Swing event and creates an associated XUL event. The event is passed to the parent XULDocument
• The XULDocument looks for a script which has the associated function and call this XUL Script method or function^[1]
  Scripts are those which are defined for the XULDocument
  . It will also fire event listeners defined for this widget on the document

oncommand example

In this case, we have a button where we want to print a message when the user clicks on the button:

      <?xml version="1.0"?>
      <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
      <window title="Example" width="200" height ="200"
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">  
         <script>
      function checked() {
        print("clicked!");
      }
         </script>     
         <button oncommand="checked()" />
      </window>

onchange example

In this case, we have a scale where we want to print a message when the user moves the slider:

      <?xml version="1.0"?>
      <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
      <window id="Test" title="Test XULScripts" orient="horizontal"
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
         <script>
      function changeValue() {
        var value = document.getElementById('scale').value;
        print(value);      
      }       
         </script>
         <vbox>
            <scale id="scale" width="200" min="0" max="100" oncommand="changeValue()" />   
         </vbox>
      </window>

onselect example

In this case, we have a listbox where we want to print a message when the user select a row:

      <?xml version="1.0"?>
      <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
      <window id="Test" title="Test XULScripts" orient="horizontal"
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
         <script>
      function select() {
        var index = document.getElementById("theList").currentIndex;
        print("selected " + index);
      }  
         </script>
         <listbox onselect="select()">
            <listitem label="Ruby"/>
            <listitem label="Emerald"/>
            <listitem label="Sapphire"/>
            <listitem label="Diamond"/>
         </listbox>  
      </window>

onmouseover example

In this case, we have a label where we want to print a message when the user hovers the mouse on a label:

      <?xml version="1.0"?>
      <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
      <window id="Test" title="Test XULScripts" orient="horizontal"
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
         <script>
      function hover() {
        print("hover");      
      }       
         </script>
         <label onmouseover="hover()" />   
      </window>

onload example

In this case, we set the button label when we load the document:

      <window id="Test" title="Test XULScripts" orient="horizontal" onload="loaded()"
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
      <script>
      function loaded() {
        document.getElementById("theButton").label = "No";
      }
      </script>      
         <button id="theButton" label="Yes"/>
      </window>