TigerZF
🌐Español

3.3. Crear un diseño

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.

[Note] 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.