Kreiranje vidžeta za polje

Vidžeti polja se koriste za prikaz polja unutar formi. Vidžeti polja definišu se kao plugini, zato se preporučuje da proučite Plugin API pre nego što počnete sa pisanjem novog tipa polja.

Da biste napravili vidžet polja u Drupalu 8, potreban vam je klasa sa anotacijom FieldWidget.

Lokacija klase vidžeta polja treba da bude u /[MODULE_NAME]/src/Plugin/Field/FieldWidget. Na primer, /foo/src/Plugin/Field/FieldWidget/BarWidget.php.

Namespace ove klase treba da bude [MODULE_NAME]\Plugin\Field\FieldWidget. Na primer, \Drupal\foo\Plugin\Field\FieldWidget.

Anotacija iznad klase treba da sadrži jedinstveni ID, labelu i niz ID-eva tipova polja koje ovaj vidžet može da obrađuje.

/**
 * Widget bar.
 *
 * @FieldWidget(
 *   id = "bar",
 *   label = @Translation("Bar widget"),
 *   field_types = {
 *     "baz",
 *     "string"
 *   }
 * )
 */

Klasa treba da implementira interfejs WidgetInterface i može da nasledi klasu WidgetBase za osnovnu implementaciju. Jedina obavezna metoda za implementaciju je ::formElement(), koja treba da vrati stvarne elemente forme koji predstavljaju vaš vidžet.

use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Field\WidgetBase;
use Drupal\Core\Form\FormStateInterface;

//...
class BarWidget extends WidgetBase {

  /**
   * {@inheritdoc}
   */
  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
    $element = [];
    // Kreirajte render niz za element.
    return $element;
  }

}

Podešavanja vidžeta

Ako vaš vidžet zahteva dodatna podešavanja, potrebno je izvršiti tri koraka:

• Prekoračiti PluginSettingsBase::defaultSettings() da postavite podrazumevane vrednosti
• Kreirati konfiguracionu šemu za vaša podešavanja
• Kreirati formu da korisnici mogu menjati podešavanja

Korak 1: Prekoračite PluginSettingsBase::defaultSettings() da postavite podrazumevane vrednosti

/**
 * {@inheritdoc}
 */
public static function defaultSettings() {
  return [
    // Kreirajte podešavanje 'size' sa podrazumevanom vrednošću 60
    'size' => 60,
  ] + parent::defaultSettings();
}

Korak 2: Kreirajte konfiguracionu šemu za vaša podešavanja

Konfiguraciona šema ide u fajl:

/[MODULE_NAME]/config/schema/[MODULE_NAME].schema.yml

U ovom fajlu opisaćete tipove podataka koje ste definisali u defaultSettings():

Korak 1 je kreirao podešavanje 'size' koje sadrži integer vrednost. Šema izgleda ovako:

field.widget.settings.[ID VIDŽETA]:
  type: mapping
  label: 'IME VIDŽETA podešavanja'
  mapping:
    size:
      type: integer
      label: 'Veličina'

Korak 3: Kreirajte formu da korisnici menjaju podešavanja

Forma za menjanje podešavanja se pravi prekoračenjem WidgetBase::settingsForm().

/**
 * {@inheritdoc}
 */
public function settingsForm(array $form, FormStateInterface $form_state) {
  $element['size'] = [
    '#type' => 'number',
    '#title' => $this->t('Veličina tekst polja'),
    '#default_value' => $this->getSetting('size'),
    '#required' => TRUE,
    '#min' => 1,
  ];

  return $element;
}

Takođe možete prikazati odabrana podešavanja u rezimeu vidžeta ovako:

/**
 * {@inheritdoc}
 */
public function settingsSummary() {
  $summary = [];

  $summary[] = $this->t('Veličina tekst polja: @size', ['@size' => $this->getSetting('size')]);

  return $summary;
}

Možete koristiti metodu getSetting() da dohvatite podešavanje u vidžetu:

class BarWidget extends WidgetBase implements WidgetInterface {

class BarWidget extends WidgetBase implements WidgetInterface {

  /**
   * {@inheritdoc}
   */
  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
    $element['value'] = $element + [
      '#type' => 'textfield',
      '#default_value' => isset($items[$delta]->value) ? $items[$delta]->value : NULL,
      '#size' => $this->getSetting('size'),
    ];

    return $element;
  }

}

Primer vidžeta

TextWidget iz modula Examples:

namespace Drupal\field_example\Plugin\Field\FieldWidget;

use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Field\WidgetBase;
use Drupal\Core\Form\FormStateInterface;

/**
 * Plugin implementacija 'field_example_text' vidžeta.
 *
 * @FieldWidget(
 *   id = "field_example_text",
 *   module = "field_example",
 *   label = @Translation("RGB vrednost kao #ffffff"),
 *   field_types = {
 *     "field_example_rgb"
 *   }
 * )
 */
class TextWidget extends WidgetBase {

  /**
   * {@inheritdoc}
   */
  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
    $value = isset($items[$delta]->value) ? $items[$delta]->value : '';
    $element += [
      '#type' => 'textfield',
      '#default_value' => $value,
      '#size' => 7,
      '#maxlength' => 7,
      '#element_validate' => [
        [static::class, 'validate'],
      ],
    ];
    return ['value' => $element];
  }

  /**
   * Validacija polja za boju.
   */
  public static function validate($element, FormStateInterface $form_state) {
    $value = $element['#value'];
    if (strlen($value) == 0) {
      $form_state->setValueForElement($element, '');
      return;
    }
    if (!preg_match('/^#([a-f0-9]{6})$/iD', strtolower($value))) {
      $form_state->setError($element, t("Boja mora biti 6-znamenkasta heksadecimalna vrednost pogodna za CSS."));
    }
  }

}