Ein Fenster erzeugen

Zunächst wollen wir uns mit der Syntax einer XUL-Datei beschäftigen.

Eine XUL Datei erstellen

Der Name einer XUL Datei kann frei gewählt werden, es sollte jedoch darauf geachtet werden, dass die Endung .xul verwendet wird. Die einfachste XUL Datei hat folgende Struktur:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
    id="findfile-window"
    title="Find Files"
    orient="horizontal"
    xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<!-- Other elements go here --> 
</window>

Dieses Fenster wird keine Funktion haben, da es keine weitere UI-Elemete enthält. Diese werden im nächsten Abschnitt hinzugefügt. Der Code wird im folgenden Zeile für Zeile erklärt:

1. <?xml version="1.0"?>
   Diese Zeile zeigt, dass dies eine XML Datei ist. Diese Zeile sollte in jeder XUL Datei als erstes stehen.
2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
   Diese Zeile wird gebraucht um festzulegen, welches Style Sheet für diese Datei verwendet wird. Dies ist die Syntax wie XML Dateien Style Sheets importieren. In diesem Fall importieren wir ein Style Sheet welches sich im globalen Teil eines Skins befindet. Wir legen keine spezifische Datei fest, so dass Mozilla selbst entscheidet, welche Datei verwendet werden soll. In diesem Fall wird die Datei global.css verwendet. Diese Datei enthält alle Standard-Deklarationen für jedes XUL Element. Weil XML selbst nicht weiß wie die Elemente dargestellt werden sollten, brauch es diese Datei, welche dies festlegt. Normalerweise wird diese Zeile ebenfalls an den Anfang einer jeden XUL Datei geschrieben. Es können auch andere Style Sheets mit der selben Syntax importiert werden. Das globale Style Sheet wird normalerweise aus dem eigenen Style Sheet importiert.
3. <window
   Diese Zeile gibt an, dass ein window beschrieben wird. Jedes User Interface wird in einer eigenen Datei beschrieben. Dieser Tag ist wie ein HTML Tag welcher ein gesamtes HTML Dokument umfasst, mit dem Unterschied dass hier ein User Interface beschrieben wird. Einige Attribute können im window Tag platziert werden, hier sind es vier. In diesem Beispiel wird jedes Attribut in einer eigenen Zeile beschrieben, dies ist jedoch nicht zwingend.
4. id="findfile-window"
   Das id Attribut wird zur Identifizierung gebraucht, damit später auf das Fenster per Skript zugegriffen werden kann. Im Normalfall sollte ein id Attribut bei allen Elementen vorhanden sein. Der Name kann frei gewählt werden, er sollte jedoch sinnvoll sein.
5. title="Find Files"
   Das title Attribut beschreibt den Text, welcher in der Titelzeile des Fensters erscheinen soll. In unserem Fall wird es 'Find Files' sein.
6. orient="horizontal"
   Das orient Attribut beschreibt die Anordnung der Elemente in diesem Fenster. Der Wert horizontal zeigt, dass die Elemente horizontal über dem Fenster verteilt werden. Es kann auch der Wert vertical verwendet werden, welcher meint, dass die Elemente in einer Spalte verteilt werden. Dies ist der Standardwert, das heißt, dass man dieses Attribut weglassen kann, wenn man eine vertikale Ausrichtung möchte.
7. xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> Diese Zeile deklariert den Namensraum für XUL, welcher im Fenster deklariert sein sollte um festzulegen, dass alle Nachfolger XUL sind. Diese URL wird niemals heruntergeladen. Mozilla wird diese URL intern verarbeiten.
8. <!-- Other elements go here -->
   Ersetze diesen Kommentar Block durch andere Elemente (Buttons, Menüs und andere User Interface Komponenten), welche im Fenster angezeigt werden sollten. Wir werden ein paar von ihnen zu einem späteren Zeitpunkt hinzufügen.
9. </window>
   Zum Schluss brauchen wir das window Tag, um das Ende der Datei anzuzeigen.

Ein Fenster öffnen

Um ein XUL Fenster zu öffnen gibt es verschiedene Methoden. Wenn Sie sich nur in der Entwicklungsphase befinden, können Sie einfach die URL ("chrome:", "file:" oder weitere) in die Adresszeile des Browserfensters eingeben. Sie können auch einfach auf einen Doppelklick auf die Datei ausführen, wenn XUL Dateien mit Mozilla verknüpft sind. Das XUL Fenster erscheint im Browserfenster als neues Fenster, aber das ist meistens ungenügend während der Entwicklung.

Der korrekte Weg ist natürlich ein Fenster über JavaScript zu öffnen. Es ist kein neuer Syntax dazu notwendig, denn die window.open() Funktion kann genau wie für HTML Dokumente dazu verwendet werden. Es ist jedoch ein zusätzlicher Parameter "flag" nötig. In diesem Fall muss 'chrome' angeben werden, damit klar ist, dass ein chrome Dokument geöffnet werden soll. Dieses Stück Code wird dafür sorgen, dass ein Fenster ohne Toolbars und Menüs geöffnet wird:

window.open(url,windowname,flags);

wobei "flags" das Schlüsselwort "chrome" wie in diesem Beispiel enthält:

window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300");

window.open("chrome://browser/content/places/places.xul", "bmarks", "chrome,width=600,height=300");

Sie können den Kommandozeilenparameter '-chrome' verwenden, um die XUL Datei mit Mozilla zu starten. Wird dies nicht festgelegt, wird das Standardfenster geöffnet (normalerweise das Browserfenster). Wir können zum Beispiel den Dateisuche-Dialog mit einem der folgenden Zeilen öffnen:

mozilla -chrome chrome://findfile/content/findfile.xul 
 
mozilla -chrome resource:/chrome/findfile/content/findfile.xul

Wenn Sie einen dieser Kommandos in einer Eingabeaufforderung (angenommen Sie verfügen übere eine auf Ihrem System) eingeben, wird der Dateisuche-Dialog standardmäßig geöffnet, anstatt des normalen Mozilla Browserfensters. Da wir allerdings noch keine UI-Elemente in das Fenster gepackt haben, sehen Sie zunächst nichts. Im nächsten Abschnitt werden wir Elemente hinzufügen.

Um den Effekt dennoch zu beobachten, können Sie mit der folgenden Zeile das Lesezeichenfenster öffnen:

mozilla -chrome chrome://communicator/content/bookmarks/bookmarksManager.xul

Wenn Sie Firefox benutzen:

firefox -chrome chrome://browser/content/places/places.xul

Das '-chrome' Argument gibt der Datei keine gesonderten Rechte. Stattdessen kann es dadurch als Top-level Fenster in jedem Browser angezeigt werden, ohne Adressleiste oder Menüs. Nur chrome: URLs haben diese zusätzlichen Rechte.

Problemlösung

• Wenn das XUL Fenster nicht auf dem Desktop angezeigt wird aber ein Icon auf der Desktop-Toolbar zu sehen ist, überprüfen Sie die xml-stylesheet Deklaration. Stellen Sie sicher, dass das Stylesheet korrekt eingebunden wird:

 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

Im nächsten Abschnitt werden wir ein paar Buttons zum Fenster hinzufügen.