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

let widget = aguila.create({
  type: 'agorum.composite.wrapper',
  properties: [ 'value' ],
  wrap: {
    type: 'agorum.composite.form.basic'
  }
});

target: 'output',

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