Vous n'aimez pas le trio de balises dl/dt/dd que Zend_Form utilise pour envelopper ses champs ? Pas de problème, on peut les remplacer par une bonne vieille balise table.
Prenons un formulaire d'identification classique :
<?php
class Votreapp_Form_Login extends Zend_Form
{
public function init()
{
$this->addElement(
'text',
'username',
array(
'label' => 'Nom d\'utilisateur :'
)
);
$this->addElement(
'password',
'password',
array(
'label' => 'Mot de passe :'
)
);
$this->addElement(
'submit',
'submit',
array(
'label' => 'OK'
)
);
}
}
?>
Sans CSS, ce formulaire est rendu de la façon suivante :
Le code HTML :
<form enctype="application/x-www-form-urlencoded" action="" method="post"> <dl class="zend_form"> <dt id="username-label"> <label for="username" class="optional">Nom d'utilisateur :</label> </dt> <dd id="username-element"> <input type="text" name="username" id="username" value=""> </dd> <dt id="password-label"> <label for="password" class="optional">Mot de passe :</label> </dt> <dd id="password-element"> <input type="password" name="password" id="password" value=""> </dd> <dt id="submit-label"> </dt><dd id="submit-element"> <input type="submit" name="submit" id="submit" value="OK"> </dd> </dl> </form>
Pour transformer tout ça en tableau, on va d'abord commencer par envelopper les champs par des balises td et les étiquettes par des balises th. Le tout sera entouré par une balise tr :
<?php
$decorators = array(
'ViewHelper',
'Errors',
array('Description', array('tag' => 'p', 'class' => 'description')),
array('HtmlTag', array('tag' => 'td')),
array('Label', array('tag' => 'th')),
array(array('tr' => 'HtmlTag'), array('tag' => 'tr'))
);
$this->addElement(
'text',
'username',
array(
'decorators' => $decorators,
'label' => 'Nom d\'utilisateur :'
)
);
$this->addElement(
'password',
'password',
array(
'decorators' => $decorators,
'label' => 'Mot de passe :'
)
);
?>
On utilise deux fois le décorateur HtmlTag. On doit donc lui donner un alias avec array('tr' => 'HtmlTag').
Pour le bouton submit, c'est un peu différent. On n'a pas besoin de Errors et de Description et on doit appliquer un attribut colspan pour fusionner les deux cellules du tableau :
<?php
$this->addElement(
'submit',
'submit',
array(
'decorators' => array(
'ViewHelper',
array(array('td' => 'HtmlTag'), array('tag' => 'td', 'colspan' => 2)),
array(array('tr' => 'HtmlTag'), array('tag' => 'tr'))
),
'label' => 'OK'
)
);
?>
Pour finir, on remplace la balise dl du formulaire par une balise table.
<?php
$this->setDecorators(
array(
'FormElements',
array('HtmlTag', array('tag' => 'table')),
'Form'
)
);
?>
On obtient le rendu suivant :
Le code HTML :
<form enctype="application/x-www-form-urlencoded" action="" method="post"> <table> <tr> <th id="username-label"> <label for="username" class="optional">Nom d'utilisateur :</label> </th> <td> <input type="text" name="username" id="username" value=""> </td> </tr> <tr> <th id="password-label"> <label for="password" class="optional">Mot de passe :</label> </th> <td> <input type="password" name="password" id="password" value=""> </td> </tr> <tr> <td colspan="2"> <input type="submit" name="submit" id="submit" value="OK"> </td> </tr> </table> </form>
Comments
franck (not verified)
Thu, 18/06/2009 - 08:56
Permalink
Naan, c'est mieux les dd : on
Naan, c'est mieux les dd : on peut plus facilement avec qu'avec les tables.
Bon exemple néanmoins pour jouer avec le display des formulaires.
Maxence
Thu, 18/06/2009 - 11:34
Permalink
Le problème du trio dl/dt/dd,
Le problème du trio dl/dt/dd, c'est qu'on doit systématiquement avoir un dt avec le dd. Ce qui fait que pour ajouter un fieldset à un formulaire, on doit l'envelopper d'un dd et ajouter un dt vide devant pour que ce soit valide au niveau HTML (le décorateur DtDdWrapper est d'ailleurs fait pour ça). Sinon on s'expose à ce genre de bogue.
Ils auraient du utiliser des simples balises div.
Alain Nonyme (not verified)
Thu, 25/06/2009 - 17:56
Permalink
euh, ce sujet aurait du
euh, ce sujet aurait du s'appeler " comment transformer les decorateurs dd/dt/dl de zend en table " et non comment les virer .....
Sinon, savez vous comment on les vires tout simplement ?
Maxence
Fri, 26/06/2009 - 11:14
Permalink
Pour ceux qui n'aiment pas
Pour ceux qui n'aiment pas les décorateurs, il y a un moyen très simple de s'en passer. Il suffit d'utiliser les méthodes render* qui permettent d'effectuer le rendu de chaque décorateur séparément. Exemple :
// On suppose qu'on a un formulaire avec un champ texte nommé name
// On supprime la balise DT du décorateur Label
$this->form->name->getDecorator('label')->setOption('tag', null);
// Le code suivant affiche uniquement la balise LABEL
echo $this->form->name->renderLabel();
// Le code suivant affiche uniquement la balise INPUT
echo $this->form->name->renderViewHelper();
De cette façon, on a autant de souplesse que si on codait le formulaire en HTML et on bénéficie de toute la puissance de Zend_Form.
Pour plus de détail, il faut consulter cet article (en anglais) du grand gourou Matthew Weier O'Phinney.
abdel (not verified)
Thu, 03/12/2009 - 16:25
Permalink
j'ai suivi ton tutoriel mais
j'ai suivi ton tutoriel mais j'ai une message d'erreur:
Exception caught by form: Plugin by name 'Array' was not found in the registry; used paths: Zend_Form_Decorator_: Zend/Form/Decorator/ Stack Trace: #0 D:\projet\projet1\library\Zend\Form\Element.php(1717): .....
voici ce comment j'ai procéder:
$element->addDecorator("$decorators");
si vous avez une idée s'il vous plait?
abdel (not verified)
Thu, 03/12/2009 - 16:45
Permalink
Merci pour ton tutoriel, pour
Merci pour ton tutoriel, pour mon souci fallait faire:
$element->addDecorators("$decorators");
abdel (not verified)
Thu, 03/12/2009 - 18:43
Permalink
comment faire pour un fichier
comment faire pour un fichier j'ai un souci le décorateur m'affiche deux fois :
abdel (not verified)
Thu, 03/12/2009 - 18:44
Permalink
désolé voici le code: input
désolé voici le code:
input type="file" name="Image" id="Image">
Anaïs (not verified)
Thu, 28/01/2010 - 17:11
Permalink
Bonjour, Très bien cette
Bonjour,
Très bien cette explication mais comment peut-on faire pour personnaliser les multicheckbox ? J'aimerais afficher 30 checkbox en 5 lignes de 6 mais impossible de trouver quelque part sur internet la solution à mon problème car la multicheckbox affiche mes 30 checkbox en liste. Et si j'enlève les séparateurs (setSeparator('')) il me les affiche toutes à la suite...
Quelqu'un aurait-il une solution ?
Merci
Maxence
Mon, 01/02/2010 - 19:48
Permalink
Je pense que tu dois écrire
Je pense que tu dois écrire un ViewHelper personnalisé.
Pages
Add new comment