Schachtelsatz

Während die Verbreitung der Internetsuite Mozilla und vor allem ihrer jüngeren Geschwister Firefox und Thunderbird weiter steigt, ist die Mozilla-Architektur als Basis plattformübergreifender Anwendungsentwicklung weithin unbeachtet geblieben. Zu Unrecht, denn gerade im Zusammenspiel von XUL, Javascript und CSS lässt sich anspruchsvolles Oberflächendesign schnell umsetzen.

Als Netscape Ende der 90er-Jahre die Entwicklung der fünften Generation seines Browsers plante, stellte man schnell fest, dass die Codebasis der 4er-Versionen kaum mehr wartbar, geschweige denn auf neue Anforderungen wie CSS umrüstbar war. Unter anderem deshalb entschloss sich Netscape 1998 zu einem folgenschweren Schritt: Man veröffentlichte den Quellcode und gründete das Open-Source-Projekt Mozilla, das die Weiterentwicklung übernehmen sollte. Leider konnte das Mozilla-Projekt die Schwierigkeiten mit der - zudem aus lizenzrechtlichen Gründen unvollständigen - Multi-Plattform-Codebasis nur langsam lösen. Deshalb nahmen die Entwickler eine Neuprogrammierung des nahezu kompletten Backends in Angriff. Neue Komponenten wie die Layout-Engine Gecko erblickten das Licht der Welt - und das XPFE („cross-platform front-end“) entstand.

XPFE versammelt die Spezifikation von Oberflächen über alle Plattformgrenzen hinweg in einem gemeinsamen XML-Dialekt: XUL (XML User Interface Language), eine Sprache, die unter anderem in Mozilla-Produkten selbst zur Erzeugung der Benutzerschnittstelle dient. Es geht dabei also nicht darum, Webseiten zu generieren, sondern Anwendungen zu entwickeln. Dieses Tutorial soll den Einstieg in die XUL-Programmierung erleichtern - in einem Bogen vom klassischen „Hello World“ bis hin zu eigenen Erweiterungen für Mozilla-Produkte und Mozilla-basierte Anwendungen.

In diesem ersten Teil geht es vor allem um die grundlegenden Elemente XULs: Boxen, Menüs et cetera. Die ersten Schritte erfordern außer einem Mozilla-basierten Browser kein weiteres Werkzeug. Allerdings gestaltet sich die Eingabe von XUL-Code per data-URI nicht wirklich komfortabel, weswegen sich die Verwendung eines Texteditors empfiehlt. Im weiteren Verlauf des Tutorials ist zur Fehlersuche allerdings die Nutzung der Javascript-Konsole, des Javascript-Debuggers Venkman, des Component-Viewers oder des DOM-Inspektors anzuraten. Grundkenntnisse von HTML/XML sind Voraussetzung, außerdem etwas Javascript und das Document Object Model des W3C.

data:[<mediatype>][;base64],<data>

data:application/vnd.mozilla.xul+xml,
     <button xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 		label="Knopf!"/> 

Boxenmodell: Basis aller Anwendungen

Grundlage des XUL-Layouts ist das so genannte Boxenmodell: Jedes XUL-Element stellt zunächst nur eine rechteckige Box dar, die wiederum andere Boxen enthalten kann. Das einfachste Element heißt folgerichtig box und hat neben einigen vordefinierten Attributen keine besonderen Eigenschaften.

Die Ausmaße einer XUL-Box bestimmen im Allgemeinen der verfügbare Platz in der Elternbox und die Größe der Kindelemente. Das Layout in der Box wird dabei durch die bevorzugte Flussachse vorgegeben, die aber das Attribut orient (für „orientation“) übersteuern kann.

Eine Box mit horizontaler Flussachse (orient="horizontal") legt ihre enthaltenen Kindelemente waagerecht hintereinander ab. Ihre Breite entspricht der Gesamtbreite aller Unterelemente, ihre Höhe der ihres höchsten Kindes.

Obwohl für das box-Element die horizontale Flussachse voreingestellt ist, wird in XUL-Layouts üblicherweise das gleichwertige hbox-Element verwendet, da mit vbox ein Element mit vordefinierter senkrechter Flussachse (orient="vertical") zur Verfügung steht. Eine vbox ordnet ihre Kindelemente untereinander an. Ihre Breite bemisst sich anhand der des breitesten Kindes, ihre Höhe errechnet sich aus der Gesamthöhe der einzelnen Unterboxen (Abbildung 1).

Ausrichtung einzelner Elemente

Verschiedene Attribute können die Ausrichtung der Kindelemente weiter verfeinern:

- dir (für „direction“) befindet über die Flussrichtung entlang der Flussachse. Der Standardwert dir="ltr" („left to right“) ordnet die Unterelemente in hboxen von links nach rechts, in vboxen von oben nach unten an. Alternativ kann man über dir="rtl" („right to left“) eine umgekehrte Anordnung erzwingen. Die gesetzte Flussrichtung gilt entsprechend für die Achse senkrecht zur Flussachse.

- align beeinflusst die Anordnung der Unterelemente einer XUL-Box senkrecht zur Flussachse. Es sorgt bei seinem Standardwert align="stretch" dafür, dass alle Unterboxen dieselbe Ausdehnung zeigen. In Abbildung 1 nähmen damit vbox_1 und vbox_3 dieselbe Höhe wie vbox_2 und box_4 die Breite der vbox_5 an. Der für Abbildung 1 tatsächlich benutzte Wert align="start" lässt die Anordnung an der durch dir vorgegebenen Boxenkante beginnen, ebenso kann man zentrierte (align="center") oder gegenüberliegende (align="end") Ausrichtungen setzen.

Die Anordnung der Kindelemente in Flussrichtung bestimmt das Attribut pack. Analog zu align stehen die Werte start (Standardwert), center und end zur Verfügung.

Über das Attribut equalsize kann man eine gleichmäßige Ausdehnung der Kindelemente in Flussrichtung forcieren (equalsize="always"), dies ist jedoch im Normalfall nicht gesetzt (equalsize="never").

Entfernt in diese Reihe passt das flex-Attribut, da es die Ausdehnung des XUL-Elements in Flussrichtung des Elternelements beeinflusst und somit nur indirekt auf die Kindboxen wirkt: Elemente mit einem numerischen flex-Attributswert größer als 0 dehnen sich soweit aus, wie es der Platz in der Elternbox zulässt (siehe wiederum Listing 1). Existieren mehrere XUL-Boxen mit flex-Attribut in derselben box, werden die Attributswerte als Gewichte interpretiert und der verbleibende Platz entsprechend aufgeteilt.

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" 
                 href="data:text/css, 
  *{border: 1px solid red; padding: 1px;"?>
<window 
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <hbox id="hbox_0" align="start">
    <vbox id="vbox_1" flex="1">
      <box width="150px" height="150px"/>
    </vbox>
    <vbox id="vbox_2" flex="2">
      <box width="300px" height="300px"/>
    </vbox>
    <vbox id="vbox_3" align="end">
      <box id="box_4" width="100px" height="100px"/>
      <vbox id="vbox_5" width="150px" height="150px"/>
    </vbox>
  </hbox>
</window

Die numerischen Attribute height und width für Höhe und Breite existieren zwar auch für XUL-Elemente, sind jedoch den obigen Attributen nachgeordnet: „horizontal ge-flex-te“ XUL-Boxen ignorieren eine angegebene feste Breite (siehe Listing 1).

Fensterattribute, nicht nur für Browser

Ein Anwendungsfenster in XUL stellt ein XML-Dokument dar und bedarf eines eindeutigen Wurzelelements aus dem XUL-Namensraum www.mozilla.org/keymaster/gatekeeper/there.is.only.xul. Als einfachstes Wurzelelement kennt window einige vordefinierte Attribute, die das Erstellen von Fenstern vereinfachen: height und width bestimmen die Außenmaße des Fensters, den Text der Titelleiste liefert title. Über die Attribute screenX und screenY lässt sich das Fenster genau positionieren, und sizemode bestimmt den Fensterzustand „normal“, „minimiert“ oder „maximiert“. Die meisten dieser Attribute spielen nur dann eine Rolle, wenn eigene Hauptfenster in XUL beschrieben werden sollen; lädt man ein solches <window> im Browserfenster, bleibt vorerst nur das title-Attribut sinnvoll zu belegen.

Da XUL im Hinblick auf Layoutgestaltung und nicht auf die Dokumentenanzeige entwickelt wurde, stellen Browser normale Textinhalte in XUL-Dateien (so genannte #text-Nodes) in der Regel nicht dar; von Listing 2 setzt der Browser (Mozilla ab 1.8a4, Firefox ab 1.1) so zwar den Fenstertitel, aber er zeigt den Rumpftext nicht an. Der Anzeige von Texten dienen in XUL vielmehr zwei spezielle Elemente, description und label.

<?xml version="1.0"?>
<window 
  xmlns="http://www.mozilla.org/.../there.is.only.xul"
  title="Hello, World!">
  Hello, World!
</window>

Das description-Element stellt enthaltenen Text als Fließtext dar, der am Boxenrand umbricht. Enthaltene XUL- oder, bei dazugehöriger Namensraumangabe, HTML-Elemente stellt der Browser als solche dar, die Umsetzung der Kindelemente einer description entspricht daher etwa der eines HTML-Dokuments. Ist stattdessen eine einzeilige Darstellung erwünscht, muss man den Inhalt als Wert des value-Attributs notieren, das Verhalten des Elements entspricht in diesem Fall dem eines label-Elements.

Ein label dient in XUL für die Anzeige einzeiliger Texte, beispielsweise als Kurzbeschreibung vor Dialogelementen wie Buttons. Dabei schneidet der Browser die Darstellung allerdings bei nicht ausreichendem Platz am Rand der Box ab, in Abhängigkeit vom Wert des Attributs crop. Der Standardwert crop="none" soll der label-Box die für den Inhalt notwendige Breite geben, ohne sie zu beschneiden, bei crop="start", crop="center" oder crop="end" fügt er statt des sich als zu lang erweisenden Resttextes eine Ellipse („...“) ein, sodass die label-Box die vorgegebene Breite einhält.

Über das accesskey-Attribut lässt sich eine Taste zur Aktivierung des Labels definieren, den gewählten Buchstaben unterstreicht der Browser zumeist oder gibt ihn nach dem Text an, sodass das Label per Tastatur in Windows und Linux über ALT+accesskey zugänglich ist. Enthält zudem das control-Attribut den Wert des id-Attributs eines anderen XUL-Elements, wird jede Fokussierung des labels an jedes andere Element durchgereicht.

Scriptsprachen: bislang nur Javascript

Die bisher vorgestellten XUL-Elemente dienen nur dem Layout der Benutzeroberfläche, nicht jedoch deren Verhalten. In XUL geschieht dies, ähnlich wie in HTML, durch Scriptsprachen. Theoretisch ist XUL auf keine bestimmte Sprache festgelegt, in Mozilla-basierten Produkten kommt jedoch fast ausschließlich eine erweiterte Javascript-Version zum Einsatz. Zwar existieren experimentelle Anbindungen anderer Sprachen wie Python, sie haben jedoch keine echte Bedeutung.

Mozilla bildet XUL-Dokumente auf ein Document Object Model ab, das im Wesentlichen dem des W3C entspricht. Zusätzlich sind, in Abhängigkeit von gewährten Rechten, diverse interne Schnittstellen verfügbar. Die Einbindung solcher Scripts in XUL-Dokumente geschieht alternativ als direkte Befehlssequenzen in der Ereignisbehandlung eines XUL-Elements oder über das script-Element. Es lädt entweder eine Textdatei mit Scriptcode nach, wenn deren URI im src-Attribut enthalten ist, oder beinhaltet den Code unmittelbar. XUL-Elemente können die dort definierten Funktionen in ihrer Ereignisbehandlung aufrufen.

Außer den aus HTML bekannten Ereignisattributen wie onclick, onmouseover oder onkeypress kennt XUL eine große Anzahl eigener, zum Teil in Abhängigkeit vom Element, an welchem sie notiert sind. Besonders interessant für das window-Element sind die Attribute onload und onunload, deren Inhalt der Browser nach Laden beziehungsweise Schließen des Fensters als Code im Kontext des definierenden Elements ausführt. Listing 3 nutzt dies zur Anzeige jeweils eines kurzen Textes.

<?xml version="1.0"?>
<window xmlns="http://www.mozilla.org/.../there.is.only.xul"
  title="XUL-Ereignisattribute"
  onload="alert('Dokument wurde geladen!')"
  onunload="alert('Dokument wird geschlossen!')"/

Mit dem button-Element betritt ein erstes interaktives XUL-Element die Bühne. Dessen XUL-Box stellt der Browser inklusive aller ihrer enthaltenen Unterboxen als Schaltfläche dar; die Box kennt spezielle Attribute zur Steuerung ihres Verhaltens. Das Attribut label definiert den Text auf dem button, der value kann davon unabhängig zur Speicherung eigener Werte dienen. image, ein weiteres Attribut, kann die URI eines Bildes referenzieren, das neben dem Text zu sehen sein soll, die Ausrichtung von Text und Bild bestimmen die schon bekannten Attribute orient, dir et cetera - label und image werden intern als Unterboxen des button-Elements erzeugt.

Schließlich entscheidet das Attribut type über das sichtbare Verhalten des buttons. Fehlt es, führt eine gedrückte Maustaste auf dem button zu der üblichen „eingedrückten“ Wiedergabe des Elements. Für type="checkbox" drückt der erste Mausklick den Knopf hinein, ein zweiter versetzt ihn zurück in den Urzustand; den Startzustand kann man über checked="true" invertieren.

type="menu" und type="menu-button" statten den button mit einer Markierung aus, die anzeigt, dass bei einem Klick Unterboxen als Menü anzuzeigen sind (siehe dazu unten das menu-Element). type="menu" bewirkt die Anzeige dieses Menüs schon bei der Aktivierung des buttons, bei type="menu-button" muss der Anwender dazu die Markierung anklicken.

Der Wert type="radio" wiederum hängt eng mit dem Attribut group zusammen: von allen button-Elementen eines XUL-Dokuments mit demselben group-Attribut kann stets nur ein einziges im gedrückten Zustand verharren, das Anklicken eines Elements „entdrückt“ alle anderen.

In HTML könnte man vermittels der Ereignisattribute onclick und onkeypress auf Aktivierungen des button reagieren, in XUL reicht dazu oncommand aus, da das automatisch alle vorhandenen Aktivierungsmethoden kennt. So wird die Funktion OnCommand in Listing 4 aufgerufen, wenn jemand den accesskey des labels (beispielsweise per Alt-x) beziehungsweise des buttons (Alt-y) auslöst oder den button aktiviert. Die beiden beim Listing stehenden Abbildungen zeigen, dass Linux und Mac solche Mini-Anwendungen darstellen, ohne das ganze Firefox-Umfeld mitzuladen.

<?xml version="1.0"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script type="application/x-javascript">
    <![CDATA[
      function OnCommand(asText)
      {
        window.alert(asText);
      }
    ]]>
  </script>
  <hbox>
    <label  value="Label X" 
            accesskey="X"
            control="hwButton"/>
    <button id="hwButton" 
            label="Knopf Y" 
            accesskey="Y" 
            oncommand="OnCommand(this.nodeName)"/>
  </hbox>
</window>

Anhand des button-Elements seien drei weitere Attribute erwähnt, die man den meisten XUL-Elementen zuordnen kann: disabled="true" deaktiviert ein Element, was oft dessen Graufärbung bewirkt. Ein solches Element steht für Nutzeraktionen nicht zur Verfügung.

Elemente mit hidden="true" landen dagegen gar nicht erst im Layout; dies entspricht dem CSS-Regelwert display: none. collapsed="true" sorgt zwar für eine Berücksichtigung im Layout, verhindert aber die Anzeige; dies entspricht dem CSS-Regelwert visibility: collapse.

Hilfetexte einblenden: Tooltips

Oft ist in Dialogen der Platz für nähere Erläuterungen begrenzt, weswegen Webautoren gelegentlich kurze Hilfetexte einblenden, wenn der Mauszeiger über dem Element schwebt - sogenannte Tooltips. In XUL existiert zu diesem Zweck ein eigenes Attribut tooltiptext, das in fast allen Elementen vorkommen kann:

<label value="ein Label" tooltiptext="mit Tooltip"/>

Manchmal erweist es sich als hilfreich, wenn man nicht nur Texte anzeigen, sondern stattdessen komplexere Elemente oder Bilder als Tooltip darstellen kann. Auch hier bietet XUL Hilfe und erlaubt die Anzeige sogenannter Popups als Tooltips, das Attribut tooltip nimmt dabei die id des anzuzeigenden Elements entgegen.

popup ist eigentlich nur eine Art Container, der die anzuzeigenden XUL-Elemente enthält. Diese werden nicht im normalen Aufbau der Seite angezeigt, sondern erst bei der Nutzung des popup. Um die Übersicht zu wahren, versammelt man üblicherweise alle popup einer Seite in einem popupset-Element - wie in Listing 5.

<?xml version="1.0"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <popupset>
    <popup id="puButton" position="after_end">
      <label value="Popup-Label"/>
    </popup>
  </popupset>
  <hbox>
    <label value="Label X" 
      control="hwButton" 
      accesskey="X"
    />
    <button id="hwButton" 
      label="Knopf Y" 
      accesskey="Y" 
      oncommand="window.alert(this.nodeName)"
      context="puButton"/>
  </hbox>
</window

So definierte popups lassen sich aber nicht nur als Tooltips anzeigen. Vielmehr werden sie weit häufiger für Kontextmenüs genutzt, beispielsweise bei rechten Mausklicks. Dazu notiert man am gewünschten XUL-Element das Attribut context und weist ihm die id des anzuzeigenden popup-Elements zu.

Die Feinpositionierung eines popup steuert das Attribut position. Neben der für Text-Tooltips vordefinierten Position position="after_pointer" und dem für Kontextmenüs üblichen position="at_pointer" stehen folgende Werte zur Verfügung: after_start, after_end, before_start, before_end, end_after, end_before, start_after, start_before und overlap (entspräche einem start_start). Die vorderen Teilwerte beschreiben die vertikale, die hinteren die horizontale Positionierung relativ zu dem Element, welches das popup angefordert hatte (Listing 5).

Zur Ereignisbehandlung bietet popup spezielle Attribute wie onpopupshowing und onpopuphiding. Darüber hinaus stellt das Element auf Scriptebene unter anderem die Funktionen hidePopup(), moveTo(x, y), openPopup(element, x, y, popupType, anchor, align) und sizeTo(x, y) zur Verfügung. Die spezielle Variante tooltip verhält sich wie popup, wird aber wie ein Tooltip dargestellt.

Menüs in den Browser bringen

Ein weiteres Einsatzgebiet für popups sind Werkzeugleisten, die für sich gesehen nur horizontale Boxen von buttons mit popups sind. Eine besondere Stellung nimmt in XUL die Menüleiste menubar ein: Sie sollte pro window nur ein einziges Mal definiert sein, da manche Systeme (wie der Mac) sie speziell behandeln und darstellen.

menubar fungiert lediglich als Container für die menu-Elemente, die die eigentlichen Einträge definieren. Ein menu wirkt wie eine Art button, der bei Aktivierung sein einziges Kind, ein spezielles popup namens menupopup anzeigt. menu versteht die meisten von button her bekannten Attribute, unter anderem label und accesskey.

Obwohl dieses menupopup beliebige Unterelemente akzeptiert, verwenden Entwickler in der Regel nur die Elemente menu (zur Kaskadierung), menuseparator (als rein visuelles Trennelement ohne weitere Eigenschaften) und menuitem (als Menüeintrag).

Letzteres ist ein spezielles button-Element, das allerdings für type nur die Werte type="radio" und type="checkbox" erlaubt (wenn type überhaupt gesetzt ist). So kann man Menüeinträge mit Grafiken oder Häkchen versehen oder gruppieren (siehe Abbildung 2 und Listing 6). Bei Aktivierungen kann wie bei anderen buttons das oncommand-Ereignisattribut zum Einsatz kommen.

<?xml-stylesheet type="text/css" href="chrome://global/skin/" ?>
<window 
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        title="Menubar">
  <menubar>
    <menu label="&lt;menu&gt;">
      <menupopup>
        <menu label="&lt;menu&gt;">
          <menupopup>
            <menuitem label="radio1" type="radio" 
                      name="radio" checked="true"/>
            <menuitem label="radio2" type="radio" name="radio"/>
            <menuseparator/>
            <menuitem label="checkbox" type="checkbox" checked="true" 
                      oncommand="alert(getAttribute('checked'))"/>
          </menupopup>
        </menu>
        <menuseparator/>
        <menuitem label="&lt;menuitem&gt;" 
                  image="http://www.heise.de/favicon_ix.ico" 
                  class="menuitem-iconic"/>
      </menupopup>
    </menu>
  </menubar>
</window

Die Werkzeugleiste toolbar hat wie die menubar nur Containerstatus, erst ihre Kindelemente enthalten die Funktion. Üblicherweise werden hier toolbarbutton (ein normaler button, eventuell in anderer Darstellung, vor allem bei type="menu" oder type="menu-button") und toolbarseparator (ein Trennelement) benutzt, andere Elemente sind jedoch zulässig. Im Gegensatz zur menubar kann toolbar beliebig oft auftreten.

Gruppiert man mehrere Werkzeugleisten in einem toolbox-Element, können sie durch ihre Grifflinge (toolbargrippy) platzsparend zusammengeklappt werden, dafür ist die Angabe des id-Attributes an den Werkzeugleisten zwingend erforderlich. In Firefox ist dieses Feature jedoch leider standardmäßig nicht vorhanden.

Der schieren Menge an XUL-Elementen ist es zu verdanken, dass nicht einmal alle einfachen hier besprochen werden konnten. Im nächsten Teil sollen fortgeschrittene XUL-Elemente und Techniken im Vordergrund stehen: Bäume und Templates.

Karsten Düsterloh
ist Diplom-Mathematiker und freiberuflicher Entwickler sowie Autor der Mozilla-Erweiterung Mnenhy.

(hb)