Widget

Alle Widgets sind von dieser Basisklasse abgeleitet, die gemeinsame Events, Parameter und Funktionen definiert.

Als übersetzbar markierte Parameter geben Sie hierbei in der folgenden Form an:

_<Übersetzungsschlüssel>

Der Übersetzungsschlüssel wird bei der Übertragung an den Benutzer automatisch anhand dessen Spracheinstellung übersetzt.

Haben Sie für einen Parameter keinen Standard-Wert angegeben, so ist dieser null oder nicht definiert.

Events

added (Container)

Löst aus, sobald das System ein bereits existierendes Widget in ein neues Container-Widget legt.

Das System übergibt als Parameter den neuen Container, in dem sich das Widget nun befindet.

removed (Container)

Löst aus, sobald das System ein Widget aus einem Container-Widget entfernt.

Das System übergibt als Parameter den vorherigen Container, in dem sich das Widget zuvor befunden hat.

destroying

Löst aus, direkt bevor das System ein Widget zerstört.

Zu diesem Zeitpunkt sind eventuelle Unter-Widgets noch nicht zerstört, Sie können diese wiederverwenden, indem Sie sie in andere Container verschieben.

enter

Löst aus, sobald ein Benutzer die Eingabetaste betätigt, während dieses Widget den Tastaturfokus besitzt.

escape

Löst aus, sobald ein Benutzer die Escape-Taste betätigt, während dieses Widget den Tastaturfokus besitzt.

clicked

Löst aus, sobald ein Benutzer das Widget mit der linken Maustaste anklickt.

rightClicked

Löst aus, sobald ein Benutzer das Widget mit der rechten Maustaste anklickt.

middleClicked

Löst aus, sobald ein Benutzer das Widget mit der mittleren Maustaste anklickt.

dblClicked

Löst aus, sobald ein Benutzer das Widget mit der linken Maustaste doppelt anklickt.

uploading (Stream)

Löst aus, sobald wenn ein Benutzer auf einem Widget den Upload einer Datei startet.

Dieses Event löst nur aus, wenn es sich um ein Widget mit dem Parameter upload: true oder ein dediziertes Upload-Widget handelt. Ingorieren Sie es nicht, da sonst der Speicher des Servers (für Pufferung) und die Upload-Bandbreite des Clients unnötig belastet werden. Möchten Sie einen Upload ablehnen oder abbrechen, schließen Sie den übergebenen Stream per .close().
Das System übergibt als Parameter InputStream, den das System für die Datenübertragung verwendet und der neben den normalen Funktionen zwei zusätzliche Werte besitzt.

Wert	Beschreibung
id (String)	Definiert eine Kennung, die diesen Upload-Vorgang eindeutig identifiziert (siehe Parameter uploadQueue).
name (String)	Definiert den Namen der hochzuladenden Datei.

uploadQueueChanged (uploadQueue)

Löst aus, sobald sich der Parameter uploadQueue ändert.

Parameter (von allen Widgets unterstützt)

Möchten Sie Parameter verändern, dürfen Sie diese neu setzen, aber nicht ändern.

Beispiel mit dem Parameter items (items ist ein Container-Property), dem ein weiteres Widget hinzugefügt werden soll:

Falsch

<widget>.items.push({
  type: 'agorum.textDisplay',
  name: 'textDisplay',
  label: 'Textdisplay',
  value: 'xx'
});

Richtig

<widget>.items = <widget>.items.concat([{
  type: 'agorum.textDisplay',
  name: 'textDisplay',
  label: 'Textdisplay',
  value: 'xx'
}]);

type (String, read-only)

Definiert den Typ des Widgets.

Wird bei der Konstruktion aus der aon-Struktur verwendet, um ein Widget des korrekten Typs zu erzeugen.
Sie können diesen Parameter nachträglich nicht ändern.

name (String)

Definiert optional den Namen des Widgets, mit dem es etwa über die down()-Funktion gefunden werden kann.

hidden (Boolean)

Wert	Beschreibung
true	Verbirgt das Widget.
false (Standard)	Das Widget ist sichtbar.

disabled (Boolean)

Wert	Beschreibung
true	Stellt das Widget als deaktiviert dar (Schrift ausgegraut und keine Benutzereingaben möglich).
false (Standard)	Das Widget ist normal benutzbar.

locked (String, übersetzbar)

Definiert einen String-Wert, der das Widget für den Benutzer sperrt. Zwei Fälle existieren:

Fall	Beschreibung
Leerer String	Stellt das Widget verschleiert dar.
Gefüllter String	Stellt das Widget verschleiert dar und zeigt darüber den hier definierten Text an.

flexible (boolean)

Definiert, ob das Widget automatisch mit der Größe des Containers skaliert.

Wird nur innerhalb von vbox-/hbox-Containern verwendet.

cls (String)

Setzt die hier definierte CSS-Klasse clientseitig auf die Widget-Komponente.

Kann verwendet werden, um zusätzlich definierte Styles zu aktivieren.

tooltip (String, übersetzbar)

Definiert einen Text, der erscheint, wenn der Benutzer die Maus für eine kurze Zeit über diesem Widget hält.

container (Widget, read-only)

Enthält das Container-Widget, in dem dieses Widget in diesem Moment eingebettet ist.

form (Widget, read-only)

Enthält das form-Widget (sofern vorhanden), in dem dieses Widget in diesem Moment enthalten ist.

Das form-Widget ist das oberste Widget einer Widget-Struktur und entspricht dem Fenster, in dem diese Struktur dargestellt wird (siehe Funktion popup).

Das aktuelle Fenster durch die Escape-Taste schließen

setImmediate(() => widget.form.on('escape', () => widget.form.close()));

Hinweis: Das System verwendet setImmediate(), da direkt nach Erzeugung eines Widgets durch aguila.create() noch keine form referenziert wird. Erst wenn das umliegende Fenster erzeugt wird (typischerweise durch die Funktion popup()), können Sie diesen Parameter verwenden.

Das aktuelle Fenster durch eine Schaltfläche schließen

let aguila = require ('common/aguila');
let widget = aguila.create({
  type: 'agorum.vbox',
  name: 'dialogBox',
  items: [
    {
      type: 'agorum.textArea',
      width: 300,
      text: 'Hallo Welt!',
      flexible: true
    },
    {
      type: 'agorum.button',
      text: 'close',
      name: 'closeButton'
    }
  ]
});
widget.down('closeButton').on('clicked', function () {
  widget.form.close();
});
widget;

Hinweis: Lassen Sie .form weg, bleibt ein leeres Fenster stehen.

upload (Boolean)

Wert	Beschreibung
true	Erlaubt Dateiuploads per Drag-and-drop auf dieses Widget. Setzen Sie diesen Wert, bevor das Widget zum ersten Mal dargestellt wird, also üblicherweise direkt bei der Erstellung.
false (Standard)	Verbietet Dateiuploads per Drag-and-drop auf dieses Widget.

uploadQueue (Array, read-only)

Fragt die aktuelle Warteschlange von Uploads auf diesem Widget ab. Pro Datei existieren folgende Werte:

Wert	Beschreibung
id	Definiert eine Kennung, die diesen Upload-Vorgang eindeutig identifiziert (siehe Event uploading).
name	Definiert den Namen der hochzuladenden Datei.
size	Definiert die Größe der hochzuladenden Datei (in Bytes).

width (Integer)

Zeigt das Widget nach Möglichkeit in dieser Breite an.

height (Integer)

Zeigt das Widget nach Möglichkeit in dieser Höhe an.

maxWidth (Integer)

Zeigt das Widget bei Größenänderungen nach Möglichkeit nicht breiter als hier angegeben an.

maxHeight (Integer)

Zeigt das Widget bei Größenänderungen nach Möglichkeit nicht höher als hier angegeben an.

Eigene Methoden definieren

Neben den Standardfunktionen können Sie eigene Methoden am Widget definieren.

Aufruf

widget.nameDerMethode(parameterDerMethode);

Beispiel

widget.addMethod('nameDerMethode', parameterDerMethode => {
  // hier kann nun etwas gemacht werden
});

Funktionen

close()

Schließt das Widget programmatisch und zerstört dessen Unter-Widgets.

Verwenden Sie diesen Aufruf nur auf form-Ebene (siehe Funktion popup), um ein ganzes Fenster zu schließen.
Ändern Sie den Inhalt des Containers, sofern Sie Widgets innerhalb von Containern entfernen möchten.

Beispiel

..
..
widget.down('closeButton').on('clicked', function () {
  widget.form.close();
});
..

dock('<dock>', <aon | widget>)

Die Funktion dock() fügt ein Kind-Widget zu einem Widget hinzu und dockt es an der angegebenen Position an, bevor das Widget auf dem Client dargestellt wird.

Parameter

Parameter	Beschreibung	Wert
dock	Die Position, an der das Kind-Widget angedockt werden soll.	'left', 'right', 'top', 'bottom', 'west', 'east', 'north', 'south', 'center'
Kind-Widget	Das Kind-Widget, das angedockt werden soll.	Dies kann entweder eine aon-Struktur sein, die das Widget beschreibt, oder ein bereits existierendes Widget.

Rückgabewert

Das angedockte Kind-Widget.

down('<name>')

Sucht unterhalb dieses Widgets ein Widget mit dem übergebenen Namen und liefert es zurück.

fire('<event>', [ <param> ])

Löst programmatisch das Event event mit dem Parameter param auf diesem Widget aus.

Wichtig für selbst definierte Widgets, die eigene Events verwenden sollen.

focus()

Versucht, den Tastaturfokus programmatisch in dieses Widget zu setzen, sofern es das unterstützt.

on('<event>', <handler>)

Definiert einen neuen Event-Handler namens handler (eine JavaScript-Funktion), den das System aufruft, sobald das Event event auf diesem Widget auslöst.

Das System übergibt den Event-Parameter als ersten Parameter an den Handler.

popup(<form definition>)

Erzeugt ein neues form-Widget anhand der übergebenen Konfiguration, bettet dieses Widget darin ein und lässt das form-Widget clientseitig als ein neues Fenster anzeigen (siehe Beispielskript zur Widget-Methode popup.form).

shortcut('<keys>', <handler>)

Definiert einen neuen Shortcut-Handler namens handler (eine JavaScript-Funktion), den das System aufruft, sobald ein Benutzer die Tastenkombination keys (Tastencodes) drückt, solange dieses Widget den Tastaturfokus hat.

Ist kein Widget im direkten Fokus, schickt das System die Tastenkombination stattdessen an das form-Widget des obersten (zuletzt aktivierten) Fensters.
Definieren Sie fensterweite Shortcuts immer am form-Widget.

Skript zur Funktion „shortcut('<keys>', <handler>)“

Das folgende Skript zeigt die Shortcuts an. Die Funktion können Sie auch über die Kopfleiste und dort im agorum core template manager aufrufen. Gleichzeitig können Sie die Registrierung herauskopieren (STRG+CC wird gefiltert):

Screenshot zum Shortcuts-Beispiel

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



let widget = aguila.create({
  type: 'agorum.composite.form.basic',
  name: 'form',
  background: 'none',
  labelWidth: 150,
  properties: [
    'id'
  ],
  validation: [
    {
      required: false   // Global eingestellt, dass das Feld nicht leer sein darf
    }
  ],
  showError: 'always',
  elements: [
    {
      type: 'agorum.vbox',
      width: 500,
      items: [
        {
          type: 'agorum.composite.form.element.text',
          name: 'input',
          label: 'Input',
          flexible: true,      
        },
        {
          type: 'agorum.composite.form.element.text',
          name: 'output',
          label: 'Keycode',
          flexible: true,
          readOnly: true
        },
         {
          type:  'agorum.composite.form.element.select',
          name: 'selectKeycodes',
          label: 'selectkeycodes',
          flexible: true,
          readOnly: true
        }
        
      ]
    }
  ]
});

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

let buchstaben = 'A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 0 1 2  3 4 5 6 7 8 9 0 ! " § $ % & / ( ) = ? ` ´ \\ ß ü ö ä Ö Ä Ü * ~ @ € | < > ';


// Siehe auch: https://keycode.info/

let shortcuts = [
  'F1',
  'F2',
  'F3',
  'F4',
  'f5',
  'F6',
  'F7',
  'F8',
  'F9',
  'F10',
  'ArrowUp',
  'ArrowDown',
  'PageUp',
  'PageDown',
  'Home',
  'End',
  'Enter',
  'Escape',
  'Tab',
  'spacebar',
  ' ',
  'add',

  'Delete',
  'Insert',
  'Help',
  'ScrollLock',
  'Pause',
  'ArrowRight',
  'ArrowRight',
  '+',
  '-',
];

let keypre = [
  '',
  'Ctrl-Alt-Shift-Meta-',
  'Ctrl-Alt-Shift-',
  'Ctrl-Alt-',
  'Alt-Shift-Meta-',
  'Alt-Shift-',
  'Ctrl-Shift-Meta-',
  'Ctrl-Shift-',
  'Ctrl-Alt-Meta-',
  'Shift-Meta-',
  'Alt-Meta-',
  'Ctrl-Meta-',
  'Meta-',
  'Shift-',
  'Alt-',
  'Ctrl-',
];


shortcuts = shortcuts.concat( buchstaben.split(' ').filter(f => f));

// Jetzt alle Events registrieren:

function print(key) {
  output.value = 'widget.form.shortcut(\'' + key + '\', () => {...});';
  selectKeycodes.value = key;
}

setImmediate(() =>{
  let registercodes = [];
  shortcuts.forEach(key => {
    keypre.forEach(pre => {
      let reg = pre + key;
      registercodes.push(reg);
      widget.form.shortcut(reg, () => {
        print(reg);
      });
    });
  });
  // Jetzt diese noch sortieren
  let data = registercodes.sort(function (l,u) { return l.toLowerCase().localeCompare(u.toLowerCase());}).map(m => {return {value: m, text: m};});
  selectKeycodes.data = data;
  input.focus();
});

widget;