xulInterface tutorial

In this tutorial, we will start from the first tutorial and develop the graphical interface in XUL using a XUL Javascript script.

Overview

In the first tutorial, we had two modules:

• The PublishModule module increments or decrements a value cyclically
• The EventModule module allows to click on a toggle to set if the first module should increment or decrement the value, and shows the value

The EventModule was developed in Java. We will create a XUL file to implement this interface and all the wiring to the framework. The scripting will use a XUL Javascript script.

XML configuration

Services definition

We have two services in a services.xml XML file:

• The event service carries the state of the toggle button. It is an event Service because the service should only be invoked when the state of the toggle button changes
• The published service carries the value. It is a publish Service because the service should be invoked cyclically

      <services>
         <event name="event" id="1" >
            <data name="event" type="bool" />
         </event>
         <publish name="published" id="2" >
            <data name="value" type="int" />
         </publish>
      </services>

Types definition

These two services use a very simple types definition. There are only two types:

• The bool type is a boolean
• The int type is an int

We define these types in a types.xml XML file:

      <types>
         <simpleType name="bool" baseType="boolean" />
         <simpleType name="int" baseType="int" />
      </types>

Applications definition

We define our two applications in an applications.xml XML file:

• The eventAppli will be implemented by a xulInterface script and will:
• sends the event service
• subscribes to the published service
• The publishAppli only contains the PublishModule. This Module is identical to the one defined in the first tutorial:
• sends cyclically the published service
• subscribes to the event service

      <applications>
      <application name="eventAppli">
            <deployment>
               <lib url="xulInterface.jar" />
            </deployment>
            <modules>
               <module name="xulInterface">
                  <interfaces>
                     <eventSend service="event" attach="attach"/>
                     <subscribe service="published" />
                  </interfaces>
               </module>
            </modules>
         </application>
         <application name="publishAppli">
            <deployment>
               <lib url="samples1Publish.jar" />
            </deployment>
            <modules>
               <module name="PublishModule">
                  <implementation path="org.da.samples.protoframework.publish.PublishModule" >
                     <initEntryPoint method="init" />
                     <defaultReceiveEntryPoint method="subscribe" />
                     <defaultSendEntryPoint method="publish" />
                  </implementation>
                  <interfaces>
                     <eventReceived service="event"/>
                     <cyclic service="published" frequency="200ms" attach="attach"/>
                  </interfaces>
               </module>
            </modules>
         </application>
      </applications>

Properties

We need to specify the path of our XUL file (which we still have to specify):

      <properties>
         <application name="xulInterface" >
            <module name="xulInterface" >          
               <moduleProperty key="xul" value="event.xul" />  
               <moduleProperty key="validate" value="true" />  
            </module>
         </application>   
      </properties>

The event.xul file will contain all our XUL definition.

Specifying the XUL file

We will now specify the event.xul file.

Specifying the interface

The XUL interface must contain two widgets:

• A button for the toggle button to increment or decrement the step
• A label for showing the current step value

      <?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">  
         <hbox>
            <button id="button" label="Positive Step" />
            <label id="label" value="0" />
         </hbox>
      </window>

Specifying the script

We will modify our XUl script defined above to implement the Javascript to:

• Take into account the notification of the published service
• Notify the event service about the click on the button

Note that the content below present the modifications of our previous script in a yellow highlighting.

      <?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";		
              }		
              var service = context.getService("event");
              service.getData("event").setBooleanValue(positive);
              service.invoke();
            }
            function subscribe(service) {
              var value = service.getData("value").getValueAsInt();      
              document.getElementById("label").value = value;
            }           
         </script>    
         <hbox>
            <button id="button" label="Positive Step" oncommand="toggle()" />
            <label id="label" value="0" />
         </hbox>
      </window>

Changing the scripting language

The Second xulInterface tutorial explains how to use both XUL Javascript and XUL Groovy scripts.