xulfr.org

1.2 La structure XUL

Écrit par Neil Deakin. Traduit par Gérard L. (22/11/2003), mise à jour par Laurent Jouanneau (20/11/2004) .
Page originale : http://www.xulplanet.com/tutorials/xultu/xulfile.html xulplanet.com

Nous commencerons par regarder comment le système de fichiers de XUL est organisé sous Mozilla.

Comment XUL est traité

Dans Mozilla, XUL est traité pratiquement de la même manière que HTML. Quand vous tapez un URL d'une page HTML dans le champs de saisie d'adresse du navigateur, ce dernier localise le site Web et télécharge le contenu. Le moteur d'affichage de Mozilla prend le contenu sous la forme du source HTML, et le transforme en un arbre de document. L'arbre est alors converti en un ensemble d'objets qui peuvent être affiché sur l'écran. CSS, les images et d'autres technologies sont utilisés pour contrôler la présentation. XUL fonctionne de la même manière.

En fait, dans Mozilla, tous les types de documents, que ce soit HTML ou XUL, ou même SVG, sont tous traités par le même code sous-jacent. Cela signifie que les mêmes propriétés CSS peuvent être utilisées pour décorer à la fois XUL et HTML, et beaucoup de spécificités peuvent être partagées entre les deux. Cependant, il y a des fonctionnalités qui sont spécifiques au HTML, comme les formulaires, et d'autres spécifiques à XUL comme les overlays.

Puisque les fichiers XUL et HTML sont traités de la même manière, vous pouvez charger les deux à partir du système de fichier local ou d'une page Web. De plus, Mozilla fournit un moyen spécial pour l'installation et la déclaration des fichiers dans son système chrome. Cela nécessite la création d'une archive de fichiers que l'utilisateur pourra télécharger et installer. Ces paquetages déclarés ont des privilèges avancés comme la possibilité de lire des fichiers, examiner les préférences et les marque-pages de l'utilisateur, et accéder à d'autres fonctionnalités du système. Bien sûr, les pages Web n'ont pas ces privilèges, tant qu'elles ne sont pas signées avec un certificat digital et que l'utilisateur l'a autorisé.

La déclaration des paquetages est le moyen pour les extensions de Firefox de pouvoir ajouter des fonctionnalités au navigateur. Les extensions sont de petits paquetages de fichiers XUL, Javascript, feuilles de styles et images, rassemblés en un seul fichier. Ce fichier peut être crée en utilisant un outil ZIP. Quand l'utilisateur le télécharge, il est installé sur sa machine. Il sera ancré dans le navigateur en utilisant une fonctionnalité spécifique appelée overlay, qui permet au XUL de l'extension et au XUL du navigateur de se combiner ensemble. Pour l'utilisateur, cela est comme si l'extension avait modifié le navigateur, mais en réalité, le code est séparé et l'extension peut être désinstallée facilement.

Les paquetages déclarés ne sont pas requis pour utiliser les overlays, bien sûr. Si ils ne le sont pas, vous ne pourrez pas y accéder via l'interface principale du navigateur, mais vous pouvez toujours y accéder via un type spécial d'URL, désigné spécifiquement pour accéder aux paquetages installés. Ce type d'URL est appelé un URL chrome, et commence toujours par chrome://. De la même manière que les URLs http:// réfèrent toujours aux sites Web distants, et que les URL file:// réfèrent toujours aux fichiers locaux, les URL chrome:// réfèrent toujours aux paquetages installés et aux extensions. Nous en verrons plus sur la syntaxe des URL chrome dans la prochaine section.

Il est important de noter que lorsque l'on accède au contenu avec un URL chrome, il obtient les privilèges avancés décrit plus haut ce que les autres types d'URL ne peuvent pas. Par exemple, un URL HTTP n'a pas de privilège particulier et une erreur apparaîtra si une page Web essaye, par exemple, de lire un fichier local. Alors qu'un fichier chargé via un URL chrome permettra de lire les fichiers sans restrictions.

La distinction est importante. Cela signifie qu'il y a certaines choses que le contenu des pages Web ne peut pas faire, comme lire les marque-pages de l'utilisateur. Cette distinction n'est pas basée sur le type du contenu affiché; seul le type de l'URL est important. HTML et XUL placés sur un site Web n'ont pas de permissions supplémentaires. Mais HTML et XUL chargés avec un URL chrome ont des permissions avancées.

Il faut noter également que le navigateur Mozilla lui-même est juste un ensemble de paquetages contenant des fichiers XUL, Javascript et CSS. Ces fichiers sont accédés via un URL chrome et ont alors des privilèges avancés. Ils fonctionnent alors comme n'importe quel autre paquetage. Bien sûr, le navigateur est bien plus gros et plus compliqué que la plupart des extensions. Le client Mail de Mozilla, Composer, Firefox et Thunderbird comme un certain nombre d'autres composants, sont tous écrit en XUL et sont accessible via des URLs chrome.

Si vous allez utiliser XUL sur un site Web, vous pouvez juste mettre les fichiers XUL sur le site comme vous le feriez avec un fichier HTML, et indiquer leur URL dans un navigateur. Assurez vous que votre serveur Web est configuré pour envoyer les fichiers XUL avec le type de contenu application/vnd.mozilla.xul+xml. Ce type de contenu permet à Mozilla de faire la différence entre HTML et XUL. Mozilla n'utilise pas l'extension du fichier sauf pour lire les fichiers locaux, mais vous devrez alors utiliser l'extension ".xul" pour tous les fichiers XUL. Vous pouvez ouvrir les fichiers XUL à partir de votre propre machine en les ouvrant dans le navigateur, ou en double cliquant sur le fichier dans votre gestionnaire de fichier. Souvenez vous que les fichiers XUL distants ont des restrictions significatives sur ce que vous faites.

En ce moment, un travail est en cours pour permettre de créer des applications XUL autonomes, avec leur propre installateur et exécutable. Puisqu'ils partagent les mêmes bibliothèques que Mozilla, vous n'aurez pas besoin d'avoir le navigateur installé pour utiliser XUL. Il est possible de le faire aujourd'hui, mais le processus est compliqué et rarement fait. Le but est de rationaliser le processus.

Tandis que la plupart des fonctionnalités sont partagées entre HTML et XUL, Mozilla utilise différent type de document pour chacun d'eux. Il y a trois principaux types de document dans Mozilla : HTML, XML et XUL. Bien entendu, le type HTML est utilisé pour les documents HTML, le type XUL est utilisé pour les documents XUL, et le type XML est utilisé pour les autres documents en XML. Puisque XUL est aussi du XML, le type de document XUL est un sous-type du type XML générique. Il y a de subtiles différences dans les fonctionnalités. Par exemple, tandis que les contrôles de formulaire dans les pages HTML sont accessibles via la propriété document.forms, cette propriété n'est pas disponible pour les documents XUL puisque XUL n'a pas de formulaire dans le sens HTML du terme. D'un autre coté, les fonctionnalités spécifiques de XUL comme les overlays ou les gabarits ne sont utilisable que dans les documents XUL.

La distinction entre les documents est importante. Il est possible d'utiliser plusieurs fonctionnalités XUL en HTML ou en XML si elles ne sont pas spécifiques à des types de documents. Cependant, d'autres fonctionnalités nécessitent les bons types de documents. Ainsi, vous pouvez utiliser les types de mise en page XUL dans d'autres documents étant donné qu'ils ne reposent pas sur le type de document XUL pour fonctionner.

Pour résumé les points précédents :

Les prochaines sections décrivent la structure de base d'un paquetage chrome qui peut être installé dans Mozilla. Cependant, si vous voulez juste commencer à créer une simple application, vous pouvez aller directement à la section 2 et revenir à cette section plus tard.

Organisation d'un paquetage

Mozilla est conçu de telle manière que vous puissiez avoir autant de modules que vous désirez installer. Une installation typique (NdT: de la suite Mozilla) devrait se composer du navigateur, du client de messagerie et d'un éditeur. Elle aura également un module pour chaque thème (NdT: skin) et localisation (NdT: locale, pack de langue) installés. Chacun de ces modules, ou de ces paquetages, se compose d'un ensemble de dossiers qui décrivent son interface utilisateur. Par exemple, le module de messagerie comportera des descriptions pour la fenêtre de liste des messages de courriers, pour la fenêtre de rédaction et pour les boîtes de dialogues du carnet d'adresses.

Les paquetages qui sont inclus dans Mozilla sont situés dans le dossier chrome, que vous trouverez dans le répertoire où vous avez installé Mozilla. Le dossier chrome est l'endroit où sont situés tous les fichiers qui décrivent l'interface utilisateur employé par Mozilla, le client mail et d'autres applications.

Plutôt déroutant, le répertoire est appelé "chrome" mais n'est que très légèrement lié à l'URL chrome. Une simple copie d'un fichier dans le répertoire "chrome" ne lui donne pas plus de permissions supplémentaire, et n'est pas accessible via un URL chrome. Le seul moyen de créer du contenu accessible à travers un URL chrome, est la création d'un paquetage comme décrit dans les prochaines sections. Ce répertoire chrome est appelé "chrome" parce qu'il semble que cela soit un nom commode pour utiliser ce répertoire où les paquetages chrome inclus avec Mozilla sont rangés.

Pour augmenter la confusion, il y a deux autres endroits où le mot "chrome" peut apparaître. le premier est l'argument en ligne de commande -chrome, et le modificateur "chrome" pour la fonction window.open. Aucune de ces fonctionnalités autorise plus de privilèges. Elles sont plutôt utilisées pour ouvrir une nouvelle fenêtre principale sans l'interface utilisateur du navigateur comme les menus ou la barre d'outils. Vous utiliserez en général ces caractéristiques dans des applications XUL plus complexes comme vous ne voudriez pas de navigateur existant autour de vos boîtes de dialogue.

Les fichiers d'un paquetage sont généralement combinés dans un simple fichier JAR. Un fichier JAR peut être créé et examiné en utilisant un utilitaire ZIP. Par exemple, ouvrez quelques uns des fichiers JAR du répertoire chrome de Mozilla, pour voir la structure de ces paquetages. Bien qu'il est normal de combiner les fichiers dans un fichier JAR, les paquetages peuvent être aussi accédés dans une forme expansée en un ensemble de répertoire. Bien que vous ne distribuerez pas généralement un paquetage par ce moyen, c'est pratique durant le développement puisque vous pouvez éditer les fichier du répertoire et ensuite recharger le fichier XUL sans avoir à ré-empaqueter ou réinstaller.

Il y a habituellement trois parties différentes dans un paquetage chrome, bien qu'elles soient optionnelles. Chaque partie est stockée dans un répertoire différent. Ces trois ensembles sont le contenu, le thème et la localisation décris en dessous. Un paquetage particulier pourrait fournir un ou plusieurs thèmes et localisations, mais un utilisateur peut les remplacer par les siens. De plus, un paquetage peut inclure plusieurs applications différentes chacune accessible via des URLs chrome différents. Le système de paquetage est suffisement flexible aussi vous pouvez inclure n'importe quelle partie dont vous avez besoin, et autoriser le téléchargement séparé d'autres parties, comme le texte pour les différentes langues.

Content - Fenêtres et scripts
Contient les déclarations des fenêtres et des éléments d'interface utilisateur. Ceux-ci sont stockés dans les fichiers XUL, qui ont l'extension xul. Il peut y avoir plusieurs fichiers XUL, mais la fenêtre principale devrait toujours avoir un nom de fichier identique au nom du paquetage. Par exemple, le paquetage editor contiendra un fichier appelé editor.xul. Les scripts (NdT: javascript) sont placés dans des fichiers séparés à côté des fichiers XUL.
Skin - feuilles de style, images et autres fichiers de thèmes
Les feuilles de style décrivent des détails de l'aspect d'une fenêtre. Elles sont stockées séparément des fichiers XUL pour faciliter la modification du thème d'une application. Toutes les images utilisées sont également stockées ici.
Locale - fichiers spécifiques locaux
Tous les textes qui sont affichés dans une fenêtre sont stockés séparément. De cette façon, un utilisateur peut avoir une configuration pour sa propre langue.

Jetez un coup d'oeil au dossier chrome de Mozilla. Vous devriez voir un groupe de fichiers JAR, un pour chaque paquetage installé. Par exemple, le fichier messenger.jar décrit l'interface utilisateur pour le module de messagerie. Le fichier modern.jar décrit le thème moderne.

Analyse d'un paquetage type

Le nom du fichier JAR devrait décrire ce qu'il contient, mais vous pouvez vous en assurer en regardant son contenu. Utilisons le paquetage messenger comme exemple. Si vous extrayez les dossiers de messenger.jar, vous constaterez qu'il contient une structure arborescente comme ce qui suit :

content
   messenger
      contents.rdf
      messenger.xul
      -- les autres fichiers XUL et scripts pour les mails sont ici --
      addressbook
         -- les fichiers du carnet d'adresses sont ici --
      messengercompose
         -- les fichiers de composition des messages vont ici --
.
.
.

On peut facilement identifier cela comme le contenu d'un paquetage, car le dossier supérieur s'appelle 'content'. Pour les thèmes, le dossier aurait été appelé 'skin' et pour les localisations, il aurait été appelé 'locale'. En fait, ce n'est pas une obligation mais vous devriez suivre cette convention pour rendre votre paquetage plus clair. Certains paquetages peuvent inclure une section content, skin et locale. Dans ces paquetages, vous trouverez un sous-répertoire pour chaque section. Par exemple, Chatzilla est distribué de cette manière.

Le dossier content/messenger contient un certain nombre de fichiers avec les extensions xul et js. Les fichiers XUL sont ceux qui ont une extension xul. Les fichiers avec l'extension js sont des fichiers de Javascript qui contiennent les scripts qui exécutent les fonctionnalités d'une fenêtre. Beaucoup de fichiers XUL ont un fichier de script qui leur est associé, et certains en ont plus d'un.

Dans la liste ci-dessus, deux fichiers ont été montrés. Il y en a évidemment d'autres, mais pour des raisons de simplicité, ils ne sont pas montrés. Le fichier messenger.xul est le fichier XUL qui décrit la fenêtre principale de messagerie qui affiche la liste des messages mail. La fenêtre des mail est assez complexe, et elle est donc faites de plusieurs fichiers combinés entre eux en utilisant des overlays. La fenêtre principale pour le contenu d'un paquetage doit avoir le même nom que le paquetage avec l'extension xul. Dans notre cas, le nom du paquetage est messenger, aussi nous nous attendons à trouver messenger.xul. D'autres fichiers XUL décrivent des fenêtres séparées. Par exemple, le fichier subscribe.xul décrit la boîte de dialogue pour souscrire aux newsgroups.

Le fichier contents.rdf est trouvé dans chaque paquetage, un pour chaque contenu, thème et localisation dans le paquetage. C'est un important fichier puisqu'il spécifie le nom du paquetage, son auteur et sa version. Mozilla lira ce fichier et utilisera son contenu pour déclarer le paquetage et lui assigner un URL chrome, ainsi les fichiers pourront être accessible à travers un URL chrome. Sans ce fichier, un URL chrome ne peut être assigné au paquetage. Les détails de ce fichier seront décrits dans une section plus loin.

Deux sous-répertoires, addressbook et messengercompose, décrivent les sections additionnelles du composant de messagerie. Ils sont placés dans différents dossiers simplement pour les séparer. Ils n'ont pas besoin de fichiers contents.rdf parce qu'ils peuvent être accédés à partir des mêmes URL chrome.

Thèmes

Le code sous-jacent de Mozilla les appellent skins, bien que l'interface utilisateur les appellent thèmes, mais ils désignent la même chose. Les fichiers modern.jar et classic.jar décrivent les thèmes inclus dans Mozilla. Leur structure est semblable au paquetage "contents". Par exemple, modern.jar :

skin
   modern
      navigator
         contents.rdf
         -- les fichiers thèmes du navigateur sont ici --
      messenger
         contents.rdf
         -- les fichiers thèmes de la messengerie sont ici --
      editor
         contents.rdf
         -- les fichiers thèmes de l'editeur sont ici --
      communicator
         contents.rdf
         -- les fichiers thèmes du communicator sont ici --
      global
         contents.rdf
         -- les fichiers thèmes globaux sont ici --
.
.
.

C'est un peu plus compliqué, bien que la structure est similaire à la partie contenu. À la place de 'content', le nom 'skin' est utilisé. Souvenez-vous que c'est purement conventionnel, puisque vous pouvez en fait mettre tous les fichiers dans un seul répertoire au niveau supérieur, et ne pas utiliser de sous-répertoire. Cependant, pour de plus grosses applications comme Mozilla, les sous-répertoires sont utilisés pour séparer les différents composants. Dans l'exemple du dessus, cinq répertoires existent, un pour chaque paquetage sur lesquels le thème est appliqué. Le répertoire "global" contient les fichiers du thème qui sont généraux à tous les paquetages. Ces fichiers seront appliqués sur tous les composants et normalement vous utiliserez celui-ci. La partie "global" définit l'apparence de tous les composants graphiques XUL communs, alors que les autres répertoires ont des fichiers spécifiques aux autres applications. Par exemple, le répertoire "editor" décrit le thème pour le composant "editor" et contient, entre autre, les images pour les boutons de la barre d'outils de l'éditeur.

Vous avez pu noter qu'il y a cinq fichiers contents.rdf. De cette façon, les thèmes sont appliquées séparément à chaque module. Vous pourriez avoir un thème différent pour le navigateur comme messager, mais la plus grande partie de l'aspect étant déterminé par la partie globale, vous ne verrez donc pas beaucoup de différence. D'ailleurs, Mozilla ne fournit pas la possibilité de sélectionner un thème différent pour chaque application. Ils sont également séparés en fichiers pour que de nouveaux modules puissent être ajoutés et des modules existants puissent être enlevés facilement. Par exemple, vous pouvez créer un nouveau thème pour la messagerie et les utilisateurs peuvent le télécharger séparément. En empaquetant les parties séparément, les bonnes pièces peuvent être sélectionnées pour l'utilisation.

Un thème se compose de fichiers CSS et d'un certain nombre d'images utilisés pour définir le look d'une interface. Le fichier messenger.css est utilisé par messenger.xul et contient les styles pour définir l'apparence des différences parties de l'interface de messagerie. À nouveau, notez le nom du fichier messenger.css, qui a le même nom que le paquetage. En changeant de fichier CSS, vous pouvez modifier l'apparence d'une fenêtre sans changer ses fonctions. C'est ainsi que vous pouvez créer un nouveau thème. La partie XUL est toujours la même, mais la partie thème change indépendamment.

Localisation

Le fichier en-US.jar décrit l'information de langage pour chaque module, dans le cas présent pour l'anglais des Etats-Unis. Comme les thèmes, chaque langue contiendra les fichiers qui indiquent le texte utilisé par le paquetage mais pour une langue spécifique. Comme d'habitude, un fichier contents.rdf est inclus, listant les paquetages pour lesquels la partie locale fournit le texte. Les sous-répertoires fournissent le texte pour chaque paquetage. La structure est similaire à la partie thème, aussi nous ne la listerons pas ici.

Le texte localisé est stocké dans deux types de fichiers, des fichiers DTD, et des fichiers de propriétés. Les fichiers DTD ont une extension dtd et contiennent les déclarations d'entités, une pour chaque chaîne de caractères qui est utilisée dans une fenêtre. Par exemple, le fichier messenger.dtd contient des déclarations d'entités pour chaque commandes du menu. En outre, des raccourcis clavier pour chaque commandes sont également définis, parce qu'ils peuvent être différents pour chaque langue. Les fichiers DTD sont utilisés par des fichiers XUL, et donc en général, vous en aurez un par fichier XUL.

La partie "locale" contient également des fichiers de propriétés, qui sont similaires, mais sont utilisés par les fichiers de script. Le fichier messenger.properties contient quelques chaînes de caractères de ce type.

Cette structure vous permet de traduire Mozilla ou un module dans une langue différente en ajoutant juste une nouvelle partie "locale" pour cette langue. Vous n'avez pas à changer la partie XUL. De plus, d'autres personnes peuvent fournir des paquetages séparés qui appliquent des thèmes ou des localisations à votre partie contenu, apportant ainsi un nouveau thème ou une nouvelle langue sans avoir à changer le paquetage original.

Autres Paquetages

Plusieurs paquetages dans Mozilla sont des sous-paquetages de communicator.jar. Par exemple, vous trouverez la fenêtre des marque-pages, le visualiseur d'historique et les boîtes de dialogue des préférences dans le paquetage communicator. Ils sont mis là parce qu'ils sont communs à un certain nombre de paquetages. Il n'y a rien de spécial à leur sujet.

Il y a un paquetage spécial appelé toolkit (ou global). Nous avions déjà vu le dossier global pour des thèmes. Le toolkit.jar contient la partie content lui correspondant. Il contient quelques boîtes de dialogues et définitions globales. Il définit également l'aspect par défaut et les fonctionnalités des divers widgets tels que des boîtes de textes et des boutons. Les fichiers situés dans la partie globale de l'archive du thème contiennent l'apparence par défaut de tous les éléments d'interface de XUL. La plupart des changements de thème entraîneront des variations de ces fichiers.

Ajouter un paquetage

Mozilla place les paquetages qui sont inclus dans l'installation, dans le répertoire chrome. Cependant, ils n'ont pas besoin d'être placés ici. Si vous avez un autre paquetage installé, il peut être placé n'importe où sur le disque. Le fichier chrome.rdf dans le dossier chrome stocke la liste des paquetages, thèmes et locales installés et l'endroit où ils sont situés. Il est commun d'installer les nouveaux paquetages dans le répertoire chrome simplement parce que c'est commode. cependant ils fonctionneront aussi bien à partir d'un autre répertoire, ou de quelque part sur votre réseau local. Vous ne pouvez pas les placer sur un site distant, à moins que le site distant soit monté sur le système de fichier local.

Un utilisateur peut avoir plusieurs thèmes et localisations installés modifiant le même paquetage. Un seul thème et locale par paquetage est actif à un moment donné. Le fichier chrome/chrome.rdf dans le profil utilisateur spécifie quels thèmes et localisations sont actifs. Ce fichier peut aussi spécifier les paquetages "content". Il fonctionne de manière similaire au fichier chrome.rdf de l'installation principale de Mozilla. Cependant les paquetages spécifiés dans le profil ne sont installés que pour cet utilisateur, alors que le fichier chrome.rdf du répertoire de Mozilla est utilisé pour les paquetages disponibles pour tous les utilisateurs.


Dans la prochaine section, nous regarderons comment se référer aux paquetages en utilisant les URL chrome.