agorum.pickerInput

Dieses Widget besteht aus einem einfachen Texteingabefeld zusammen mit einem als Picker bezeichneten Widget, das für die Auswahl von Werten gedacht ist. Es funktioniert ähnlich wie eine Combo-Box, bei der die dort vorhandene Liste durch ein beliebiges anderes Widget ersetzt werden kann.

PickerInput-Widgets werden zumeist nicht direkt verwendet, sondern bilden die Basis für eigene Widget-Typen, die darauf aufbauen.

Verwendung

---

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

let widget = aguila.create({
  type: 'agorum.pickerInput',
  width: 300,
  attached: {
    type: 'agorum.vbox',
    items: [
      {
        type: 'agorum.textInput',
        name: 'name',
        label: 'Name'
      },
      {
        type: 'agorum.textInput',
        name: 'firstName',
        label: 'Vorname'
      }
    ]
  }
});

let name = widget.down('name');
let firstName = widget.down('firstName');

widget.on('trigger', expanded => {
  if (expanded) {
    widget.collapse();
  }
  else {
    widget.expand();
  }
});

let updatePicker = text => {
  let parts = text.split(/\s*,\s*/);

  name.value = parts[0];
  firstName.value = parts[1];
};

let updateText = () => widget.text = [ name.value, firstName.value ].filter(x => x).join(', ');

widget.on('textChanged', updatePicker);

name.on('valueChanged', updateText);
firstName.on('valueChanged', updateText);

widget;

Events

---

trigger (Boolean)

Löst aus, sobald ein Benutzer die Schaltfläche neben dem Textfeld anklickt.

• Zeigen Sie im Regelfall den zugehörigen Picker per expand() an oder verbergen Sie ihn per collapse().
• Das System übergibt als Parameter die Angabe, ob der Picker aktuell erscheint (true) oder nicht (false).

textChanged (String)

Löst aus, sobald sich der für den Benutzer sichtbare Text ändert.

• Der Text ändert sich, weil der Benutzer ihn selbst geändert hat oder weil er programmatisch geändert wurde.
• Das System übergibt als Parameter den neuen Text und aktualisiert als Reaktion darauf meist den Inhalt des Pickers (etwa gefiltert).

collapsed

Löst aus, sobald sich der Picker schließt.

expanded

Löst aus, sobald sicher der Picker öffnet.

key (Number)

Löst aus, sobald ein Benutzer eine Spezialtaste (alle Tasten außer Buchstaben / Zahlen) gedrückt hat, während sich der Tastaturfokus im Eingabefeld befindet.

Das System übergibt als Parameter den Key-Code dieser Taste.

Key-Codes für gewünschte Tasten ermitteln

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

let widget = aguila.create({
  type: 'agorum.vbox',
  items: [
    {
      type: 'agorum.pickerInput',
      name: 'input',
      attached: {
        type: 'agorum.spacer'
      }
    },
    {
      type: 'agorum.textDisplay',
      name: 'output'
    }
  ]
});

let input = widget.down('input');
let output = widget.down('output');

input.on('key', key => output.value = key.toFixed(0));

widget;

Parameter

---

attached (Widget)

Erwartet ein Widget oder die aon eines Widgets, das Sie als Picker verwenden möchten.

Dieses Widget können Sie nachträglich nicht mehr austauschen, es kann jedoch etwa ein Container sein, dessen Inhalt nachträglich wechselt.

loose (Boolean)

Wert	Beschreibung
true	Die Breite des Pickers orientiert sich nicht mehr automatisch an der Breite des Eingabefelds, sondern sie kann separat gesetzt werden.
false (Standard)	Die Breite des Pickers orientiert sich an der Breite des Eingabefelds.

text (String)

Stellt zusätzlich zu value (dem eigentlichen Wert des Felds) den für den Benutzer sichtbaren Text im Eingabefeld dar.

Dieser Parameter kann analog zur Combo-Box gesehen werden, bei der für den Benutzer ebenfalls potenziell ein von value abweichender Text erscheint.

Funktionen

---

expand()

Stellt den Picker dar, wenn er nicht schon sichtbar ist.

collapse()

Verbirgt den Picker, wenn er nicht schon unsichtbar ist.

Beispiel

---

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

let data = [
  'aguila-icon alarm',
  'aguila-icon alarm_add',
  'aguila-icon alarm_off',
  'aguila-icon alarm_on'
]
.map(name => ({ value: name, text: name }));

let maxVisible = 100;

let widget = aguila.create({
  type: 'agorum.pickerInput',
  width: 300,
  attached: {
    type: 'agorum.vbox',
    maxHeight: 300
  }
});

let list = widget.attached;
let applying;

function apply() {
  applying = true;

  try {
    widget.value = this.icon;
    widget.text = this.text;

    widget.collapse();
  }
  finally {
    applying = false;
  }

  update();
}

let update = text => {
  if (applying) {
    return;
  }

  let filtered;

  if (text) {
    text = text.toLowerCase();

    filtered = data.filter(row => row.text.toLowerCase().indexOf(text) >= 0);
  }
  else {
    filtered = data;
  }

  list.items = filtered.slice(0, maxVisible).map(row => aguila.create({
    type: 'agorum.button',
    icon: row.value,
    text: row.text
  }).on('clicked', apply));

  if (text !== undefined) {
    widget.expand();
  }
};

widget.on('trigger', expanded => {
  if (expanded) {
    widget.collapse();
  }
  else {
    widget.expand();
  }
});

widget.on('textChanged', update);

update();

widget;