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
Lire la suite →
Prérequis:
Outils :
Temps estimé:
Vous vous y connaissez en création de site web simple? Un peu de CSS par ci un peu de Javascript par la!
Remarque: ce tutoriel sera réalisé sans IDE (XUL-Explorer). Pour ceux qui souhaitent utiliser XUL-Explorer nous développerons son utilisation dans un prochain tutoriel/billet. 
Tutoriels et Astuces Informatique 