agorum.composite.form.element.text

Dieses Element stellt ein Text-Eingabefeld dar. Dabei sind diverse Eigenschaften möglich:

• Einzeiliger Text
• Mehrzeiliger Text
• Passwort
• monospace (gleichbleibender Buchstabenabstand)

agorum.composite.form.element.text erbt alle grundlegenden Eigenschaften von element.

Beispiel einer Oberfläche

Skript zur Oberfläche

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

let form = aguila.create({
  width: 500,
  height: 300,
  type: 'agorum.composite.form.basic',

  elements: [
    {
      type: 'agorum.composite.form.element.text',
      name: 'textField1',
      label: 'Textfeld 1',
      value: 'Wert 1',
    },
    {
      type: 'agorum.composite.form.element.text',
      name: 'textField2',
      label: 'Textfeld 2',
      value: 'Wert 2.1\nWert 2.2',
      textArea: true,
    },
    {
      type: 'agorum.composite.form.element.text',
      name: 'textField3',
      label: 'Textfeld 3',
      value: 'Wert 3.1\nWert 3.2',
      textArea: true,
      monospace: true,
    },
    {
      type: 'agorum.composite.form.element.text',
      name: 'textField4',
      label: 'Passwort',
      value: 'mein geheimes Passwort',
      password: true,
      revealButton: true,
    }
  ]
});

form;

Parameter

---

Alle Parameter in element gelten. Zusätzlich gelten die folgenden Parameter.

textArea

Wert	Beschreibung
true	Zeigt ein mehrzeiliges Textfeld an.
false (Standard)	Zeigt ein normales einzeiliges Textfeld an.

Beispiel

form.down('textField1').textArea = true;

Sie können diesen Parameter nicht ändern.

monospace

Wert	Beschreibung
true	Verwendet eine Schrift, die denselben Buchstabenabstand besitzt.
false (Standard)	Verwendet normale Schrift.

• Dieser Parameter funktioniert nur zusammen mit textArea=true.
• Sie können diesen Parameter nachträglich ändern.

Beispiel

form.down('textField1').monospace = true;

password

Die Property password wird verwendet, um Benutzereingaben im Textfeld als verschleiertes Passwort darzustellen. Dazu werden die einzelnen Zeichen durch das Zeichen * ersetzt. Zusätzlich können Sie die Property revealButton verwenden, um rechts neben dem Passwortfeld ein Auge-Symbol anzuzeigen, über das der Benutzer die Klartextanzeige anschalten kann.

Die Verschleierung und das Umschalten in den Klartext sind rein visuell und beeinflussen nicht, wie das Passwort gespeichert wird. 

Wert	Beschreibung
true	Das Passwort wird verschleiert dargestellt. Die einzelnen Zeichen werden sowohl im Bearbeitungs- als auch im Ansichtsmodus durch das Zeichen * ersetzt.
false (Standard)	Zeigt das Passwort unverschleiert an, also als normalen (Klar-)Text.

Beispiel

form.down('textField4').password = true;

Sie können diese Property nachträglich ändern.

revealButton

Die Property revealButton dient dazu, einen Umschalt-Button (Auge-Symbol) rechts neben einem mit der Property password erstellten Passwortfeld anzuzeigen, damit der Nutzer zwischen „verschleiert anzeigen“ und „im Klartext anzeigen“ umschalten kann.

Die Verschleierung und das Umschalten in den Klartext sind rein visuell und beeinflussen nicht, wie das Passwort gespeichert wird. 

Wert	Beschreibung
true	Ein Umschalt-Button (Auge-Symbol) wird rechts neben dem Passwortfeld angezeigt.
false (Standard)	Es wird kein Umschalt-Button (Auge-Symbol) neben dem Feld angezeigt.

Beispiel

form.down('textField4').revealButton = false;

Events

---

Alle Events in element gelten.

action

Löst aus, wenn ein Benutzer die Eingabe über die Tasten Strg+Enter oder Enter (nicht in mehrzeiligen Textfeldern) bestätigt.

Das System übergibt als Parameter ein Objekt, das den Pfad zum auslösenden Element und die Eigenschaft submit:true enthält.

textAreaChanged

Löst aus, wenn sich der Parameter textArea ändert.

Das System übergibt als Parameter den neuen Wert von textArea.

monospaceChanged

Löst aus, wenn sich der Parameter monospace ändert.

Das System übergibt als Parameter den neuen Wert von monospace.

passwordChanged

Löst aus, wenn sich der Parameter password ändert.

Das System übergibt als Parameter den neuen Wert von password.

Beispiele

Verschleiertes Passwortfeld mit Option zur Klartextanzeige

Das folgende Beispiel zeigt, wie Sie ein Login-Formular mit Benutzername und Passwort erstellen können.
Durch das Setzen der Option password: true wird das Passwortfeld als Eingabefeld mit verdeckter Zeichenanzeige dargestellt. Mit revealButton: true erscheint zusätzlich ein Symbol (Auge), mit dem Benutzer das Passwort vorübergehend im Klartext anzeigen lassen können.
In Anwendungen, in denen Benutzer ihre Eingabe kontrollieren können sollen (Login/Registrierung usw.), bietet es sich an, den  revealButton immer zur Verfügung zu stellen. Auf diese Weise können die Benutzer falsche Eingaben durch Tippfehler vermeiden.

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

let loginForm = aguila.create({
  type: 'agorum.composite.form.basic',
  width: 400,
  elements: [
    {
      type: 'agorum.composite.form.element.text',
      name: 'username',
      label: 'Benutzername',
      value: '',
    },
    {
      type: 'agorum.composite.form.element.text',
      name: 'password',
      label: 'Passwort',
      password: true, // Masked password field
      revealButton: true, // Show/hide toggle button (eye icon)
    },
  ],
});

loginForm.on('valueChanged', values => {
  console.log('Aktuelle Formularwerte:', values);
});

loginForm.value = { username: 'MeinUser', password: 'SuperGeheim' };

loginForm;