Creare uno Stile di Visualizzazione Views per Drupal

03/10/2025, by Ivan

La creazione di un plugin di stile di visualizzazione Views può sembrare un compito difficile, ma è più semplice di quanto sembri. Ecco una guida passo-passo su come farlo, con il codice sorgente.

Puoi scaricare il codice pronto qui: TARDIS (anche se è ancora in dev). E se hai bisogno di un’introduzione ai moduli di Drupal 8, ecco una guida pratica alla creazione di moduli di base in Drupal 8.

.info.yml

Inizia creando una cartella chiamata tardis per il tuo modulo in /modules/custom. Inserisci al suo interno un file chiamato tardis.info.yml con il seguente codice:

name: TARDIS
type: module
description: 'Fornisce uno stile di visualizzazione Views che genera un elenco di link ad anni e mesi dei contenuti in ordine cronologico inverso.'
package: Views
core: '8.x'
dependencies:
  - drupal:views

Classy

Ora è il momento di creare la classe del plugin. Crea un file chiamato Tardis.php dentro src/Plugin/views/style e inserisci il seguente codice:

<?php

namespace Drupal\tardis\Plugin\views\style;

use Drupal\core\form\FormStateInterface;
use Drupal\views\Plugin\views\style\StylePluginBase;

/**
 * Plugin di stile per generare un elenco di anni e mesi
 * in ordine cronologico inverso collegati ai contenuti.
 *
 * @ingroup views_style_plugins
 *
 * @ViewsStyle(
 *   id = "tardis",
 *   title = @Translation("TARDIS"),
 *   help = @Translation("Genera un elenco di anni e mesi in ordine cronologico inverso collegati ai contenuti."),
 *   theme = "views_view_tardis",
 *   display_types = { "normal" }
 * )
 */
class Tardis extends StylePluginBase {

  /**
   * {@inheritdoc}
   */
  protected function defineOptions() {
    $options = parent::defineOptions();
    $options['path'] = array('default' => 'tardis');
    return $options;
  }

  /**
   * {@inheritdoc}
   */
  public function buildOptionsForm(&$form, FormStateInterface $form_state) {
    parent::buildOptionsForm($form, $form_state);

    // Prefisso del percorso per i link TARDIS.
    $form['path'] = array(
      '#type' => 'textfield',
      '#title' => t('Percorso link'),
      '#default_value' => (isset($this->options['path'])) ? $this->options['path'] : 'tardis',
      '#description' => t('Prefisso del percorso per ogni link TARDIS, es. example.com<strong>/tardis/</strong>2015/10.'),
    );

    // Formato data del mese.
    $form['month_date_format'] = array(
      '#type' => 'textfield',
      '#title' => t('Formato data mese'),
      '#default_value' => (isset($this->options['month_date_format'])) ? $this->options['month_date_format'] : 'm',
      '#description' => t('Parametro valido della <a href="@url" target="_blank">funzione Date di PHP</a> per visualizzare i mesi.', array('@url' => 'http://php.net/manual/en/function.date.php')),
    );

    // Se i link dei mesi devono essere annidati dentro gli anni.
    $options = array(
      1 => 'sì',
      0 => 'no',
    );
    $form['nesting'] = array(
      '#type' => 'radios',
      '#title' => t('Annidamento'),
      '#options' => $options,
      '#default_value' => (isset($this->options['nesting'])) ? $this->options['nesting'] : 1,
      '#description' => t('I mesi devono essere annidati dentro gli anni? <br />
        Esempio:
        <table style="width:100px">
          <thead>
              <th>Annidamento</th>
              <th>Nessun annidamento</th>
          </thead>
          <tbody>
            <td>
              <ul>
                <li>2016
                  <ul>
                    <li>03</li>
                    <li>02</li>
                    <li>01</li>
                  </ul>
                </li>
              </ul>
            </td>
            <td>
              <ul>
                <li>2016/03</li>
                <li>2016/02</li>
                <li>2016/01</li>
              </ul>
            </td>
          </tbody>
        </table>
      '),
    );

    // Classi CSS aggiuntive.
    $form['classes'] = array(
      '#type' => 'textfield',
      '#title' => t('Classi CSS'),
      '#default_value' => (isset($this->options['classes'])) ? $this->options['classes'] : 'view-tardis',
      '#description' => t('Classi CSS per ulteriori personalizzazioni di questa pagina TARDIS.'),
    );
  }

}

Vediamo alcuni di questi:

 * @ViewsStyle(
 *   id = "tardis",
 *   title = @Translation("TARDIS"),
 *   help = @Translation("Genera un elenco di anni e mesi in ordine cronologico inverso collegati ai contenuti."),
 *   theme = "views_view_tardis",
 *   display_types = { "normal" }
 * )

Questi commenti sono importanti. Pongono le basi per il nostro plugin. Se ti dimentichi di aggiungerli, il codice non funzionerà correttamente.

class Tardis extends StylePluginBase {

La definizione base del plugin. Anche questa è necessaria.

  protected function defineOptions() {
    $options = parent::defineOptions();
    $options['path'] = array('default' => 'tardis');
    return $options;
  }

La possibilità delle opzioni di base, oltre a un valore predefinito importante per il nostro plugin. È qui perché questo plugin deve essere configurabile.

  public function buildOptionsForm(&$form, FormStateInterface $form_state) {
    parent::buildOptionsForm($form, $form_state);

Proseguendo, creiamo il vero e proprio form delle opzioni con i campi, quasi come le normali form di configurazione. Per maggiori informazioni, fai riferimento al Reference API delle Form.

. file

Il file .module non è obbligatorio in Drupal 8, ma è lì che dovrebbero andare le informazioni sui temi:

<?php

/**
 * @file
 * Funzioni di help e tema del modulo TARDIS Views.
 */

/**
 * Implementa hook_theme().
 */
function tardis_theme($existing, $type, $theme, $path) {
  // Salva le funzioni preprocess TARDIS in un file .inc separato.
  \Drupal::moduleHandler()->loadInclude('tardis', 'inc', 'tardis.theme');

  return array(
    'tardis' => array(
      'file' => 'tardis.theme.inc',
    ),
  );
}

In sostanza, deleghiamo la funzione di preprocess a un file separato per mantenere tutto organizzato.

file .theme.inc

Crea un file chiamato tardis.theme.inc nella cartella del nostro modulo e includi il seguente codice:

<?php

/**
 * @file
 * Tema per le Views TARDIS.
 */
function template_preprocess_views_view_tardis(&$variables) {
  // Opzioni della View impostate dall’utente.
  $options = $variables['view']->style_plugin->options;

  // Costruisce un array bidimensionale con anni e mesi.
  $time_pool = array();

  foreach ($variables['view']->result as $id => $result) {
    $created = $result->node_field_data_created;
    $created_year = date('Y', $created);
    // Formato data del mese.
    $month_date_format = (isset($options['month_date_format'])) ? $options['month_date_format'] : 'm';
    $created_month_digits = date('m', $created);
    $created_month = date($month_date_format, $created);
    $time_pool[$created_year][$created_month_digits] = "$created_month";
  }

  $options['time_pool'] = $time_pool;

  // Aggiorna le opzioni per twig.
  $variables['options'] = $options;
}

Questo codice fondamentalmente prende tutte le date di creazione dei nodi e crea un array associativo che viene passato al template per il rendering finale, insieme alle altre opzioni definite nel form, che rimangono invariate.

Twig it out

Ora per l’output del modulo crea un file views-view-tardis.html.twig nella cartella chiamata templates. Ma perché questo nome? Ricordi i commenti all’inizio di questa lezione?

* theme = "views_view_tardis",

Questo significa che il template deve essere trovato nella posizione predefinita (/templates) con questo nome, solo con trattini al posto del trattino basso e .html.twig alla fine.

Per quanto riguarda il codice:

{#
/**
 * Implementazione di tema predefinito per Views per mostrare un archivio TARDIS.
 *
 * Variabili disponibili:
 * - options: opzioni dello stile del plugin View:
 *   - classes: classi CSS.
 *   - nesting: se i mesi devono essere annidati dentro gli anni.
 *   - path: percorso link. Es.: example.com/TARDIS/2016/03
 *   - time_pool: array bidimensionale contenente anni e mesi con contenuti.
 *
 * @see template_preprocess_views_view_tardis()
 *
 * @ingroup themeable
 */
#}
{%
  set classes = [
    'views-view-tardis',
    options.classes
  ]
%}
<div{{ attributes.addClass(classes) }}>
  <ul>
    {% for key, item in options.time_pool %}
      {% if options.nesting == 1 %}
        <li><a href="/{{ options.path }}/{{ key }}">{{ key }}</a><ul>
        {% for subkey, subitem in item %}
          <li><a href="/{{ options.path }}/{{ key }}/{{ subkey }}">{{ subitem }}</a></li>
        {% endfor %}
        </ul></li>
      {% else %}
        {% for subkey, subitem in item %}
          <li><a href="/{{ options.path }}/{{ key }}/{{ subkey }}">{{ subitem }}</a></li>
        {% endfor %}
      {% endif %}
    {% endfor %}
  </ul>
</div>

È consigliato prima estrarre tutte le variabili passate dall’array associativo $variable all’inizio del file. Esse sono ordinate in $variable['options'] – o, come in twig, variables.options.

Poi impostiamo alcune classi per la nostra view, come definito nel form delle opzioni:

{%
  set classes = [
    'views-view-tardis',
    options.classes
  ]
%}

E le richiamiamo:

<div{{ attributes.addClass(classes) }}>

Il resto del codice si occupa di estrarre i mesi e gli anni in cui ci sono contenuti e di visualizzare l’elenco HTML. Qui è importante notare il ciclo for:

{% for key, item in options.time_pool %}

Che genera ogni link correttamente. Per esempio:

<li><a href="/{{ options.path }}/{{ key }}/{{ subkey }}">{{ subitem }}</a></li>

Ancora qualcosa

Infine, ma non meno importante, dobbiamo creare una view predefinita ed esportarla, in modo da renderla subito disponibile per gli utenti. Dovresti notare che in /config/install/views.view.tardis.yml c’è già una view predefinita. Questa view predefinita è disponibile dal momento in cui gli utenti attivano il modulo.

L’ho creata ed esportata tramite la form di esportazione singola in admin/config/development/configuration/single/export, seguendo l’eccellente tutorial di Subhojit Paul.

È fatta!

Ora sarai in grado di scrivere il tuo plugin di visualizzazione Views per Drupal 8! Lascia il tuo commento qui sotto. Buona programmazione!

Extra Block Types (EBT) - Nuova esperienza con Layout Builder❗

❗Extra Paragraph Types (EPT) - Nuova esperienza con Paragraphs