Hello world

In this tutorial, we will show a button, and show an alert popup when we detect a click on the button.

Specifying the window

The root element of the XUL hierarchy is the window element. Let's define our window:

      <?xml version="1.0"?>
      <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
      <window id="Hello" title="Hello" orient="horizontal" width="250" height="100"    
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
      </window>      

If we show this XUL file, we will have this empty window:

Adding the button

Now we will add a button in the window:

      <?xml version="1.0"?>
      <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
      <window id="Hello" title="Hello" orient="horizontal" width="250" height="100"    
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
          <button label="Push Me!" />
      </window>      

We now have the window with a button:





However nothing happens when we click on the button. The next step will be to listen to the click on the button to show an alert popup.

Showing the alert popup

To show the alert popup, we need to manage the click event on the widget:

• Add a oncommand attribute to the button to listen to the button click
• Add a script to implement the function to execute when the click is detected

Listening to the button click

First we will add a oncommand attribute:

      <?xml version="1.0"?>
      <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
      <window id="Hello" title="Hello" orient="horizontal" width="250" height="100"    
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
          <button label="Push Me!" oncommand="clicked()" />
      </window>      

But of course there is no script yet so the clicked() is not handled. If we click on the button, the following error popup appears:

Adding a script to handle the click

We will add an embedded Javascript script to handle the call to clicked(). Let's add this script:

      <?xml version="1.0"?>
      <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
      <window id="Hello" title="Hello" orient="horizontal" width="250" height="100"  
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">        
          <script>
      function clicked(){
        alert('Hello World!');
      }
          </script>         
          <button label="Push Me!" oncommand="clicked()" />
      </window>      

Now we created a script. If we click on the button, the clicked() function will be called. The result of the function is now to show a popup: