El manual»Desarrollando con CakePHP»Vistas»Layouts

3.9.2 Layouts

Un diseño contiene el código de presentación que envuelve una vista. Cualquier cosa que quieras ver en todas tus vistas debería estar situada en un layout.

Los ficheros de diseño deberían situarse en /app/views/layouts. El diseño por defecto de CakePHP puede ser sustituido creando un nuevo diseño por defecto en /app/views/layouts/default.ctp. Una vez que ha sido creado un nuevo diseño, el código de la vista renderizado por le controlador se coloca dentro del diseño por defecto cuando la página es renderizada.

Cuando creas un diseño, necesitas decirle a CakePHP dónde colocar el código para tus vistas. Para hacer eso, estate seguro que tu diseño incluye un lugar para $content_for_layout (y opcionalmente, $title_for_layout). Aquí está un ejemplo de a lo que debería parecerse un diseño por defecto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title><?php echo $title_for_layout?></title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <!-- Incluir ficheros y scripts externos aquí (Mirar el ayudante HTML para más información -->
  <?php echo $scripts_for_layout ?>
</head>
<body>

  <!-- Si quieres algún tipo de menú que mostrar en todas tus vistas, incluyelo aquí -->
  <div id="cabecera">
      <div id="menu">...</div>
  </div>

  <!-- Aquí es donde quiero que se vean mis vistas -->
  <?php echo $content_for_layout ?>

  <!-- Añadir un pie de página a cada página mostrada -->
  <div id="pie">...</div>

</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title><?php echo $title_for_layout?></title>
  6. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  7. <!-- Incluir ficheros y scripts externos aquí (Mirar el ayudante HTML para más información -->
  8. <?php echo $scripts_for_layout ?>
  9. </head>
  10. <body>
  11. <!-- Si quieres algún tipo de menú que mostrar en todas tus vistas, incluyelo aquí -->
  12. <div id="cabecera">
  13. <div id="menu">...</div>
  14. </div>
  15. <!-- Aquí es donde quiero que se vean mis vistas -->
  16. <?php echo $content_for_layout ?>
  17.  
  18. <!-- Añadir un pie de página a cada página mostrada -->
  19. <div id="pie">...</div>
  20. </body>
  21. </html>

$scripts_for_layout contiene cualquier fichero externo y scripts incluidos con el ayudante HTML incrustado. Es últil para incluir ficheros javascript y CSS de las vistas.

Cuando uses $html->css() o $javascript->link() en los ficheros de vista, especifica false en el argumento 'in-line' para colocar el fuente html en $scripts_for_layout. (Mirar API para más detalles de uso).

$content_for_layout contiene la vista. Aquí es donde será colocado el código de la vista.

$title_for_layout contiene el título de la página.

Para establecer el título para el diseño, es fácil hacerlo en el controlador, usando la variable del controlador $pageTitle.

<?php
class UsuariosController extends AppController {
    function verActivos() {
        $this->pageTitle = 'Ver Usuarios Activos';
    }
}
?>
  1. <?php
  2. class UsuariosController extends AppController {
  3. function verActivos() {
  4. $this->pageTitle = 'Ver Usuarios Activos';
  5. }
  6. }
  7. ?>

Puedes crear tantos diseños como desees: simplemente colócalos en el directorio app/views/layouts e intercambialos dentro de tus acciones del controlador usando la variable $layout del cotrolador, o la función setLayout().

Por ejemplo, si una sección de mi site incluye un espacio menor con banner de publicidad, debería crear un nuevo diseño (layout) con el espacio publicitario menor, especificándolo como el diseño para todas las acciones del controlador haciendo algo como:

var $layout = 'publicidad_pequena_pordefecto';

<?php
class UsuariosController extends AppController {
    function verActivos() {
        $this->pageTitle = 'Ver Usuarios Activos';
        $this->layout = 'publicidad_pequena_pordefecto';
    }

    function verImagen() {
        $this->layout = 'imagen';
        //mostrar la imagen del usuario
    }
}
?>
  1. <?php
  2. class UsuariosController extends AppController {
  3. function verActivos() {
  4. $this->pageTitle = 'Ver Usuarios Activos';
  5. $this->layout = 'publicidad_pequena_pordefecto';
  6. }
  7. function verImagen() {
  8. $this->layout = 'imagen';
  9. //mostrar la imagen del usuario
  10. }
  11. }
  12. ?>

CakePHP ofrece dos diseños comunes (además del diseño por defecto de CakePHP) que puedes usar en tus propias aplicaciones: 'ajax' y 'flash'. El diseño Ajax es útil para contruir las respuestas Ajax; es un diseño vacío (la mayoría de las llamadas ajax sólo requiren una pocas etiquetas como respuesta, más que una interfaz completa). El diseño flash es usado por mensajes mostrados por el método flash() del controlador.

Existen otros tres diseños: xml, js y rss en el núcleo como una manera rápida y fácil de servir contenido que no sea text/html.

<< Plantillas de la Vista | Elementos >>