Positionierung von Elementen

Schauen wir uns die Steuerung von Positionen und Größen von XUL Elementen an.

Positionierung in Boxen

Bis jetzt wissen wir, dass Elemente entweder horizontal oder vertikal innerhalb einer Box positioniert werden können. Meistens brauchen wir aber weitere Steuerungsmöglichkeiten zur Position und Größe von Elementen in der Box. Dazu müssen wir uns zunächst anschauen wie eine Box arbeitet.

Die Position eines Elementes wird vom Layout des Containers bestimmt. Zum Beispiel ist die Position einer Schaltfläche in einer horizontalen Box rechts von der vorherigen Schaltfläche, sofern diese existiert. Die Größe eines Elements wird von zwei Faktoren beeinflusst: Die Größe, die das Element an Größe braucht und die Größe, die Sie festlegen. Die Größe, die das Element braucht, hängt vom dem ab, was sich innerhalb des Elements befindet. Zum Beispiel wird die Breite einer Schaltfläche anhand des Textes, welcher sich darauf befindet, berechnet.

Ein Element wird generell so groß wie es Inhalt vorschreibt und nicht größer. Einige Elemente verfügen über eine Standardgröße (z.B. Textboxen), welche verwendet wird. Eine horizontale Box mit drei Schaltflächen darin, wird so groß wie die drei Schaltflächen plus einem kleinen zusätzlichen Abstand.

Im Bild wurde den ersten beiden Schaltflächen eine passende Größe vorgeschrieben, um den Text anzuzeigen. Die dritte Schaltfläche ist größer, weil sie mehr Inhalt enthält. Die Breite der umschließenden Box ist die Summe der Breite der drei Schaltflächen plus einem zusätzlichen Abstand zwischen ihnen. Die Höhe der Schaltflächen ist passend zur Textgröße berechnet worden.

Width und height Attribute

Sie möchten sicher mehr Einfluss auf die Größe eines Elements in einem Fenster nehmen können. Es gibt eine Reihe von Features, die Ihnen erlauben die Größe eines Elementes festzulegen. Der schnellste Weg ist, einfach die width und height Attribute festzulegen, genauso wie Sie es vielleicht von HTML kennen. Ein Beispiel dazu:

Beispiel 1: Datei Ansehen

<button label="OK" width="100" height="40"/>

Es ist jedoch nicht empfohlen, das so zu machen. Es ist passt nicht in einige Themes und ist umständlicher anpassbar. Ein besserer Weg ist, CSS Eigenschaften zu verwenden, welche wie in HTML arbeiten. Die folgenden CSS Eigenschaften können dazu verwendet werden:

width

Legt die Breite eines Elementes fest.

height

Legt die Höhe eines Elementes fest.

Werden beide Eigenschaften festgelegt, wird das Element mit dieser Breite und Höhe erstellt. Wird nur eines der beiden angegeben, wird die andere Eigenschaft nach dem benötigten Platz berechnet. Die Größe sollte als Zahl gefolgt von einer Einheit angegeben werden.

Flexible Elemente

Die Größen der Elemente sind ziemlich einfach zu berechnen für nicht-flexible Elemente. Sie folgen einfach der festgelegten Breiten und Höhen und sobald eine Größe nicht festgelegt wurde, wird das Element so groß wie es für den Inhalt erforderlich ist. Für flexible Elemente ist die Berechnung allerdings nicht ganz so einfach.

Flexible Elemente sind solche, die über ein flex Attribut verfügen und einen Wert größer als 0 haben. Flexible Elemente passen sich an den verfügbaren Freiraum an. Die Standardgröße wird trotzdem genauso berechnet wie für nicht-flexible Elemente. Das folgende Beispiel soll dies verdeutlichen:

Beispiel 2 : Datei Ansehen

<window orient="horizontal"
        xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<hbox>
  <button label="Yes" flex="1"/>
  <button label="No"/>
  <button label="I really don't know one way or the other"/>
</hbox>

</window>

Das Fenster wird zunächst so erscheinen wie im vorherigen Bild. Die ersten beiden Schaltflächen werden auf eine passende Breite und die dritte Schaltfläche auf längere Breite skaliert, weil diese über eine längere Aufschrift verfügt. Die erste Schaltfläche ist flexibel und alle Elemente wurde in eine Box getan. Die Breite dieser Box wird auf die Startgröße aller drei Schaltflächen gesetzt (ca. 430 Pixel in dem Bild).

Wenn Sie nun das Fenster vergrößern, wird überprüft, ob Elemente flexibel sind, um den entstehenden Freiraum zu füllen, der entstehen würde. Da die erste Schaltfläche das einzig flexible Element ist, sollte es größer werden. Das geschieht in diesem Fall jedoch nicht, da die Box in dem sich die Schaltfläche befindet nicht flexibel ist. Ein unflexibles Element kann niemals seine Größe ändern, wenn der Platz verfügbar ist. Die Schaltfläche kann also nicht größer werden.

Die Lösung ist, die Box ebenfalls flexibel zu machen. Wird dann das Fenster größer gemacht, ist zusätzlicher Raum verfügbar und die Box wird diesen Raum füllen. Weil die Box größer ist, ist auch mehr Platz innerhalb verfügbar und die flexible Schaltfläche kann diesen Platz einnehmen. Dieser Prozess wird für jede Verschachtelung wiederholt.

Minimale und maximale Größen festlegen

Vielleicht möchten Sie, dass ein Element eine bestimmte Größe besitzt, aber dennoch flexibel ist. Es können Größen festgelegt werden, die auch flexible Elemente nicht über- oder unterschreiten sollen. Diese Einstellung erreicht man mit diesen vier Attributen:

minwidth

Legt die minimale Breite eines Elements fest.

minheight

Legt die minimale Höhe eines Elements fest.

maxwidth

Legt die maximale Breite eines Elements fest.

maxheight

Legt die maximale Höhe eines Elements fest.

Die Werten werden immer in Pixeln angegeben. Es können auch die zugehörigen CSS Eigenschaften angegeben werden: min-width, min-height, max-width und max-height.

Diese Eigenschaften sind nur für flexible Elemente sinnvoll. Wird zum Beispiel eine maximale Höhe festgelegt, wird eine Schaltfläche nur bis zu einer bestimmten Größe skaliert. Sie können das Fenster weiterhin vergrößern, die Schaltfläche wird jedoch nicht weiter vergrößert werden. Die Box, in der sich die Schaltfläche befindet wird sich weiterhin anpassen, wenn Sie keine maximale Höhe festgelegt haben.

Wenn zwei Schaltflächen flexibel sind, werden sich normalerweise beide den freien Platz gleichermaßen teilen. Falls eine Schaltfläche eine maximale Breite hat, wird die zweite Schaltfläche den restlichen Freiraum mit einnehmen.

Wenn eine Box über eine maximale Breite oder Höhe verfügt, können die darin enthaltenen Kindelemente nicht größer als die festgelegte Größe der Box werden. Wenn eine minimale Breite oder Höhe vorliegt, können die Kindelemente ebenfalls nicht kleiner werden.

Beispiele zur Festlegung von Breiten und Höhen

<button label="1" style="width: 100px;"/>
<button label="2" style="width: 100em; height: 10px;"/>
<button label="3" flex="1" style="min-width: 50px;"/>
<button label="4" flex="1" style="min-height: 2ex; max-width: 100px"/>
<textbox flex="1" style="max-width: 10em;"/>
<description style="max-width: 50px">This is some boring but simple 
wrapping text.</description>

Beispiel 1 

Die erste Schaltfläche wird mit einer Breite von 100 Pixeln (px bedeutet Pixel) angezeigt. Die Einheit muss angegeben werden, sonst wird die Breite ignoriert.

Beispiel 2 

Die zweite Schaltfläche wird mit einer Höhe von 10 Pixeln und einer Breite von 100em (ein em ist die Größe eines Zeichens der aktuellen Schrift) angezeigt.

Beispiel 3 

Die dritte Schaltfläche ist flexibel, sie wird also auf Basis der Größe Box der angezeigt. Die Schaltfläche wird jedoch niemals kleiner als 50 Pixel breit. Andere flexible Komponenten wie z.B. Spacer werden den verbleibenden Platz einnehmen.

Beispiel 4 

Die vierte Schaltfläche is flexibel und wird niemals eine Höhe haben, die kleiner als 2 ex ist (ein ex ist normalerweise die Höhe des Buchstaben x der aktuellen Schrift) oder größer als 100 Pixel ist.

Beispiel 5 

Das Texteingabefeld ist flexibel, wird aber niemals größer als 10em werden. Sie werden vermehrt em verwenden wollen, da Sie Größen für Elemente festlegen, die Text enthalten. Diese Einheit ist hilfreich für Textboxen, da die Schrift geändert werden kann und die Textbox immer eine passende Größe hat, auch wenn der Text mal ganz groß werden sollte.

Beispiel 6 

Das description Element wird gezwungen eine maximale Breite von 50 Pixeln zu besitzen. Der Text innerhalb wird in eine neue Zeile verschoben, wenn die 50 Pixel erreicht sind.

Unser Dateisuche-Dialog

Fügen wir einige dieser Möglichkeiten zu unserem Dateisuche-Dialog hinzu. Wir werden es so machen, dass die Textbox auf das gesamte Fenster ausgestreckt wird.

<textbox id="find-text" flex="1" style="min-width: 15em;"/>

Hier wurde das Texteingabefeld flexibel gemacht. Demnach wird es sich anpassen, wenn der Benutzer die Fenstergröße ändert. Das ist sehr hilfreich, wenn der Benutzer einen langen Text einfügen möchte. Außerdem wurde eine minimale Breite von 15em festgelegt, damit immer zumindest 15 Zeichen zu sehen sind. Verkleinert der Benutzer den Dialog sehr stark, wird das Texteingabefeld nur bis 15em verkleinert. Es wird so gezeichnet werden, als wenn es sich auch außerhalb des Fensters ausbreitet. Beachten Sie, dass das Bild ein Texteingabefeld zeigt, welches auf die maximale Fenstergröße ausgebreitet wurde.

Anordnung in Boxen

Wenn Sie eine Box mit zwei Kindelementen haben, beide nicht flexibel, die Box ist aber flexibel. Zum Beispiel:

Beispiel 3: Datei Ansehen

<box flex="1">
  <button label="Happy"/>
  <button label="Sad"/>
</box>

Wenn Sie nun das Fenster vergrößern, wird die Box auf die Fenstergröße ausgedehnt. Die Schaltflächen sind nicht flexibel, sie werden also nicht ihre Breiten ändern. Das Ergebnis ist zusätzlicher Platz, der auf der rechten Seite der Fensters (innerhalb der Box) erscheint. Sie möchten aber unter Umständen, dass dieser freie Platz auf der linken Seite erscheint, sodass die Schaltflächen auf der rechten Seite des Fensters ausgerichtet werden.

Sie könnten das lösen, in dem Sie ein spacer Element innerhalb der Box platzieren, aber das wird umständlich, wenn Sie es für eine Vielzahl von Elementen machen müssen. Ein besserer Weg ist, ein zusätzliches Attribut pack dem box Element hinzuzufügen. Dieses Attribut gibt an, wie die Kindelemente innerhalb der Box angeordnet werden sollen. Für horizontal orientierte Boxen wird die horizontale Position der Kindelemente gesteuert. Für vertikal orientierte Boxen wird die die vertikale Position der Kindelemente gesteuert. Es können die folgenden Werte verwendet werden:

start

Positioniert Elemente an der linken Seite für horizontale Boxen und an der oberen Seite für vertikale Boxen. Dies ist der Standardwert.

center

Zentriert Kindelemente in der Box.

end

Positioniert Elemente an der rechten Seite für horizontale Boxen und an der unteren Seite für vertikale Boxen.

Das pack Attribut wird in der Box festgelegt, die die auszurichteten Elemente enthält, nicht in den Elementen selbst.

Wir können das vorherige Beispiel ändern, sodass die Elemente wie folgt zentriert werden:

Beispiel 4: Datei Ansehen

<box flex="1" pack="center">
  <button label="Happy"/>
  <button label="Sad"/>
</box>

Jetzt, wenn das Fenster verändert wurde, werden die Schaltflächen horizontal zentriert. Vergleichen Sie das Verhalten zum vorherigen Beispiel.

Box Ausrichtung

Wenn das Fenster im Happy-Sad Beispiel oben horizontal verändern, wird die Box in der Breite wachsen. Wenn Sie das Fenster vertikal verändern, werden jedoch die Schaltflächen in ihrer Höhe mitwachsen. Das kommt daher weil, die Flexibilität standardmäßig für die vertikale Richtung aktiviert ist.

Dieses Verhalten kann mit dem align Attribut gesteuert werden. Für horizontale Boxen werden die vertikalen Positionen der kindelemente gesteuert. Für vertikale Boxen werden die horizontalen Positionen der Kindelemente gesteuert. Die möglichen Werte sind ähnlich zu denen des {{XULAttr("pack")}} Attributs.

start

Richtet Elemente an der oberen Seite für horizontal Boxen und an der linken Seite für vertikale Boxen aus.

center

Zentriert Kindelemente in der Box.

end

Richtet Elemente an der unteren Seite für horizontale Boxen und an der rechten Seite für vertikale Boxen aus.

baseline

Richtet Elemente an der Textlinie aus. Nur für horizontale Boxen sinnvoll.

stretch

Standardwert. Sorgt dafür, dass die Elemente auf die Größe der Box ausgedehnt werden, wie ein flexibles Element nur in die andere Richtung.

Im Gegensatz zum pack Attribut, wird das align Attribut auf die beinhalteten Elemente der Box angewendet, nicht auf das Element selbst.

Zum Beispiel, die erste Box unten wird die Kindelemente ausdehnen, weil das die Standardeinstellung ist. Die zweite Box hat ein align Attribut, seine Kindelemente werden also zentriert platziert.

Beispiel 5: Datei Ansehen

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

<window id="yesno" title="Question" orient="horizontal"
        xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <hbox>
    <button label="Yes"/>
    <button label="No"/>
  </hbox>
  <hbox align="center">
    <button label="Maybe"/>
    <button label="Perhaps"/>
  </hbox>

</window>

Es können auch die CSS Eigenschaften: -moz-box-pack und -moz-box-align anstatt von Attributen verwendet werden.

Text und Schaltflächen abschneiden

Sie können eine Schaltfläche erstellen, die eine Beschriftung hat, die länger als die maximale Breite der Schaltfläche ist. Eine Lösung wäre sicher die Breite zu erhöhen, jedoch verfügen Schaltflächen (und andere Elemente mit einer Beschriftung) über ein spezielles Attribut. Das Attribut "crop" erlaubt Ihnen wie ein Text abgeschnitten wird, wenn dieser zu lang ist.

Wenn der Text abgeschnitten wird, wird ein Auslassungszeichen (...) dort eingefügt, wo der Text ausgeschnitten wurde. Vier mögliche Werte sind dazu gültig:

left

Der Text wird auf der linken Seite abgeschnitten.

right

Der Text wird auf der rechten Seite abgeschnitten.

center

Der Text wird in der Mitte abgeschnitten.

none

Der Text wird nicht abgeschnitten. Das ist das Standardverhalten.

Dieses Attribut ist wirklich nur dann sinnvoll, wenn ein Dialog so entworfen wurde, dass er verwendbar in jeder Große sein soll. Das crop Attribut kann auch bei anderen Elementen verwendet werden, die ein label Attribut für Beschriftungen verwenden. Das folgende Beispiel zeigt das Attribut in Aktion:

Beispiel 6: Datei Ansehen

<button label="Push Me Please!" crop="right" flex="1"/>

Beachten Sie, wie der Text der Schaltfläche auf der rechten Seiten abgeschnitten wird, wenn das Fenster verkleinert wird.

Als nächstes eine Zusammenfassung und einige zusätzliche Details zum Box-Modell.