Durchsuchbare Dokumentation aufrufen | Zurück zur Dokumentationsübersicht
Navigation: Dokumentationen agorum core > agorum core JavaScript-API
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.
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.
Konstruktur | Beschreibung | Pflicht | Standard |
---|---|---|---|
bar() | Erstellt eine neue, leere Instanz der Schaltflächenleiste Bar, bereit zur Aufnahme von Schaltflächen. |
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;
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;
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;
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.
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. |
|
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.
Löst aus, sobald ein Benutzer auf eine Schaltfläche klickt.
Das System gibt Informationen über den geklickten Button zurück.