Discutez en sur les forums

Mise en place
Nous partirons ici du code source de notre article d'introduction à XUL, et ajouterons certaines fonctionnalités.

[fichier app1.xul]
<window title="Youpla" width="150px" height="30px" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <menubar>
    <menu label="Fichier">
      <menupopup>
        <menuitem label="Fermer" oncommand="window.close()"/>
      </menupopup>
    </menu>
    <menu label="?">
      <menupopup>
        <menuitem label="A propos" oncommand="about()" />
      </menupopup>
    </menu>
  </menubar>
  <box>
    <button label="A propos" oncommand="about()" />
    <button label="Fermer" oncommand="window.close()" />
  </box>
</window>

Tel quel, cet exemple est limité (et non fonctionnel) : il ne donne accès qu'à deux menus déroulants et deux boutons, et aucun évènement n'agit sur l'environnement... C'est ce que nous allons changer ici.

Utiliser JavaScript
Pour sa gestion des évènements, XUL laisse le DOM manipuler ses éléments XML, JavaScript faisant la liaison entre les deux. Ainsi, nous voyons que, via l'évènement oncommand (qui est un écouteur d'évènements général, pouvant prendre en charge les boutons comme les cases ou les menus), l'appel de window.close() fermera l'application XUL comme s'il s'agissait d'un simple popup JavaScript.

Le second bouton doit afficher le message présentant l'application : il fait appel à la fonction about(), qui se charge de cet affichage. Elle n'est pas définie : faisons-le.
Lors de l'intégration de code JavaScript ou CSS dans XUL, il est préférable de faire appel à des fichiers externes plutôt que d'inscrire le code au sein même du fichier XUL. Nous allons donc créer un fichier app1.js qui contiendra nos fonctions, et le relions à app1.xul en ajoutant la ligne suivante juste après la balise <window> :

<script type="application/x-javascript" src="app1.js"/></script>

Dans notre fichier JavaScript, nous mettons les fonctions définies par notre fichier XUL :

function about() { }
function closeWindow() { self.close(); }

about() est pour le moment vide. Nous avons aussi créé une fonction closeWindow(), qui sera appellée en lieu et place de window.close() dans notre fichier XUL : en effet, cliquer sur le bouton Fermer peut nécessiter d'autres actions avant de fermer la fenêtre (afficher un message de confirmation, effacer des éléments...).

Voyons notre fonction about(). Si l'on veut faire simple et rapide, on utilisera directement l'appel JavaScript alert() :

[fichier app1.js]
function about()
  {
  alert('Petit programme de text\n(c)2003 X-Or');
  }
function closeWindow() { self.close(); }

Certes, la fenêtre s'affiche, mais ça ne permet pas d'aller bien loin : ce qu'il nous faut, c'est afficher une nouvelle fenêtre.

Gestion de fenêtre
Ouvrir une fenêtre avec XUL se révèle en fait aussi simple que de la fermer : il suffit de faire appel à JavaScript avec window.open(), l'URL étant le nom du fichier à afficher. Nous créons donc notre fichier about.xul, qui contiendra les informations contenues par la nouvelle fenêtre.

[fichier app1.js]
function about()
  {
  window.open('about.xul', '_blank', 'width=150, height=20, toolbar=no, menubar=no');
  }
function closeWindow() { self.close(); }

[fichier about.xul]
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
  <window title="Popup" width="150px" height="20px" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script type="application/x-javascript" src="app1.js"/>
    <box>
      <button label="Fermer le popup" oncommand="closeWindow();" />
    </box>
  </window>

C'est un premier pas vers une application répondant à des besoins précis.