[Zend] setElementDecorators Errors

CyberMauher · #1 (**permalink**) 06/03/2011, 23:47

Hola, quisiera saber como puedo envolver los "Errors" con un span o div, la idea es poder usar un tooltip con javascrip pero para eso necesito envolverlos.
Actualmente tengo seteado el form de la siguiente manera:

Código PHP:

          $form->clearDecorators() 
            ->addDecorator('FormElements') 
            ->addDecorator('HtmlTag', array('tag' => 'table')) 
            ->addDecorator('Form') 
            ->setElementDecorators(array( 
                array('ViewHelper'), 
                array('Errors', array('class' => 'qtip')), 
                array('Description', array('tag' => 'span', 'class' => 'qtip')), 
                array('Label', array( 
                    'placement' => 'append',  
                    'separator' => '<br />' 
                )), 
                array('HtmlTag', array('tag' => 'td')) 
        )); 
        $form->getElement('login')->removeDecorator('Label');

masterpuppet · #2 (**permalink**) 07/03/2011, 04:58

Deberias leer primero un poco de teoria sobre los decorators, te dejo un link, ahora en la practica deberia ser algo asi:

Código PHP:

Ver original...
->setElementDecorators(array(
                array('Errors', array('class' => 'qtip')),
                array('HtmlTag', array('tag' => 'div', 'class' => 'error-wrapper')),    
                array('ViewHelper', array('placement' => 'prepend')),
                array('Description', array('tag' => 'span', 'class' => 'qtip')),
                array('Label', array(
                    'placement' => 'append', 
                    'separator' => '<br />'
                )),
                array('HtmlTag', array('tag' => 'td'))
...

Saludos.

CyberMauher · #3 (**permalink**) 07/03/2011, 15:31

Cita:

Iniciado por masterpuppet

Deberias leer primero un poco de teoria sobre los decorators, te dejo un link, ahora en la practica deberia ser algo asi:

Código PHP:

Ver original...
->setElementDecorators(array(
                array('Errors', array('class' => 'qtip')),
                array('HtmlTag', array('tag' => 'div', 'class' => 'error-wrapper')),    
                array('ViewHelper', array('placement' => 'prepend')),
                array('Description', array('tag' => 'span', 'class' => 'qtip')),
                array('Label', array(
                    'placement' => 'append', 
                    'separator' => '<br />'
                )),
                array('HtmlTag', array('tag' => 'td'))
...

Saludos.

Gracias masterpuppet porque creo que terminé de entender como funciona setElementDecorators().

CyberMauher · #4 (**permalink**) 08/03/2011, 19:52

Cita:

Iniciado por masterpuppet

Deberias leer primero un poco de teoria sobre los decorators, te dejo un link, ahora en la practica deberia ser algo asi:

Código PHP:

Ver original...
->setElementDecorators(array(
                array('Errors', array('class' => 'qtip')),
                array('HtmlTag', array('tag' => 'div', 'class' => 'error-wrapper')),    
                array('ViewHelper', array('placement' => 'prepend')),
                array('Description', array('tag' => 'span', 'class' => 'qtip')),
                array('Label', array(
                    'placement' => 'append', 
                    'separator' => '<br />'
                )),
                array('HtmlTag', array('tag' => 'td'))
...

Saludos.

Hola, te voy a hacer una corrección porque no me andaba y bueno leyendo un poco encontré que hay que asignarle un alias al "HtmlTag", porque sino se pisan y queda uno solo.
Osea resultado final:

Código PHP:

  ->setElementDecorators(array( 
                array('Errors', array('class' => 'qtip')), 
                array(array('HtmlTag_2' => 'HtmlTag'), array('tag' => 'div', 'class' => 'error-wrapper')),     
                array('ViewHelper', array('placement' => 'prepend')), 
                array('Description', array('tag' => 'span', 'class' => 'qtip')), 
                array('Label', array( 
                    'placement' => 'append',  
                    'separator' => '<br />' 
                )), 
                array('HtmlTag', array('tag' => 'td'))

Bueno de esta manera funciona perfecto, pero para mi diseño sigue habiendo un problema, vos me cambiaste el orden del ViewHelper y a mi no me sirve. Entonces lo que hice es ponerlo en el orden que tenía y lo que pasó es que no sólo me envolvía 'Errors' sino que también el 'ViewHelper'.
Luego encontre una solución a este problema, y es que se puede decidir cuando abrir y cuando cerrar los tags, en teoría todo bárbaro pero cuando lo llevé a la practica no me funcionó.
El código me quedó así pero no puedo lograr que se cierre el tag antes del 'ViewHelper':

Código PHP:

              ->setElementDecorators(array( 
                array('ViewHelper', array('tag' => 'span', 'class' => 'qtip')), 
                array(array('HtmlTag_2' => 'HtmlTag'), array('tag' => 'div', 'closeOnly' => true)), 
                array('Errors'), 
                array(array('HtmlTag_2' => 'HtmlTag'), array('tag' => 'div', 'openOnly' => true)), 
                array('Description', array('tag' => 'span', 'class' => 'qtip')), 
                array('Label', array( 
                    'placement' => 'append',  
                    'separator' => '<br />' 
                )), 
                array('HtmlTag', array('tag' => 'td'))

masterpuppet · #5 (**permalink**) 09/03/2011, 02:38

Que estructura queres lograr ?, podes postear el html al que queres llegar ?, veo demasiado markup para un formulario, table, tr, td, span, div, br, tanto precisas ?, si es tan complejo el form, talvés el decorator ViewScript sea mejor solución.

CyberMauher · #6 (**permalink**) 09/03/2011, 09:36

Cita:

Iniciado por masterpuppet

Que estructura queres lograr ?, podes postear el html al que queres llegar ?, veo demasiado markup para un formulario, table, tr, td, span, div, br, tanto precisas ?, si es tan complejo el form, talvés el decorator ViewScript sea mejor solución.

No no, tenés razón esta medio confuso al pedo porque en realidad sería así:

Código PHP:

              ->setElementDecorators(array( 
                array('ViewHelper'), 
                array('Errors'), 
                array(array('HtmlTag_2' => 'HtmlTag'), array('tag' => 'div', 'class' => 'gtip-html hidden')), 
                array('Description', array('tag' => 'p')), 
                array('Label', array( 
                    'class' => 'qtip', 
                    'placement' => 'append',  
                    'separator' => '<br />' 
                )), 
                array('HtmlTag', array('tag' => 'td'))

El resultado que espero es el siguiente:

Código:

<table>
	<tr>
		<td>
			<input type="text" value="" id="user" name="user" class="ui-corner-all ui-widget-content" gtbfieldid="40"><br />
			<label class="qtip required" for="user">Label</label>
			<div class="gtip-html hidden">
				<ul class="errors">
					<li>Value is required and can't be empty</li>
				</ul>
			</div>
			<p class="hint">esto es una descripción</p>
		</td>
	</tr>
</table>

Desde ya muchas gracias.

masterpuppet · #7 (**permalink**) 09/03/2011, 11:59

El label va despues del input ?, te dejo los dos casos, por si acaso,

input-label-error-hint

Código PHP:

Ver original$this->clearDecorators()
     ->addDecorator('FormElements') 
     ->addDecorator('HtmlTag', array('tag' => 'table')) 
     ->addDecorator('Form') 
     ->setElementDecorators(array( 
        array('Errors', array('class' => 'qtip')),
        array(array('elementDiv' => 'HtmlTag'), array('tag' => 'div', 'class' => 'error-wrapper')),
        array('Label', array( 
            'class' => 'qtip', 
            'separator' => '<br />'                     
        )),     
        array('ViewHelper', array('placement' => 'prepend')), 
        array('Description', array('tag' => 'p')),                 
        array('HtmlTag', array('tag' => 'td'))                  
));

label-input-error-hint

Código PHP:

Ver original$this->clearDecorators()
     ->addDecorator('FormElements') 
     ->addDecorator('HtmlTag', array('tag' => 'table')) 
     ->addDecorator('Form') 
     ->setElementDecorators(array( 
        array('Errors', array('class' => 'qtip')),
        array(array('elementDiv' => 'HtmlTag'), array('tag' => 'div', 'class' => 'error-wrapper')),    
        array('ViewHelper', array('placement' => 'prepend')), 
        array('Description', array('tag' => 'p')), 
        array('Label', array( 
            'class' => 'qtip',  
            'separator' => '<br />'                    
        )), 
        array('HtmlTag', array('tag' => 'td'))                  
));

Y te hago un par de comentarios:

No deberías utilizar tablas para crear un layout.
No utilices BR, se puede lograr lo mismo por css.

te dejo un link a lo que suelo utilizar para maquetar OOCSS(si, objetos hasta en la sopa

)

Saludos.

CyberMauher · #8 (**permalink**) 09/03/2011, 15:46

Cita:

Iniciado por masterpuppet

El label va despues del input ?, te dejo los dos casos, por si acaso,

input-label-error-hint

Código PHP:

Ver original$this->clearDecorators()
     ->addDecorator('FormElements') 
     ->addDecorator('HtmlTag', array('tag' => 'table')) 
     ->addDecorator('Form') 
     ->setElementDecorators(array( 
        array('Errors', array('class' => 'qtip')),
        array(array('elementDiv' => 'HtmlTag'), array('tag' => 'div', 'class' => 'error-wrapper')),
        array('Label', array( 
            'class' => 'qtip', 
            'separator' => '<br />'                     
        )),     
        array('ViewHelper', array('placement' => 'prepend')), 
        array('Description', array('tag' => 'p')),                 
        array('HtmlTag', array('tag' => 'td'))                  
));

label-input-error-hint

Código PHP:

Ver original$this->clearDecorators()
     ->addDecorator('FormElements') 
     ->addDecorator('HtmlTag', array('tag' => 'table')) 
     ->addDecorator('Form') 
     ->setElementDecorators(array( 
        array('Errors', array('class' => 'qtip')),
        array(array('elementDiv' => 'HtmlTag'), array('tag' => 'div', 'class' => 'error-wrapper')),    
        array('ViewHelper', array('placement' => 'prepend')), 
        array('Description', array('tag' => 'p')), 
        array('Label', array( 
            'class' => 'qtip',  
            'separator' => '<br />'                    
        )), 
        array('HtmlTag', array('tag' => 'td'))                  
));

Y te hago un par de comentarios:

No deberías utilizar tablas para crear un layout.
No utilices BR, se puede lograr lo mismo por css.

te dejo un link a lo que suelo utilizar para maquetar OOCSS(si, objetos hasta en la sopa

)

Saludos.

Hola muchas gracias por la respuesta, pero no funciona en cualuiera de los dos casos "Errors" siempre es renderizado anterior a 'ViewHelper'. Voy a intentar con decorator ViewScript.

Te ago una pregunta respecto a tu par de comentarios, yo uso 960 grid, esto es compatible con el OOCSS?
Y tambien quisiera que me expliques si no es mucha molestia porque no debo usar tablas en el layout.

GRACIAS!

masterpuppet · #9 (**permalink**) 09/03/2011, 16:06

No puede ser, yo los veo bien a ambos, por eso primero va errors y luego viewhelper en prepend, a mi me genera esta estructura:

input-label-error-hint

Código HTML:

Ver original<td>
    <input type="text" class="required" value="" id="username" name="username">
    <label class="qtip required" for="username">Username</label>
    <div class="error-wrapper">
        <ul class="qtip"><li>Value is required and can't be empty</li></ul>
    </div>
    <p class="hint">Descripcion de username.</p>
</td>

label-input-error-hint

Código HTML:

Ver original<td>
   <label class="qtip required" for="username">Username</label>
   <input type="text" class="required" value="" id="username" name="username"> 
   <div class="error-wrapper">
       <ul class="qtip"><li>Value is required and can't be empty</li></ul>
   </div>
    <p class="hint">Descripcion de username.</p>
</td>

lo estas usando tal cual ?, respetando el orden de los decorators ?.

Con respecto a tus preguntas, 960gs esta bien, lo que no entiendo es para que tanto markup y tablas si estas con un FW CSS, con respecto a las tablas, no es semanticamente correcto utilizar tablas para generar un layout, las tablas son para representar datos tabulados, si googleas vas a encontrar mucha info sobre el tema.

CyberMauher · #10 (**permalink**) 09/03/2011, 16:19

Cita:

Iniciado por masterpuppet

No puede ser, yo los veo bien a ambos, por eso primero va errors y luego viewhelper en prepend, a mi me genera esta estructura:

input-label-error-hint

Código HTML:

Ver original<td>
    <input type="text" class="required" value="" id="username" name="username">
    <label class="qtip required" for="username">Username</label>
    <div class="error-wrapper">
        <ul class="qtip"><li>Value is required and can't be empty</li></ul>
    </div>
    <p class="hint">Descripcion de username.</p>
</td>

label-input-error-hint

Código HTML:

Ver original<td>
   <label class="qtip required" for="username">Username</label>
   <input type="text" class="required" value="" id="username" name="username"> 
   <div class="error-wrapper">
       <ul class="qtip"><li>Value is required and can't be empty</li></ul>
   </div>
    <p class="hint">Descripcion de username.</p>
</td>

lo estas usando tal cual ?, respetando el orden de los decorators ?.

Con respecto a tus preguntas, 960gs esta bien, lo que no entiendo es para que tanto markup y tablas si estas con un FW CSS, con respecto a las tablas, no es semanticamente correcto utilizar tablas para generar un layout, las tablas son para representar datos tabulados, si googleas vas a encontrar mucha info sobre el tema.

Tenés razón amigo, yo fui el salame que se comió una parte del código, me comí esto "array('placement' => 'prepend')" en el 'ViewHelper'. De este modo si funciona.
Voy a seguir tus consejos sobre no tablas en el layout. Y agradesco mucho tu amabilidad y paciencia.

MUCHAS GRACIAS.