[Zend_Form] Ajout d'un attribut dans le decorator 'Label' (but : aligner à droite)

**el_teedee** · 15/07/2008, 15h03

Salut à tous,

je suis nouveau sur php, et par la même occasion sur ZF (c'est ma 2ème semaine), donc indulgence si je dis des grosses boulettes (je viens du mon de Java, et ai quelques notions de MVC)

J'ai regardé les messages du forum, mais je n'ai pas trouvé le problème que je rencontre.

Mon but est de faire un formulaire (de 6 champs + 6 label), dans un tableau, sur 2 lignes (3 input + labels par ligne), les labels étant alignés à droite, et les input à gauche. Ceci est fait en utilisant 2 subForm, dont chacun d'eux possède un decorator qui l'entoure d'un <tr>.

Ci dessous mon code actuel, légèrement nettoyé pour des questions de lisibilité :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<?php
class PersonneForm extends Zend_Form {
 
    public function __construct($options = null) {
 
        parent :: __construct($options);
        $this->setName('personne');
 
        $this->setDecorators(array(
            'FormElements',
            array('HtmlTag', array('tag' => "table")),
            'Form'
        ));
 
        /**************************************
                    INPUT TEXT : CIVILITE
        **************************************/
        $selectcivilite = new Zend_Form_Element_Select('civilite');
        ...
        Les 5 autres inputs + les boutons submit et annuler
        ...
 
        $subForm1 = new Zend_Form_SubForm();
        $this->addSubForm($subForm1, 'subform1');
 
        $subForm2 = new Zend_Form_SubForm();
        $this->addSubForm($subForm2, 'subform2');
 
        /**************************************
          DECORATOR : permet de mettre un <tr></tr> pour regrouper plusieurs champs
        **************************************/
        $this->setSubFormDecorators(array(
            'FormElements',
            array(array('tr' => 'HtmlTag'), array('tag' => "tr")),
        ));
 
        /**************************************
            AJOUT DES INPUT AU FORMULAIRE
        **************************************/
        // Les 3 champs sur la première ligne
        $subForm1->addElements(array (
            $selectcivilite,
            $nom,
            $prenom,
        ));
        // Les 3 champs suivants sur la 2ème ligne
        $subForm2->addElements(array (
            $dateNaissance,
            $lieuNaissance,
            $nationalite,
        ));
 
        /**************************************
           DOIT SE FAIRE APRES LA DECLARATION DES FORM ELEMENT
         **************************************/
        $inpuDecorator = (array(
            'ViewHelper',
            'Errors',
            array(array('data' => 'HtmlTag'), array('tag' => 'td', 'class' => 'inputTd', 'style' => 'text-align: left')),
            array(array('data2' => 'Label'), array('tag' => 'td', 'class' => 'labelTd')),
        ));
 
        $subForm1->setElementDecorators($inpuDecorator);
        $subForm2->setElementDecorators($inpuDecorator);
 
    }
}

Mon problème se situe au niveau des labels. Je souhaiterais que le td qui les entoure soit déclaré avec une classe css, 'labelTd'. Cela marche très bien pour le <td> contenant le input (class 'inputTd'). En gros, c'est pour aligner les labels à droite, et aligner les input à gauche.

Malheureusement, je ne comprends pas pourquoi les deux lignes suivantes qui sont strictement les mêmes, ne fonctionnent pas dans les deux cas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
array(array('data' => 'HtmlTag'), array('tag' => 'td', 'class' => 'inputTd', 'style' => 'text-align: left')),
array(array('data2' => 'Label'), array('tag' => 'td', 'class' => 'labelTd')),

Plutôt que de partir dans la description du problème qui risque de ne pas être clair, voici le code html pondu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<form id="personne" enctype="application/x-www-form-urlencoded" action="" method="post"><table>
<tr>
<td><label for="subform1-civilite" class="labelTd optional">Civilité *</label></td>
<td class="inputTd" style="text-align: left">
<select name="subform1[civilite]" id="subform1-civilite">
    <option value="1" label="Madameuh">Madameuh</option>
    <option value="2" label="Mademoiselle">Mademoiselle</option>
    <option value="3" label="Monsieur">Monsieur</option>
</select></td>
<td><label for="subform1-nom" class="labelTd optional">Nom *</label></td>
<td class="inputTd" style="text-align: left">
<input type="text" name="subform1[nom]" id="subform1-nom" value=""></td>
<td><label for="subform1-prenom" class="labelTd optional">Prénom *</label></td>
<td class="inputTd" style="text-align: left">
<input type="text" name="subform1[prenom]" id="subform1-prenom" value=""></td></tr>
<tr>
<td><label for="subform2-dateNaissance" class="labelTd optional">Date de naissance *</label></td>
<td class="inputTd" style="text-align: left">
<input type="text" name="subform2[dateNaissance]" id="subform2-dateNaissance" value=""></td> <td><label for="subform2-lieuNaissance" class="labelTd optional">Lieu de naissance</label></td>
<td class="inputTd" style="text-align: left">
<input type="text" name="subform2[lieuNaissance]" id="subform2-lieuNaissance" value=""></td>
<td><label for="subform2-nationalite" class="labelTd optional">Nationalité</label></td>
<td class="inputTd" style="text-align: left">
<input type="text" name="subform2[nationalite]" id="subform2-nationalite" value=""></td></tr></table></form>

La classe css 'inputTd' vient bien se positionner sur le <td> alors que 'labelTd' (déclaré de la même façon, et c'est peut-être ça le problème) vient se positionner sur l'élément label, et pas sur le td. Donc mon text-align: right n'a aucun effet car doit être sur un td

quelqu'un aurait une idée, ou a déjà rencontré ce problème ?

Merchi !

Edit : apparemment, cela vient d'une différence d'implémentation de l'array options entre HtmlTag.php et Label.php. L'un prend l'option ['class'] et la met sur le ['tag'] c'est le cas de HtmlTag, mais la classe Label prend cette ['class'] et la met de toute façon sur la balise <label> et non pas sur l'éventuel tag entourant.
Ma question reste donc d'actualité et est-ce possible ?

**el_teedee** · 15/07/2008, 15h40

Bon,

ayant déjà travaillé avec ce genre de framework en Java, je me rappelle avoir souvent du aller le modifier en interne pour qu'il réponde à mes besoins, c'est donc ce que j'ai fait ici.

Pouvez-vous me dire ce que vous en pensez à tout point de vue ?

La classe Label.php, prend une nouvelle option classTag, et l'ajoutera si un tag est passé :

Extrait de Label.php non modifié (ligne 303) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
f (null !== $tag) {
    require_once 'Zend/Form/Decorator/HtmlTag.php';
    $decorator = new Zend_Form_Decorator_HtmlTag();
    $decorator->setOptions(array('tag' => $tag));
    $label = $decorator->render($label);
}

Extrait de Label.php modifié :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
if (null !== $tag) {
    require_once 'Zend/Form/Decorator/HtmlTag.php';
    $decorator = new Zend_Form_Decorator_HtmlTag();
    // Par défaut :
    //$decorator->setOptions(array('tag' => $tag));
    if (!empty($options) && isset($options['classTag'])) {
        $classTag = $options['classTag'];
        $decorator->setOptions(array('tag' => $tag, 'class' => $classTag));
    } else {
        $decorator->setOptions(array('tag' => $tag));
    }
 
    $label = $decorator->render($label);
}

Edit : cette solution n'est pas bonne, car elle me génère un code non valide. L'option classTag se retrouve à la fois correctement dans le td qui entoure, mais aussi dans le label sous la forme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<td class="labelTd"><label for="subform1-nom" classTag="labelTd" class="labelClasse optional">Nom *</label></td>

Message d'erreur du validateur html : line 22 column 60 - Erreur: there is no attribute "classTag"

De toute façon, ça ne me plaisait pas de toucher au corps du framework pour si peu

**ptitjib** · 03/10/2011, 20h02

Bonjour,

Ajouter au début de votre form, dans le init par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$view = $this->getView();
 $view->dojo()->javascriptCaptureStart(); ?>
   dojo.addOnLoad(
    function () {
     dojo.query('LABEL').forEach(function(node) {
      dojo.style(node.parentNode, 'text-align', 'right');
      dojo.style(node.parentNode, 'padding-right', '5px');
      dojo.addClass(node.parentNode, 'maClass');
     });
    }
   );
<?php $view->dojo()->javascriptCaptureEnd();