Zend FR

Consultez la FAQ sur le ZF avant de poster une question

Vous n'êtes pas identifié.

#1 18-07-2008 12:34:03

maxparm
Nouveau membre
Date d'inscription: 18-07-2008
Messages: 7

[Zend Form] Group Decorator

Bonjour à tous,


Je suis débutant sur le framework Zend et depuis 2 jours je m'arrache les cheveux sur un problème:
je souhaite personnaliser l'affichage d'un 'group' dans les formulaires.

Actuellement, j'obtiens cela en HTML:

Code:

<fieldset>
    <legend></legend>
</fieldset>

Mais je souhaiterai avoir:

Code:

<p>
     <label></label>
     <ul></ul>
</p>

Je souhaite faire cela pour aligner plusieurs champs sur une ligne grâce au"group" pour obtenir l'HTML suivant:

Code:

<p>
     <label>Date</label>
     <ul>
            <li><select>...</select></li>
            <li><select>...</select></li>
            <li><select>...</select></li>
    </ul>
</p>

---------------

Voici mon formulaire

Code:

class FormInscription extends Zend_Form {
        
    public function __construct($options = null) {
    
        
        /* INITIALIZE FORM FIELDS */ 
        parent::__construct($options);
        $this->setName('inscription');
        
        $this->addPrefixPath('Decorator', 'Group/Decorator', 'decorator');
        $this->addElementPrefixPath('Decorator', 'Group/Decorator', 'decorator');
        $this->addDisplayGroupPrefixPath('Decorator', 'Group/Decorator');

               //Birth Field
        $day = new Zend_Form_Element_Select('day');
        $day->setLabel('Date de Naissance:');
        $day->class = 'date_d';
        $day->addMultiOptions(range(1, 31));
        
        //Month Field
        $month = new Zend_Form_Element_Select('month');
        $month->addMultiOptions($months);
        $month->class = 'date_m';
            
        //Year Field
        $year = new Zend_Form_Element_Select('year');
        $year->addMultiOptions(range(date('Y'),1900,-1));
        $year->class = 'date_y';

        /*Ajout des Eléments*/
        $this->addElements(array($day, $month, $year, $submit));


                /*GROUP*/
        $this->addDisplayGroup(array('day', 'month', 'year'), 'group_horizontal', array('disableLoadDefaultDecorators' => true));     
        
        
        $this->clearDecorators();
        
        /*Set form Decorators*/
        $this->addDecorator('FormElements')
                ->addDecorator('HtmlTag', array('tag' => 'div'))
                ->addDecorator('Form');
                

        /*Set Elements Decorators*/    
        $this->setElementDecorators(array(
            array('ViewHelper'),
            array('Errors', array('tag'=>'div', 'class'=>'form_error')),
            array('Description', array('tag'=>'div', 'class'=>'form_description')),
            array('Label', array('separator'=>' ')),
            array('HtmlTag', array('tag' => 'p')),
        ));

        
        /*Group Decorator*/
        $this->group_horizontal->setOptions(array('displayGroupClass'=>'Group_Decorator'));
        $this->group_horizontal->addDecorator('FormElements'); 
        
        /*Set Decorator of submit button*/
        $submit->setDecorators(array(
            array('ViewHelper'),
            array('Description'),
            array('HtmlTag', array('tag'=>'p', 'class'=>'form_submit')),
        ));
        
        

                        
        /*Set Decorators for Date Fields*/
        $day->setDecorators(array(
            array('ViewHelper'),
            array('Description'),
            array('HtmlTag', array('tag'=>'li', 'style'=>'float:left')),
        ));
        
        $month->setDecorators(array(
            array('ViewHelper'),
            array('Description'),
            array('HtmlTag', array('tag'=>'li', 'style'=>'float:left')),
        ));
              
        $year->setDecorators(array(
            array('ViewHelper'),
            array('Description'),
            array('HtmlTag', array('tag'=>'li', 'style'=>'float:left')),
        ));
    }
}

et voici le decorator (très simple mais c'est juste pour tester):

Code:

class Group_Decorator extends Zend_Form_Decorator_Abstract {
    
    public function render($content) {
        $element = $this->getElement();
        if(!$element instanceof Zend_Form_Element) { return $content; }
        if(null === $element->getView()) { return $content; }

        return '<p><label>Test</label><ul>'.$content.'</ul></p>';
    }
}

Le problème c'est qu'il n'y a aucun changement dans le HTML du group. Il utilise toujours les Fieldset.

Il y a très peu de documentation a propos des decorator de group, je suis peut-être passé à coté de quelques choses.

Merci d'avance pour votre aide.

Hors ligne

 

#2 18-07-2008 14:32:50

Mr.MoOx
Administrateur
Lieu: Toulouse
Date d'inscription: 27-03-2007
Messages: 1444
Site web

Re: [Zend Form] Group Decorator

Pour moi il y a un problème au niveau de la sémantique html...

Code:

<p>
     <label></label>
     <ul></ul>
</p>

- p n'est pas fait pour les forms, fielset = group de champs
- un label pour un group de champs n'a aucun sens, par contre un legend oui.
Es vraiment bien utile de changer ça? Si c'est pour la mise en forme, utilse plutôt les capacités des CSS.

Hors ligne

 

#3 18-07-2008 14:47:53

maxparm
Nouveau membre
Date d'inscription: 18-07-2008
Messages: 7

Re: [Zend Form] Group Decorator

Ok, bon je vais essayer comme ca.

Mais le problème c'est que je voudrais aligner le legend sur la même ligne que les champs. J'ai peur qu'avec les CSS le résultat ne soit pas le même sur les différents navigateurs.

Merci en tout pour ta réponse,

Hors ligne

 

#4 18-07-2008 14:50:33

maxparm
Nouveau membre
Date d'inscription: 18-07-2008
Messages: 7

Re: [Zend Form] Group Decorator

En fait je voudrais que ca se rapproche de cela:
http://88.198.60.17/images/web-form-des … ns/box.jpg

Donc tu me conseilles aussi d'utiliser les définitions à la place des paragraphes?

Hors ligne

 

#5 18-07-2008 18:12:31

Mr.MoOx
Administrateur
Lieu: Toulouse
Date d'inscription: 27-03-2007
Messages: 1444
Site web

Re: [Zend Form] Group Decorator

Ton lien renvoi un Forbidden...

Pour la mise en page, c'est CSS, pas HTML (et encore moins XHTML) voilà ce que je dis smile
Le choix sémantique pour l'html de Zend_Form a été très bien choisi je trouve, et je ne les change que dans de rare (très rare) cas.
Par contre j'ai ma toujours ma petite feuille de style à côté wink

Hors ligne

 

#6 21-07-2008 10:01:29

nORKy
Membre
Date d'inscription: 06-03-2008
Messages: 1098

Re: [Zend Form] Group Decorator

p n'est pas fait pour les form ????
Je ne suis pas d'accord.
P est ce qu'il y a de plus neutre et j'estime que dd n'est pas le mieux approprié pour encadrer les éléments d'un formulaire.
De même pour ul.
Éventuellement, je les utilises pour des 'sous-ensemble' de formulaires comme des cases à cochés pour les ul.

Code:

<form>
  <p>
    <label />
    <input>
  </p>
  <p>
    Quelles fruits préférez-vous ?
    <ul>
      <li><label>Pomme</label><input type="checkbox" />
     <li><label>Poire</label><input type="checkbox" />
   </ul>
  </p>
</form>

Chacun choisi sa sémantique, mais je ne suis pas d'accord pour dire que p n'est pas approprié. Il l'est autant que dd.

Dernière modification par nORKy (21-07-2008 10:02:14)


----
Gruiiik !

Hors ligne

 

#7 21-07-2008 10:11:14

Mr.MoOx
Administrateur
Lieu: Toulouse
Date d'inscription: 27-03-2007
Messages: 1444
Site web

Re: [Zend Form] Group Decorator

<p> est de très loin un élément neutre en html cala signifie paragraphe (tout simplement) et donc du texte.
Tu m'aurais dis <div> qui signifie "division" ca serait passé.
Tu devrais (re)voir les cours de sémantique XHTML :p
Pourquoi crois tu que le ZF a fait ces choix ainsi? C'est pas un hasard, et encore moins des erreurs...

Dire que avec 5min et un coup de css, on a un rendu identique...

Hors ligne

 

#8 21-07-2008 10:22:57

nORKy
Membre
Date d'inscription: 06-03-2008
Messages: 1098

Re: [Zend Form] Group Decorator

Ce ni un hasard, ni une erreur :
c'est un choix smile

En surfant sur le web, tu dois bien constater que des formulaires en dd, il y en a autant que des ul ou des p.

Tiens, w3c.org fait encore différent :

Code:

<form method="get" action="http://www.google.com/custom" enctype="application/x-www-form-urlencoded">
  <div>
    <a class="navlink" /></a><br />
    <label for="inputField">Search W3C<br />
    <input type="text" size="15" id="inputField" name="q" accesskey="E" maxlength="255" /></label> 
    <input type="submit" value="Go" id="goButton" name="sa" accesskey="G" /><br />
    <input type="hidden" name="cof"   />
    <input type="hidden" id="searchW3C" name="sitesearch" checked="checked" value="www.w3.org" />
    <input type="hidden" name="domains" value="www.w3.org" />
 </div>
</form>

Tu devrais écrire à l'équipe d'openWeb qu'ils ont tord également.
http://openweb.eu.org/articles/formulaire_accessible


Ne confonds pas choix et erreurs.


----
Gruiiik !

Hors ligne

 

#9 21-07-2008 11:32:14

Mr.MoOx
Administrateur
Lieu: Toulouse
Date d'inscription: 27-03-2007
Messages: 1444
Site web

Re: [Zend Form] Group Decorator

Ne confonds pas choix et erreurs.

Où ai-je confondu ca?

Pourquoi crois tu que le ZF a fait ces choix ainsi? C'est pas un hasard, et encore moins des erreurs...

Non puisque je souligne bien la nuance.
Je dis juste que je ne suis pas d'accord avec ca

P est ce qu'il y a de plus neutre

C'est quand même marrant tu a changé de choix entre temps, ton

Code:

<p>
     <label></label>
     <ul></ul>
</p>

est devenu

Code:

<p>
    Quelles fruits préférez-vous ?
    <ul>
      <li><label>Pomme</label><input type="checkbox" />
     <li><label>Poire</label><input type="checkbox" />
   </ul>
  </p>

:p

Je donne mon opinon perso rien de plus big_smile

PS: le vieux form que tu mets c'est un copié collé d'un code google smile (on note le truc useless "<a class="navlink" /></a><br />" et on sai tous que google est le xhtml ca fait 2
PS2: y'a quand même des fieldsets pour les groupes ici

Hors ligne

 

#10 21-07-2008 14:14:02

nORKy
Membre
Date d'inscription: 06-03-2008
Messages: 1098

Re: [Zend Form] Group Decorator

Mais moi aussi je donne mon opinion, rien de plus smile

Ps :Le form que j'ai collé viens de w3c.org

PS2: j'utilises fieldset pour grouper des champs de même idées (par exemple un profil pour nom, prénom, adresse, ...) et les ul pour des cases à cocher correspondants à une même question. La encore c'est une histoire de choix, pas de sémantiques 'form'


----
Gruiiik !

Hors ligne

 

#11 22-07-2008 16:22:12

maxparm
Nouveau membre
Date d'inscription: 18-07-2008
Messages: 7

Re: [Zend Form] Group Decorator

Merci pour ces précisions mais comment est-ce que je peux faire pour obtenir plusieurs champs select alignés sur la même ligne avec un label.

Comme ci pour le champs "date of Birth" ci contre

dois-je utiliser des fieldsets? tout se mélange dans ma tête. Je ne vois pas comment procéder.

Merci d'avance!

Hors ligne

 

#12 22-07-2008 17:22:24

nORKy
Membre
Date d'inscription: 06-03-2008
Messages: 1098

Re: [Zend Form] Group Decorator

Je n'ai pas de réponse (à mon avis faut te faire un décorateur)

Mais pour les dates, le multiple select n'est pas recommandé. (j'ai l'ai lu hier, mais j'avoue que je ne sais plus ou ni pourquoi ! lol)
Je te conseil d'utiliser un champ de type text et d'y ajouter un validateur Zend_Date et demander une forme précise (par exemple dd/MM/YYYY)
Perso, je rajoute en plus un jquery.datepicker pour faciliter la sélection d'une date


----
Gruiiik !

Hors ligne

 

#13 22-07-2008 21:17:54

Mr.MoOx
Administrateur
Lieu: Toulouse
Date d'inscription: 27-03-2007
Messages: 1444
Site web

Re: [Zend Form] Group Decorator

+1
Pour les histoires de mulitples select c'est pour des histoires d'ergonomie utilisateur.
Il est plus naturelle pour un internaute de saisir une date à la main que d'utiliser plusieurs inputs.

Hors ligne

 

Pied de page des forums

Propulsé par PunBB
© Copyright 2002–2005 Rickard Andersson
Traduction par punbb.fr

Graphisme réalisé par l'agence Rodolphe Eveilleau
Développement par Kitpages