Puede que haya notado que los scripts de vista en las secciones anteriores eran fragmentos HTML, no páginas completas. Esto es intencionado; queremos que nuestras acciones devuelvan únicamente el contenido relacionado con la acción en sí, no la aplicación en su conjunto.
Ahora debemos componer ese contenido generado en una página HTML completa. También nos gustaría tener una apariencia y un comportamiento coherentes para la aplicación. Usaremos un diseño (layout) global del sitio para lograr ambas tareas.
Hay dos patrones de diseño que Zend Framework usa para implementar los diseños: Two Step View y Composite View. Two Step View suele asociarse con el patrón Transform View; la idea básica es que la vista de su aplicación crea una representación que después se inyecta en la vista maestra para su transformación final. El patrón Composite View trata de una vista compuesta por una o más vistas atómicas de la aplicación.
En Zend Framework, Zend_Layout combina las ideas detrás de estos patrones. En lugar de que cada script de vista de acción necesite incluir elementos propios de todo el sitio, pueden centrarse simplemente en sus propias responsabilidades.
Sin embargo, ocasionalmente puede necesitar información específica de la aplicación en su script de vista de todo el sitio. Afortunadamente, Zend Framework proporciona una variedad de placeholders (marcadores de posición) de vista que le permiten proporcionar dicha información desde los scripts de vista de sus acciones.
Para comenzar a usar Zend_Layout, primero necesitamos informar a
nuestro bootstrap que use el recurso Layout. Esto puede hacerse
usando el comando zf enable layout:
% zf enable layout Layouts have been enabled, and a default layout created at application/layouts/scripts/layout.phtml A layout entry has been added to the application config file.
Como indica el comando,
application/configs/application.ini se actualiza, y
ahora contiene lo siguiente dentro de la sección
production:
; application/configs/application.ini ; Add to [production] section: resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts"
El archivo INI final debería quedar como sigue:
; application/configs/application.ini [production] ; PHP settings we want to initialize phpSettings.display_startup_errors = 0 phpSettings.display_errors = 0 includePaths.library = APPLICATION_PATH "/../library" bootstrap.path = APPLICATION_PATH "/Bootstrap.php" bootstrap.class = "Bootstrap" appnamespace = "Application" resources.frontController.controllerDirectory = APPLICATION_PATH "/controllers" resources.frontController.params.displayExceptions = 0 resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts" [staging : production] [testing : production] phpSettings.display_startup_errors = 1 phpSettings.display_errors = 1 [development : production] phpSettings.display_startup_errors = 1 phpSettings.display_errors = 1
Esta directiva indica a su aplicación que busque los scripts de vista de diseño en
application/layouts/scripts. Si examina el árbol de directorios, verá
que este directorio ya se ha creado para usted, junto con el archivo
layout.phtml.
También queremos asegurarnos de tener una declaración de DocType XHTML para nuestra aplicación. Para habilitarlo, necesitamos añadir un recurso a nuestro bootstrap.
La forma más sencilla de añadir un recurso de bootstrap es simplemente crear un método
protegido que comience con la frase _init. En este caso,
queremos inicializar el doctype, así que crearemos un método
_initDoctype() dentro de nuestra clase bootstrap:
// application/Bootstrap.php
class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
protected function _initDoctype()
{
}
}
Dentro de ese método, necesitamos indicar a la vista que use el doctype apropiado. Pero
¿de dónde vendrá el objeto vista? La solución sencilla es inicializar el recurso
View; una vez hecho esto, podemos obtener el objeto vista desde
el bootstrap y usarlo.
Para inicializar el recurso de vista, añada la siguiente línea a su archivo
application/configs/application.ini, en la sección marcada como
production:
; application/configs/application.ini ; Add to [production] section: resources.view[] =
Esto nos indica que inicialicemos la vista sin opciones (los corchetes '[]' indican que la clave "view" es un array, y no le pasamos nada).
Ahora que tenemos una vista, completemos nuestro método _initDoctype().
En él, primero nos aseguraremos de que el recurso View se haya
ejecutado, obtendremos el objeto vista, y después lo configuraremos:
// application/Bootstrap.php
class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
protected function _initDoctype()
{
$this->bootstrap('view');
$view = $this->getResource('view');
$view->doctype('XHTML1_STRICT');
}
}
Ahora que hemos inicializado Zend_Layout y configurado el Doctype,
creemos nuestro diseño de todo el sitio:
<!-- application/layouts/scripts/layout.phtml -->
<?php echo $this->doctype() ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zend Framework Quickstart Application</title>
<?php echo $this->headLink()->appendStylesheet('/css/global.css') ?>
</head>
<body>
<div id="header" style="background-color: #EEEEEE; height: 30px;">
<div id="header-logo" style="float: left">
<b>ZF Quickstart Application</b>
</div>
<div id="header-navigation" style="float: right">
<a href="<?php echo $this->url(
array('controller'=>'guestbook'),
'default',
true) ?>">Guestbook</a>
</div>
</div>
<?php echo $this->layout()->content ?>
</body>
</html>
Obtenemos el contenido de nuestra aplicación usando el helper de vista
layout(), y accediendo a la clave "content". Puede renderizar
a otros segmentos de respuesta si lo desea, pero en la mayoría de los casos, esto es todo
lo necesario.
Observe también el uso del placeholder headLink(). Esta es una
forma sencilla de generar el HTML para elementos <link>, así
como de llevar un seguimiento de ellos a lo largo de su aplicación. Si necesita añadir hojas
de estilo CSS adicionales para dar soporte a una sola acción, puede hacerlo, con la seguridad
de que estarán presentes en la página final renderizada.
![]() |
Punto de control |
|---|---|
Ahora vaya a "http://localhost" y examine el código fuente. Debería ver sus secciones XHTML de encabezado, head, título y body. |
![[Note]](images/note.png)