Werte durchreichen/ein Widget kapseln (agorum.composite.wrapper)

Dieses Widget dient dazu, ein- und ausgehende Werte eines anderen Widgets an ein inneres Widget weiterzugeben, oder umgekehrt, die Werte des inneren Widgets über das Wrapper-Widget nach außen weiterzugeben. Der Wrapper funktioniert im Prinzip wie ein Adapter.

Verwendung

Sie verwenden das Wrapper-Widget, um ein anderes aguila-Widget wie in diesem Beispiel für Form-Elemente nach innen zu legen und dadurch die Möglichkeit zu gewinnen, Werte von oder nach außen weiterzugeben.

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

/* widget: sample wrapper */

let widget = aguila.create({
  type: 'agorum.composite.wrapper',
  properties: ['value'],
  independent: true,
  wrap: {
    type: 'agorum.composite.form.basic',
    name: 'form',
    elements: [
      {
        type: 'agorum.composite.form.element.text',
        name: 'field1',
      },
      {
        type: 'agorum.composite.form.element.text',
        name: 'field2',
      },
    ],
  },
});

let form = widget.down('form');

widget
  .incoming('value', value => {
    // Verwenden des von außen kommenden Werts für die inneren Felder
    if (value) {
      let split = value.split(';');
      form.value = {
        field1: split[0],
        field2: split[1],
      };
    }
  })

  .outgoing('value', (/* value */) => {
    // Erstellen des Werts, der nach außen gegeben wird
    widget.value = form.get('field1.value') + ';' + form.get('field2.value');
  });

//widget.value = 'abc;def';

widget;

Parameter

Parameter	Beschreibung	Mögliche Werte
independent	Macht das Wrapper-Widget unabhängig vom gekapselten Widget, indem die Properties, Incoming und Outgoing Werte gezielt angegeben werden müssen und nicht vom inneren Widget übernommen werden. Dadurch kann verhindert werden, dass alle Eigenschaften, etwa einer Form, verfügbar sind.	Boolescher Wert, Standardwert false
properties	Legt die Property-Werte des inneren Widgets fest, die an den Wrapper und nach außen durchgereicht werden sollen.	Typischerweise wird das Property value nach außen durchgereicht. let widget = aguila.create({ type: 'agorum.composite.wrapper', properties: [ 'value' ], wrap: { type: 'agorum.composite.form.basic' } });
target	Definiert optional ein vom inneren, gekapselten Widget abweichendes Widget, mit dem Properties synchronisiert werden sollen.	target: 'output',
wrap	Definiert das innere Widget. Pflichtfeld.	Widget-Definition des gekapselten Widgets. Für eine Liste der Widgets siehe agorum core aguila.

Funktionen

incoming(property, handler)

Registriert für die angegebene Property einen Handler, der die Konvertierung von externen Werten (auf dem agorum.composite.wrapper-Widget) in interne Werte (auf dem gekapselten Widget) vornimmt. Hierdurch wird das bei der Form zuvor aktive 1:1-Durchreichen deaktiviert.

property: Angabe der Property, die durchgereicht werden soll.

handler: Funktion, welche die von außen kommenden Daten verarbeitet und an die inneren Elemente übergibt.

  .incoming('value', (value, form) => {
    form.value = value;
  })

outgoing(property, handler)

Registriert für die angegebene Property einen Handler, der die Konvertierung von internen Werten (auf dem eingepackten Widget) in externe Werte (auf dem agorum.composite.wrapper-Widget) vornimmt. Hierdurch wird das zuvor aktive 1:1-Durchreichen deaktiviert.

property: Hier ist die Property anzugeben, die durchgereicht werden soll.

handler: Funktion, welche die Werte des inneren Widgets sammelt und als Rückgabewert nach außen bereitstellt.

  .outgoing('value', (value, wrapper) => {
    wrapper.value = value;
  });

Beispiele

Anordnung des Inhalts einer Tabelle in einer Form

Dieses Beispiel zeigt auch die Verwendung allgemeiner Widget-Funktionen.

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

let widget = aguila.create({
  type: 'agorum.composite.form.basic',
  labelPosition: 'top',
  width: 400,
  elements: [
    {
      type: 'agorum.composite.form.element.text',
      name: 'input',
      label: 'Eingabefeld'
    },
    {
      type: 'agorum.composite.wrapper',
      name: 'grid',
      wrap: {
        type: 'agorum.basicGrid',
        border: true,
        height: 200,
        columns: [
          {
            name: 'col1',
            text: 'Spalte 1'
          },
          {
            name: 'col2',
            text: 'Spalte 2'
          }
        ]
      }
    }
  ]
});

let grid = widget.down('grid');

grid.incoming('value', (value, inner) => {
  // äußeren Wert auftrennen in Zeilen und Selektion
  inner.rows = value;
  inner.selection = value.reduce((sel, row, i) => row.selected ? sel.concat(i) : sel, []);
});

grid.outgoing('selection', (selection, outer) => {
  // geänderte Selektion zu äußerem Wert hinzufügen
  outer.value = outer.value.map((row, i) => Object.assign({}, row, { selected: selection.includes(i) }));
});

widget.on('valueChanged', value => console.log('value', value));

widget.value = {
  input: 'Test',
  grid: [
    {
      col1: 'Test 11',
      col2: 'Test 12'
    },
    {
      col1: 'Test 21',
      col2: 'Test 22',
      selected: true
    },
    {
      col1: 'Test 31',
      col2: 'Test 32',
      selected: true
    }
  ]
};

widget;

Oberfläche zum Tabellenbeispiel