Ajax JavaScript CSS HTML 5 DOM

Créer une application XUL

Pour créer une premier programme d'exemple "Hello World!", il nous faut installer un environnement de développement et placer dans un répertoire la structure de fichier indispensable à XULRunner.

L'environnement de développement

Commencer par télécharger XULRunner et l'installer dans un répertoire, par exemple:

c:\xulrunner

Ce n'est pas nécessaire si on a installé Firefox 3.

Structure de fichiers

Toute application XUL utilise au moins quatre fichiers:

Ces fichiers sont enregistrés dans une arborescence, que vous placez dans le répertoire de l'application:

chrome
   | content
       | hello.xul
   | chrome.manifest
defaults
   | preferences
       | pref.js
application.ini

On a donc deux répertoires principaux: chrome et default. Chacun a au moins un sous-répertoire.
A coté de content on peut aussi ajouter un sous-répertoire locale pour les traductions des fichiers.

Le fichier application.ini

Ce fichier indique la version de Gecko requise pour faire fonctionner l'application. Elle contient aussi des informations de version concernant celle-ci et éventuellement le copyright:

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

Les indications de version MinVersion et éventuellement MaxVersion, correspondent à la version de XULRunner utilisée pour développer le programme.
Les champs Name (nom de l'application, repris dans chrome.manifest) et BuildID sont requis.

Le fichier chrome.manifest

Ce fichier définit les chemins ou seront trouvés les fichiers nécessaires à l'application.
Il est placé à la racine du répertoire chrome, et il indique le chemin des fichiers XUL et autres ressources, normalement dans content et éventuellement locale.
Généralement ces deux répertoires sont aussi à la racine de chrome.

content hello file:content/

Dans cet exemple, les fichiers de l'application hello ont été enregistrés directement dans le sous-répertoire content. Donc si l'application est dans le répertoire MonApplication, le chemin complet sera:

c:\MonApplication\chrome\content\hello.xul

Le prefixe peut être file: pour des fichiers et jar: pour une archive.

Le fichier de préférences

Le fichier pref.js est utilisé par XULRunner pour démarrer l'application. Il contient l'URI du fichier XUL d'interface de base, lequel peut utiliser d'autres fichiers XUL.

pref("toolkit.defaultChromeURI", "chrome://MonApplication/content/hello.xul");

Le suffixe chrome ne désigne par le sous-répertoire chrome dans le chemin sur le disque mais indique une structure de fichier particulière. Le répertoire chrome est implicite.

Premier programme

Il affiche "Salut le Monde!", comme dans l'exemple précédemment vu.

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="quelqueID" title="Hello" width="600" height="600" 
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<description value="Salut le Monde!" />
</window>

L'espace de nom xmlns est standard, les autres paramètres dépendent de l'application. La feuille de style est le fichier par défaut, on doit choisir un identificateur et l'assigner à id, un titre, les dimmensions de la fenêtre.

Lancer le programme

Le programme est donné en paramètre à l'application XULRunner:

\xulrunner\xulrunner.exe application.ini

On peut lancer l'application avec l'exécutable firefox.exe de Firefox 3 à la place de xulrunner.exe.

Exemple

Forum

Xul, help me

09-11-2008 23:26:34

nobilis

Bonjour, Bonsoir je regarde par ci par là et découvre petit a petit le xul je suis sous firefox 3 et je voudrais créer un tout petit add-on tout simple pour mon forum pas besoin de fenêtre pages de still etc . . . mais je ne comprend pas trés bien comment faire ce que je veux c'est en premier lieux un icone en ba a droite dans la statusbarpanel, lors d'un clic gauche ou droit un menu avec deux sous menu balises et images, dans ces sous menu les différentes balise d'insertion d'image lien, gif, etc . . . lorsque l'on clic dessu la balise est insérée dans le champ texte je ne prend pas un add qui existe déjà car les balises sont spécial. Donc si vous avez des tuto qui correspondent a ceci ou si vous voulez bien m'expliquer un peu. merci beaucoup pour l'aide que vous apporterez a bientôt .
10-11-2008 01:15:15

nobilis

enfaîte je veux faire exactement la mémechose que le plugin BBCode mais juste avec du BBC et les smilles sans configuration
13-11-2008 15:01:44

webmaster

Bonjour, c'est un peu plus compliqué que cela. Utiliser XUL sous firefox n'est pas difficile, le tutoriel sur le site ou celui de Mozilla montre comment faire, mais pour réaliser une extension, cela demande un peu plus de connaissances concernant Firefox proprement dit. Mozilla explique cependant sur son site comment procéder: Construire extension