Durchsuchbare Dokumentation aufrufen | Zurück zur Dokumentationsübersicht

Navigation: Dokumentationen agorum core > agorum core JavaScript-API


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.

 

Screenshot zum Beispiel Buttonleiste mit Standardbuttons

 

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.

 

Screenshot zum Beispiel Buttonleiste mit Buttons in 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.

Screenshot zum Beispiel Verwenden einzelner Standardbuttons
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;

 

Screenshot zum button()-Beispiel

 

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.