Դաշտի վիջեթի ստեղծում

Դաշտի վիջեթները օգտագործվում են դաշտի տեսողական ներկայացման համար ֆորմերի ներսում։ Դաշտի վիջեթները սահմանվում են որպես plugin-ներ, ուստի խորհուրդ է տրվում ծանոթանալ plugin API-ին նախքան նոր դաշտի տիպի գրումը։

Drupal 8-ում դաշտի վիջեթ ստեղծելու համար անհրաժեշտ է դաս, որի վրա առկա է FieldWidget անոտացիան։

Դասի տեղադրումը պետք է լինի /[MODULE_NAME]/src/Plugin/Field/FieldWidget, օրինակ՝ /foo/src/Plugin/Field/FieldWidget/BarWidget.php։

Դասի անունների տարածքը պետք է լինի [MODULE_NAME]\Plugin\Field\FieldWidget, օրինակ՝ \Drupal\foo\Plugin\Field\FieldWidget։

Անոտացիան դասի վրա պետք է պարունակի եզակի ID, լեյբլ և դաշտի տիպերի ID-ների զանգված, որոնց հետ կարող է աշխատել վիջեթը։

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

Դասը պետք է իրագործի WidgetInterface ինտերֆեյսը, և կարող է ժառանգել WidgetBase դասը ընդհանուր իրագործման համար։ Հիմնական անհրաժեշտ մեթոդը ::formElement() է, որը պետք է վերադարձնի վիջեթի իրական ֆորմի էլեմենտները։

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 = [];
    // Հավաքել էլեմենտի արտածման զանգվածը։
    return $element;
  }

}

Վիջեթի կարգավորումները

Եթե վիջեթը պահանջում է լրացուցիչ կարգավորումներ, պետք է կատարել երեք քայլ՝

• Ավերագրել PluginSettingsBase::defaultSettings() լռելյայն արժեքներ սահմանելու համար
• Ստեղծել կոնֆիգուրացիոն սքիմա ձեր կարգավորումների համար
• Ստեղծել ֆորմ՝ օգտագործողներին թույլ տալու կարգավորումներ փոփոխելու

Քայլ 1․ Ավերագրել PluginSettingsBase::defaultSettings()՝ լռելյայն արժեքներ սահմանելու համար

/**
 * {@inheritdoc}
 */
 public static function defaultSettings() {
  return [
    // Ստեղծել 'size' կարգավորումը և նշանակել լռելյայն արժեք 60
    'size' => 60,
  ] + parent::defaultSettings();
}

Քայլ 2․ Ստեղծել կոնֆիգուրացիոն սքիմա ձեր կարգավորումների համար

Սքիման տեղադրվում է հետևյալ ֆայլում՝

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

Այստեղ նկարագրեք այն կարգավորումների տիպերը, որոնք ստեղծել եք defaultSettings()-ում։

Քայլ 1-ում ստեղծվեց «size» անունով ամբողջ թվի կարգավորում, որի սքիման կտեսնենք ստորև․

field.widget.settings.[WIDGET ID]:
  type: mapping
  label: 'WIDGET NAME վիջեթի կարգավորումներ'
  mapping:
    size:
      type: integer
      label: 'Չափս'

Քայլ 3․ Ստեղծել ֆորմ՝ օգտագործողներին թույլ տալու կարգավորումներ փոփոխելու

Կարգավորումների արժեքների փոփոխման ֆորմը ստեղծվում է՝ ավերագրելով WidgetBase::settingsForm() մեթոդը։

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

  return $element;
}

Կարող եք նաև ցուցադրել ընտրված կարգավորումները վիջեթի ամփոփագրում՝

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

  $summary[] = $this->t('Textfield size: @size', ['@size' => $this->getSetting('size')]);

  return $summary;
}

Կարող եք օգտագործել getSetting() մեթոդը կարգավորումների արժեքները ստանալու համար՝ վիջեթի ցանկացած մասում։

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;
  }

}

Վիջեթի օրինակ

TextWidget վիջեթը field_example մոդուլից՝ Examples մոդուլից՝

namespace Drupal\field_example\Plugin\Field\FieldWidget;

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

/**
 * 'field_example_text' վիջեթի plugin իրականացում։
 *
 * @FieldWidget(
 *   id = "field_example_text",
 *   module = "field_example",
 *   label = @Translation("RGB value as #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];
  }

  /**
   * Տեքստային դաշտի վալիդացում։
   */
  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("Գույնը պետք է լինի 6-թվերանոց հեքսադեցիմալ արժեք, որը համապատասխանում է CSS-ին։"));
    }
  }

}