2.1 Créer une fenêtre

Attention : Ce tutoriel est ancien et n'est pas mis à jour. Bien que beaucoup d'informations soient encore valables pour les dernières versions de gecko, beaucoup sont aussi obsolètes. Il est préférable d'aller consulter cette page sur la version française de ce tutoriel sur developer.mozilla.org.

Nous allons créer un simple outil de recherche de fichiers tout au long de ce tutoriel. Avant tout, cependant, nous devons étudier la syntaxe de base d'un fichier XUL.

Création d'un fichier XUL

Un fichier XUL peut avoir n'importe quel nom mais il doit avoir l'extension .xul. Le fichier XUL le plus simple a la structure suivante :

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

<window
    id="findfile-window"
    title="Recherche de fichiers"
    orient="horizontal"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 ...
</window>

Cette fenêtre ne sert à rien puisqu'elle ne comporte pas d'élements d'interface utilisateur. Ceux ci seront ajoutés dans la section suivante. Voici l'analyse ligne par ligne du code ci-dessus :

1. <?xml version="1.0"?>
   Cette ligne déclare simplement qu'il s'agit d'un fichier XML. Vous devrez normalement ajouter cette ligne à l'identique au début de chaque fichier xul, tout comme vous mettriez la balise HTML au début d'un fichier HTML.
2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
   Cette ligne est utilisée pour spécifier la feuille de style à utiliser pour le fichier. C'est la syntaxe que les fichiers XML emploient pour importer des feuilles de style. Dans ce cas, nous importons les styles trouvés dans le répertoire chrome global/skin. Nous n'avons pas indiqué de fichier spécifique ainsi Mozilla déterminera quels fichiers du dossier il emploiera. Ici, le fichier le plus important, global.css, est sélectionné. Ce fichier contient toutes les déclarations par défaut pour tous les éléments XUL. Puisque XML ne connaît pas la manière dont les éléments doivent être affichés, ce fichier s'en charge. De façon générale, vous mettrez cette ligne au debut de chaque fichier XUL. Vous pouvez également importer d'autres feuilles de style en utilisant la même syntaxe. Notez que vous devrez normalement importer la feuille de style globale à l'intérieur du fichier de votre propre feuille de style.
3. <window
   Cette ligne déclare que vous allez décrire une fenêtre window. Chaque fenêtre d'interface utilisateur est décrite dans un fichier séparé. Cette balise ressemble à la balise BODY en HTML qui entoure la totalité du contenu. Plusieurs attributs peuvent être placés dans l'élément window (ici il y en a quatre). Dans cet exemple, chaque attribut est placé sur une ligne séparée bien que ce ne soit pas une obligation.
4. id="findfile-window"
   L'attribut id est utilisé comme un identifiant, de sorte que des scripts puissent y faire référence. Vous mettrez normalement un attribut id sur tous les éléments. Vous êtes libre de choisir n'importe quel nom, toutefois, il est préférable qu'il soit pertinent.
5. title="Recherche de fichiers"
   L'attribut title décrit le texte qui apparaîtra dans la barre de titre de la fenêtre quand elle sera affichée. Dans le cas présent, le texte Recherche de fichiers sera affiché.
6. orient="horizontal"
   L'attribut orient spécifie l'arrangement des éléments de la fenêtre. La valeur horizontal indique que les éléments doivent être placés horizontalement dans la fenêtre. Vous pouvez également utiliser la valeur vertical signifiant que les éléments seront affichés en colonne. Comme c'est la valeur par défaut, vous pouvez omettre cet attribut si vous souhaitez avoir l'orientation verticale.
7. xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   Cette ligne déclare l'espace de nommage pour XUL que vous devrez mettre dans l'élément window pour indiquer que tous ses enfants sont du XUL. Notez que cette URL n'est jamais téléchargée réellement. Mozilla reconnaîtra cette URL en interne.
8. ...
   Mettez ici les éléments (les boutons, les menus et les autres composants de l'interface utilisateur) à afficher dans la fenêtre. Nous en ajouterons quelques uns dans les prochaines sections.
9. </window>
   Et enfin, nous devons fermer la balise window à la fin du fichier.

Ouverture d'une fenêtre

Afin d'ouvrir une fenêtre XUL, plusieurs méthodes peuvent être employées. Si vous n'êtes qu'à l'étape de développement, vous pouvez juste taper l'URL (commencant par chrome:, file: ou d'autre type d'URL) dans la barre d'adresses du navigateur Mozilla. Vous pouvez également double-cliquer sur le fichier dans votre gestionnaire de fichiers, en supposant que les fichiers XUL soient associés à Mozilla. La fenêtre XUL apparaîtra cependant dans la fenêtre de navigateur et non dans une nouvelle, mais c'est souvent suffisant durant les premières étapes de développement.

La manière correcte, naturellement, est d'ouvrir la fenêtre en utilisant JavaScript. Aucune nouvelle syntaxe n'est nécessaire, vous pouvez employer la fonction window.open() comme pour tout document HTML. Cependant, une option additionnelle, appelée chrome est nécessaire pour indiquer au navigateur que le document à ouvrir est un chrome. Celle-ci s'ouvrira sans barre d'outils, sans menu et sans aucun élément qu'une fenêtre de navigateur dispose normalement. La syntaxe est décrite ci-dessous :

window.open(url,windowname,flags);

où l'argument flags contient "chrome" comme dans cet exemple :

  window.open("chrome://navigator/content/navigator.xul", "bmarks",
    "chrome,width=600,height=300");

mozilla -chrome chrome://findfile/content/findfile.xul
mozilla -chrome resource:/chrome/findfile/content/findfile/findfile.xul

Pour en voir quand même l'effet, la commande en ligne suivante ouvrira la fenêtre des marque-pages :

mozilla -chrome chrome://communicator/content/bookmarks/bookmarksManager.xul

Si vous utilisez Firefox, essayez :
firefox -chrome chrome://browser/content/bookmarks/bookmarksManager.xul

L'option -chrome ne donne aucuns privilèges supplémentaires au fichier. Au lieu de cela, il entraine l'ouverture du fichier spécifié dans une fenêtre racine sans aucune interface chrome de navigation, comme la barre d'adresses ou le menu. Seules les URLs chrome ont des privilèges supplémentaires.

L'Éditeur dynamique XUL vous permet de taper du code XUL et de voir immédiatement le résultat dans Mozilla !

Problèmes

Si la fenêtre XUL ne se montre pas sur le bureau mais a un icone sur la barre de tâches, vérifiez la déclaration xml-stylesheet. Assurez vous que vous avez inclus correctement la feuille de styles :

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

Dans la section suivante, nous ajouterons des boutons dans la fenêtre.