Planète

Par flocondetoile
Adhérent

Quelques modules Drupal 8 à (re)découvrir

Bien que Drupal 8 soit encore très jeune, 4 mois après la publication de sa première version stable, les modules Drupal 8 deviennent de plus en plus nombreux et le rythme semble encore s'accélérer.  Sans doute grâce à une architecture plus robuste, un investissement conséquent de la communauté Drupal, et une adoption de Drupal 8 beaucoup plus rapide du fait d'un coeur plus complet.

Les modules à installer dès une installation fraiche de Drupal 8 deviennent de ce fait moins nombreux. Découvrons quelque uns de ces modules qui peuvent soit enrichir rapidement votre couverture fonctionnelle, soit vous faciliter l'administration de votre site Drupal 8, ou encore qui sont tout simplement indispensables.

Par admin

Compte rendu de l'assemblée générale du 23 mars 2016

Mercredi 23 mars s'est déroulé, à la maison des associations Paris III, l'assemblée générale annuelle de l'association, l'occasion de revenir sur l'année passée, d'élire un nouveau bureau et de présenter les projets de l'année à venir.

L'heure du bilan

Drupal Dev Days 2015 à Montpellier

Les drupal devs days 2015

Du 13 au 19 avril dernier, l'équipe organisatrice accueillait environ 350 personnes, sur une semaine, à Montpellier. Pour sprinter, présenter une session ou retrouver ses amis, ils étaient là, venus du monde entier. Un projet qui s'est monté pendant plus de 9 mois. C'est aussi une belle réussite culinaire :)

Une année sous le signe des communautés

Instants lors d'événements 2015

Cette année l'association a été particulièrement présente lors d'évènements divers : JDLL à Lyon, PHP Tour Luxembourg, RMLL, Drupagora, POSS (Solutions Linux), Forum PHP, JM2L, SymfonyCon Paris, ...

Ces interventions vont continuer, car l'association sera présente lors d'Agora CMS le 1er avril prochain et des JDLL le 2 et avril.

A noter aussi cette année la participation à un podcast wordpress autour des communautés.

Novembre 2015, Drupal 8 était publié et nous faisions la fête ! 5 villes ont organisé pour l'occasion une rencontre. #celebratedrupal8

Améliorations

Cette année aussi, le site s'est étoffé. Florent y avait intégré l'adhésion en ligne. Une carte des meetups en France a aussi été intégrée. Nous préparons de nouvelles mises à jour pour la suite.

Côté finances

Le bilan financier annuel est bon. L'évènement Drupal Dev Days s'est avéré positif, avec un budget initial ambitieux de plus de 50 000€. Nous avons bénéficié de dons (Drupal Dev Days Szeged, Drupal Association, Accelerate Drupal 8), ce qui nous a permis par la suite de donner à notre tours (Accelerate Drupal 8 et Drupal Dev Days Milan).

A noter toutefois que les frais de l'association sont en hausse et que pour sa stabilité l'organisation d'un évènement par an est nécessaire, quel dommage :p

Nouveau bureau et présentation des commissions

Le nouveau bureau

Petit changement dans le bureau cet année, pour le secrétaire. Vincent Maucorps laisse sa place à Florent Torregrosa, Vincent restant vice-secrétaire. Léon Cros et Anne-Sophie Picot, restent à leur poste respectif de président et trésorière.

Commissions

Nous avions déjà abordé par le passé l'idée de fédérer les actions adhérentes et de décharger le bureau. A été présenté la proposition de fonctionnement des commissions.

Soit des groupes autonomes, en charge de points précis, se relayant au bureau, pour la communication et logistique générale.

Liste rapide des commissions

Ces commissions, leurs rôles, leurs participants seront présentées sur le site dans l'espace association très prochainement.

Et maintenant ?

un drupalcamp en 2016 à Nantes

Drupal camp Nantes logo

Nous y étions en 2011, nous y revenons, le temps d'un week-end pour un camp sous le soleil du mois de Juin. Réservez vos 10, 11 et 12 juin 2016 ! Le site de l'évènement

la nouvelle communication de l'association

Logo de l'association

Nous en parlions il y a quelques semaines. Avions publié un concours de logo. L'association porte désormais de nouvelles couleurs. nous remercions tous les participants et félicitons Christophe Sadowski et Kévin Bothua pour leur logo sélectionné.

Un gros challenge de mise à jour de notre communication, nous attends donc.

les Prix Drupal France

Parce qu'il faut bien marquer le coup de temps en temps, et qu'il faut aussi profiter des bonnes occasions pour remercier les forces vives. Cette année, a été intégré le Prix Drupal France. Rien de systématique, juste l'occasion de mettre en lumière des participations.

Cette année, deux évènements ont été mis en lumière :

  • le changement de logo
  • l'organisation sans faille des Drupal Devs Days

Kévin et Christophe pour leur logo et Julien, Edouard et Anne-Sophie, pour l'organisation des DDD, ont été remerciés pour leurs participations respectives.

En page d'accueil : 
Par Artusamak
Julien Dubois

Drupal 8, rapide comme l'éclair !

Drupal 8, rapide comme l'éclair !
jeu, 24/03/2016 - 11:00
DuaelFr

Et s'il était possible d'avoir un site qui se charge instantanément ou presque avec Drupal 8 sans configuration particulière ?

Cette question taraude les développeurs depuis de nombreuses années et toutes les grandes entreprises et communautés ont déjà eu cette réflexion à propos de leurs outils et services. Certaines ont réussi à améliorer les choses par des procédés très spécifiques d'optimisation et d'autres ont créé des principes qui pourraient être appliqués à tous les projets. Aujourd'hui, l'éventail de solutions est large mais leur mise en œuvre reste souvent très complexe d'autant qu'une unique solution ne résoudra jamais tous les problèmes.

Drupal 8 ou la révolution du cache

La chose est passée relativement inaperçue côté grand public mais cela a fait grand bruit dans la communauté des développeurs Drupal et je suis persuadé que cela fera des émules dans les autres CMS. Durant la fin de son cycle de développement, lorsque l'accent a été mis sur les performances, Drupal s'est doté d'un nouveau module intégré au cœur : Dynamic Page Cache. La promesse de ce dernier était de permettre d'émuler un fonctionnement proche de celui des ESI directement dans le CMS, sans avoir besoin d'un reverse proxy (même si son usage reste possible). 

Avec Dynamic Page Cache, chaque élément significatif de la page se voit doté de métadonnées de cache qui se cumulent les unes aux autres au fur et à mesure de l'aggrégation des éléments dans la page finale pour constituer une sorte de profil de cache. Avec ce profil, le cœur est capable facilement de gérer des variantes d'un contenu en fonction de critères concrets et d'éviter au maximum d'avoir à reconstruire des élements à moins que cela ne soit nécessaire. De la même manière, ce profil de cache permet de gérer les dépendances entre les données et leur affichage pour très facilement invalider un rendu lorsque la donnée a été modifiée, sans toucher aux autres rendus constituant la même page.

Avant cela, il était fréquent de voir des pages entièrement reconstruites alors qu'une simple et minuscule donnée y avait été modifiée. Maintenant, ces ressources serveur sont économisées et on peut constater des gains de performances réellement significatifs. De même, avant cela, avoir un élément hautement dynamique sur la page, comme par exemple un bloc indiquant le nombre d'objets dans un panier d'achat, imposait de ne pas mettre en cache la page pour éviter qu'un visiteur ne voit les informations d'un autre. Désormais, ces éléments sont gérés nativement et toute la partie commune à tous les utilisateurs de la page peut être mise en cache, indépendament des portions spécifiques qui sont stockées séparément.

J'ai déjà évoqué le fonctionnement de ce système de cache en détail dans un article dans le magazine Programmez! et cela fera également l'objet d'un prochain article issu de notre formation Drupal 8 à destination des développeurs Drupal 7 donc je n'approfondirai pas ce sujet ici. Sachez cependant que le système derrière Dynamic Page Cache est à la base des deux revolutions qui suivent.

BigPipe pour les nuls

Inventée par Facebook pour améliorer les performances de leur site, cette technique s'explique très simplement mais peut-être incroyablement complexe à mettre en place. Il s'agit de fournir au visiteur d'un site une réponse la plus rapide possible, même si elle est incomplète, puis de charger les éléments restants dans un second temps. De cette façon, on améliore les performances perçues plus que les performances réelles. Le temps de chargement total de la page restera inchangé mais avec BigPipe l'utilisateur verra quelque chose apparaître sur son écran beaucoup plus rapidement. La vidéo suivante compare le rendu des deux techniques :

Si l'on reprend l'exemple d'un site e-commerce, la structure de la page sera renvoyée très rapidement car elle est commune à tous les utilisateurs et mise en cache. La partie spécifique (le bloc panier) sera chargée et affichée dans un second temps. Sans BigPipe, c'est le serveur web qui va attendre que chaque partie de la page soit générée avant d'envoyer l'ensemble au navigateur. Avec BigPipe, c'est le navigateur qui est chargé de reconstituer les divers éléments. Bien qu'il soit possible de réaliser un équivalent à l'aide de requêtes Ajax après la fin du chargement de la page, le génie de BigPipe repose sur le fait qu'il ne nécessite qu'une seule requête HTTP pour récupérer tous les éléments d'une même page, ce qui ne serait pas le cas en passant par de l'Ajax classique.

La méthode s'appuie sur la technologie Chunked Encoding disponible depuis HTTP 1.1. Celle-ci autorise le serveur à renvoyer sa réponse en plusieurs fragments de la taille qu'il souhaite. Le serveur peut donc renvoyer un premier fragment contenant la structure de la page puis ensuite renvoyer, généralement sous la forme d'un appel Javascript enrichi de données JSON, un fragment par bloc jusqu'à ce que tous soient générés.

Dans Drupal 8, grâce aux métadonnées de cache, il est aisé de savoir quelle partie de la page est suceptible de varier beaucoup et quelle autre devrait pouvoir être identique d'un utilisateur à l'autre. Avec Dynamic Page Cache, le cœur construit la page intégralement en récupérant certaines parties du cache et en générant les autres à la demande avant de renvoyer la réponse au visiteur. Avec BigPipe (intégré dans le cœur de Drupal 8.1), il utilise les mêmes métadonnées pour remplacer les parties plus longues à charger par un élément de substitution (placeholder) puis renvoie immédiatement le rendu de la page. Ensuite, une fois chaque sous-éléments prêt, il renvoie une instruction au navigateur lui indiquant de remplacer le placeholder par le code correspondant au bloc finalisé. Une fois le module activé (téléchargeable ici pour Drupal 8.0 et inclus dans le cœur de Drupal 8.1), aucune configuration supplémentaire n'est nécessaire hormis un éventuel ajustement très mineur côté serveur pour s'assurer qu'il n'utilise pas une mémoire tampon et qu'il expédie bien les éléments au navigateur dès que possible. La magie opére donc extrêmement rapidement et sans surcoût !

RefreshLess pour délivrer plus (et plus vite)

Cette fois-ci c'est de la communauté Ruby on Rails dont provient cette technique, nommée Turbolinks, qui consiste à ne recharger que les éléments changeant dans une page web lors du clic sur un lien au lieu de recharger toute la page. Elle part du principe qu'un site a généralement une structure globale identique ou presque d'une page à une autre et que celle-ci n'a pas besoin d'être rechargée par le navigateur lors du changement de page. Cela permet d'économiser les ressources à la fois du serveur et du navigateur. Le premier n'a pas à générer les parties communes de la page, le second n'a pas à reconstruire visuellement ces mêmes parties.

L'intégration des Turbolinks n'est à ce jour qu'un prototype sous la forme d'un module Drupal 8 mais son potentiel est  énorme car il se base sur les mêmes mécanismes que BigPipe pour fonctionner à savoir, vous l'aurez deviné, les métadonnées de cache ! En effet, lors du clic sur un lien interne, une requête Ajax est envoyée au serveur qui va calculer, à partir de ces métadonnées, les régions du site qui sont suceptibles d'avoir changé. Il ne génèrera et ne renverra que ces régions là sous la forme de plusieurs commandes indiquant au navigateur quelles sections remplacer. Il est très probable qu'à l'avenir ce système s'appuie aussi sur la technologie BigPipe pour renvoyer et rendre les blocs sans attendre que la génération de tous les éléments soit terminée.

Comme le montre la vidéo suivante, les premiers résultats sont tout bonnement impressionnants et très encourageants :

Conclusion

Ces deux sujets démontrent qu'une utilisation intelligente des métadonnées de cache peuvent entrainer des applications inatendues améliorant les performances de nos sites à moindre coût. Les solutions présentées ci-dessus sont activement soutenues et développées par Wim Leers pour le compte d'Acquia dont l'objectif est toujours de rendre l'écosystème Drupal plus solide et compétitif. L'aboutissement de ces techniques permettra à l'ensemble du marché de profiter de performances améliorées. Cela bénéficiera à la fois aux visiteurs mais aussi aux éditeurs des sites qui auront besoin d'une architecture serveur moins puissante et donc moins chère, sans toutefois avoir à investir la différence dans des coûts de développement.

 

 

Crédit photo © Bert Koopman

Catégorie
Par Artusamak
Julien Dubois

Drupal 8 : Point sur le monde JS

Drupal 8 : Point sur le monde JS
mer, 23/03/2016 - 10:23
Artusamak

Cet article est extrait de notre formation drupal 8 "de Drupal 7 à Drupal 8" à destination des développeurs. N'hésitez pas à nous contacter pour en savoir plus !

Le gros changement dans Drupal 8 au niveau Javascript se situe principalement dans la façon dont on va importer les fichiers Javascript.

En Drupal 7, on devait directement définir les fichiers Javascript à importer dans le fichier *.info d’un thème, d’un module ou via drupal_add_js() ou via l’attribut #attached d’un render array. Drupal 8 systématise l’usage de librairies qui existaient déjà dans Drupal 7. Cela permet de déclarer un groupe de fichiers Javascript ou CSS et de les injecter ensemble là où c’est nécessaire dans le site. Les librairies sont créées dans un fichier *.libraries.yml se plaçant à la racine du thème ou du module.

<span class="comment token" spellcheck="true"># block.libraries.yml</span>

<span class="atrule key token">drupal.block</span><span class="punctuation token">:</span>
  <span class="atrule key token">version</span><span class="punctuation token">:</span> VERSION
  <span class="atrule key token">js</span><span class="punctuation token">:</span>
    <span class="atrule key token">js/block.js</span><span class="punctuation token">:</span> <span class="punctuation token">{</span><span class="punctuation token">}</span>
  <span class="atrule key token">dependencies</span><span class="punctuation token">:</span>
    <span class="punctuation token">-</span> core/jquery
    <span class="punctuation token">-</span> core/drupal

<span class="atrule key token">drupal.block.admin</span><span class="punctuation token">:</span>
  <span class="atrule key token">version</span><span class="punctuation token">:</span> VERSION
  <span class="atrule key token">js</span><span class="punctuation token">:</span>
    <span class="atrule key token">js/block.admin.js</span><span class="punctuation token">:</span> <span class="punctuation token">{</span><span class="punctuation token">}</span>
  <span class="atrule key token">css</span><span class="punctuation token">:</span>
    <span class="atrule key token">theme</span><span class="punctuation token">:</span>
      <span class="atrule key token">css/block.admin.css</span><span class="punctuation token">:</span> <span class="punctuation token">{</span><span class="punctuation token">}</span>
  <span class="atrule key token">dependencies</span><span class="punctuation token">:</span>
    <span class="punctuation token">-</span> core/jquery
    <span class="punctuation token">-</span> core/drupal
    <span class="punctuation token">-</span> core/drupal.ajax

Un des avantages majeurs de ce nouveau système est la possibilité de définir des dépendances. Ici, lorsque la librairie drupal.block sera incluse, elle importera automatiquement jQuery et la librairie core de Drupal.

Ce que cela sous-entend et qui est une énorme évolution dans Drupal 8, c’est que jQuery ou d’autres fichiers Javascript ne sont plus importés par défaut dans les pages Drupal.
Ainsi, un Drupal standard en mode anonyme est complément libre de tout javascript. C’est une sacrée amélioration pour les performances d’affichage !

L’utilisation des librairies dans le code passe par “l’attachement” de celles-ci à l’élément où le code est nécessaire. Pour cela, nous pourrons nous appuyer sur plusieurs mécanismes en fonction de la situation. La philosophie de Drupal 8 est d’essayer de cibler spécifiquement l’élément (la page, le contenu, le bloc, la table, etc.) pour que le code ne soit chargé que lorsque cela est vraiment nécessaire.

L’attachement de la librairie utilise l’attribut #attached déjà présent en Drupal 7.

Attachement à un type d’élément

Nous avons vu précédemment l’API de rendu et la notion de type. Il est possible de cibler un type particulier pour que la librairie lui soit toujours attachée. Pour cela, il faut utiliser le hook_element_info_alter() permettant me modifier le render array par défaut de ces types.

<span class="comment shell-comment token"># module_name.module</span>
<span class="keyword token">function</span> <span class="function token">module_name_element_info_alter</span><span class="punctuation token">(</span><span class="keyword token">array</span> <span class="operator token">&amp;</span><span class="token variable">$types</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="function token">isset</span><span class="punctuation token">(</span><span class="token variable">$types</span><span class="punctuation token">[</span><span class="string token">'table'</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    <span class="token variable">$types</span><span class="punctuation token">[</span><span class="string token">'table'</span><span class="punctuation token">]</span><span class="punctuation token">[</span><span class="string token">'#attached'</span><span class="punctuation token">]</span><span class="punctuation token">[</span><span class="string token">'library'</span><span class="punctuation token">]</span><span class="punctuation token">[</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="string token">'module_name/jslib'</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span>
<span class="punctuation token">}</span>

Attachement à une entité

Pour cibler une entité en particulier on peut passer par le hook_entity_view_alter().

<span class="comment shell-comment token"># module_name.module</span>
<span class="keyword token">function</span> <span class="function token">module_name_entity_view_alter</span><span class="punctuation token">(</span><span class="operator token">&amp;</span><span class="token variable">$build</span><span class="punctuation token">,</span> <span class="token variable">$type</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="token variable">$build</span><span class="punctuation token">[</span><span class="string token">'#entity_type'</span><span class="punctuation token">]</span> <span class="operator token">==</span> <span class="string token">'node'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    <span class="token variable">$build</span><span class="punctuation token">[</span><span class="string token">'#attached'</span><span class="punctuation token">]</span><span class="punctuation token">[</span><span class="string token">'library'</span><span class="punctuation token">]</span><span class="punctuation token">[</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="string token">'module_name/jslib'</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span>
<span class="punctuation token">}</span>

Attachement à la page complète

Cette fois on vise la page complète et donc potentiellement toutes les pages via le hook_page_attachments_alter().

<span class="comment shell-comment token"># module_name.module</span>
<span class="keyword token">function</span> <span class="function token">module_name_page_attachments_alter</span><span class="punctuation token">(</span><span class="keyword token">array</span> <span class="operator token">&amp;</span><span class="token variable">$attachments</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="token variable">$attachments</span><span class="punctuation token">[</span><span class="string token">'#attached'</span><span class="punctuation token">]</span><span class="punctuation token">[</span><span class="string token">'library'</span><span class="punctuation token">]</span><span class="punctuation token">[</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="string token">'module_name/jslib'</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>

Attachement dans un template Twig

Twig propose une méthode pour attacher directement une librairie dans un template.

<span class="other token"># stuff.html.twig:</span>
<span class="tag token"><span class="ld token"><span class="punctuation token">{{</span></span> <span class="property token">attach_library</span><span class="punctuation token">('</span><span class="property token">module_name</span><span class="operator token">/</span><span class="property token">jslib</span><span class="string token"><span class="punctuation token">'</span></span><span class="punctuation token">)</span> <span class="rd token"><span class="punctuation token">}}</span></span></span>

Écrire du javascript

L’écriture de code Javascript ne change fondamentalement pas. Drupal 8 utilise toujours jQuery (version 2.1.4), le code est toujours à inclure dans une closure et le Drupal Behaviors est toujours à utiliser pour permettre à notre code de réagir à chaque requête. En nouveauté, on voit apparaître l’utilisation fortement conseillée du use strict; facilitant l’écriture de code Javascript correct et sécurisé. Il devient par exemple impossible d’utiliser une variable non déclarée préalablement.

# file<span class="punctuation token">.</span>js
<span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span>$<span class="punctuation token">,</span> Drupal<span class="punctuation token">,</span> drupalSettings<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token" spellcheck="true">// closure</span>
  <span class="string token">'use strict'</span><span class="punctuation token">;</span>
  Drupal<span class="punctuation token">.</span>behaviors<span class="punctuation token">.</span>awesome <span class="operator token">=</span> <span class="punctuation token">{</span> <span class="comment token" spellcheck="true">// behaviors</span>
    attach<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>context<span class="punctuation token">)</span> <span class="punctuation token">{</span>
    <span class="punctuation token">}</span><span class="punctuation token">,</span>
    detach<span class="punctuation token">:</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>context<span class="punctuation token">,</span> trigger<span class="punctuation token">)</span> <span class="punctuation token">{</span>
    <span class="punctuation token">}</span>
  <span class="punctuation token">}</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">(</span>jQuery<span class="punctuation token">,</span> Drupal<span class="punctuation token">,</span> drupalSettings<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

Concernant la liaison entre une action et un objet du DOM, il est conseillé d’utiliser des attributs data- HTML 5 quand cela est possible ou bien de préfixer les classes utilisées par js- quand cela est possible. L’idée est de créer une frontière entre le monde CSS et JS pour limiter les régressions en cas de modification d’une classe par exemple.

Ce travail est encore en cours dans Drupal 8 : https://www.drupal.org/node/2431671

Si vous souhaitez passer des paramètres à votre script, il faut ajouter une dépendance sur core/drupalSettings à votre librairie et l’injecter dans votre closure (voir exemple ci-dessus), enfin si nécessaire on peut passer les paramètres de la façon suivante lors de l’attachement :

<span class="comment shell-comment token"># module_name.module</span>
<span class="keyword token">function</span> <span class="function token">module_name_page_attachments_alter</span><span class="punctuation token">(</span><span class="keyword token">array</span> <span class="operator token">&amp;</span><span class="token variable">$attachments</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="token variable">$attachments</span><span class="punctuation token">[</span><span class="string token">'#attached'</span><span class="punctuation token">]</span><span class="punctuation token">[</span><span class="string token">'library'</span><span class="punctuation token">]</span><span class="punctuation token">[</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="string token">'module_name/jslib'</span><span class="punctuation token">;</span>
  <span class="token variable">$attachments</span><span class="punctuation token">[</span><span class="string token">'#attached'</span><span class="punctuation token">]</span><span class="punctuation token">[</span><span class="string token">'drupalSettings'</span><span class="punctuation token">]</span><span class="punctuation token">[</span><span class="string token">'some'</span><span class="punctuation token">]</span><span class="punctuation token">[</span><span class="string token">'var'</span><span class="punctuation token">]</span><span class="punctuation token">[</span><span class="string token">'name'</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="string token">'bar'</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>

On accédera alors dans le code javascript à la variable drupalSettings.some.var.name

Drupal permet toujours de déclarer des fonctions de thème en Javascript :

# file<span class="punctuation token">.</span>js
Drupal<span class="punctuation token">.</span>theme<span class="punctuation token">.</span>hello <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="keyword token">var</span> markup <span class="operator token">=</span> <span class="string token">'Hello world!'</span><span class="punctuation token">;</span>
  <span class="keyword token">return</span> markup<span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">;</span>

Drupal<span class="punctuation token">.</span>theme<span class="punctuation token">.</span>helloYou <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>name<span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="keyword token">var</span> markup <span class="operator token">=</span> <span class="string token">'Hello '</span> <span class="operator token">+</span> name <span class="string token">'!'</span><span class="punctuation token">;</span>
  <span class="keyword token">return</span> markup<span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">;</span>

<span class="keyword token">var</span> example <span class="operator token">=</span> Drupal<span class="punctuation token">.</span><span class="function token">theme</span><span class="punctuation token">(</span><span class="string token">'hello'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token" spellcheck="true">// Hello world!</span>
<span class="keyword token">var</span> another_example <span class="operator token">=</span> Drupal<span class="punctuation token">.</span><span class="function token">theme</span><span class="punctuation token">(</span><span class="string token">'helloYou'</span><span class="punctuation token">,</span> <span class="string token">'Dries'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token" spellcheck="true">// Hello Dries!</span>

Pensez à utiliser $.extend() pour déclarer plusieurs fonctions d’un coup :

# file<span class="punctuation token">.</span>js
$<span class="punctuation token">.</span><span class="function token">extend</span><span class="punctuation token">(</span>Drupal<span class="punctuation token">.</span>theme<span class="punctuation token">,</span> <span class="punctuation token">{</span>
  hello<span class="punctuation token">:</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> <span class="string token">'Hello world!'</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">,</span>
  helloYou<span class="punctuation token">:</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>name<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> <span class="string token">'Hello '</span> <span class="operator token">+</span> name <span class="string token">'!'</span><span class="punctuation token">;</span> <span class="punctuation token">}</span>
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

Backbone.js

Une autre nouveauté concernant le monde Javascript dans Drupal 8 est l’intégration de Backbone.js (et sa dépendance underscore.js) dans le core.

C’est une librairie permettant la création structurée d’applications javascript facilitant la mise en place d’interface riche (utilisée par Foursquare, Disqus, Trello). Elle apporte un cadre composé (entre autres) de :

  • modèles (Model) qui sont une représentation des données via un système interne de clés/valeurs qui lance des évènements spécifiques lors des changements de valeurs.
  • vues (View) qui est la partie gérant l’affichage d’un modèle, a l’écoute des évènements et qui envoi des données au modèle.
  • collections (Collection) qui proposent une API pour gérer des groupes de modèles, s’occupant de leur chargement et de leur sauvegarde.

Backbone est utilisé dans Drupal 8 pour gérer la toolbar ou la fonctionnalité d’édition en ligne rapide. Pour l’utiliser dans vos scripts il suffit de le mettre en dépendance de votre librairie.

<span class="comment token" spellcheck="true"># foo.libraries.yml</span>
<span class="atrule key token">foo-lib</span><span class="punctuation token">:</span>
  <span class="atrule key token">version</span><span class="punctuation token">:</span> VERSION
  <span class="atrule key token">js</span><span class="punctuation token">:</span>
    <span class="atrule key token">js/foo-lib.js</span><span class="punctuation token">:</span> <span class="punctuation token">{</span><span class="punctuation token">}</span>
  <span class="atrule key token">dependencies</span><span class="punctuation token">:</span>
    <span class="punctuation token">-</span> core/backbone

Ressources associées

Par GoZ
Fabien CLEMENT

Module Commerce discount gift choice

Module Commerce discount gift choice

Le module Commerce discount gift choice ajoute une offre au module discount.
Cette offre permet au commerçant de définir les produits cadeaux qu'il souhaite offrir avec cette remise. Le client pourra alors choisir un de ces produits sur son panier.

Ce type d'offre n'est disponible que sur les remises de commande.

La configuration d'un point de vue commerçant est la suivante:

GoZ
lun 21/03/2016 - 18:08

Par Artusamak
Julien Dubois

Replay du webinar « Choisir Drupal 8 » du 17 mars 2016.

Replay du webinar « Choisir Drupal 8 » du 17 mars 2016.
lun, 21/03/2016 - 09:50
Bès

La présentation de Drupal 8 et des problématiques de migration du 17 mars est en replay :

https://www.webikeo.fr/webinar/drupal-8-pourquoi-quand-et-comment/replay (il faut vous connecter pour la voir)

Le replay vous permet de revoir la présentation et de lire les questions posées ainsi que les réponses données.

Si vous avez besoin d'aide ou d'accompagnement sur Drupal, n'hésitez pas à consulter notre formation de Drupal 7 à Drupal 8 pour les développeurs dont vous retrouvez régulièrement des extraits sur ce blog.

 

Crédit photo : commons.wikimedia.org

Catégorie
Par flocondetoile
Adhérent

Gérer des librairies externes dynamiquement avec Drupal 8

Drupal 8 a revu en profondeur la gestion des librairies et nous permet de gérer très finement les ressources à charger sur les différentes pages d'un site (cf. La gestion des libraries avec Drupal 8). Néanmoins, si nous souhaitons pouvoir gérer une librairie tierce dont nous ne connaissons pas à posteriori l'emplacement, il nous est difficile de pouvoir la déclarer statiquement. Pour gérer ces différents cas de figure, il va falloir gérer dynamiquement cette librairie. Découvrons comment simplement y parvenir avec le module Libraries API.

Par Artusamak
Julien Dubois

Drupal 8 : Responsive design

Drupal 8 : Responsive design
jeu, 17/03/2016 - 17:04
Artusamak

Cet article est extrait de notre formation drupal 8 "de Drupal 7 à Drupal 8" à destination des développeurs. N'hésitez pas à nous contacter pour en savoir plus !

La pratique du design responsive est petit à petit entrain de s’imposer sur tous les projets. Le responsive vient avec la notion de Breakpoint. Drupal permet une fois le module du cœur Breakpoint activé, de créer ces derniers. Il n’existe pas d’interface pour cela, c’est à chaque module de déclarer ses Breakpoints dans un fichier <module>.breakpoints.yml.

Les Breakpoints sont composés de :

  • un label,
  • une media query,
  • un poids,
  • un coefficient multiplicateur (utile pour gérer la densité des écrans).

Vous aurez probablement besoin de les grouper dans un fichier <module>.breakpoint_group.yml (voir documentation).

Oui mais voilà… créer les Breakpoints ne vous avance pas beaucoup. Ils ne sont pas intégrés à vos CSS automagiquement, vous aurez toujours à écrire vos media queries avec les dimensions qui vous intéressent sans pouvoir les récupérer depuis votre interface Drupal.

Pour que ce module prenne de l’intérêt il faut l’activer avec le module du cœur Responsive Image qui expose un formateur de champ ainsi qu’un plugin de champ pour Views. Chacun d’eux vous laissera choisir quel style d’image utiliser en fonction du Breakpoint d’un groupe pris en compte lors de l’affichage de votre page. Idéal pour gérer des formats d’image différents (ou pas d’image du tout) selon les cas.

Cela se base sur l’utilisation du tag HTML 5 picture et de picturefill.js pour gérer la compatibilité descendante.

Si vous voulez découvrir les options avancées du module, vous pouvez (tenter) de visionner cette vidéo d’attiks. Courage, sa voix n’est pas des plus entraînantes.

Liens intéressants

Par flocondetoile
Adhérent

Une feuille de route pour Drupal 8. Et après ?

Depuis la sortie de la première version stable de Drupal 8, Drupal utilise désormais un système de gestion sémantique des versions. La mise en place d'un tel système de gestion des versions s'est accompagnée d'une définition d'une nouvelle politique de mise à jour, nous permettant de disposer d'une vision à long terme des différentes versions à venir du coeur de Drupal. Découvrons en détail le fonctionnement de ce système, et la feuille de route sous-jacente de Drupal pour les années à venir.

Par vincent59
Vincent Liefooghe

Cartographie Drupal : utilisation de AddressField + Geocoder

Dans la série Cartographie, nous avons vu auparavant quels modules utiliser pour stocker les données géographiques, et les présenter de manière simple.

Cependant, à ce stade la saisie d'une adresse n'était possible que via ses coordonnées géographiques, ou sur une carte.

Si on veut coupler la saisie d'une adresse et l'encodage, on peut utiliser 2 modules complémentaires :

  • Address Field : très utilisé dans Drupal Commerce, il permet de fournir un champ de saisie des adresses, de manière normalisée, avec un formulaire propre au pays
  • Geocoder : couplé avec Address Field, il pemettra d'encoder l'adresse pour la transformer en coordonnées géographiques.

A priori, il semble qu'il faille également installer le module Entity, sinon on a des messages d'erreur de type :

PHP Fatal error:  Call to undefined function entity_get_all_property_info() in /var/www/drupal/sites/all/modules/contrib/geocoder/geocoder.widget.inc on line 89

L'installation des modules s'effectue normalement. Par exemple avec drush :

drush dl geocoder addressfield entity
drush en geocoder addressfield entity

Address Field

Imaginons que nous voulions gérer des magasins dans plusieurs pays : France, Belgique, Suisse. Nous allons créer un type de contenu Magasin, avec un Nom, une description et y ajouter un champ Adresse :

Au niveau du Widget, on pourra alors sélectionner les pays : Belgium, France, Switzerland (pour la démo, j'utilise un site en anglais). Et définir la France comme pays par défaut.

En saisie, on a alors le formulaire qui s'affiche, avec la France comme pays par défaut :

Mais à ce stade, l'adresse est uniquement affichée de manière textuelle, car nous n'avons pas encore introduit l'encodage :

Geofield + Encodage

Pour permettre la cartographie, il faut donc un champ qui stocke les coordonnées géographiques (apporté par Geofield). Le fait d'avoir ajouté le module Geocoder permet d'ajouter une option dans les Widgets :

Lorsqu'on ajoute un champ de type Geofield, on peut alors sélectionner le widget de type "Geocode from another field". Au niveau des paramètres du champ, on laisse le défaut.

On va ensuite choisir quel champ sera utilisé comme base de géocoding, et le "moteur" à utiliser. Plusieurs choix sont possibles :

Dès lors, lorsqu'on saisit une adresse, celle-ci est envoyée au service de géocodage. Les coordonnées sont bien récupérées. Dans l'exemple ci-après, elles sont juste affichées au format WKT.

En effet, le paramétrage de l'affichage du champ est le suivant :

Conclusion

Nous avons vu dans cet article comment utiliser les modules AddressField, Geocoder, Geofield et Entity pour ajouter un champ de type adresse et un champ de type Geofield sur un type de contenu, et récupérer les coordonnées géographiques de l'adresse via les services de Geocodage.

Les données stockées dans le champ Geofield peuvent ensuite servir à l'affichage.

Si on modifie le type de format du champ en Dynamic Google Map par exemple :

L'affichage se présente sous la forme d'une carte :

Dans de prochains articles, nous verrons comment intégrer Views et d'autres affichages (Leaflet par exemple)

 

Catégorie: 


Tag: 

Par vincent59
Vincent Liefooghe

Cartographie avec Drupal

Dans un précédent article (https://www.vincentliefooghe.net/content/cartographie-rapide-avec-drupal), j'ai montré comment on pouvait ajouter rapidement et en quelques modules des fonctions de cartographie.

Dans cet article, nous allons aller un peu plus loin dans ce domaine, avec la présentation des principes et de différents modules.

Principes et composants de la cartographie

Lorsque l'on parle de cartographie, on pense souvent à la restitution des données. Google Maps a permis de démocratiser cet aspect.
Cependant, la chaîne complète repose sur un ensemble de composants :

Pour chacun de ces composants, Drupal propose souvent plusieurs solutions, parfois incompatibles. Il convient donc de faire le bon choix afin de construire une solution globale pérenne et fonctionnelle.

Nous allons voir, dans les différentes parties de cet article, quels sont les composants / modules Drupal que nous pouvons utiliser.

Et pour ceux qui sont pressés et qui veulent rapidement mettre en oeuvre une solution, ils peuvent s'orienter vers le guide du mapping rapide, qui permet d'avoir une solution complète en installant 5 modules :

  • geophp : pré-requis pour les fonctions de géolocalisations
  • ctools : pré-requis pour geofield et views
  • geofield : stockage des données
  • geofield_gmap : widget de saisie Google Maps pour le champ geofield
  • views : pour l'affichage des différents contenus sur une seule page

Stockage des données

Pour le stockage des données géographiques, c'est geofield qui est le plus utilisé et le plus supporté.
Il nécessite en pré-requis les modules geophp et ctools.

L'installation et l'activation du module via drush consiste donc en :

drush dl ctools geophp geofield

Project ctools (7.x-1.9) downloaded to sites/all/modules/ctools.                                          [success]
Project ctools contains 10 modules: term_depth, ctools_access_ruleset, views_content, page_manager, bulk_export, stylizer, ctools_ajax_sample, ctools_custom_content, ctools_plugin_example, ctools.
Project geophp (7.x-1.7) downloaded to sites/all/modules/geophp.                                          [success]
Project geofield (7.x-2.3) downloaded to sites/all/modules/geofield.                                      [success]
Project geofield contains 2 modules: geofield_map, geofield.

drush en -y ctools geophp geofield
Do you really want to continue? (y/n): y
ctools was enabled successfully.                                                                                         [ok]
ctools defines the following permissions: use ctools import
geofield was enabled successfully.                                                                                       [ok]
geophp was enabled successfully.                                                                                         [ok]

A ce stade, on a uniquement un nouveau type de champ, qui peut être ajouté à des contenus.

Saisie des coordonnées

La saisie des coordonnées peut utiliser plusieurs options :

  • saisie directe des valeurs de latitude, longitude
  • définition d'une zone à partir d'une carte
  • encodage à partir d'une adresse
  • positionnement direct du marqueur sur une carte
  • combinaison de l'adresse et du positionnement

Le plus intuitif, à mon sens, reste la saisie d'une adresse et/ou le positionnement du marqueur sur la carte, qui est intéressant lorsque la position à saisir n'est pas une adresse (par exemple un point perdu dans la campagne ou la montagne...).

Défaut avec Geofield

Par défaut, une fois que geofield est installé, on peut voir sur la capture d'écran, que seuls 4 types de widgets sont disponibles par défaut :

  • GeoJSON : données au format json
  • Well Known Text (WKT) : format WKT, un format qui permet de définir le type de d'objet et ses coordonnées
  • Latitude / Longitude : 2 champs de saisie, un pour chaque donnée
  • Bounds : saisie de plusieurs points pour définir une frontière

Dans notre exemple, nous avons choisi Latitude / Longitude. L'ajout d'un contenu de type POI demande donc la saisie de la latitude et de la longitude du point.
C'est précis, mais pas très intuitif.


Si on a activé la géolocalisation HTML 5, on peut récupérer la localisation actuelle du navigateur en cliquant sur "Find my location" .

Dans ce deuxième exemple, on a changé le widget de saisie en GeoJSON. La saisie demande donc ce format, par exemple :

{"type":"Point",
"coordinates":[3.1,50.0] }

On constate également que l'affichage (pour l'instant) n'utilise que des champs textes : WKT, GeoJSON, KML, etc. :

Avec des widgets Graphiques

Plutôt que de faire une saisie manuelle des coordonnées, on peut vouloir placer le marqueur directement sur une carte. Pour ce faire, on peut utiliser plusieurs modules, tels que :

Geofield Gmap

L'installation est simple avec drush :

drush dl geofield_gmap
drush en -y geofield_gmap

Une fois le module téléchargé et activé, on dispose d'un nouveau Widget pour notre champ Localisation : Google Map.


On peut alors entrer une adresse, ou une ville dans le champ d'adresse, mais aussi travailler directement sur la carte.

A ce stade, on a donc une saisie et un rendu graphiques de la localisation sur notre type de contenu, en ayant installé 4 modules : ctools, geophp, geofield et geofield_gmap.

Ceci fonctionne bien pour un affichage individuel, mais si on veut afficher sur une seule carte les différents points, il va falloir aller plus loin et utiliser notamment les fonctionnalités de Views

Encodage

L'encodage consiste à transformer les données saisies en latitude / longitude, afin d'alimenter le champ geofield. Jusqu'ici, notre exemple n'a pas utilisé d'encodage, et il faut donc saisir ces données manuellement, ce qui n'est pas très user friendly.

Des modules d'encodage à partir d'adresse sont souvent utilisés. Dans ce domaine, on utilise souvent le couple de modules :

  • Address pour la saisie des adresses
  • Geocoder pour l'encodage à partir de l'adresse saisie

Cette partie sera traitée dans un autre article.

Restitution / affichage

Avec le module Geofield

Par défaut avec geofield, lorsqu'on visualise le contenu, le résultat est assez austère. L'affichage utilise le format WKT (Well Known Text). Par exemple :

POINT (3.1 50)

On peut modifier cet affichage, pour voir les différents autres formats texte.

Par exemple, si on choisit GeoJSON, on a alors les coordonnées en format JSON :

{"type":"Point","coordinates":[3.1,50]}

Pour améliorer la restitution, on peut activer le module Geofield map qui permet d'avoir un nouveau formatter pour la visualisation.

Une fois choisi Geofield Map, on dispose de beaucoup plus d'options pour l'affichage

Le résultat est déjà plus intéressant ; quand on affiche un contenu, la localisation est affichée sous la forme d'une Map Google :

Affichage avec d'autres modules

Il existe d'autres modules qui gèrent l'affichage du contenu, et qui peuvent être intégrés avec Views, afin de réaliser des cartes englobants plusieurs points.
Ces modules utilisent généralement des librairies Javascript, qui effectuent le rendu côté client.

On peut citer notamment :

  • Leaflet
  • OpenLayers
  • IP Geoloc

Nous verrons dans un autre article comment utiliser Leaflet, avec des clusters de point et des icônes spécifiques selon une taxonomie.

 

Catégorie: 


Tag: 

Par Artusamak
Julien Dubois

Drupal 8 : Twig et les thèmes

Drupal 8 : Twig et les thèmes
jeu, 10/03/2016 - 12:42
Artusamak

Cet article est extrait de notre formation drupal 8 "de Drupal 7 à Drupal 8" à destination des développeurs. N'hésitez pas à nous contacter pour en savoir plus !

Au revoir PHPTemplate, bonjour Twig. Mais ça n’est pas tout. Le responsive étant beaucoup plus présent dans cette nouvelle version de Drupal, les thèmes de base Bartik et Seven se basent sur un nouveau thème Classy qui a vocation à fournir un balisage et des classes de base pour la structure et la mise en page de votre site.
Si vous voulez démarrer un nouveau thème vierge, ignorez
Classy et vous ne serez pas encombré par les classes non désirées.

A l’instar des modules, les thèmes custom seront à créer dans un dossier themes à la racine de l’installation de Drupal (Ou dans sites/**/themes ou dans profiles/**/themes)

Ce qu’apporte l’utilisation de Twig

PHPTemplate a été retiré du cœur mais il sera sans doute rapidement disponible en module contribué bien qu’il soit recommandé de ne plus s’en servir pour des raisons de sécurité. Les bon vieux .tpl.php sont maintenant remplacés par des .html.twig.

Même s’il est toujours possible de créer une entrée de thème dont le rendu est généré par une fonction, la méthode par défaut, utilisée dans tout le cœur, est d’utiliser un template Twig.

Les fichiers de template sont de facto attendus dans un dossier templates/, plus besoin de spécifier le chemin vers le fichier de template depuis votre hook_theme().

Un fichier de template ressemble à cela :

<span class="other token"># maintenance-task-list.html.twig
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>visually-hidden<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></span><span class="tag token"><span class="ld token"><span class="punctuation token">{{</span></span> <span class="string token"><span class="punctuation token">'</span>Installation tasks<span class="punctuation token">'</span></span><span class="operator token">|</span><span class="property token">t</span> <span class="rd token"><span class="punctuation token">}}</span></span></span><span class="other token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ol</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>task-list<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></span>
<span class="tag token"><span class="ld token"><span class="punctuation token">{%</span> <span class="keyword token">for</span></span> <span class="property token">task</span> <span class="operator token">in</span> <span class="property token">tasks</span> <span class="rd token"><span class="punctuation token">%}</span></span></span>
<span class="other token">&lt;li</span><span class="tag token"><span class="ld token"><span class="punctuation token">{{</span></span> <span class="property token">task</span><span class="punctuation token">.</span><span class="property token">attributes</span> <span class="rd token"><span class="punctuation token">}}</span></span></span><span class="other token">&gt;</span>
  <span class="tag token"><span class="ld token"><span class="punctuation token">{{</span></span> <span class="property token">task</span><span class="punctuation token">.</span><span class="property token">item</span> <span class="rd token"><span class="punctuation token">}}</span></span></span>
  <span class="tag token"><span class="ld token"><span class="punctuation token">{%</span> <span class="keyword token">if</span></span> <span class="property token">task</span><span class="punctuation token">.</span><span class="property token">status</span> <span class="rd token"><span class="punctuation token">%}</span></span></span><span class="other token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>visually-hidden<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> (</span><span class="tag token"><span class="ld token"><span class="punctuation token">{{</span></span> <span class="property token">task</span><span class="punctuation token">.</span><span class="property token">status</span> <span class="rd token"><span class="punctuation token">}}</span></span></span><span class="other token">)<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span></span><span class="tag token"><span class="ld token"><span class="punctuation token">{%</span> <span class="keyword token">endif</span></span> <span class="rd token"><span class="punctuation token">%}</span></span></span>
<span class="other token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span></span>
<span class="tag token"><span class="ld token"><span class="punctuation token">{%</span> <span class="keyword token">endfor</span></span> <span class="rd token"><span class="punctuation token">%}</span></span></span>
<span class="other token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ol</span><span class="punctuation token">&gt;</span></span></span>

Les avantages de Twig

  • C’est un langage interprété, cela apporte plus de sécurité vis à vis de ce qui peut être fait par les thémeurs. Fini les requêtes SQL au milieu du template.
  • Auto escape par défaut : toute chaîne rendue est filtrée (de la même manière que check_plain() dans Drupal 7).
  • La séparation des responsabilité est plus claire, il n’est plus possible d’écrire de PHP dans les fichiers.
  • Le débug est plus simple, Twig fourni des fonctions qui permettent de trouver les variables et d’identifier les fichiers de template utilisés. Par exemple: la fonction dump().
  • C’est un langage “autonome”, c’est un projet qui mène sa propre vie, vous pouvez lire la documentation dédiée et le réutiliser sur des projets qui utilisent une autre technologie que Drupal.

Pour activer le débug de Twig, modifiez le fichier services.yml modifiez la valeur du paramètre debug de twig à true.

<span class="comment token" spellcheck="true"># services.yml</span>
<span class="atrule key token">parameters</span><span class="punctuation token">:</span>
  <span class="atrule key token">twig.config</span><span class="punctuation token">:</span>
    <span class="atrule key token">debug</span><span class="punctuation token">:</span> <span class="boolean important token">true</span>

Vous pourrez ainsi voir le nom du fichier de template utilisé lors du rendu du contenu ainsi que les suggestions de noms de fichier pour surcharger le template. Il est également possible de désactiver le cache de Twig afin de le forcer à recompiler les templates à chaque fois qu’ils sont modifiés ou à chaque fois qu’ils sont demandés en modifiant respectivement les valeurs auto_reload ou cache du fichier services.yml.

Fonctionnalités courantes

Le moteur de Twig est très performant et extensible. Même s’il ne permet par l’utilisation directe de PHP, il remplace de manière sécuritaire et parfois enrichie les principales structures de contrôle et la gestion de variables. Afin de permettre aux thémeurs d’aller plus loin, Twig implémente aussi un système de fonctions, appelées “filtres” qui permettent de modifier une valeur avant de l’afficher.

Afin de se distinguer pleinement de PHP et HTML, la syntaxe de Twig se base sur un balisage par des accolades. Un appel de type inline se fera entre des doubles accolades et un appel de type block se fera entre une paire de balises délimitées par une accolade et un symbole de pourcentage. À noter que, comme en HTML, un appel de type block peut contenir d’autres appels de type inline. Il est aussi possible d’écrire des commentaires en les encadrant d’une accolade et d’un dièse.

<span class="other token"># somewhere.html.twig</span>

<span class="comment token" spellcheck="true">{# Exemple of inline call #}</span>
<span class="other token">Bienvenue</span> <span class="tag token"><span class="ld token"><span class="punctuation token">{{</span></span> <span class="property token">user</span><span class="punctuation token">.</span><span class="property token">firstname</span> <span class="rd token"><span class="punctuation token">}}</span></span></span><span class="other token">!</span>

<span class="comment token" spellcheck="true">{# Exemple of block call containing inline calls #}</span>
<span class="tag token"><span class="ld token"><span class="punctuation token">{%</span> <span class="keyword token">if</span></span> <span class="property token">label</span> <span class="rd token"><span class="punctuation token">%}</span></span></span>
<span class="other token">&lt;span</span> <span class="tag token"><span class="ld token"><span class="punctuation token">{{</span></span> <span class="property token">label_attributes</span> <span class="rd token"><span class="punctuation token">}}</span></span></span><span class="other token">&gt;</span><span class="tag token"><span class="ld token"><span class="punctuation token">{{</span></span> <span class="property token">label</span> <span class="rd token"><span class="punctuation token">}}</span></span></span><span class="other token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span></span>
<span class="tag token"><span class="ld token"><span class="punctuation token">{%</span> <span class="keyword token">endif</span></span> <span class="rd token"><span class="punctuation token">%}</span></span></span>

<span class="comment token" spellcheck="true">{# We can have
multi-line comments too! #}</span>

Il est donc également possible d’utiliser un des nombreux filtres du système, l’un de ceux ajoutés par Drupal ou encore d’en créer vous même en étendant la classe TwigExtension. Appliquer un filtre se fait très simplement dans un appel inline en utilisant le symbole pipe “|”. Même si c’est assez peu utilisé dans Drupal, il est également possible de filtrer des blocs de contenu.

<span class="other token"># somewhere.html.twig</span>

<span class="tag token"><span class="ld token"><span class="punctuation token">{%</span>  <span class="keyword token">set</span></span> <span class="property token">label</span> <span class="operator token">=</span> <span class="string token"><span class="punctuation token">'</span>My &lt;strong&gt;field&lt;/strong&gt;<span class="punctuation token">'</span></span> <span class="rd token"><span class="punctuation token">%}</span></span></span>

<span class="other token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h1</span><span class="punctuation token">&gt;</span></span></span><span class="tag token"><span class="ld token"><span class="punctuation token">{{</span></span> <span class="property token">label</span><span class="operator token">|</span><span class="property token">striptags</span> <span class="rd token"><span class="punctuation token">}}</span></span></span><span class="other token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h1</span><span class="punctuation token">&gt;</span></span></span>
<span class="comment token" spellcheck="true">{# Outputs &lt;h1&gt;My field&lt;/h1&gt; #}</span>

<span class="tag token"><span class="ld token"><span class="punctuation token">{{</span></span> <span class="string token"><span class="punctuation token">'</span>Translate this<span class="punctuation token">'</span></span><span class="operator token">|</span><span class="property token">t</span> <span class="rd token"><span class="punctuation token">}}</span></span></span>
<span class="comment token" spellcheck="true">{# Outputs the translation of 'Translate this' in the current language #}</span>

<span class="tag token"><span class="ld token"><span class="punctuation token">{%</span> <span class="keyword token">filter</span></span> <span class="property token">upper</span> <span class="rd token"><span class="punctuation token">%}</span></span></span><span class="tag token"><span class="ld token"><span class="punctuation token">{%</span> <span class="keyword token">trans</span></span> <span class="rd token"><span class="punctuation token">%}</span></span></span><span class="other token">Enable</span> <span class="tag token"><span class="ld token"><span class="punctuation token">{{</span></span> <span class="property token">view</span><span class="punctuation token">.</span><span class="property token">name</span> <span class="rd token"><span class="punctuation token">}}</span></span></span><span class="tag token"><span class="ld token"><span class="punctuation token">{%</span> <span class="keyword token">endtrans</span></span> <span class="rd token"><span class="punctuation token">%}</span></span></span><span class="tag token"><span class="ld token"><span class="punctuation token">{%</span> <span class="keyword token">endfilter</span></span> <span class="rd token"><span class="punctuation token">%}</span></span></span>
<span class="comment token" spellcheck="true">{# Outputs the translation of 'Enable @view.name' in the current language and
replaces @view.name then change the result to uppercase #}</span>

Outre toutes les structures de contrôle de base permettant de gérer conditions et boucles, Twig offre également de très nombreuses autres possibilités comme l’inclusion ou l’héritage de templates.

À noter qu'un thème d'exemple existe pour mettre en avant les possilités de Twig dans un contexte "live", il s'agit du thème Pistachio. Il n'a pas vocation à être utilisé en production mais est là à titre d'exemple.

Créer un hook_theme

Peu de choses ont changé en ce qui concerne les Hooks de thème.

On les déclare toujours via le hook_theme() qui garde à peu près les mêmes clefs que dans Drupal 7.

<span class="comment shell-comment token"># happy_alexandrie.module</span>

<span class="comment token" spellcheck="true">/**
* Implements hook_theme().
*/</span>
<span class="keyword token">function</span> <span class="function token">happy_alexandrie_theme</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="token variable">$theme</span> <span class="operator token">=</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">;</span>

  <span class="token variable">$theme</span><span class="punctuation token">[</span><span class="string token">'happy_cover'</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="punctuation token">[</span>
    <span class="string token">'variables'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">[</span><span class="string token">'cover_src'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="string token">''</span><span class="punctuation token">,</span> <span class="string token">'cover_title'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="string token">''</span><span class="punctuation token">]</span><span class="punctuation token">,</span>
  <span class="punctuation token">]</span><span class="punctuation token">;</span>

  <span class="keyword token">return</span> <span class="token variable">$theme</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>

Par défaut, les fichiers templates se placent dans le répertoire templates à la racine du module. Il faut toujours remplacer les undescore (_) par des tiret (-) et l’extension du fichier est maintenant .html.twig. Sachez que les variables sont affichées en les mettant entre double accolade {{ variable }}.

<span class="other token"># templates/happy-cover.html.twig
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
  &lt;img src="</span><span class="tag token"><span class="ld token"><span class="punctuation token">{{</span></span> <span class="property token">cover_src</span> <span class="rd token"><span class="punctuation token">}}</span></span></span><span class="other token">" alt="Cover for</span> <span class="tag token"><span class="ld token"><span class="punctuation token">{{</span></span> <span class="property token">cover_title</span> <span class="rd token"><span class="punctuation token">}}</span></span></span><span class="other token">" /&gt;
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></span>

Une fois déclaré, le Hook de thème peut être utilisé dans un render array. Il suffit d’en indiquer le nom dans la clef #theme de votre render array et de passer vos diverses variables en préfixant leur nom d’un dièse. Toutes variables qui ne seraient pas présente dans le render array héritera de la valeur par défaut définie dans le hook_theme().

<span class="comment shell-comment token"># RemoteCover.php</span>

  <span class="comment token" spellcheck="true">/**
   * This method is the wrapper for each field value.
   */</span>
  <span class="keyword token">public</span> <span class="keyword token">function</span> <span class="function token">viewElements</span><span class="punctuation token">(</span>FieldItemListInterface <span class="token variable">$items</span><span class="punctuation token">,</span> <span class="token variable">$langcode</span> <span class="operator token">=</span> <span class="keyword token">NULL</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    <span class="token variable">$elements</span> <span class="operator token">=</span> <span class="keyword token">array</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
    <span class="keyword token">foreach</span> <span class="punctuation token">(</span><span class="token variable">$items</span> <span class="keyword token">as</span> <span class="token variable">$delta</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="token variable">$item</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
      <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="token variable">$item</span><span class="operator token">-</span><span class="operator token">&gt;</span><span class="property token">value</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
        <span class="comment token" spellcheck="true">// Part calling a theme function.</span>
        <span class="token variable">$elements</span><span class="punctuation token">[</span><span class="token variable">$delta</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="keyword token">array</span><span class="punctuation token">(</span>
          <span class="string token">'#theme'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="string token">'happy_cover'</span><span class="punctuation token">,</span>
          <span class="string token">'#cover_url'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="token variable">$item</span><span class="operator token">-</span><span class="operator token">&gt;</span><span class="property token">value</span><span class="punctuation token">,</span>
          <span class="string token">'#cover_title'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="token variable">$items</span><span class="operator token">-</span><span class="operator token">&gt;</span><span class="function token">getEntity</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="operator token">-</span><span class="operator token">&gt;</span><span class="function token">label</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
        <span class="punctuation token">)</span><span class="punctuation token">;</span>
      <span class="punctuation token">}</span>
    <span class="punctuation token">}</span>
    <span class="keyword token">return</span> <span class="token variable">$elements</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span>

 

Par Artusamak
Julien Dubois

Assister au webinar « Choisir Drupal 8 » le 17 mars 2016.

Assister au webinar « Choisir Drupal 8 » le 17 mars 2016.
mer, 09/03/2016 - 14:32
Bès

Kaliop et Happyculture organisent un webinar le 17 mars à 14h15 au cours duquel Julien Fabre (@julienfabre) et moi-même aborderons le cas du passage à Drupal 8.

Nous évoquerons rapidement les nouveautés de Drupal 8 ainsi que la philosophie avec laquelle il a été développé, puis nous verrons les enjeux d'une migration vers Drupal 8 et comment s'y préparer au mieux.

La présentation n'entrera pas dans les détails techniques d'une migration, mais vous fournira les moyens clés utiles à la prise de décision.

Le webinar durera environ 45 minutes et sera disponible pendant 7 jours après diffusion alors n'hésitez pas à vous inscrire, nous répondrons aussi à vos questions à la fin de la présentation.

Si vous avez besoin de plus pour vos équipes n'hésitez pas à consulter notre formation Drupal 8 pour les développeurs !

Crédit image : Jamie McCaffrey

Catégorie
Par GoZ
Fabien CLEMENT

Vagrant pour Drupal et Symfony

Vagrant pour Drupal et Symfony

Cela fait plus d'un an maintenant que je travaille avec un environnement lamp géré par vagrant/ansible pour drupal/symfony, et je n'ai pas à m'en plaindre.

Passé les premiers moments de galères de performances, on est toujours en dessous de performances d'un vmware ou d'un intégration sans vm (il faudrait vérifier ça sur un linux sans vm), mais les performances restent bonnes pour un travail quotidien, même avec xdebug d'activé.

GoZ
ven 04/03/2016 - 16:45

Par flocondetoile
Adhérent

Drupal  8 : l'envoi de mails sous toutes les coutures

Par défaut, tous les mails envoyés par Drupal 8 le sont en texte brut. Pour envoyer des mails en HTML, que ce soit pour des newsletters, ou encore tout simplement pour les différentes notifications afin de les enrichir quelque peu, il est nécessaire de modifier le système d'envoi par défaut des courriers électroniques, ou encore d'en utiliser un autre. Faisons un tour d'horizon du système d'envoi des courriers électroniques de Drupal 8. Cela est utile à plus d'un titre. Bien sûr si nous avons besoin de réaliser un envoi programmatique, mais aussi pour mieux comprendre le mécanisme général et donc le fonctionnement des différents modules disponibles pour réaliser cette tache.

Par Artusamak
Julien Dubois

Drupal 8 : l'API de rendu (Render API)

Drupal 8 : l'API de rendu (Render API)
mer, 02/03/2016 - 10:10
Artusamak

Cet article est extrait de notre formation drupal 8 "de Drupal 7 à Drupal 8" à destination des développeurs. N'hésitez pas à nous contacter pour en savoir plus !

Afin de garder le plus de flexibilité possible dans la gestion du rendu, Drupal s’appuie sur le principe des Render arrays ou Renderable arrays introduit en D7. Dans Drupal 8 on a complètement remplacé l’appel à la fonction theme(). L’idée est d’assembler chaque portion de la page dans un tableau décrivant le type et le contenu de chaque donnée. En retardant au maximum le moment où ce tableau est converti en HTML, il devient possible pour chaque module de modifier la mise en forme des données à sa convenance.

Les tableaux se multipliant au vue du nombre d’éléments constituant une page, on peut comparer l’agglomérat de ces renderable arrays à un arbre de rendu qui serait l’équivalent du DOM d’une page web.

Il ne faut pas confondre l’API de rendu et l’API des formulaires même s’ils utilisent le même principe de tableaux décrivant leur contenu avec des propriétés.

Un renderable array combinant plusieurs éléments ressemble à cela :

<span class="token variable">$page</span> <span class="operator token">=</span> <span class="punctuation token">[</span>
  <span class="string token">'#type'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="string token">'page'</span><span class="punctuation token">,</span>
  <span class="string token">'content'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">[</span>
    <span class="string token">'system_main'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">[</span>…<span class="punctuation token">]</span><span class="punctuation token">,</span>
    <span class="string token">'another_block'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">[</span>…<span class="punctuation token">]</span><span class="punctuation token">,</span>
    <span class="string token">'#sorted'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="constant token">TRUE</span><span class="punctuation token">,</span>
  <span class="punctuation token">]</span><span class="punctuation token">,</span>
  <span class="string token">'sidebar_first'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">[</span>
    …
  <span class="punctuation token">]</span><span class="punctuation token">,</span>
<span class="punctuation token">]</span><span class="punctuation token">;</span>

Voici un exemple le plus simpliste possible d’un render array :

<span class="token variable">$render_array</span> <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'#markup'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> "<span class="markup token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span></span>Some text<span class="markup token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></span>"<span class="punctuation token">]</span><span class="punctuation token">;</span>

Les propriétés que l’on trouve le plus souvent au sein d’un renderable array sont les suivantes :

#type

Valeur correspondant à un RenderElement (voir ci-dessous).

#cache

Attributs pour la cachabilité du tableau (voir chapitre sur le cache).

#markup

Valeur simple pour du HTML.

#prefix / #suffix

Chaîne à afficher avant / après le rendu du tableau.

#pre_render / #post_render

Tableaux de fonctions exécutée avant le rendu des données ou après. Fait pour modifier des données (#pre_render) ou ajuster l’affichage des données (#post_render).

#theme

Nom de la clé de thème à utiliser pour mettre en forme les données qui lui sont passées.

#theme_wrappers

Tableau de fonctions de thème à utiliser pour gérer le rendu autour des enfants.

 

C’est l’id des Plugins de type RenderElement qui liste les différentes valeurs pouvant être données à l’attribut #type. Ces plugins permettent d’avoir une notation raccourcie de renderable array. On verra par exemple le #type more_link qui permet d’afficher un lien “Voir plus” sans avoir à écrire trop de lignes dans le tableau. N’hésitez pas à créer les vôtres si vous avez à manipuler les structures complexes de vos données.

Dans la majorité des cas, vous ne spécifierez aucun #type et utiliserez #theme pour mettre en forme vos données.
Les clés de thème sont à déclarer via le hook_theme(). Il n’a presque pas changé depuis Drupal 7.  Quand des variables sont nécessaires pour afficher leur contenu, il suffit de les passer comme propriétés supplémentaires pour les transmettre comme dans l’exemple qui suit.

<span class="comment shell-comment token"># theme.inc</span>
<span class="comment shell-comment token"># Exemple de déclaration</span>

<span class="keyword token">function</span> <span class="function token">drupal_common_theme</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="keyword token">return</span> <span class="keyword token">array</span><span class="punctuation token">(</span>
    <span class="string token">'item_list'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="keyword token">array</span><span class="punctuation token">(</span>
      <span class="string token">'variables'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="keyword token">array</span><span class="punctuation token">(</span>
        <span class="string token">'items'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="keyword token">array</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
        <span class="string token">'title'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="string token">''</span><span class="punctuation token">,</span>
        <span class="string token">'list_type'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="string token">'ul'</span><span class="punctuation token">,</span>
        <span class="string token">'wrapper_attributes'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="keyword token">array</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
        <span class="string token">'attributes'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="keyword token">array</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
        <span class="string token">'empty'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="keyword token">NULL</span><span class="punctuation token">,</span>
        <span class="string token">'context'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="keyword token">array</span><span class="punctuation token">(</span><span class="punctuation token">)</span>
      <span class="punctuation token">)</span><span class="punctuation token">,</span>
    <span class="punctuation token">)</span><span class="punctuation token">,</span>
  <span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>
<span class="comment shell-comment token"># BookController.php</span>
<span class="comment shell-comment token"># Exemple d’utilisation</span>

<span class="keyword token">public</span> <span class="keyword token">function</span> <span class="function token">bookRender</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="token variable">$book_list</span> <span class="operator token">=</span> <span class="keyword token">array</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">foreach</span> <span class="punctuation token">(</span><span class="token variable">$this</span><span class="operator token">-</span><span class="operator token">&gt;</span><span class="property token">bookManager</span><span class="operator token">-</span><span class="operator token">&gt;</span><span class="function token">getAllBooks</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="keyword token">as</span> <span class="token variable">$book</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
   <span class="token variable">$book_list</span><span class="punctuation token">[</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="token variable">$this</span><span class="operator token">-</span><span class="operator token">&gt;</span><span class="function token">l</span><span class="punctuation token">(</span><span class="token variable">$book</span><span class="punctuation token">[</span><span class="string token">'title'</span><span class="punctuation token">]</span><span class="punctuation token">,</span> <span class="token variable">$book</span><span class="punctuation token">[</span><span class="string token">'url'</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>
<span class="keyword token">return</span> <span class="keyword token">array</span><span class="punctuation token">(</span>
   <span class="string token">'#theme'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="string token">'item_list'</span><span class="punctuation token">,</span>
   <span class="string token">'#items'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="token variable">$book_list</span><span class="punctuation token">,</span>
   <span class="string token">'#cache'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">[</span>
     <span class="string token">'tags'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> \<span class="package token">Drupal</span><span class="punctuation token">:</span><span class="punctuation token">:</span><span class="function token">entityManager</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="operator token">-</span><span class="operator token">&gt;</span><span class="function token">getDefinition</span><span class="punctuation token">(</span><span class="string token">'node'</span><span class="punctuation token">)</span><span class="operator token">-</span><span class="operator token">&gt;</span><span class="function token">getListCacheTags</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
   <span class="punctuation token">]</span><span class="punctuation token">,</span>
<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>

Il ne faut pas confondre un type de rendu et une clé de thème. Le premier va vous permettre de manipuler des données et de conserver un render array là où la seconde va vous retourner du HTML.

Suggestions, wrappers et dérivés

Les clés de thème peuvent aussi être utilisées pour générer le rendu d’un ou plusieurs wrappers. On utilise dans ce cas l’attribut #theme_wrappers d’un render array. Petite nouveauté dans ce cas par rapport à Drupal 7 : chaque entrée de #theme_wrappers peut désormais surcharger les valeurs passées au #theme principal si nécessaire. Exemple :

<span class="comment shell-comment token"># anywhere.php</span>

<span class="token variable">$build</span> <span class="operator token">=</span> <span class="punctuation token">[</span>
  <span class="string token">'#theme'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="string token">'my_theme_function'</span><span class="punctuation token">,</span>
  <span class="string token">'#some_var'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="string token">'Some value'</span><span class="punctuation token">,</span>
  <span class="string token">'#other_var'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="string token">'Other value'</span><span class="punctuation token">,</span>
  <span class="string token">'#theme_wrappers'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">[</span>
    <span class="string token">'first_wrapper_theme_function'</span><span class="punctuation token">,</span>
    <span class="string token">'second_wrapper_theme_function'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">[</span>
      <span class="string token">'#some_var'</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="string token">'Overriden value'</span><span class="punctuation token">,</span>
    <span class="punctuation token">]</span><span class="punctuation token">,</span>
  <span class="punctuation token">]</span><span class="punctuation token">,</span>
<span class="punctuation token">]</span><span class="punctuation token">;</span>

Dans l’exemple ci-dessus, le template first_wrapper_theme_function recevra les paramètres “Some value” et “Other value” alors que le template second_wrapper_theme_function recevra “Overriden value” et “Other value”.

Pour finir, de manière bien plus simple que dans Drupal 7 il est possible de dériver des templates. En effet, chaque double underscore dans le nom d’une clé thème que l’on tente d’invoquer est considéré comme un séparateur. Ainsi, si le nom complet de la clé de thème n’est pas déclaré, on retire la dernière partie et on continue ainsi jusqu’à retomber sur une clé de thème existant. Côté noms de fichiers de template, on remplace les underscores par des tirets.
Par exemple $build = ['#theme' =&gt; 'my_theme_function__node__article']; tenterait d’abord de charger my-theme-function--node--article.html.twig, puis my-theme-function--node.html.twig et enfin my-theme-function.html.twig.

Pour chaque clé de thème, il est possible d’implémenter le hook hook_theme_suggestions_HOOK() afin de proposer des suggestions en fonction des variables passées au template.

Par exemple :

<span class="comment shell-comment token"># my_module.module</span>

<span class="comment token" spellcheck="true">/**
* Implements hook_theme_suggestions_HOOK().
*/</span>
<span class="keyword token">function</span> <span class="function token">my_module_theme_suggestions_node</span><span class="punctuation token">(</span><span class="keyword token">array</span> <span class="token variable">$variables</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="token variable">$suggestions</span> <span class="operator token">=</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="token variable">$variables</span><span class="punctuation token">[</span><span class="string token">'#node'</span><span class="punctuation token">]</span><span class="operator token">-</span><span class="operator token">&gt;</span><span class="property token">type</span> <span class="operator token">==</span> <span class="string token">'article'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    <span class="token variable">$suggestions</span><span class="punctuation token">[</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="string token">'node__article__'</span> <span class="punctuation token">.</span> <span class="token variable">$variables</span><span class="punctuation token">[</span><span class="string token">'#node'</span><span class="punctuation token">]</span><span class="operator token">-</span><span class="operator token">&gt;</span><span class="property token">field_article_type</span><span class="operator token">-</span><span class="operator token">&gt;</span><span class="property token">value</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span>
  <span class="keyword token">return</span> <span class="token variable">$suggestions</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>

Le rendu final (conversion des Render arrays vers du HTML) est effectué par des Plugins de type Renderer. Le cœur définit 4 types de Renderer : HTML, AJAX, Dialog et Modal. Dans la plupart des requêtes, la réponse retournera du HTML. Sa génération se passe en 3 grandes étapes.

  • La première consiste à passer dans HtmlRenderer::prepare() qui s’assure que les données sont formatées correctement (présence d’un #type =&gt; ‘page’, ajout des attachments si besoin).
  • La seconde se déroule dans HtmlRenderer::renderResponse() qui encapsule le cœur de la page dans un #type =&gt; ‘html’ pour avoir les tags <html>, <head>, <body>, <scripts>, etc.
  • Et enfin on passe tout cela dans la classe Renderer qui se charge de sortir tout cela en HTML avant de le renvoyer comme réponse (Response).

Le cheminement complet de rendu d’une page est décrit dans cette page de documentation https://www.drupal.org/developing/api/8/render/pipeline, je vous invite à la consulter si vous êtes curieux.

Alors, quand utiliser les render arrays ? C’est simple, tout le temps ! Si vous êtes en train de générer une réponse qui met en forme des données, vous devez utiliser un render array.

Par Artusamak
Julien Dubois

Drupal 8 : Créer un formateur de champ

Drupal 8 : Créer un formateur de champ
lun, 29/02/2016 - 11:28
Artusamak

Cet article est extrait de notre formation drupal 8 "de Drupal 7 à Drupal 8" à destination des développeurs. N'hésitez pas à nous contacter pour en savoir plus !

Voyons maintenant comment se passe dans Drupal 8 l'une des actions que l'on fait le plus lors de la réalisation de projets : la création de formateurs de champs.
L’essentiel des
Hooks qui étaient nécessaires en Drupal 7 sont devenus des méthodes à implémenter dans une classe.

Les Hooks utilisés pour implémenter un formateur de champ étaient les suivants :

Nom du hook Drupal 7

Equivalent Drupal 8

hook_field_formatter_info()

Annotation de type @FieldFormatter
Namespace : Plugin\Field\FieldFormatter

A noter que les paramètres par défaut qui vivaient dans le hook D7 ont maintenant leur propre méthode FormatterInterface::defaultSettings().

hook_field_formatter_view()

FormatterInterface::viewElements()

hook_field_formatter_settings_form()

FormatterInterface::settingsForm()

hook_field_formatter_settings_summary()

FormatterInterface::settingsSummary()

hook_field_formatter_prepare_view()

FormatterInterface::prepareView()

La création d’un nouveau formateur de champ passe par la création d’un plugin, qui va étendre la classe abstraite Drupal\Core\Field\FormatterBase.

Cette classe implémente l’interface Drupal\Core\Field\FormatterInterface qui décrit les méthodes à surcharger et leur but.

Les nouveaux Plugins à créer doivent être placés dans le répertoire /src/Plugin/ de votre module. Un Plugin de formateur de champ doit être ensuite mis dans Field/FieldFormatter.

Il faut donc créer le fichier qui contiendra votre classe dans /src/Plugin/Field/FieldFormatter. Le nom du fichier doit correspondre au nom de la classe suivi de l’extension .php.

Il est important de respecter les noms et placements car cela est utilisé par le chargement automatique (PSR-4) de Drupal pour charger les classes au moment nécessaire.

Nous allons pour cet exercice appliquer la recette pour créer un formateur, nous verrons dans les chapitres suivants les particularités associées aux Plugins.

Implémentation du formateur

La première chose à faire dans le fichier est de définir le Namespace courant (toujours pour le chargement automatique et PSR-4).

<span class="keyword token">namespace</span> <span class="package token">Drupal<span class="punctuation token">\</span></span><span class="markup token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>module</span><span class="punctuation token">&gt;</span></span></span>\<span class="package token">Plugin<span class="punctuation token">\</span>Field<span class="punctuation token">\</span>FieldFormatter</span><span class="punctuation token">;</span>

Ensuite, nous allons dire à Drupal que nous déclarons une classe d’un plugin. Cette partie remplace le hook_field_formatter_info() et se fait à l’aide d’une annotation de type @FieldFormatter.

<span class="comment token" spellcheck="true">/**
* Plugin implementation of the 'remote_cover' formatter.
*
* @FieldFormatter(
*   id = "remote_cover",
*   label = @Translation("Remote Cover"),
*   field_types = {
*     "string"
*   },
* )
*/</span>
  • id attend un nom machine unique.
  • label est la version humaine du nom visible dans la configuration de l’affichage des entités.
  • field_types liste les types de champs sur lesquels ce formateur est applicable.

Puis on déclare notre classe qui étend Drupal\Core\Field\FormatterBase.

<span class="keyword token">class</span> <span class="class-name token">RemoteCover</span> <span class="keyword token">extends</span> <span class="class-name token">FormatterBase</span> <span class="punctuation token">{</span>

Il ne reste plus qu’à implémenter les méthodes dont vous avez besoin comme viewElements() ou prepareView().

On notera la présence d’une méthode view() possédant une implémentation par défaut dans la classe abstraite Drupal\Core\Field\FormatterBase. Cette méthode s’occupe de faire le rendu du champ complet (rajout du label et d’autres informations). Il est donc possible pour un formateur de champs de la surcharger pour modifier le comportement par défaut des champs Drupal dans un cas particulier. La modification d’un formateur existant pour adapter son comportement se voit simplifiée grâce à la programmation objet. Il suffit maintenant d’étendre un formateur existant au lieu de Drupal\Core\Field\FormatterBase et de modifier uniquement le code nécessaire en appelant la méthode parente si nécessaire.

Par GoZ
Fabien CLEMENT

Drupal 8 hébergé chez 1and1 mutualisé

Drupal 8 hébergé chez 1and1 mutualisé

Les hébergements mutualisés sont loin d'être des foudres de guerre, et encore moins pratiques pour héberger de manière pérenne un site.

Toutefois, les prix très bas de ce type de solutions s'avèrent intéressant pour l'hébergement de petits sites ou blogs personnels.

Tandis que Drupal 7 en est à sa version 7.43 et que 1and1 propose via son App Center d'installer Drupal en version 7.39 (Oo?), leur offre mutualisé et l'intégration de PHP7 permet néanmoins l'installation manuelle d'un Drupal 8 (à jour).

GoZ
lun 29/02/2016 - 08:56

Pages