2.1 Créer une fenêtre

Nous allons créer un simple outil de recherche de fichiers tout le long de ce tutoriel. Avant tout, cependant, nous devons regarder 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 fera rien tant qu'elle ne comportera pas d'élements d'interface utilisateur. Cela sera ajouté à la section suivante. Voici l'analyse ligne par ligne du code ci-dessus :

1. <?xml version="1.0"?>
   Cette ligne déclare simplement que c'est 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é 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 permet pas de savoir la manière dont les éléments doivent être affichés, ce fichier l'indique. D'une 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 à partir de votre propre fichier de feuille de style.
3. <window
   Cette ligne déclare que vous allez décrire une fenêtre. 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 la balise window (ici il y en a quatre). Dans cet exemple, chaque attribut est placé sur une ligne séparée mais il n'est pas obligé qu'ils le soient.
4. id="findfile-window"
   L'attribut id est utilisé comme un identifiant de sorte que la fenêtre puisse être utilisée par des scripts. Vous mettrez normalement un attribut id sur tous les éléments. Le nom peut être ce que vous voulez bien qu'il soit préférable de choisir quelque chose d'approprié.
5. title="Recherche de fichier"
   L'attribut title décrit le texte qui apparaîtra dans la barre de titre de la fenêtre quand elle sera affiché. Dans ce cas-ci le texte Recherche de fichier 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 qui signifie que les articles sont affichés en colonne. C'est la valeur par défaut, ainsi vous pouvez ne pas mettre l'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 XUL. Notez que cet URL n'est jamais téléchargé réellement. Mozilla reconnaitra cet URL en interne.
8. ...
   C'est ici que les éléments (les boutons, les menus et les autres composants de l'interface utilisateur) sont déclarés. Nous en ajouterons quelques un dans de 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, il y a plusieurs méthodes qui 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 de localisation d'une fenêtre du navigateur Mozilla. Vous devriez également pouvoir double-cliquer sur le fichier dans votre gestionnaire de fichier, supposant que les fichiers XUL sont 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'outil, 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ù flags contient l'élément "chrome". 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

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

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