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

Konstruktur	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()
  .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().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.	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.	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.

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.
cancel	Fügt die Standardschaltfläche "Abbrechen" hinzu.
delete	Fügt die Standardschaltfläche "Löschen" hinzu.
no	Fügt die Standardschaltfläche "Nein" hinzu.
ok	Fügt die Standardschaltfläche "OK" hinzu.
save	Fügt die Standardschaltfläche "Speichern" hinzu.
yes	Fügt die Standardschaltfläche "Ja" hinzu.

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.