Les blog de la Famille Rotta

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

  • Augmenter la taille
  • Taille par défaut
  • Diminuer la taille
Home Michel Rotta - Informatique symfony 1.4 Des "button list" avec des images en non du texte

Des "button list" avec des images en non du texte

Envoyer Imprimer PDF

Symfony est réellement un framework très souple. Une question posée était "comment mettre en place une liste de bouton radio avec des images à la place du texte". En fait, c'est relativement simple à faire et ne demande qu'un nouveau widget dans le framework. A partir de là, je pense que vous devriez pouvoir faire des listes à tout va !

Mettre des images dans une liste de bouton radio

Pour commencer il vous faut créer un nouveau widget dans le dossier lib/widget de votre projet (le répertoire n'existe pas de base, je vous fais confiance pour le créer).

Création d'un widget d'affichage spécifique

Dans ce dossier, créer un fichier php du nom de : "mrWidgetFormSelectImageRadio.class.php" le contenu est ci-dessous :

<?php

/**
 * Description of mrWidgetFormSelectImageRadio
 *
 * @author Michel Rotta
 */
class mrWidgetFormSelectImageRadio extends sfWidgetFormSelectRadio
{

    protected function formatChoices( $name, $value, $choices, $attributes )
    {
        $inputs = array( );
        foreach ( $choices as $key => $option )
        {
            $baseAttributes = array(
                'name' => substr( $name, 0, -2 ),
                'type' => 'radio',
                'value' => self::escapeOnce( $key ),
                'id' => $id = $this->generateId( $name, self::escapeOnce( $key ) ),
            );

            if ( strval( $key ) == strval( $value === false ? 0 : $value ) )
            {
                $baseAttributes[ 'checked' ] = 'checked';
            }

            $inputs[ $id ] = array(
                'input' => $this->renderTag( 'input', array_merge( $baseAttributes, $attributes ) ),
                'label' => $this->renderContentTag( 'img',
                        null,
                        array(
                            'for' => $id,
'src' => self::escapeOnce($option),
'title' => self::escapeOnce($option),
'alt' => self::escapeOnce($option)
                        ) ),
            );
        }

        return call_user_func( $this->getOption( 'formatter' ), $this, $inputs );
    }
}

Toute l'astuce consiste à modifier le rendu du label qui retourne non plus un label mais un img. J'ai gardé le nom label dans le tableau pour ne par avoir à réécrire la méthode formatter() de base et qui attend un paramètre "label" dans son tableau en entrée.

Mise en œuvre de notre widget dans notre form

Pour utiliser, il faut un rien modifier votre widget de déclaration de la liste, il s'écrit :

        $this->setWidget( 'image_id', new sfWidgetFormDoctrineChoice( array(
'model' => $this->getRelatedModelName( '<NomDeMonModele' ),
'renderer_class' => 'mrWidgetFormSelectImageRadio',
'add_empty' => false
) ) );

Le paramètre "render_class" permet de préciser la classe à utiliser pour rendre la liste. Ici, nous mettons le nôtre. Penser à remplacer <NomDeMonModele> par le nom du modèle qui va retourner les données à mettre dans la liste.

Préparer les données à afficher

Dernière chose, vous devez modifier / rajouter à votre modèle une méthode __toString() qui vous retourne le nom et le chemin précis d'accès à vos fichier d'images.

 

Et vous n'avez plus qu'à admirer votre formulaire.

 

Ajouter un Commentaire

Code de sécurité
Rafraîchir

Connexion

Connectés

Nous avons 4 invités en ligne