Création d’un style d’affichage Views pour Drupal
Créer un plugin de style d’affichage Views peut sembler une tâche complexe, mais c’est plus simple qu’il n’y paraît. Voici un guide étape par étape pour le faire, avec le code source.
Vous pouvez télécharger le code prêt à l’emploi ici : TARDIS (bien qu’il soit encore en développement). Et si vous avez besoin d’une introduction aux modules Drupal 8, voici un guide pratique pour créer des modules Drupal 8 de base.
.info.yml
Commencez par créer un dossier nommé tardis pour votre module dans /modules/custom. Placez-y un fichier nommé tardis.info.yml avec le code suivant :
name: TARDIS type: module description: 'Fournit un style d’affichage Views qui affiche une liste de liens d’années et de mois vers du contenu dans l’ordre chronologique inverse.' package: Views core: '8.x' dependencies: - drupal:views
Classy
Il est maintenant temps de créer la classe du plugin. Créez un fichier nommé Tardis.php dans src/Plugin/views/style et insérez le code suivant :
<?php
namespace Drupal\tardis\Plugin\views\style;
use Drupal\Core\Form\FormStateInterface;
use Drupal\views\Plugin\views\style\StylePluginBase;
/**
* Plugin de style pour afficher une liste d’années et de mois
* dans l’ordre chronologique inverse, liés au contenu.
*
* @ingroup views_style_plugins
*
* @ViewsStyle(
* id = "tardis",
* title = @Translation("TARDIS"),
* help = @Translation("Affiche une liste d’années et de mois dans l’ordre chronologique inverse, liés au contenu."),
* theme = "views_view_tardis",
* display_types = { "normal" }
* )
*/
class Tardis extends StylePluginBase {
/**
* {@inheritdoc}
*/
protected function defineOptions() {
$options = parent::defineOptions();
$options['path'] = ['default' => 'tardis'];
return $options;
}
/**
* {@inheritdoc}
*/
public function buildOptionsForm(&$form, FormStateInterface $form_state) {
parent::buildOptionsForm($form, $form_state);
// Préfixe du chemin pour les liens TARDIS.
$form['path'] = [
'#type' => 'textfield',
'#title' => t('Chemin du lien'),
'#default_value' => isset($this->options['path']) ? $this->options['path'] : 'tardis',
'#description' => t('Préfixe du chemin pour chaque lien TARDIS, par ex. example.com/tardis/2015/10.'),
];
// Format de date du mois.
$form['month_date_format'] = [
'#type' => 'textfield',
'#title' => t('Format de la date du mois'),
'#default_value' => isset($this->options['month_date_format']) ? $this->options['month_date_format'] : 'm',
'#description' => t('Paramètre valide de la fonction PHP date pour afficher les mois.', ['@url' => 'http://php.net/manual/fr/function.date.php']),
];
// Les liens des mois doivent-ils être imbriqués dans les liens des années.
$options = [
1 => 'oui',
0 => 'non',
];
$form['nesting'] = [
'#type' => 'radios',
'#title' => t('Imbrication'),
'#options' => $options,
'#default_value' => isset($this->options['nesting']) ? $this->options['nesting'] : 1,
'#description' => t('Les mois doivent-ils être imbriqués dans les années ? <br />
Exemple :
<table style="width:100px">
<thead>
<th>Imbrication</th>
<th>Pas d\'imbrication</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>
'),
];
// Classes CSS supplémentaires.
$form['classes'] = [
'#type' => 'textfield',
'#title' => t('Classes CSS'),
'#default_value' => isset($this->options['classes']) ? $this->options['classes'] : 'view-tardis',
'#description' => t('Classes CSS pour une personnalisation supplémentaire de cette page TARDIS.'),
];
}
}
Examinons quelques-unes de ces parties :
* @ViewsStyle(
* id = "tardis",
* title = @Translation("TARDIS"),
* help = @Translation("Affiche une liste d’années et de mois dans l’ordre chronologique inverse, liés au contenu."),
* theme = "views_view_tardis",
* display_types = { "normal" }
* )
Ces commentaires sont importants. Ils posent les bases de notre plugin. Si vous oubliez de les ajouter, le code ne fonctionnera pas correctement.
class Tardis extends StylePluginBase {
Définition de base du plugin. Encore une fois, c’est nécessaire.
protected function defineOptions() {
$options = parent::defineOptions();
$options['path'] = ['default' => 'tardis'];
return $options;
}
La possibilité d’avoir des options de base ainsi qu’une valeur par défaut importante pour notre plugin. C’est là parce que ce plugin doit être configurable.
public function buildOptionsForm(&$form, FormStateInterface $form_state) {
parent::buildOptionsForm($form, $form_state);
Ensuite, nous créons le formulaire d’options réel avec des champs, presque comme des formulaires de configuration classiques. Pour plus d’informations, veuillez consulter le Guide de l’API des formulaires.
.module
Le fichier .module n’est pas obligatoire dans Drupal 8, mais c’est là que doit se trouver l’information sur le thème :
<?php
/**
* @file
* Fonctions d’aide et de thème du module TARDIS Views.
*/
/**
* Implémente hook_theme().
*/
function tardis_theme($existing, $type, $theme, $path) {
// Charger les fonctions de prétraitement du thème TARDIS dans un fichier séparé.
\Drupal::moduleHandler()->loadInclude('tardis', 'inc', 'tardis.theme');
return [
'tardis' => [
'file' => 'tardis.theme.inc',
],
];
}
Essentiellement, nous déléguons la fonction de prétraitement à un fichier séparé pour que tout soit organisé.
Fichier .theme.inc
Créez un fichier nommé tardis.theme.inc dans le répertoire de notre module et incluez le code suivant :
<?php
/**
* @file
* Thème pour les vues TARDIS.
*/
function template_preprocess_views_view_tardis(&$variables) {
// Options de la vue définies par l’utilisateur.
$options = $variables['view']->style_plugin->options;
// Construire un tableau à deux dimensions avec les années et les mois.
$time_pool = [];
foreach ($variables['view']->result as $id => $result) {
$created = $result->node_field_data_created;
$created_year = date('Y', $created);
// Format de date du mois.
$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;
// Mettre à jour les options pour Twig.
$variables['options'] = $options;
}
Ce code récupère essentiellement toutes les dates de création des nœuds et crée un tableau associatif qui est transmis au template pour le rendu final, avec d’autres options définies dans le formulaire qui restent inchangées.
Template Twig
Pour afficher le module, créez maintenant un fichier views-view-tardis.html.twig dans un dossier nommé templates. Mais pourquoi ce nom ? Souvenez-vous des commentaires au début de ce tutoriel ?
* theme = "views_view_tardis",
Cela signifie que le template doit être trouvé à l’emplacement par défaut (/templates) avec ce nom, mais avec des tirets au lieu de soulignements et avec .html.twig à la fin.
Voici le code :
{#
/**
* Implémentation par défaut du thème pour Views afin d’afficher une archive TARDIS.
*
* Variables disponibles :
* - options : Options du plugin de style de la vue :
* - classes : Classes CSS.
* - nesting : Si les mois doivent être imbriqués dans les années.
* - path : Chemin des liens. Ex. : example.com/TARDIS/2016/03
* - time_pool : Tableau à deux dimensions contenant les années et mois avec du contenu.
*
* @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>
Il est conseillé d’extraire d’abord toutes les variables transmises dans le tableau associatif $variables au début du fichier. Elles sont proprement stockées dans $variables['options'] – ou, comme ce serait le cas avec Twig, variables.options.
Puis nous définissons quelques classes pour notre affichage, comme défini dans le formulaire d’options :
{%
set classes = [
'views-view-tardis',
options.classes
]
%}
Et rappelez-vous d’elles :
<div{{ attributes.addClass(classes) }}>
Le reste du code extrait les mois et les années où il y a du contenu, puis affiche la liste HTML. Il est important de noter la boucle for :
{% for key, item in options.time_pool %}
Qui construit correctement chaque lien. Par exemple :
<li><a href="/{{ options.path }}/{{ key }}/{{ subkey }}">{{ subitem }}</a></li>
Encore un peu
Enfin, il faut créer une vue par défaut et l’exporter pour faciliter son usage par les utilisateurs. Vous remarquerez que dans /config/install/views.view.tardis.yml il y a déjà une vue par défaut. Cette vue est disponible dès que les utilisateurs activent le module.
Je l’ai créée et exportée via le formulaire d’exportation unique à admin/config/development/configuration/single/export, suivant ce excellent tutoriel de Subhojit Paul.
Voilà !
Vous pouvez maintenant écrire votre propre plugin de style d’affichage Views pour Drupal 8 ! Laissez un commentaire ci-dessous. Bon codage !