agorum.hbox, agorum.vbox

agorum.hbox und agorum.vbox sind Container-Typen. Sie ordnen die enthaltenen Elemente (items) horizontal nebeneinander (hbox) oder vertikal untereinander (vbox) an.

Jedes Widget stellt sich im Standard nur so breit (hbox) oder hoch (vbox) dar, wie es selbst festlegt. Das kann eine natürliche Größe sein, etwa die Höhe eines Textfelds, oder eine explizit über height oder width festgelegte Größe.

Wenn sich der zur Verfügung stehende Platz dynamisch ändern kann (etwa, wenn ein Benutzer ein Fenster vergrößert / verkleinert), können Sie für ein oder mehrere Elemente stattdessen den Parameter flexible auf true setzen. Eine hbox / vbox verteilt den zusätzlich zur Verfügung stehenden Platz in seiner Hauptrichtung gleichmäßig auf alle Elemente, die Sie als flexibel definiert haben. Meistens enthält eine hbox / vbox höchstens ein flexibles Element, etwa ein mehrzeiliges Textfeld oder auch einen weiteren Container, der seinerseits wieder flexible Elemente enthält.

In der Nebenrichtung (vertikal für vbox, horizontal für hbox) streckt das System Elemente grundsätzlich auf die vorhandene Breite (vbox) oder Höhe (hbox).

Beispiel einer agorum.vbox

---

Das folgende Beispiel demonstriert eine agorum.vbox, die u. a. auf- und zugeklappt werden kann. Die enthaltenen Parameter gelten ebenfalls für eine agorum.hbox.

module.exports = {
  type: 'agorum.vbox',
  width: 800,
  height: 600,
  items: [
    {
      type: 'agorum.vbox',
      lite: true,
      title: 'Meine Überschrift',
      collapsible: true,
      collapsed: false,
      items: [
        {
          type: 'agorum.button',
          text: 'Hallo, aguila!',
          name: 'button',
        }
      ]
    },
    {
      type: 'agorum.textArea',
      text: 'Hallo, Welt!',
      name: 'textArea'
    }
  ]
};

Äußere vbox

---

Die äußere vbox verteilt den zur Verfügung stehenden Platz folgendermaßen:

Höhe

• Die untere hbox wird nur so hoch dargestellt wie nötig.
• Die obere textArea bekommt die restliche Höhe zugewiesen (flexible: true).

Breite

Sowohl textArea als auch hbox werden auf die verfügbare Breite erweitert.

Untere hbox

---

Die untere hbox verteilt den zur Verfügung stehenden Platz wie folgt:

Höhe

Da die hbox selbst nicht flexibel ist, wird sie nur so hoch dargestellt wie ihr höchstes Element. Da ein spacer-Element von sich aus keine Höhe hat, ist das die Schaltfläche, die ihre natürliche Größe erhält. Damit wird das unsichtbare spacer-Element ebenfalls auf diese gemeinsame Höhe vergrößert.

Breite

• Die Schaltfläche wird in ihrer natürlichen Breite dargestellt, die abhängig von der Beschriftung variiert.
• Das spacer-Element bekommt die restliche Breite zugewiesen (flexible: true), dadurch wird die Schaltfläche rechtsbündig dargestellt.

Wenn das Fenster vergrößert / verkleinert wird, wächst oder schrumpft die textArea mit. Die Schaltfläche verankert sich in fester Größe unten rechts.

Ist eine hbox / vbox nicht groß genug, um alle nicht flexiblen Elemente gleichzeitig darzustellen, blendet das System Scrollbalken ein.

Events

---

keine

Erklärungsbedürftige Parameter

---

lite (Boolean)

Wert	Beschreibung
true	Stellt den Container als dünnen Rahmen dar. Geben Sie zusätzlich einen title mit, um den Container samt Überschrift darzustellen.
false	Stellt den Container als gewöhnlichen Rahmen dar. Geben Sie zusätzlich einen title mit, um den Container samt Überschrift darzustellen.

Beispiel: true

lite: true,
title: 'Meine Überschrift',

Beispiel: false

lite: false,
title: 'Meine Überschrift',

collapsible (Boolean)

Wert	Beschreibung
true	Der Container kann auf- und zugeklappt werden. Geben Sie zusätzlich einen title mit, um den Container samt Überschrift darzustellen.
false	Der Container kann NICHT auf- und zugeklappt werden. Geben Sie zusätzlich einen title mit, um den Container samt Überschrift darzustellen.

Beispiel: true

collapsible: true,
title: 'Meine Überschrift',

Beispiel: false

collapsible: false,
title: 'Meine Überschrift',

collapsed (Boolean)

Wert	Beschreibung
true	Der Container ist bei Aufruf im Standard zugeklappt. Geben Sie zusätzlich einen title mit, um den Container samt Überschrift darzustellen.
false	Der Container ist bei Aufruf im Standard aufgeklappt. Geben Sie zusätzlich einen title mit, um den Container samt Überschrift darzustellen.

 

Beisspiel: true

colappsed: true,
title: 'Meine Überschrift',

Beispiel: false

colappsed: false,
title: 'Meine Überschrift',

Funktionen

---

keine