Comme dit le proverbe, billet du mardi, billet symfony… Bon on va dire que c’est un nouveau proverbe mais pour le coup, on va continuer cet adage avec au programme aujourd’hui les possibilités offertes par symfony pour modifier le code HTML construit par ses fameux widgets de son système de formulaire.

Plus mon nombre de projets défile sous Symfony et plus j’essaye d’éviter de faire des choses hors framework, mais plutôt de voir comment on pourrait le régler via le framework. Avant, quand un problème se présentait, j’optais souvent pour une solution alternative quitte à mettre de côté pour une petite fonction la philosophie Symfony. Mais voilà, je l’aime moi, cette philosophie et au fur et à mesure, j’ai décidé de mettre de plus en plus les mains dans la cambouis et les yeux dans le code source, pour résoudre mes problèmes.

Récemment, j’étais sur un petit système de sondage très basique qui se présentait donc sous cette forme grâce au complément sfWidgetFormChoice et sfWidgetFormSelectCheckbox:

$this->widgetSchema['reponses'] = new sfWidgetFormChoice(array(
        'multiple' => true,
      	'expanded' => true,
        'choices' => $reponses
      ));


 Oula
 Ola
 Woot
 Wagli
 Plop

Ca fonctionne parfaitement, mais voilà à l’intégration, j’avais 2 checkbox par ligne… Et pour réaliser ça, j’avais besoin de modifier le code HTML que Symfony m’avait gentiment généré.

Et donc là, je me suis lancé dans une session de formatting grâce au sfFormatter. En effet, Symfony intègre en règle générale un code HTML par défaut, pour un peu tout, mais nous laisse parfaitement la possibilité de le modifier. Ici, je veux juste pouvoir rajouter une class CSS différente pour les éléments pair et impair. On va donc réécrire la fonction de formatting du widget comme ceci:

$this->widgetSchema['reponses'] = new sfWidgetFormChoice(array(
        'multiple' => true,
      	'expanded' => true,
        'choices' => $reponses,
        'renderer_options' => array('formatter' => array($this, 'formatter')) // Ici on passe l'option formatter avec comme valeur la fonction formatter que l'on va ajouter à notre formulaire
      ));

Puis maintenant, on ajoute la fameuse fonction. J’ai choisi ici de la laisser dans mon formulaire, on peut très bien la mettre où on veut:

public function formatter($widget, $inputs)
{
    $rows = array();
    foreach ($inputs as $i => $input)
    {
      $rows[] = $widget->renderContentTag(
        	  'li', 
                  $input['input'].$widget->getOption('label_separator').$input['label'],
                  ($i%2>0?array('class' => 'pair'):array('class' => 'impair')) //Seule réelle modification par rapport à la fonction définie de base dans la classe sfWidgetFormSelectCheckbox
                );
    }
 
    return $widget->renderContentTag('ul', implode($widget->getOption('separator'), $rows), array('class' => 'radio_list'));
}


 Oula
 Ola
 Woot
 Wagli
 Plop

Je peux maintenant appliquer mon CSS pour faire la modification demandée à l’origine! Cette astuce fonctionne pour tous les widgets qui embarque du html autre que le simple tag input.

Amicalement Web - Astuces et Bons plans dans le développement web » formatter

Personnaliser le code HTML d’un widget symfony