En este segundo artículo de la serie de introducción a Zend Framework veremos cómo se trabaja con layouts y cómo nos ayudan a ahorrar tiempo durante la integración de nuestra programación con la maquetación web.

Autor:

Hola! soy Eric de Perú. Desarrollo en PHP desde hace 10 años aunque también manejo C++ y Java. Trabajo para una empresa de eventos de juegos pero también ejerzo de freelance. Puedes seguirme en mi twitter.
Descarga Demostración

Introducción: Qué son y para qué sirven los Layouts en Zend Framework

Cuando desarrollamos una aplicación nos damos cuenta que varias de las pantallas son básicamente iguales y lo único que cambia son los contenidos interiores de estos. Para muestra un pequeño y sencillo ejemplo:

Como podemos ver en el ejemplo, estructuralmente no hay mucha diferencia entre las dos páginas. En la primera mostramos el home, mientras que en la segunda otro texto cualquiera. Las dos tienen un encabezado y un cuerpo, pero si nos fijamos bien, veremos que solo varía el cuerpo.

En el artículo anterior Empezado con Zend Framework, colocamos en las vistas todo el html, desde las etiquetas <html> lo cual está bien porque funciona bien. Pero si tuviésemos una aplicación con más 100 vistas (algo que puede darse perfectamente), entonces no sería práctico. Si hiciéramos algún cambio en la maquetación, tendríamos que hacerlo en todas las vistas. Imáginénlo, nunca terminaríamos.

Los layouts suelen ser una gran ayuda durante la integración del php y el html. Nos ahorran mucho trabajo y aunque no es obligatorio su uso, debería ser un estándar en nuestro trabajo con ZF

Por suerte existen los layouts. Estos incrustarán todo el contenido colocado en la vista y además podrán tener el contenido de otros layouts. Podemos crear todos los layouts que necesitemos, sin límite.

Declarando el layout

Habrá un layout principal para toda la aplicación. La ubicación de estos, debido a que es parte de la aplicación, debería estar dentro de la carpeta de la aplicación, aunque es posible especificar cualquier otra. Esto lo podemos definir en el archivo application.ini de la siguiente manera:

;resources.layout
resources.layout.layoutPath        = APPLICATION_PATH "layouts/scripts"
resources.layout.layout            = "home"

El nombre del archivo del layout será el que nosotros querramos. En nuestro ejemplo home.phtml pero en application.ini no colocaremos la extensión.

Si no declaramos la ruta de los layouts, ZF los buscará en layouts/scripts dentro de la carpeta de la aplicación.

A menudo podremos necesitar layouts para contenido xml o json, o talvez un layout en blanco. Eso dependerá de lo que necesitemos.

Escribiendo un layout

Veamos un sencillo ejemplo de cómo se escribe un layout:

<?php echo $this->doctype(); ?>
<html>
<head>
<?php
$this->headMeta()->appendHttpEquiv('Content-Type', 'text/html; charset='.$this->getEncoding())
->appendHttpEquiv('Content-Language', 'es-ES');
echo $this->headMeta();
$this->headLink()->appendStylesheet('/css/miestilo.css');
echo $this->headLink();
echo $this->headTitle();
$this->headScript()->appendFile('/js/common.js');
echo $this->headScript();
?>
</head>
<body>
<div>
<div><?php echo $this->layout()->content; ?></div>
</div>
</body>
</html>

Como podemos ver, el ejemplo anterior contiene las cabeceras más importantes del html, pero la línea siguiente:

<?php echo $this->layout()->content; ?>

es la encargada de insertar el contenido de la vista en el layout. Absolutamente todo lo que esté en la vista, se guardará en la variable de layout content.

¿Qué ocurre con las demás líneas de código? Pues ellas traen contenido declarado en los controladores o en el bootstrap.php. Veamos ahora como sería nuestra vista:

<?php echo $this->mensaje; ?>
 <br />
 que tal mi aplicacion en ontuts <img src="http://web.ontuts.com/wp-includes/images/smilies/icon_razz.gif" alt=":P">

Podemos notar que el código dentro de la vista se ha reducido a solamente lo que necesitamos de ella.

Es importante darnos cuenta de un detalle: $this->layout()->content; almacena el contenido de la vista, pero está dentro del ámbito $this-&bt;layout() y a este también podemos asignarle otros valores desde el controlador.

Variable de layout

Antes de continuar, quiero regresar unas lineas arribas y que se den cuenta de algo que he escrito y es muy interesante: variable de layout. ¿Y qué es una variable de layout? Desde los controladores, les podemos pasar a las vistas cierta información en forma de variable de vista.

Ya lo hemos visto antes así: $this->view->mensaje. ¿lo recuerdan? El problema está en que este valor es solo para una vista específica y para aquella en la que hemos llamado a su Action().

Las variables de layout nos permitirán reutilizar los valores de las variables en las distintas vistas de nuestra aplicación, en lugar de estar disponibles para una única vista en particular.

Por el contrario, una variable de layout, estará disponible en todas las vistas, sin importar el Action en el que estemos. Es decir, tiene un entorno más amplio. Noten que digo vistas. Las variables de layouts, se pueden utilizar en todos los layouts y en todas las vistas. Es decir, en todos los archivos .phtml.

Pero… ¿para qué quiero una variable de layout? Supongamos que me autentifico en mi aplicación y quiero que en ella aparezca mi nickname (nombre de usuario), siempre en todas las páginas. Podría almacenar ese dato en una variable de layout.

La forma en la que declarao esta variable es muy sencilla:

$this->layout->nickname = 'elericuz';

Por otro lado, en el layout o en la vista, lo único que necesito hacer para mostrarla es imprimir su valor mediante la función echo():

echo $this->layout()->nickname;

Controlando los layouts

Más arriba mencioné que a menudo podríamos necesitar utilizar diferentes layouts para diferentes tareas. Piensen que el diseño del home será diferente al diseño de las páginas internas. En ese caso al menos, necesitaremos 2 layouts: home.phtml y internas.phtml

home.phtml

<?php echo $this->doctype(); ?>
<html>
<head>
    <?php echo $this->headMeta(); ?>
    <?php echo $this->headTitle(); ?>
    <?php echo $this->headStyle(); ?>
    <?php echo $this->headScript(); ?>
</head>

<body>
    <div style="text-align: center;"><?php echo $this->layout()->content; ?></div>
</body>
</html>

internas.phtml

<?php echo $this->doctype(); ?>
<html>
<head>
    <?php echo $this->headMeta(); ?>
    <?php echo $this->headTitle(); ?>
    <?php echo $this->headStyle(); ?>
    <?php echo $this->headScript(); ?>
</head>

<body>
    <div><a href="<?php echo WWW_ROOT; ?>">Home</a> | <a href="<?php echo WWW_ROOT; ?>prueba">Otro link</a></div>
    <br />
    <?php echo $this->layout()->content; ?>
</body>
</html>

En application.ini le hemos indicado a ZF que utilice home.phtml como layout predeterminado. Solo nos faltaría indicarle a ZF que cuando no estemos en el home de nuestra aplicación use internas.phtml como layout. Eso lo hacemos en el controlador/función que queramos así:

$options = array(
  'layout'	 => 'internas',
);
Zend_Layout::startMvc($options);

De esta forma podremos cambiar de layout según nuestras necesidades en cualquier momento de manera cómoda y sencilla.

Reflexión Final

Como hemos visto, los layouts nos ahorran muchas líneas de código y eso los convierte en una herramienta muy importante para nosotros.

Si bien esta ha sido una breve explicación de lo que es un layout, En el siguiente artículo explicaré cómo hacer una estructura de layout y desarrollarlo en forma programática, siempre orientado a objetos.

¡Nos vemos en la próxima publicación!

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (9 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

Cortito pero bastante explicativo… no trabajo con Zend Framework pero las ventajas de este tipo de arquitectura las veo a diario con otros frameworks.

daniel

Muy buen artículo, el mundo de php está girando a los frameworks, a nivel empresarial ya es casi impensable trabajar sin uno, y Zend creo que es de lo mejor.

Umec

Hola, tengo una pregunta. Igual está mal planteado o directamente es una burrada lo que voy a decir pero bueno jeje.

Si quiero hacer una aplicación por módulos,yo podría tener un template ‘general’ donde estarían mis etiquetas html y head y demas..y dentro del body definida la estructura general…y ahí ir llamando a los diferentes módulos para mostrar sus correspondientes vistas (o layouts).

Esto es factible o es una burrada?? jeje

Muchas gracias por el tutorial,los que estamos empezando te lo agradecemos enormemente!! ya hay ganas del proximo!! :)

salu2!

Hola Umec,
recuerda que hay diferencia entre vista y layout. Ambos contienen código html pero el layout es lo que llamarías template y las vistas corresponden a los action. Es decir, dentro del layout estará el contenido de las vistas de acuerdo al módulo/controlador/action en el que te encuentres.

Jorge

hola que tal, tambien soy programado web y bueno ahora estoy comenzando a trabajar con Zend , una pregunta donde declaras y donde imprimes las variables layout? dentro del mismo layout? o en las mismas vistas?

Oscar

Hola Eric, de los tutoriales más claros en castellano que rondan por la red.

Enhorabuena, imagino que andarás liado, pero me gustaría ver más artículos sobre Zend.

Saludos,

Roberto Pozo

Me gusta la forma tan didactica de explicar Zend Framewrok. Queria pedirte si es posible nos muestres como administrar varias vistas con un solo layout por que cada vez que lo intento siempre toma por defecto la view index.phtml … Gracias de todas maneras. Saludos.

Israel

Mas de Zend, por favor y muchas gracias