agorum.composite.form - Grundlegende Verwendung

Die Bestandteile

Eine Oberfläche besteht aus zwei Elementen:

der form
den darin enthaltenen Elementen (text, date, ...)

Die form bündelt die Elemente zu einer Einheit.

Beispiel

Dieses Beispiel erstellt eine basic-form mit zwei enthaltenen Text-Elementen.

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

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

  elements: [
    {
      type: 'agorum.composite.form.element.text',
      name: 'textField1',
      label: 'Text 1',
      validation: [
        {
          required: true
        }
      ]
    },
    {
      type: 'agorum.composite.form.element.text',
      name: 'textField2',
      label: 'Text 2'
    },
    {
      name: 'ag_tags'
    }      
  ],
  readOnly: false                      
});

form;

Das erste Text-Element wurde als required definiert (Pflichtfeld).
Das zweite Text-Element ist optional.
Das dritte Element ag_tags ist ein definiertes Metadatum. Hier ermittelt agorum.composite.form automatisch die korrekte Darstellungs- und Eingabeform basierend auf den Einstellungen des Metadatums.

Die umliegende form mit dem Namen basicForm ist somit eine Oberfläche, bestehend aus drei Feldern. Sie können über die basic-form alle Parameter steuern.

Hinweis: Die folgenden Abschnitte beschreiben die grundlegende Funktionsweise. Zur Beschreibung der einzelnen Parameter von agorum.composite.form.basic siehe agorum.composite.form - basic.

In den Ansichtsmodus umschalten

form.down('basicForm').readOnly = true;

Die Validierung abfragen

Das folgende Beispiel ermittelt, ob alle Eingaben valide sind:

let valid = form.down('basicForm').valid;

Wenn ja, erhalten Sie true zurück, ansonsten false.

Funktionen

set

Setzt Parameter und Werte direkt.

Verwenden Sie set bevorzugt vor form.down (siehe Werte setzen), um Werte direkt zu setzen.

Verwendung

form.set(path, propertyValue);

// Beispiel
form.set('textField1.value', 'Ein Wert');

Parameter

Parameter	Beschreibung	Beispiel
path	Definiert den Pfad zum Element inklusive Parameter (etwa value, hidden, readOnly), von wo aus das System die Funktion aufruft. Befindet sich das Element textField1 etwa direkt unter form, lautet der Pfad dazu textField1 (relativ zu form gesehen).	Werte von tiefer verschachtelten Elementen setzen (Listen) // setzt den Wert für column1 in Zeile 0 in Liste listField1: form.set('listField1[0].column1.value', 'Wert für Liste, Zeile 0, Spalte column1'); Parameter setzen (hidden, readOnly) // Deaktiviert das Feld in column1 in Zeile 0 in Liste listField1: form.set('listField1[0].column1.disabled', true); path kann entweder in Punkt und Array [] Notation erfolgen, wie in den obigen Beispielen, oder Sie können path als Array definieren. Das ist notwendig, wenn der Namen eines Parameters einen Punkt oder [] besitzt. Obige Beispiele als Array geschrieben // setzt den Wert für column1 in Zeile 0 in Liste listField1: form.set([ 'listField1', 0, 'column1', 'value' ], 'Wert für Liste, Zeile 0, Spalte column1'); // Deaktiviert das Feld in column1 in Zeile 0 in Liste listField1: form.set([ 'listField1', 0, 'column1', 'disabled' ], true);

Parameter

Beschreibung

Beispiel

path

Definiert den Pfad zum Element inklusive Parameter (etwa value, hidden, readOnly), von wo aus das System die Funktion aufruft.

Befindet sich das Element textField1 etwa direkt unter form, lautet der Pfad dazu textField1 (relativ zu form gesehen).

Werte von tiefer verschachtelten Elementen setzen (Listen)

// setzt den Wert für column1 in Zeile 0 in Liste listField1:
form.set('listField1[0].column1.value', 'Wert für Liste, Zeile 0, Spalte column1');

Parameter setzen (hidden, readOnly)

// Deaktiviert das Feld in column1 in Zeile 0 in Liste listField1:
form.set('listField1[0].column1.disabled', true);

path kann entweder in Punkt und Array [] Notation erfolgen, wie in den obigen Beispielen, oder Sie können path als Array definieren. Das ist notwendig, wenn der Namen eines Parameters einen Punkt oder [] besitzt.

Obige Beispiele als Array geschrieben

// setzt den Wert für column1 in Zeile 0 in Liste listField1:
form.set([ 'listField1', 0, 'column1', 'value' ], 'Wert für Liste, Zeile 0, Spalte column1');

// Deaktiviert das Feld in column1 in Zeile 0 in Liste listField1:
form.set([ 'listField1', 0, 'column1', 'disabled' ], true);

get

Liest Parameter und Werte direkt.

Verwenden Sie get bevorzugt vor form.down (siehe Werte lesen), um Werte direkt zu lesen.

Verwendung

let value = form.get(path);

// Beispiel: holt den Wert von textField1
let value = form.get('textField1.value');

Parameter

Parameter	Beschreibung	Beispiel
path	Definiert den Pfad zum Element inklusive Parameter (etwa value, hidden, readOnly), von wo aus das System die Funktion aufruft. Befindet sich das Element textField1 etwa direkt unter form, lautet der Pfad dazu textField1 (relativ zu form gesehen).	Werte von tiefer verschachtelten Elementen lesen (Listen) // holt den Wert für column1 in Zeile 0 in Liste listField1: let value = form.get('listField1[0].column1.value'); Parameter lesen (hidden, readOnly) // liest den Status von disabled vom Feld in column1 in Zeile 0 in Liste listField1: let disabled = form.get('listField1[0].column1.disabled'); path kann entweder in Punkt und Array [] Notation erfolgen, wie in den obigen Beispielen, oder Sie können path als Array definieren. Das ist notwendig, wenn der Namen eines Parameters einen Punkt oder [] besitzt. Obige Beispiele als Array geschrieben // holt den Wert für column1 in Zeile 0 in Liste listField1: let value = form.get([ 'listField1', 0, 'column1', 'value' ]); // liest den Status von disabled vom Feld in column1 in Zeile 0 in Liste listField1: let disabled = form.get([ 'listField1', 0, 'column1', 'disabled' ]);

Parameter

Beschreibung

Beispiel

path

Werte von tiefer verschachtelten Elementen lesen (Listen)

// holt den Wert für column1 in Zeile 0 in Liste listField1:
let value = form.get('listField1[0].column1.value');

Parameter lesen (hidden, readOnly)

// liest den Status von disabled vom Feld in column1 in Zeile 0 in Liste listField1:
let disabled = form.get('listField1[0].column1.disabled');

// holt den Wert für column1 in Zeile 0 in Liste listField1:
let value = form.get([ 'listField1', 0, 'column1', 'value' ]);

// liest den Status von disabled vom Feld in column1 in Zeile 0 in Liste listField1:
let disabled = form.get([ 'listField1', 0, 'column1', 'disabled' ]);

Werte setzen

Hinweis: Verwenden Sie die Funktion set, um Werte zu setzen, da Sie bei form.down einige Besonderheiten beachten müssen.

Verwendung

form.down('basicForm').value = {
  textField1: 'Wert 1',
  textField2: 'Wert 2'
};

Werte direkt auf die jeweiligen Elemente setzen

...
  items: [
    {
      type: 'agorum.composite.form.element.text',
      name: 'textField1',
      label: 'Text 1',
      value: 'Wert 1'
    },
    {
      type: 'agorum.composite.form.element.text',
      name: 'textField2',
      label: 'Text 2',
      value: 'Wert 2'
    }
  ]
...

Werte lesen

Hinweis: Verwenden Sie die Funktion get, um Werte zu lesen, da Sie bei form.down einige Besonderheiten beachten müssen.

Verwendung

let values = form.down('basicForm').value;

Ergebnis (Beispiel)

{
  textField1: 'Wert 1',
  textField2: 'Wert 2'
}

aguila-Widgets verwenden

Sie können die einzelnen Elemente mit aguila-Widgets mischen, sodass Sie die einzelnen Felder nach Wunsch anordnen können.

Textfelder durch agorum.hbox nebeneinander darstellen

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

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

  elements: [
    {
      type: 'agorum.hbox',
      items: [
        {
          type: 'agorum.composite.form.element.text',
          name: 'textField1',
          label: 'Text 1',
          flexible: true
        },
        {
          type: 'agorum.composite.form.element.text',
          name: 'textField2',
          label: 'Text 2',
          flexible: true
        }
      ]
    },
    {
      name: 'ag_tags'
    }    
  ],
  readOnly: false                      
});

form;

Elemente ohne form verwenden

Sie können Elemente ohne form verwenden, wenn Sie keine form benötigen, um mehrere Elemente zu einer Einheit zu bündeln, sondern nur die Funktionen des Elements verwenden möchten.

Beispiel

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

let widget = aguila.create({
  width: 600,
  height: 300,
  type: 'agorum.vbox',

  items: [
    {
      type: 'agorum.composite.form.element.text',
      name: 'textField1',
      label: 'Text 1'
    },
    {
      type: 'agorum.composite.form.element.text',
      name: 'textField2',
      label: 'Text 2'
    }
  ]
});

widget;