agorum.button, agorum.menuItem

Dieses Widget stellt eine normale Schaltfläche dar, die ein Benutzer anklicken kann und ein Event auslöst. In Kombination mit agorum.menuItem und agorum.menu können Sie Untermenüs gestalten.

Unterschied zwischen agorum.menu und agorum.menuItem

---

• Das Menü ist ein Container (vergleichbar mit einer agorum.hbox).
• Menü-Items sind einzelne Einträge darin (vergleichbar mit agorum.button).

Verglichen mit dem Kontextmenü ist ein agorum.menuItem entweder eine Aktion oder eine Gruppe, wenn darin wiederum ein agorum.menu-Container enthalten ist (durch den Parameter attached), der Untermenüs oder Aktionen unterhalb dieser Gruppe enthalten kann

Verwendung

---

 

 

let aguila = require('common/aguila');

let widget = aguila.create(
  {
    type: 'agorum.vbox',
    height: 200,
    width: 300,
    items: [
      {
        type: 'agorum.button',
        name: 'button',
        text: 'Klick mich!'
      },
      {
        type: 'agorum.textDisplay',
        label: 'Ausgabe',
        name: 'log'
      }
    ]
  }
);

let button = widget.down('button');
let log = widget.down('log');
let counter = 0;

button.on('clicked', () => {
  counter ++;
  log.text = 'Der Button wurde ' + counter + ' mal geklickt.';
});

widget;

Events

---

clicked

Löst aus, sobald ein Benutzer auf die Schaltfläche oder den Menüeintrag klickt.

Parameter

---

attached

Definiert Elemente eines Untermenüs.

• Sie können Menüs und Untermenüs erstellen, wenn die Schaltfläche im Property attached ein agorum.menu enthält.
• Menüs können Sie nachträglich nicht mehr ändern. Lediglich die menuItems können Sie austauschen.

Beispiel

attached = {
  type: 'agorum.menu',
  items: [
    {
      type: 'agorum.menuItem',
      text: 'Untermenü 1'
    },
    {
      type: 'agorum.menuItem',
      text: 'Untermenü 2'
    }
  ]
};

icon

Definiert das zu verwendende Icon.

Beispiel mit erstelltem Icon

Über die Aktion Icon erstellen können Sie eigene Icons definieren. Diese können Sie ebenfalls hier verwenden:

let icons = require('/agorum/roi/customers/agorum.icons/js/icons');
// ...
form.down('button1').icon = icons.cls('agorum:agorum-logo;color=#0069b5');

split (nur für agorum.button)

Wert	Beschreibung
true	Die Schaltfläche verhält sich wie eine normale Schaltfläche, wenn ein Benutzer sie anklickt. Das Untermenü ist über einen kleinen Pfeil rechts von der Schaltfläche aufklappbar.
false	Die Schaltfläche verhält sich wie ein Auswahlmenü und klappt das Untermenü bei Klick direkt auf, ein Untermenü unter der Schaltfläche vorhanden ist (mithilfe des Parameters attached).

text

Definiert den Text der Schaltfläche / des Menüeintrags.

Nur das Icon erscheint, wenn Sie diesen Parameter leer lassen und nur der Parameter icon definiert ist.

locked

Sperrt die Schaltfläche, wenn für locked ein String übergeben wird, um dem Benutzer zu signalisieren, dass gerade etwas gemacht wird, und verhindert zudem, dass der Benutzer während der Aktion nochmals draufklicken kann.

• Eine Animation erscheint, die zeigt, dass die Schaltfläche beschäftigt ist.
• Wenn Sie null setzen, wird der Zustand wieder zurückgesetzt.
• Der String, der bei locked übergeben wird, wird während des gesperrten Zustands als Tooltip angezeigt.

Beispiel

let button = form.down('button1');
button.locked = 'Einen Moment bitte ...';

aguila.fork(() => {
  // Hier wird etwas Zeitaufwändiges gemacht ...
})
.finally(() => {
  button.locked = null;
});

Funktionen

---

keine

Beispiele

---

Beispiel mit Untermenüs und Icon

 

 

let aguila = require('common/aguila');

let widget = aguila.create(
  {
    type: 'agorum.vbox',
    height: 200,
    width: 350,
    items: [
      {
        type: 'agorum.button',
        name: 'button',
        text: 'Hauptmenü',
        icon: 'aguila-icon add_circle',
        attached: {
          type: 'agorum.menu',
          items: [
            {
              type: 'agorum.menuItem',
              text: 'Untermenü 1',
              icon: 'aguila-icon alarm',
              attached: {
                type: 'agorum.menu',
                items: [
                  {
                    type: 'agorum.menuItem',
                    text: 'Untermenü 1.1',
                    name: 'subMenu1_1'
                  }
                ]
              }
            },
            
            // inline creation with direct event association
            aguila.create({
              type: 'agorum.menuItem',
              text: 'Untermenü 2'
            }).on('clicked', () => menuClicked('Untermenü 2')),
            
            // inline creation with direct event association
            aguila.create({
              type: 'agorum.menuItem',
              text: 'Untermenü 3'
            }).on('clicked', () => menuClicked('Untermenü 3')),
          ]
        }
      }
    ]
  }
);

widget;

Beispiel mit Split-Button und Untermenü

 

 

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  height: 200,
  width: 350,
  items: [
    {
      type: 'agorum.button',
      name: 'button',
      text: 'Hauptmenü',
      split: true,
      icon: 'aguila-icon add_circle',
      attached: {
        type: 'agorum.menu',
        items: [
          {
            type: 'agorum.menuItem',
            text: 'Untermenü 1',
            icon: 'aguila-icon alarm',
            attached: {
              type: 'agorum.menu',
              items: [
                {
                  type: 'agorum.menuItem',
                  text: 'Untermenü 1.1',
                  name: 'subMenu1_1',
                },
              ],
            },
          },
        ],
      },
    },
  ],
});
widget;

Beispiel für den Aufruf eines Workflows über einen Button

Für ein Beispiel wie Sie einen Workflow über einen Button öffnen können siehe Einen Workflow über aguila starten.