Second xulInterface tutorial

In this tutorial, we will start from the xulInterface tutorial and use both XUL Javascript and XUL Groovy scripts.

Overview

The only thing we will have to change in this tutorial is modifying the XUL file to refer to both XUL Javascript and XUL Groovy scripts.

Specifying the XUL file

Now we XUL file will use two different XUL scripts:

• A XUL Javascript for the UI interface
• A XUL Groovy for the connection with the framework

      <?xml version="1.0"?>
      <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

      <window id="vboxExample" title="Example" width="200" height ="200"
              xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">  
         <script>
            var positive = true;
            function toggle() {   
              positive = !positive;
              if (!positive) {
                document.getElementById("button").label = "Positive Step";
              } else {
                document.getElementById("button").label = "Negative Step";		
              }		
              invokeToggle(positive);
            }
            function received(value) {
              document.getElementById("label").value = value;
            }      
         </script>  
         <script type="text/groovy">
            public void invokeToggle(boolean positive) {
              ServiceInstance service = context.getService("event");
              service.getData("event").setBooleanValue(positive);
              service.invoke();
            }
      
            public void subscribe(ServiceInstance service) {
              int value = service.getData("value").getValueAsInt();      
              helper.evalScript("received", value);
            }
         </script>    
         <hbox>
            <button id="button" label="Positive Step" oncommand="toggle()" />
            <label id="label" value="0" />
         </hbox>
      </window>