Créer une application XUL – Partie 1 – Théorie

Le langage XUL c’est quoi?

XUL (prononcé zoul) est l’abréviation de « XML-based User interface Language » (basé sur XML).

C’est un langage de balisage (tout comme l’(X)HTML) qui permet la description d’interfaces graphiques des applications (dont entre autres les extensions du navigateur Firefox de Mozilla).

Les balises sont des unités sémantiques qui permettent de délimité des ensembles dans un fichier texte (ici un fichier XUL), par exemple si je veux que dans ma phrase le mot « tutoriel » soit en gras j’adopterais la logique qui veut que juste avant d’écrire le mot tutoriel j’annonce le fait que ce qui suit sera en gras, ensuite après le mot tutoriel j’annonce qu’il ne faut plus écrire en gras. comme suit:

  • « Cette article est un <debut ensemble a afficher en gras>tutoriel<fin ensemble a afficher en gras> »

Lors de l’affichage de cette phrase dans le navigateur web par le moteur d’affichage, les balises « <debut ensemble a afficher en gras> » et « <fin ensemble a afficher en gras> » ne seront pas visible mais interprété pour donner le résultat suivant:

  • « Cette article est un tutoriel« 

XUL offre les informations permettant de dire comment mettre en place tous les éléments d’une interface graphique tel que les menus (fixes et popups), les listes, les boutons, les zones de textes mais aussi les boites de dialogues, les barres d’outils ou encore les raccourcis claviers.

il est possible de mettre ces informations dans un autre fichier (source de donnée externe) de type RDF (Ressource Description Framework) qui est un modèle informatique de description de  ressources.

XUL a l’avantage d’être simple, de permettre de travailler rapidement, logiquement, il est extensible grâce à l’utilisation de XBL qui lui permet d’implémenter de nouveau élément d’interface ou d’associer des comportements ou des modèles de contenu, et enfin, il est bon de citer que XUL offre un résultat multiplateforme dit  portable (Tout comme JAVA).

Bien… c’est jolie de décrire son interface mais comment fait on pour l’afficher?

Notre première application XUL

C’est simple on utilise ce qu’on appelle un moteur d’affichage de page web (ou moteur de rendu), dans le cas de Firefox (navigateur Internet), Thunderbird (client de messagerie) et SeaMonkey (ensemble d’outils internet [Agenda, Tchat…]), le premier moteur à implémenter XUL est Gecko qui en plus de XUL supporte aussi CSS, DOM, JavaScript, RDF, HTML et XHTML, SMIL, XML etc…

Comment fonctionne Gecko?

Le fonctionnement de Gecko est assez compliqué car il fait appelle a des algorithmes très avances, pour informations sachez que pour chaque page via l’interface DOM il crée d’un coté un arbre (arborescence) d’objets « content » et d’un autre coté un arbre d’objets FRAME (langage Gecko).

Pour schématiser le fonctionnement de Gecko, les objets content sont les informations (réellement plus) quant à l’objet FRAME contient les éléments à afficher (éléments ayant des propriétés et pouvant être modifié via CSS).

Donc ou se trouve la complexité??? Dans le fait que tout est lié, si un frame (tableau, cadre, etc…) change sa hauteur ou sa largeur (par exemple) alors il faudra recalculer toutes les autres hauteurs ou largeurs et faire en sortes de ne pas oublier dans les calcules les autres propriétés telles que les margin ou padding, parfois la taille obligera le texte à faire un saut de ligne ou à changer le nombre de colonnes…, C’est comme dans un rubik’s Cube, une simple rotation supposée modifier 3 petites cases causera en réalité, le changement de position de coins, d’arêtes et couronnes de plusieurs autres faces.

Où trouve t’on Gecko?

Le moteur Gecko est inclus dans Firefox ainsi que dans d’autres navigateurs web tel que Camino (OS X) · Epiphany (utilise Gecko jusqu’a 2008)· IceCat · Iceweasel (qui est en quelques sortes la version pour Debian de Firefox)· Kazehakase (navigateur japonais pour Linux) · K-Meleon (Qui utilise Gecko mais pas XUL) · Fennec (version mobile de Firefox) · Torpark/xB Browser (navigateur pour le réseau TOR [Réseau basé sur le principe de l’anonymat] ,

XULRunner est aussi dans ce qu’on appelle des environnements d’exécution (a titre informatif une machine virtuel est un environnement d’exécution)ce qui permet à un développeur de voir ce que donnera son implémentation XUL avant de réellement l’interpréter par Firefox dans le cadre d’une extension (par exemple).

Grâce à la bibliothèque XPCOM (Cross-Platform Component Object Model) qui permet via C++ ou javascript de construire de nouveaux composants, Mozilla a pu offrir à la communauté mondiale XPFE (Cross-Platform Front End parfois appelé XPToolkit) une plate-forme de développement multiplate-forme  comparable à la machine virtuel de JAVA ou à l’environnement .NET (DotNet) de Microsoft.

Le principe du multiplateforme est d’obtenir la portabilité, ce qui en d’autre terme veut dire qu’il sera exécutable sur de nombreux systèmes d’exploitations (Linux, Mac OS,  Windows, Palm OS etc…) ce qui inévitablement est un gain en coût de développement/production. vous n’aurez pas à faire une version pour chaque système d’exploitation. Pour qu’un logiciel est le plus d’audience possible il existe trois techniques :

L’histoire veut que Mozilla ai crée l’environnement de développement XPFE (Cross Platform Front-End)  qui par sa simplicité, sa rapidité de développement et son évolutivité a permit de donner une réponse au problème de l’évolution du code de Netscape (notamment dans la prise en charge des éléments HTML 4.0 et dans le besoin de créer une version pour chaque environnement de travail [Linux, Mac OS, Windows]sa portabilité)

XULRunner est un environnement d’exécution dédié à XUL et incluant (mis à par le moteur d’affichage Gecko) la majeur partie des API de Firefox (Application Programming Interface).

Le développement d’une application XUL est simple, pour chaque objet de l’interface graphique on associe un événement et une action (typiquement écrite en JavaScript) qui sera exécuté par la machine cliente. CSS sera utilisé pour modifier le style.

Via ces API, XULRunner offre une interface (en terme de développement) aux entrées/sorties (clavier, souris, impression, affichage), à la communication réseau (socket), au gestionnaire de thèmes et d’extensions,  à la localisation, à la manipulation de plusieurs type de fichiers tel que XML, RDF etc…

Tout ceci est la partie client (navigateur), du coté du serveur il y a la possibilité de travaillé en JAVA ou PHP (avec toutes les extensions qu’il possède dont PDO!)

Quand et où utilise t’on XUL?

La où il a du Mozilla ou plus généralement, la ou il y a du Gecko 🙂

Rappelez vous que XUL n’est que la peinture, pour l’utiliser il vous faut des pinceaux ou encore un pistolet à peinture.

XUL et éventuellement RDF et XBL définissent l’interface et les différents éléments de l’interface qui auront un style prédéfinis grâce à CSS.

Rappelez vous que XUL est basé sur XML  qui lui même a pour ancêtre SGML, sans rentrer dans encore plus de détails mais XML et SGML sont une encapsulation de données (via les balises) qui sont représenté par une arborescence formé de noeud (le premier noeud étant appelé la racine du document) de la racine Si vous entendez parlez de XSLT et XPATH, sachez que le premier permet de changer  la structure d’un document (comme CSS permet de changer le style des élements d’une page Web) et le second (XPATH) permet de naviguer facilement à

Chaque action entreprise lors d’un clique ou tout autre évènement sera réalisé par l’intermédiaire de javascript ou Python.

Vous pouvez grâce à XUL et les technologies adjacentes (RDF,XBF,CSS,Javascript…) faire des applications ou créer des modules XPI pour firefox. Oui j’ai bien dit POUR car c’est l’un des inconvénients (disons mineur)de XUL,Donc d’après le tableau suivant, une application XUL sera affichable sur Firefox, Torpark … et pas sur Internet Explorer Konqueror ou les versions d’Epiphany sortie depuis 2008

Fondés sur Gecko Camino · Epiphany · IceCat · Iceweasel · K-Meleon · Fennec · Mozilla Firefox · SeaMonkey · Torpark
Fondés sur KHTML ou WebKit ABrowse · Arora · Epiphany · Google Chrome · Chromium · iCab · Konqueror · Midori · MixShark · OmniWeb · rekonq · Safari · Shiira · SRWare Iron · SWK browser · Uzbl · Vespucci
Fondés sur Presto Opera · Opera Mini · Opera Mobile · Opera Wii · Nintendo DS Browser · Nintendo DSi Browser
Fondés sur Trident Avant Browser · AOL Explorer · Internet Explorer · Maxthon
Navigateurs obsolètes ABrowse · Arachne · Beonex Communicator · Chimera · Flock · Galeon · HotJava · MidasWWW · Mosaic · NetPositive · Netscape
Autres Amaya · Dillo · Links · Lynx · NetFront · NetSurf · w3m · Lunascape

Pour information, Firefox version 1.0 est née en novembre 2004, le projet initial s’appelait Phoenix (2002)  puis Firebird (2003)

Notre première application XUL Hello World

Cela remonte du temps du langage B (obsolète depuis 1996) et du langage C qui veulent que la tradition aille pédagogiquement parlant vers l’affichage simple du mot Hello World (Bonjour le monde en français). Nous suivrons donc ce chemin en téléchargeant tout d’abord XULRunner

1 – Téléchargement la dernière version stable de XULRunner

XULRunner est téléchargeable ici: ftp://releases.mozilla.org/pub/mozilla.org/xulrunner/releases/

Vous y trouverais plusieurs répertoire correspondant à la version de XULRunner, généralement il faut prendre la plus récente (ce qui veut dire le numéro le plus élevé) et si possible évité les version béta (leur identificateur de version contient la lettre b)

La version d’un logiciel est identifié de plusieurs manières

  • Soit par plusieurs numéros séparés par un point: [version publiée].[fonctionnalité ajoutée].[release/révision] avec à l’intérieur un a pour dire alpha (qui n’est pas sensé être présenté au public) et un b pour dire bêta (la version publique avant la version release candidate [RC] et enfin stable [version finale], la version bêta est une version de test, les développeurs corrigent les bugs trouvés par le public ou bêta-testeur)

On trouve aussi la nomination suivante: Majeur.Mineur.Micro

Les fonctionnalités et les révisions commence par 0, donc la version 2.2.1 est la deuxième révision (0 puis 1).

Les numéros de fonctionnalités sont trés souvent donnés paire pour indiquer les cas d’une version stable (par exemple le noyaux de linux) donc la version 2.6.2 est la 4 version Mineur et la deuxième majeur (0, 2, 4 et 6).

Dans le cas de passage d’une version 3.6.21 à 3.6.22 alors il y a eu correction d’un bug.

Dans le cas du passage de la version 3.6.23 à 3.7.0 alors il y a eu une mise à jour majeure.

Certains aiment rajouter un nom de code, par exemple la version Panther de Mac OSX représente la 10.3, la Tiger est équivalent à la 10.4 la Leopard la 10.5, la version Snow Leopard est la 10.6 et au moment de ce billet la version OSX Lion représente la 10.7.

si vous trouvez une numérotation sur 4 chiffres (ou plus)  c’est pour rentrer dans les détails de patch / version  A.B.C.D A est la version, B l’ajout de fonctionnalité majeur, B l’ajout de fonctionnalité mineurs et C la révision ou correction

  • Soit une date. Lorsque la durée entre deux versions est longue on a tendance a ne donner que l’année par exemple office 2007, MS office 2011, windows server 2003, windows server 2008 ou encore visual studio 2010, Kaspersky Internet Security 2011, Autocad 2011, Mandriva Linux 2011, Maya 2011.

D’autres comme Ubuntu rajoute à l’année, le mois, par exemple Ubuntu 8.04 est sorti en avril 2008, Ubuntu 11.04 en avril 2011 et ubuntu 11.10 en octobre 2011.

Le numéro de version dans le cas de XULRunner ou de Gecko est en concordance avec la version de Firefox qui l’utilise, par exemple Gecko 8.x.x va avec Firefox 8.x et XULRunner 8.x.x

Choisissez la version stable la plus récente, a l’heure de l’écriture de ce billet il s’agit de la version 7.0.1, sous le repertoire SDK, tékécharger le fichier xulrunner-7.0.1.en-US.win32.sdk.zip si vous utilisez Windows, ou xulrunner-7.0.1.en-US.linux-i686.sdk.tar.bz2 et xulrunner-7.0.1.en-US.linux-x86_64.sdk.tar.bz2 pour Linux ou encore xulrunner-7.0.1.en-US.mac-i386.sdk.tar.bz2.asc et xulrunner-7.0.1.en-US.mac-x86_64.sdk.tar.bz2.asc  pour Mac OSX.

2 – Décompressez le fichier téléchargé

Dans le cas de windows décompressez le fichier dans un répertoire de votre choix et pour l’étape suivante notez bien le chemin absolu du répertoire ou vous avez décompressez votre fichier.

  • Sous Windows le chemin absolu commencera par la lettre du lecteur d’installation (par exemple c:\… ou d:\… etc)
  • Sous Linux le chemin absolu commencera par le « / » représentant le répertoire Root (ou racine).

Chemin absolu et chemin relatif quelle est la différence?

En informatique le chemin d’un fichier ou répertoire c’est comme dans la vrai vie!

Si on te demande ou est le stade (par exemple) tu peut donner un chemin par rapport à ou la personne est en lui disant (tu recule de deux rues, ensuite tu prend la ruelle a droite, tu va à gauche sur 200 mètres et c’est en face!! Seulement le problème c’est que cette description du chemin n’est valable que la ou il est, s’il se déplace d’une rue et qu’il refait le même chemin (en commençant par reculer de deux ruelles) alors il se perdra!

On parle ici de chemin relatif (« par rapport à … »)

Pour éviter ce problème et offrir une description sure on commence par un point de référence du genre ‘en sortant de la station du métro tu prend la 5ème rue etc etc etc… cette description est valable partout! on parle alors de chemin absolu, en informatique et plus précisément dans un système de fichier on donne comme référence de départ le répertoire Racine (qu’on peut assimiler au premier répertoire « monté » [mis en place] par le système)

Puis décompresser le fichiers de l’exemple qui sont ici (ils donnent l’arborescence suivante):

SAMPLE:.
│   application.ini
│   chrome.manifest

├───chrome
│   │   chrome.manifest
│   │
│   └───content
│           main.js
│           main.xul

├───defaults
│   └───preferences
│           prefs.js

├───extensions
└───updates
└───0

Remarque: il est possible sous Linux de créer cette arborescence en utilisant le script suivant:

if [ -d $app_metaname -o "x$app_metaname" = "x" ]; then
  echo "Directory \`$app_metaname' already exists"
  exit;
fi

mkdir -p $app_metaname/{chrome/content,defaults/preferences}
# touch $app_metaname/{chrome/content/main.xul,chrome/chrome.manifest,
defaults/preferences/prefs.js, application.ini}

3 – Modifier le PATH de votre système

Ensuite sachez que XULRunner s’exécute en mode de commande et donc pour ne pas avoir a toujours mettre avant XULRunner.exe le chemin complet ou il se trouve il faut rajouter le chemin absolu du sous répertoire bin (de l’installation de XULRunner) dans la variable d’environnement PATH de votre windows

Pour consulter ou modifier les variables d’environnement, procédez comme suit :

Pour XP

  1. Cliquez avec le bouton droit sur Poste de travail, puis cliquez sur Propriétés.
  2. Cliquez sur l’onglet Avancé.
  3. Cliquez sur Variables d’environnement.
  4. Cliquez sur PATH puis cliquez sur Modifier pour en modifier le nom ou la valeur en rajoutant votre chemin absolu à la fin, Attention ce nouveau chemin doit être séparé des autres par un « ; ».

Pour seven

Pour modifier les variables d’environnement, ouvrez le Panneau de configuration. Aller dans Système et sécurité puis dans Système. Dans la colonne de gauche, cliquer sur Paramètres systèmes avancés puis cliquez sur le bouton Variables d’environnement…
Vous pouvez alors modifier les variables d’environnement de l’utilisateur courant ou celles du système.

Pour vérifier sur windows XP, vista et Seven) que la variable d’environnement PATH a bien été modifiée vous pouvez faire la commande MS-DOS « set »

Pour Linux

Sur Linux (ici Ubuntu) vous pouvez changer cette valeur dans un terminal Unix (icône entourée en rouge dans l’image suivante):

PATH=[Chemin absolu du répertoire contenant les binaire de xulrunner]:$PATH

puis

export $PATH

vous pouvez aussi (mais cela dépend de l’environnement) changer le PATH directement dans un fichier de configuration.

Si vous voulez le faire pour tous les utilisateurs ce sera via la modification du fichier /etc/profile (vous devez être root)

Si ce n’est que pour un seul utilisateur, le fichier dépend de l’interpréteur de commande (shell) par défaut:

Si c’est du bash ou sh le fichier a toucher est: /.bashrc

et la commande a taper sera:  echo 'export PATH=$PATH:[Chemin absolu du repertoire contenant les binaire de xulrunner]' >> ~/.bashrc

Si votre shell est tcsh ou csh alors le fichier sera ~/.cshrc

et la commande sera: echo 'set PATH = ($PATH [Chemin absolu du repertoire contenant les binaire de xulrunner])' >> ~/.cshrc

il y a aussi certains système ou vous trouverez les fichiers de config  ~/.tcshrc ou ~/.zshrc

La commande « echo $PATH » vous renverra le résultat suivant:

4 – Exécution de l’application Hello World

Une fois le PATH exporter nous allons pouvoir exécuter l’exemple téléchargé ici:

Placez vous dans le répertoire SAMPLE via la commande MS-DOS et tapez ceci:

xulrunner application.ini

vous devez voir ceci

On obtient une fenêtre simple avec pour titre My App et un bouton en dessous du message « Hello World » si l’on clique sur le bouton « More >> » alors le message avec un fond rouge s’affiche. Notons que tout ce qui est en rouge a été rajouté pour ce tutoriel (le fond rouge et le texte rouge)

Voila pour l’exécution de notre application de test a présent c’est à nous de jouer examinons le contenu des fichiers, leurs structures, la signification de chaque éléments et personnalisons cette application pour en faire une meilleur.

Personnalisation de l’application

1. Les fichiers de configuration

  • Le fichier application.ini

C’est le fichier de description de l’application au moteur XULRunner. c’est par lui que sera lancé l’application XUL , elle peut dans une future étape avoir l’extension .xulapp permettant d’y rajouter des dépendance ou associations entre fichiers.
Voici son contenu

[App]
Vendor=IDENTIFIANT DE LA COMPAGNIE OU DU DEVELOPPEUR
Name=NOM DE L'APPLICATION
Version=VERSION COMPOSER EN 4 PARTIES SEPAREES PAR UN "." (voir plus haut paragraphe sur les versions)
BuildID=DATE CODE DE LA RELEASE / REVISION
ID=IDENTIFIANT UNIQUE UNIVERSEL ou IDENIFIANT EMAIL

[Gecko]
MinVersion=VERSION MINIMUM DU MOTEUR DE RENDU GECKO
MaxVersion=(OPTION) VERSION MAXIMUM DU MOTEUR DE RENDU

Dans notre cas nous allons faire ceci (vous pouvez bien sur personnaliser selon votre choix)

[App]
Vendor=tutorielsinformatique.wordpress.com
Name=Tutoriel_XUL
Version=1.0.0.0
BuildID=20111010
ID=admin@tutorielsinformatique.wordpress.com
Copyright= Huh! :)
[Gecko]
MinVersion=1.8
MaxVersion=7.0

  • Le fichier prefs.js

Ce fichier informe XULRunner sur les préférences de l’application à savoir (les préférences les plus courantes):

toolkit.defaultChromeURI: Informe sur la page de démarrage de l’application

Par exemple

pref(« toolkit.defaultChromeURI », « chrome://myapp/content/main.xul »);

toolkit.singletonWindowType:

toolkit.defaultChromeFeatures: informe sur les options de la fenêtre(resizable, dependent, dialog, minimizable, fullscreen[], chrome, modal, titlebar, close)

Par exemple

pref(‘toolkit.defaultChromeFeatures’, ‘chrome, centerscreen, resizeable=no, titlebar=no’);

va enlever de la page qui sera au centre de l’écran la barre des titres (fermer la page avec ALT+F4) et ne sera pas redimensionnable.

toolkit.singletonWindowType:

Par exemple: pref("toolkit.defaultChromeURI", "chrome://applicationName/content/startPage.xul");

permet de forcer l’exécution unique de votre application, si par exemple vous ne voulez pas que votre programme se lance deux fois (pour une raison bien précise) alors activé cette option et permettra de donner le focus à la première instance exécuté si votre application est exécutée

Le Reste

D’autres préférences sont possible comme celle d’active la console d’erreur javascript et de désactivé le cache (ce qui est intéressant lors du développement de l’application et NON lors de l’exploitation)

pref("browser.dom.window.dump.enabled", true);
// Affichage des erreurs dans une console
pref("javascript.options.showInConsole", true);
// Afficher toutes les erreurs d’exécution
pref("javascript.options.strict", true);
// Désactive le Cache XUL
pref("nglayout.debug.disable_xul_cache", true);
// Désactive le chargement rapide
pref("nglayout.debug.disable_xul_fastload", true);

En fait il vous permet de modifier toutes les valeurs que vous trouver dans le registre de firefox,  que vous pouvez faire apparaitre en écrivant dans la barre d’adresse about:config

Noter que vous pouvez lancer votre application (avec la console javascript pour le mode debug) en écrivant la commande suivante:

xulrunner application.ini -jsconsole

ou alors

xulrunner application.ini -console

Pour avoir un « terminal »

  • Le fichier chrome.manifest

Sous Firefox, lorsque vous chargez une page web, tout ce qui n’est pas dans la page web et appartient strictement au navigateur s’appelle le chrome.

Il faut enregistrer le chrome en donnant une sorte de lien vers lesquels pointeront les fournisseurs (provider) chrome qui sont principalement au nombre de 3:

  • Le content: disons que c’est le provider principal s’occupe des fenêtres, de l’interface utilisateurs et des scripts
  • le locale: qui est utilisé pour les contenus multilingues (internationalisation / localisation), il permet de dire ou trouver le paquetage pour chacune des langues supportées par l’application
  • Le Skin, pour les fichiers de style, les images et les thèmes d’une manière générale.

Ces fournisseurs décriront leur liens vers un fichier ou un répertoire en utilisant es URI chrome (chrome://) qui sont des sortes de liens relatif.

Nous verrons je l’espère dans un billet réservé à la création de module Firefox ce fichier qui fonctionne avec le fichier install.rdf. Installa.rdf donne un identifiant unique (UUID/GUID) qu’il utilisera comme nom du répertoire du module, puis chrome.manifest créera dans ce répertoire les fichiers nécessaire au bon fonctionnement du module.

2. Le fichier XUL (et les JS)

comme nous l’avons vu dans le fichiers prefs.js, il y a une fenêtre par défaut qui sera exécuté par XULRunner au démarrage, c’est dans ce fichier que nous définirons nos script javascript et éventuellement les fichiers de theming ou stylesheet.

Donc il ne nous manque que la partie codage avec beaucoup mais vraiment beaucoup de commentaire, chaque ligne sera je l’espère minutieusement développé.

Notre projet essaiera de toucher à tout, il y aura du css, du javascript, plusieurs widget XUL et vous verrez que XUL est vraiment simple et à la portée de tous.

Rendez vous dans le prochain billet consacré au codage de notre mini projet XUL

En attendant voici les deux sources références que je vous conseil

https://developer.mozilla.org/fr/XUL

http://xulfr.org/

2 commentaires

  1. Pingback: Google en profondeur (Astuces et Hacking) – 2sur3 « Tutoriels et Astuces Informatique

  2. Pingback: Créer une application XUL – Partie 2 – Création de l’Interface « Tutoriels et Astuces Informatique

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s