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'
    }
  ]
};

Beispielhafte agorum.vbox

Ä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',

agorum.vbox mit Parameter lite auf true

Beispiel: false

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

agorum.vbox mit Parameter lite auf false

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',

agorum.vbox mit Parameter collapsible auf true

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',

agorum.vbox mit Parameter collapsed auf true

Beispiel: false

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

agorum.vbox mit Parameter collapsed auf false

Funktionen

keine