Comment créer une application XUL ?

Tout d'abord, qu'est-ce que XUL ?

XUL signifie XML-based User interface Language. C'est un langage de description d'interfaces graphiques fondé sur XML créé dans le cadre du projet Mozilla. XUL se prononce zoul en anglais (pour rimer avec cool, mais aussi en hommage au demi-dieu Zoul dans le film S.O.S. Fantômes). (source Wikipédia : http://fr.wikipedia.org/wiki/XML-based_User_interface_Language)

Architecture d'un programme XUL

Toute application XUL utilise au moins quatre fichiers :

• application.ini : Ce fichier décrit l'application et son environnement.
• chrome.manifest : Définit le chemin des fichiers de l'application.
• pref.js : Indique le nom du fichier principal.
• <mon_appli>.xul :  C'est le fichier d'interface, il peut y en avoir d'autres. Son nom dépend de l'application.

XUL se doit donc de respecter une certaine arborescence :

• chrome
  • content
    • nom_de_mon_application.xul
  • locale // (facultatif) fichiers de langues i18n
    • fr-FR
      • nom_de_mon_application.dtd
      • nom_de_mon_application.properties
  • skin // (facultatif) fichiers CSS et images pour l'apparence
    • classic
      • nom_de_mon_application.css
  • chrome.manifest
  • defaults
    • preferences
      • pref.js
  • application.ini

Le fichier application.ini doit contenir quelque chose du genre :

[App]
Version=1.0
Vendor=Me
Name=nom_de_mon_application
BuildID=numéro
ID={id généré par un outil}
[Gecko]
MinVersion=1.8

Le fichier chrome.manifest :

content nom_de_mon_application file:content/
skin nom_de_mon_application classic file:skin/classic/
skin nom_de_mon_application skin2 file:skin/skin2/
locale nom_de_mon_application en-US file:locale/en-US/
locale nom_de_mon_application fr-FR file:locale/fr-FR/

Le fichier prefs.js :

pref('toolkit.defaultChromeFeatures', 'chrome, centerscreen, resizeable=no, titlebar=yes');
pref("toolkit.defaultChromeURI", "chrome://nom_de_mon_application/content/desktop.xul");
pref("toolkit.singletonWindowType", "nom_de_mon_application");

// options pour la js errors console
pref("browser.dom.window.dump.enabled", true);
pref("javascript.options.showInConsole", true);
pref("javascript.options.strict", true);
pref("nglayout.debug.disable_xul_cache", true); // désactive le cache XUL
pref("nglayout.debug.disable_xul_fastload", true); // lié au précédent, facultatif

Le fichier nom_de_mon_application.xul contient votre programme :

<?xml version="1.0"?>

<!-- Pour le thème principal de l'application -->
<?xml-stylesheet href="chrome://desktop/skin/nom_de_mon_application.css" type="text/css"?>

<!-- Pour la langue de l'application -->
<!DOCTYPE window SYSTEM "chrome://desktop/locale/nom_de_mon_application.dtd">

<window
    id="un_ID_pour_l_appli"
    title="titre_de_l_appli"
    orient="vertical"
    windowtype="desktop"
    width="800"
    height="600"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

    <!-- Un fichier javascript, le chemin est relatif au fichier .xul -->
    <script type="application/x-javascript" src="js/mootools.js"></script>

    <description value="Salut le Monde!" />

</window>