Créer une fenêtre

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="https://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écrit dans un fichier différent. Cette balise s'apparente à une balise HTML qui entoure l'ensemble d'un document HTML, sauf qu'elle décrit une interface utilisateur au lieu d'un document. Plusieurs attributs peuvent être placés dans la balise window -- dans ce cas, ils sont au nombre de 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="https://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 (commençant 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");

   L'exemple findfile.xul

   Commençons par créer le fichier de base pour la boîte de dialogue de recherche de fichiers. Créez un fichier appelé findfile.xul et mettez le dans le répertoire content spécifié dans le fichier findfile.manifest (nous l'avons créé dans la section précédente). Ajoutez au fichier le squelette XUL montré au début de cette page et sauvegardez le.

   Vous pouvez utiliser le paramètre en ligne de commande '-chrome' pour indiquer le fichier XUL à ouvrir au démarrage de mozilla. S'il n'est pas spécifié, la fenêtre par défaut s'ouvrira (habituellement la fenêtre de navigateur). Par exemple, nous pourrions ouvrir la boite de dialogue de recherche de fichiers avec l'une des commandes suivantes :

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

   Si vous utilisez cette commande en ligne (dans l'hypothèse que cela soit possible sur votre plateforme), la boite de dialogue de recherche de fichiers s'ouvrira par défaut au lieu de la fenêtre de navigateur de Mozilla. Naturellement, puisque nous n'avons pas mis d'éléments graphiques dans la fenêtre, vous ne verrez rien. Dans la section suivante, quelques éléments y seront ajoutés.

   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/bookma...rksManager.xul
   
   Si vous utilisez Firefox, essayez :
   firefox -chrome chrome://browser/content/places/places.xul

   L'option '-chrome' ne donne aucun privilège supplémentaire 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 icône sur la barre de tâches, vérifiez la déclaration xml-stylesheet. Assurez vous que vous avez inclus correctement la feuille de style :

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

   ---

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

   « PrécédentSuivant »