Créer un nouveau bloc (chapitre 1)

Nous allons apprendre à créer un nouveau bloc en nous concentrant (pour le moment) sur le côté graphique.

Certaines parties du code où la licence présente la mention OSL (open source licence) en entête ne peuvent être modifiées sans en redistribuer le code sauf si vous acceptez de payer une licence commerciale.

Je tiens aussi à rappeler que ce blog fait office de carnet de notes, toutes les informations contenues ici ne sont pas vérifiées. N'hésitez pas à rapporter la moindre erreur dans les commentaires (aucune inscription demandée)

Pour ce tutoriel, nous allons essayer de concevoir un bloc permettant de créer un formulaire de contact.

Copie du bloc Form Add

Nous allons reprendre le bloc formadd qui correspond à peu de choses près à ce que nous voulons créer.

Pour cela, nous copions le dossier /modules/core/blocks/formadd/ vers /modules/core/blocks/contactform

Un bloc contient plusieurs fichiers:
block.php : Contient la partie fonctionnelle
icon.png : l'icône qui s'affichera dans le menu
view.php : Affichage du bloc dans les pages
adminView.php: (optionnel) Contient la page de configuration du bloc
script.js: (optionnel) Décrit les parties accessible dans Design
default.css: (optionnel) CSS par défaut

Renommage du bloc Form Add

Modifions le fichier block.php
 * @title Contact Form
 * @description displays an contact form
 * @block_category database
(inutile de modifier la catégorie)

Bien qu'ils s'agissent de commentaires cette partie à une influence sur l'interface d'administration.


Il faut aussi modifier le nom de la classe:
class contactform extends \block {


Ainsi que le fichier script.js
function block_contactform() {
this.name = "contactform";

Voilà nous avons un nouveau bloc fonctionnel

Si le back-office se met à charger indéfiniment, vérifier votre console Javascript et les logs d'erreur d'apache.

Évidemment, nous allons aussi créer une nouvelle icône de la taille par défaut: 42x42

Voilà nous avons notre nouveau bloc, il fonctionne comme Form Add.

Modifier l'apparence de notre bloc

Modification du CSS

Commençons par modifier l'apparence de notre bloc afin d'obtenir un design de formulaire de contact de base visuellement acceptable.

Afin de pouvoir le faire, il nous faut créer un fichier default.css dans /modules/core/blocks/contactform
Pour savoir quelle partie nous pouvons modifier, allons chercher l'information dans script.js

this.stylableElements = {
"form":"form",
"form parts":"form div",
"labels":"label",
"inputs":"input",
"textareas":"textarea",
"selects":"select",
"submit button":".submit",
"notification":".notify",
"positive notification":".positive",
"negative notification":".negative"
    }

Ici, nous pouvons voir tous les champs modifiables dans l'interface d'administration.

Il nous suffit de récupérer la partie droite dans notre fichier default.css

form{}
form div {}
label {}
input {}
textarea {}
select {}
.submit {}
.notify {}
.positive {}
.negative {}

Tout ce que nous changerons dans ce fichier sera appliqué par défaut lorsque l'on créera un nouveau bloc.

Après modification de nos balises CSS voilà ce que donne notre formulaire de contact.
default.css

Nous pouvez très bien élaborer le design directement dans l'interface d'administration de Parsimony et ensuite récupérer le code CSS

Modification de l'HTML

Pour commencer, nous allons changer le texte qui est affiché par défaut lors de l'envoi d'un formulaire

Dans block.php, la fonction public function init() {} définit la configuration par défaut de notre bloc

Modifions les messages par défaut de succès et d'échec lors de l'envoi du formulaire de contact.
$this->setConfig('success', 'Your message has been submitted');
$this->setConfig('fail', 'Error: Try to resend the message');

Puis nous allons changer le texte du bouton d'envoi par défaut

Dans block.php, la fonction public function generateViewAction($module,$entity) {} génère le code par défaut de la vue.

$html .= "\t".'<input type="submit" value="<?php echo t(\'Send your mail\', FALSE); ?>" name="add" class="submit">'.PHP_EOL;

Nous changeons le texte par défaut du bouton submit afin qu'il affiche "Send your email" (envoyer votre email)
À savoir: t('') est une fonction qui affiche une traduction si elle existe dans /modules/core/locale

Nous pouvons très bien remodifier ces informations depuis l'interface d'administration, il ne s'agit que du texte par défaut.

Et voilà, nous avons un bloc qui nous permet de générer des formulaires de contacts rapidement.

Dans le prochain chapitre, nous allons rajouter des fonctionnalités à notre bloc: la possibilité d'envoyer des emails.