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 ScriptManager is activated

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

Listen to events in your Java application

Scripts are triggered by widget events. However it is also possible to add a listener to a XULDocument in your Java code to listen to widget events. The methods are:

• XULDocument.addActionListener(String, XULActionListener) to listen to events for a specific widget ID
• XULDocument.addActionListener(XULActionListener) to listen to events for all widgets in the document. This methodis also available on the XULSwingPanel component which is the root of the document

For example, suppose the following XUL file:

      <window title="Example" width="200" height ="200"
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">   
         <button id="myButton" value="Push Me!"/>
      </window>      

And the following java code which add this XUL file to the ScriptManager:

      ScriptManager manager = new DefaultScriptManager();
      XULDocument document = manager.addXULScript(<the XUL file>);

You can add a listener on the button with the following code:

      document.addActionListener("myButton", new XULActionListener() {
        public void actionPerformed(XULActionEvent event) {
         System.out.println(event.getWidgetID() + " clicked");
        }
      });

You can also perform on the Swing root associated with the document:

      XULSwingPanel panel = document.getRootComponent();
      panel.addActionListener(new XULActionListener() {
        public void actionPerformed(XULActionEvent event) {
         System.out.println(event.getWidgetID() + " clicked");
        }
      });

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>