JavaScript-Bibliothek agorum.composite/js/lib/buttons

Die JavaScript-Bibliothek agorum.composite/js/lib/buttons dient zur Erstellung von Buttonleisten mit verschiedenen Standardaktionen. Sie können damit Schaltflächen mit unterschiedlichen Eigenschaften, wie Icons, Farben und spezifischen Aktionen, definieren, verwalten und wiederverwenden. 

Verwendung

---

Binden Sie die Bibliothek stets am Anfang eines Skripts ein:

let buttons = require('/agorum/roi/customers/agorum.composite/js/lib/buttons');

 

Die Bibliothek vereinfacht das Hinzufügen und Verwalten von Schaltflächen mit voreingestellten Aktionen innerhalb von aguila-Anwendungen. Sie können eine Bar-Instanz erstellen und Schaltflächen mit spezifischen Aktionen und Eigenschaften hinzufügen. Am Ende der Schaltflächenkonfiguration rufen Sie die build-Funktion auf, um die endgültige Benutzeroberflächenkomponente zu erstellen und sowohl die hinzugefügten Schaltflächen als auch deren Eigenschaften in eine konstruierte Benutzeroberflächenkomponente umzuwandeln.

Konstruktoren

Konstruktor	Beschreibung	Pflicht	Standard
bar()	Erstellt eine neue, leere Instanz der Schaltflächenleiste Bar, bereit zur Aufnahme von Schaltflächen.

Beispiele

---

Buttonleiste mit Standardbuttons

Das folgende Beispiel zeigt, wie Sie eine Buttonleiste (standardBar) mit Standardbuttons erstellen und in einer einfachen aguila-Oberfläche verwenden können.

 

 

let aguila = require('common/aguila');
let buttons = require('/agorum/roi/customers/agorum.composite/js/lib/buttons');

let standardBar = buttons
  .bar()
  .button({
    name: 'custom',
    text: 'custom',
  })
  .save()
  .delete()
  .yes({ disabled: true })
  .no({ disabled: true })
  .ok({ disabled: true })
  .apply()
  .cancel()
  .close()
  .build();

let widget = aguila.create({
  type: 'agorum.composite.form.basic',
  labelPosition: 'top',
  elements: [
    {
      type: 'agorum.composite.form.element.text',
      name: 'text',
      label: 'Text',
    },
    aguila.create({ type: 'agorum.hbox', name: 'test1' }),
    { type: 'agorum.hbox', name: 'test2' },
    { type: 'agorum.spacer', height: 16 },
    standardBar,
    { type: 'agorum.spacer', height: 16 },
  ],
});

widget.on('action', action => console.log('action', action));
standardBar.on('pressed', action => console.log('pressed', action));

widget;

Buttonleiste mit Buttons in Standardfarben

Das folgende Beispiel zeigt eine Schaltflächenleiste mit farbigen Buttons entsprechend der gängigen Namen für Standardfarben.

 

 

let aguila = require('common/aguila');
let buttons = require('/agorum/roi/customers/agorum.composite/js/lib/buttons');

let COLORS = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'dark', 'medium', 'light'];

let colorBar = (() => {
  let builder = buttons.bar();

  COLORS.forEach(color =>
    builder.button({
      name: color,
      text: color,
      color: color,
    })
  );

  return builder.build();
})();

let widget = aguila.create({
  type: 'agorum.composite.form.basic',
  labelPosition: 'top',
  elements: [
    {
      type: 'agorum.composite.form.element.text',
      name: 'text',
      label: 'Text',
    },
    aguila.create({ type: 'agorum.hbox', name: 'test1' }),
    { type: 'agorum.hbox', name: 'test2' },
    { type: 'agorum.spacer', height: 16 },
    colorBar,
    { type: 'agorum.spacer', height: 16 },
  ],
});

widget.on('action', action => console.log('action', action));
colorBar.on('pressed', action => console.log('pressed', action));

widget;

Verwenden einzelner Standardbuttons

In folgendem Beispiel sehen Sie, wie Sie Standardbuttons über Hilfsfunktionen direkt verwenden und auch mehrere hintereinander durch Verketten zu einer Buttonleiste hinzufügen können.

 

 

let aguila = require('common/aguila');
let buttons = require('/agorum/roi/customers/agorum.composite/js/lib/buttons');

let widget = aguila.create({
  type: 'agorum.composite.form.basic',
  labelPosition: 'top',
  elements: [
    {
      type: 'agorum.composite.form.element.text',
      name: 'text',
      label: 'Text',
    },
    aguila.create({ type: 'agorum.hbox', name: 'test1' }),
    { type: 'agorum.hbox', name: 'test2' },
    { type: 'agorum.spacer', height: 16 },
    buttons.bar().ok().build(),
    { type: 'agorum.spacer', height: 16 },
    buttons.bar().ok().cancel().build(),
    { type: 'agorum.spacer', height: 16 },
    buttons.bar().ok().apply().cancel().close().build(),
    { type: 'agorum.spacer', height: 16 },
    buttons.bar().yes().no().build(),
    { type: 'agorum.spacer', height: 16 },
    buttons.bar().yes().no().cancel().build(),
  ],
});

widget.on('action', action => console.log('action', action));

widget;

Funktionen

---

button

Fügt eine allgemeine Schaltfläche zur Leiste hinzu.

 

Syntax

.button({ name: 'custom', text: 'custom', })

 

Parameter

Button ist ein Objekt, das eine Schaltfläche in einer Bar darstellt. Ein Button hat folgende Eigenschaften:

Eigenschaft	Datentyp	Beschreibung	Pflicht
name	Zeichenkette	Der eindeutige Name der Schaltfläche.	erforderlich
icon	Zeichenkette	Das Symbol der Schaltfläche, in der Regel mit der Aktion Icon erstellen definiert. Wenn eine color-Eigenschaft gesetzt ist, wird die Icon-Farbe automatisch auf [color]-contrast gesetzt, um optimale Lesbarkeit zu gewährleisten.	optional
text	Zeichenkette	Das Textlabel der Schaltfläche, normalerweise lokalisiert.	optional
color	Zeichenkette	Die Farbe der Schaltfläche. Mögliche Werte: 'primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'dark', 'medium', 'light', 'transparent', 'disabled'	optional
accept	boolescher Wert	Kennzeichnet die Schaltfläche als akzeptierenden Button.	optional
abort	boolescher Wert	Kennzeichnet die Schaltfläche als abbrechenden Button.	optional
standard	boolescher Wert	Kennzeichnet die Schaltfläche als standardmäßigen Button.  Buttons mit standard: true werden rechtsbündig angeordnet, alle anderen linksbündig.	optional

Beispiel

let aguila = require('common/aguila');
let buttons = require('/agorum/roi/customers/agorum.composite/js/lib/buttons');

let testBar = buttons
  .bar()
  .button({
    name: 'myName',
    text: 'my sample text',
    icon: 'agorum:agorum-logo',
    color: 'medium',
    accept: true,
    standard: true,
  })
  .build();

let widget = aguila.create({
  type: 'agorum.composite.form.basic',
  labelPosition: 'top',
  elements: [
    {
      type: 'agorum.composite.form.element.text',
      name: 'text',
      label: 'Text',
    },
    aguila.create({ type: 'agorum.hbox', name: 'test1' }),
    { type: 'agorum.hbox', name: 'test2' },
    { type: 'agorum.spacer', height: 16 },
    testBar,
  ],
});

widget.on('action', action => console.log('action', action));

widget;

 

 

Rückgabewert

Die Instanz der Bar, um die Verkettung von Funktionen zu ermöglichen.

Exceptions

Löst einen Fehler aus, wenn das Button-Objekt keine name-Eigenschaft hat.

accept

Fügt eine Schaltfläche als Accept-Button zur Leiste hinzu und markiert sie intern. Die erste hinzugefügte Accept-Schaltfläche wird als Standard-Accept-Button der Bar gespeichert.

 

Syntax

.accept({ name: 'custom', text: 'Bestätigen', icon: 'mdi:check' })

 

Parameter

Die Parameter sind identisch zu button(). Die Eigenschaft accept: true wird automatisch gesetzt.

 

Rückgabewert

Die Instanz der Bar, um die Verkettung von Funktionen zu ermöglichen.

abort

Fügt eine Schaltfläche als Abort-Button zur Leiste hinzu und markiert sie intern. Die zuletzt hinzugefügte Abort-Schaltfläche wird als Standard-Abort-Button der Bar gespeichert.

 

Syntax

.abort({ name: 'custom', text: 'Verwerfen', icon: 'mdi:close' })

 

Parameter

Die Parameter sind identisch zu button(). Die Eigenschaft abort: true wird automatisch gesetzt.

 

Rückgabewert

Die Instanz der Bar, um die Verkettung von Funktionen zu ermöglichen.

Funktionen für Standardschaltflächen

Die Bibliothek enthält einige Hilfsfunktionen zum Hinzufügen vordefinierter Standardschaltflächen. Die Funktionen können verkettet werden, um mehrere Schaltflächen zu einer Buttonleiste hinzuzufügen, siehe Verwenden von Standardschaltflächen.
 

Funktion	Verwendung	Screenshot der Schaltfläche
apply	Fügt die Standardschaltfläche "Übernehmen" hinzu. icon: 'mdi:save'
cancel	Fügt die Standardschaltfläche "Abbrechen" hinzu. icon: 'mdi:cancel'
close	Fügt die Standardschaltfläche "Schließen" hinzu. icon: 'mdi:cancel'
delete	Fügt die Standardschaltfläche "Löschen" hinzu. icon: 'mdi:delete-forever' color: 'danger'
no	Fügt die Standardschaltfläche "Nein" hinzu. icon: 'mdi:do-not-disturb'
ok	Fügt die Standardschaltfläche "OK" hinzu. icon: 'mdi:check-circle' color: 'primary'
save	Fügt die Standardschaltfläche "Speichern" hinzu. icon: 'mdi:save' color: 'primary'
yes	Fügt die Standardschaltfläche "Ja" hinzu. icon: 'mdi:check-circle' color: 'success'

Sie können optional ein Button-Objekt übergeben, um die Standardwerte zu überschreiben.

Beispiel:

.ok({ text: 'Eigener Text', disabled: true })

Abfrage-Funktionen

Die Bar-Instanz bietet Funktionen zum Abrufen von Informationen über die konfigurierten Schaltflächen:

 

Funktion	Verwendung	Rückgabewert
getAccept	Gibt die erste Schaltfläche zurück, die als Accept-Button markiert wurde.	Ein Button-Objekt oder null, wenn kein Accept-Button konfiguriert wurde.
getAbort	Gibt die letzte Schaltfläche zurück, die als Abort-Button markiert wurde.	Ein Button-Objekt oder null, wenn kein Abort-Button konfiguriert wurde.
getButtons	Gibt alle konfigurierten Schaltflächen der Leiste als Array zurück.	Ein Array mit allen Button-Objekten in der Reihenfolge, in der sie hinzugefügt wurden.

build

Die Funktion baut die Schaltflächenleiste und die konfigurierten Schaltflächen und gibt die erstellte Benutzeroberflächenkomponente zurück.

 

Syntax

.build()

 

Beispiel

Siehe Beispiele.

 

Rückgabewert

Ein Objekt, das die erstellte Benutzeroberflächenkomponente darstellt.

Events

---

pressed

Löst aus, sobald ein Benutzer auf eine Schaltfläche klickt.

Das System gibt Informationen über den geklickten Button zurück.