XUL - XML User Interface Language - ist eine auf XML basierende Beschreibungssprache für graphische Benutzeroberflächen. Da XUL eine Anwendung von XML ist, ist auch XUL an die W3C XML 1.0 Spezifikation und die dort beschriebenen Syntaxregeln gebunden. Die grundlegenden Syntaxregeln sind dabei zu beachten:
- Alle Ereignisse und Attribute müssen in Kleinbuchstaben geschrieben werden.
- Alle Zeichenketten müssen in doppelte Anführungszeichen gesetzt werden.
- Jede XUL-Einheit muss durch ein schließendes Tag abgeschlossen werden, um wohlgeformt zu sein (entweder <tag></tag> oder <tag/>).
- Alle Attribute müssen zugeordnete Werte haben.
XUL wurde ursprünglich für das Mozilla-Projekt entwickelt. In sämtlichen Mozilla-Anwendungen wie Firefox wird die gesamte Benutzeroberfläche mit XUL erzeugt.
Die Vorteile von XUL liegen auf der Hand. Durch die Anwendung von XML wird eine Trennung von Layout und Design der graphischen Oberfläche vorgenommen. Das genaue Erscheinungsbild einer mittels XUL erstellten Oberfläche wird nicht in der XUL-Datei selbst festgelegt, sondern wie auch in HTML häufig in einer separaten Cascading Style Sheets Datei. Dieses Vorgehen ermöglicht den Einsatz der in Firefox vorhandenen Skins, die ein Paket an Bildern und Einstellungen bereitstellen, um die graphische Oberfläche anzupassen. Außerdem kann der Nutzer so selbst leicht Änderungen am Erscheinungsbild vornehmen, in dem er die Cascading Style Sheets bearbeitet.
Ebenfalls von Vorteil ist, daß XUL eine XML konforme Beschreibungssprache ist und so für den Programmierer keine neue Sprache zu erlernen ist, so er denn schon Erfahrung mit XML hat. Desweiteren ist der Quellcode durch die Nutzung von XML frei und auf vielen Betriebssystemen durch die Plattformunabhängigkeit vom XML einsetzbar. Die Plattformunabhängigkeit wird dadurch erreicht, dass das komplette Mozilla-XUL-Toolkit auf die gewünschte Plattform übertragen wird. Die XUL-Benutzeroberflächen benötigen dabei keine Anpassungen.
Es sollen nun auch zwei Nachteile von XUL genannt werden. Zum einen ist die Darstellungsgeschwindigkeit und die Verarbeitungsgeschwindigkeit von XUL-Benutzeroberflächen häufig langsamer als bei normalen graphischen Oberflächen. Dies liegt daran, dass ein zusätzlicher Aufwand durch das Verarbeiten der XUL-Dateien und der anschließenden Berechnung des Layouts und Designs entsteht. Ein zweiter Nachteil ist es, dass das komplette Mozilla-XUL-Toolkit auf die jeweilige Plattform eines anderen Betriebssystems übertragen werden muss.
Das Application Object Model ist eine Erweiterung des DOM um das Interface, das in der XUL Datei beschrieben wird. So werden Elemente wie Browser, Menu, MenuItem usw. im AOM dargestellt.
Prolog
Da XUL auf XML basiert, sollte auch jede XUL-Datei mit einem Prolog beginnen, in der die XML Version und die DOCTYPE Statements beschrieben werden. Da eine XML keine Angaben zum Design macht, muss zudem eine CSS-Datei zum XML-File assoziiert werden. Zuletzt müssen noch alle im Dokument verwendeten Namensräume deklariert werden. Eine XUL-Datei könnte also zum Beispiel wie folgt beginnen:<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?>
<!DOCTYPE window>
<window xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
Wurzelelement
Das Wurzelelement in einer XUL-Datei ist das <window>-Element. Eine jede XUL-Datei muss genau ein solches <window>-Element enthalten. Innerhalb dieses Elements wird nun das gesamte XUL Interface beschrieben. Hier eine Liste der XUL-Einheiten, die dem Programmierer zur Verfügung stehen:
- window
- box
- menus and menubars
- toolboxes and toolbars
- tab widget
- checkbox
- titled buttons
- scrollbar
- splitter
- progressmeter
Eine XUL-Benutzeroberfläche besteht typischerweise aus einer Komposition von verschiedenen Elementen, wie MenuBars, Toolbars, Inhalten und weiteren Einheiten, die wiederum selbst Kindelemente enthalten können oder durch Attribute genauer spezifiziert werden können. Bei den Attributen wird dabei zwischen notwendigen und optionalen Attributen unterschieden. Die Attribute und die Kindelemente für jedes XUL-Element sind in der XUL Programmer's Reference beschrieben.
Beispiel für eine XUL-Datei
Eine vollständige XUL-Datei könnte ein Fenster beschreiben, welches eine MenuBar und eine ContentArea beschreibt, welche HTML Inhalt darstellt. Die MenuBar hat ein Menu "File" mit einem einzelenen MenuItem "HelloWorld". Wird dieser Menu Eintrag geklickt, so wird "Hello World" auf der Console ausgegeben. Die ContentArea zeigt den Inhalt der HTML-Datei contentframe.html an. Hier der Quellcode für das Beispiel:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?>
<!DOCTYPE window>
<window id="main-window" xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menubar>
<menu name="File">
<menuitem name="Hello World!" onclick="dump('Hello world!\n');"/>
</menu>
</menubar>
<html:iframe id="content-frame" src="contentframe.html" flex="100%"/>
</window>
Wie bereits beschrieben, beginnt die Datei mit dem Standard-Prolog für XML Dateien. Im Anschluss daran wird das <window>-Tag geöffnet. Dabei wird ihm eine ID zugeordnet. Dies ist für das vorliegende Beispiel nicht notwendig erforderlich. In der Praxis wird jedoch den meißten Elementen in XUL-Dateien eine ID zugeordnet. Zum einen können die Elemente so über ihre ID direkt angesprochen werden, indem das AOM (Application Object Model) und die Methode getElementById verwendet wird. Zum anderen ist es mittels IDs auch möglich, Cascading Style Sheets auf einzelne Elemente anzuwenden, indem sie mittels #elementname angesprochen werden, wie folgendes Beispiel zeigt:
#main-window {
display: block;
width: 100%;
height: 100%;
}
Im nächsten Element des <window>-Tags wird die MenuBar deklariert. Sie enthält ein einziges Menu "File", welches wiederum ein einziges MenuItem enthält. Dieses ist einem JavaScript Handler zugeordnet, welcher bei einem Klick auf den Menue-Eintrag feuert und "Hello World" in der Console ausgibt. Zu guter letzt wird ein HTML iframe deklariert. Das vorgestellte html: deutet auf den HTML-Namensraum hin. Das iframe bekommt ebenfalls eine ID, wie das mainframe, ausserdem wird die Quelle angegeben, welche das Fenster darstellen soll.