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.

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

// 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);

// 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

// 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');

// 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

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

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;