agorum.menu

Dieses Widget stellt ein Menü mit Untermenüs dar. Das Menü wird ausschließlich in Kombination mit einer Schaltfläche verwendet, die als Auswahlmenü dient (siehe agorum.button, agorum.menuItem).

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

Verwendung

---

 

 

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

let widget = aguila.create(
  {
    type: 'agorum.vbox',
    height: 200,
    width: 350,
    items: [
      {
        type: 'agorum.button',
        name: 'button',
        text: 'Button',
        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;

Events

---

keine

Parameter

---

items

Enthält die Elemente des Untermenüs vom Typ agorum.menuItem.

Beispiel

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

Funktionen

---

keine

Beispiel mit Untermenüs und Symbolen

---

 

 

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 Erstellung mit direkter Event-Zuordnung
            aguila.create({
              type: 'agorum.menuItem',
              text: 'Untermenü 2'
            }).on('clicked', () => menuClicked('Untermenü 2')),
            
            // inline Erstellung mit direkter Event-Zuordnung
            aguila.create({
              type: 'agorum.menuItem',
              text: 'Untermenü 3'
            }).on('clicked', () => menuClicked('Untermenü 3')),
          ]
        }
      },
      {
        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.';
});

// Fügt das Event über den Namen hinzu
widget.down('subMenu1_1').on('clicked', () => menuClicked('Untermenü 1.1'));

function menuClicked(name) {
  log.text = 'Untermenü angeklickt: ' + name;
}

widget;