Configuración de layouts en Zend Framework 2

En este capítulo veremos como configurar layouts en Zend Framework 2, el layout es la estructura o esqueleto de la plantilla html que es mostrada en las vistas, en este archivo se configuran los meta tags, los archivos de estilo CSS, los archivos Javascript, el icono web, etc ... y en el body es incluida la vista mediante el objeto ZEND content : <?php echo $this->content; ?>

Para verlo más claro abre el archivo layout.phtml que se encuentra en la ruta ... C:\xampp\htdocs\tutorial-zend\module\Application\view\layout

En este archivo puedes ver la estructura HTML y podrás ver el lugar en el body donde es cargado el contenido de las vistas ...

<?php echo $this->content; ?>

Ahora abre el archivo de configuración del módulo ... module.config.php que se encuentra en la ruta ... C:\xampp\htdocs\tutorial-zend\module\Application\config

Busca las siguiente líneas de código ...

'view_manager' => array(
        'display_not_found_reason' => true,
        'display_exceptions'       => true,
        'doctype'                  => 'HTML5',
        'not_found_template'       => 'error/404',
        'exception_template'       => 'error/index',
        'template_map' => array(
            'layout/layout'           => __DIR__ . '/../view/layout/layout.phtml',
            'application/index/index' => __DIR__ . '/../view/application/index/index.phtml',
            'error/404'               => __DIR__ . '/../view/error/404.phtml',
            'error/index'             => __DIR__ . '/../view/error/index.phtml',
        ),
       
       

'layout/layout'           => __DIR__ . '/../view/layout/layout.phtml' : aquí puedes ver la ruta que carga el layout por defecto

Ahora vamos a crear un nuevo layout al que le agregaremos un nuevo theme css bootstrap y lo cargaremos a una de nuestras vistas.

Así que regresamos a la ruta de los layouts ... C:\xampp\htdocs\tutorial-zend\module\Application\view\layout y creamos un layout llamado nuevo-layout.phtml copien el código de layout.phtml y péguenselo, guardar.

Ahora abrimos un nuevo archivo al que llamaremos nuevo-css.css, ve a la siguiente url http://bootswatch.com/united/bootstrap.min.css, copia todo el código y pégalo en el archivo, guárdalo en la ruta donde se guardan los archivos css del proyecto en la ruta C:\xampp\htdocs\tutorial-zend\public\css ...

Ahora tenemos un nuevo theme bootstrap para utilizar en el proyecto, este theme lo agregaremos en elnuevo layout, así que nos vamos nuevo-layout.phtml y añadiremos en su lugar la nueva línea de color azul ...

 <!-- Le styles -->
        <?php echo $this->headLink(array('rel' => 'shortcut icon', 'type' => 'image/vnd.microsoft.icon', 'href' => $this->basePath() . '/img/favicon.ico'))
                  ->prependStylesheet($this->basePath() . '/css/bootstrap-responsive.min.css')
                  ->prependStylesheet($this->basePath() . '/css/style.css')
/*cambiado -> */  ->prependStylesheet($this->basePath() . '/css/nuevo-css.css')  
                ?>
               
Simplemente cambiamos "bootstrap.min.css" por el nuevo css "nuevo-css.css"
               

Ok, ahora tenemos el theme css instalado, si quisieramos que fuese el predeterminado, simplemente mencionaríamos al nuevo-layout.phtml en el archivo de configuración del módulo module.config.php ...

 'layout/layout'           => __DIR__ . '/../view/layout/nuevo-layout.phtml',

 Carga la página en el explorador y verás el nuevo theme instalado ...

 Pero como digimos al principio el nuevo theme sólo queremos cargarlo en una vista, por ejemplo "fotos", así que restauraremos a su valor inicial  el layout que viene por defecto ...

  'layout/layout'           => __DIR__ . '/../view/layout/layout.phtml',
 

Para cargar el nuevo layout a la vista "fotos", nos vamos al controlador "DemoController.php" en la ruta C:\xampp\htdocs\tutorial-zend\module\Application\src\Application\Controller ... y modificamos el código del control "fotos" añadiendo la nueva línea en azul ...

    public function fotosAction()
    {
        $parametro = interactua_php("fotos");
        $id = (int)$this->params()->fromRoute("id", 1);
        $imagenes = imagenes($id);
        $count_imagenes = count_imagenes(2);
        /* Para incluir el layout */
        $this->layout("layout/nuevo-layout.phtml");
        /* Para incluir el layout */
        return new ViewModel(array(
            "interactua_php" => $parametro,
            "id" => $id,
            "imagenes" => $imagenes,
            "count_imagenes" => $count_imagenes
                ));
    }
   

Ahora navega entre las distintas vistas, verás como se ha cargado el nuevo layout sólamente a la vista "fotos", al resto de vistas se le carga el layout por defecto.

Espero que lo hayan entendido, próximamente más sobre Zend, saludos.