Yupp Framework PHP

Layout

El layout es una meta-vista que es capaz de darle es aspecto general a una o varias vistas, y permite definir elementos comunes a varias vistas en un solo lugar, lo que ahorra código y tiempo de modificación, porque los cambios se reflejan instantáneamente en las vistas que utilizan el layout modificado.

El sistema de layout soportado por Yupp Framework PHP es muy simple, por un lado se debe especificar en cada vista que layout se utiliza, una vista puede no utilizar ningún layout. Esta especificación se hace mediante una etiqueta especial "layout" cuyo único atributo es el nombre del layout que debe ser usado. Por otro lado, la definición de un layout es bien simple, es igual que una vista, con su estructura de página web, la única diferencia es que se le inyectan dos variables $head y $body que son el contenido de la vista que usa el layout, dentro de sus etiquetas <head> y <body>, así el layout puede mostrar el contenido de la vista.

La ubicación de los archivos de layout es en el directorio raíz de las vistas del respectivo componente, si el componente es "blog" este directorio sería: /components/blog/views.

Ejemplo de inclusión del layout "blog" en una vista: 
<html>
   <layout name="blog" />
   <head>
   ...
En este caso se busca el archivo: /components/blog/views/blog.layout.php

Nota: la etiqueta "layout" debe estar entre las etiquetas html y head de la vista.

El layout "blog" tiene este aspecto:

<html>
  <head>
    <style type="text/css">
    ...
    </style>
    <?php echo h("js",  array("name" => "prototype-1.6.0.2") ); ?>
    <?php echo $head; ?>
  </head>
  <body>
    ...
    <div style="padding:10px;"><?php echo $body; ?></div>
  </body>
</html>

Expliquemos un poco el código del layout.

En principio el layout tiene el mismo aspecto que una vista cualquiera, con código HTML, llamadas a helpers, etc, pero a diferencia de una vista común, un layout tiene definidas las variables $head y $body que, como se menciona antes, corresponden al HEAD y el BODY de la vista que incluye el layout.

En principio encontramos la estructura general de un HTML: html, head, body. Luego definimos algo de estilo en el head, e incluímos un archivo javascript utilizando el helper "js", en este caso el archivo incluído es: "/js/prototype-1.6.0.2.js", que viene en la distribución de Yupp.

Luego se muestra el contenido de la tag HEAD de la vista que incluyó el layout, esto se hace simplemente haciendo "echo" de la varaible $head, generada por Yupp para el layout.

Luego podemos definir todo el HTML y PHP que necesitemos mostrar en la página que se le muestra al usuario. Luego que definimos esos elementos comunes que se muestran en todas las vistas que incluyan este layout, se muestra el cuerpo de la vista que incluyó el layout, esto es todo el contenido en la etiqueta BODY de la vista, y al igual que con el HEAD, el BODY también es puesto en una variable, $body, para mostrar el contenido se hace "echo" de la variable $body.

Un ejemplo completo:

Imagninemos que tenemos dos páginas, una para ver los detalles de un producto y otra para editar los detalles de un producto, para simplificar el producto tiene dos campos, el nombre y el modelo. Y queremos que ambas páginas tengan algunos elementos comunes, como el menú y la misma hoja de estilo (CSS). Las vistas para generar esas páginas tendrán el siguiente aspecto:

Vista "detalles del producto":
<?php
$m = Model::getInstance();
$producto = $m->get('producto');
?>

<html>
  <layout name="lproducto" />
  <head>
    <title>Product details</title>
  </head>
  <body>
    Marca: <?php echo $producto->getMarca(); ?><br />
    Modelo: <?php echo $producto->getModelo(); ?><br />
  </body>
</html>

Vista "edición del producto":
<?php
$m = Model::getInstance();
$producto = $m->get('producto');
?>

<html>
  <layout name="lproducto" />
  <head>
    <title>Product edit</title>
  </head>
  <body>
    <form action="save">
      Marca: <input type="text" name="marca" value="<?php echo $producto->getMarca(); ?>" /><br />
      Modelo: <input type="text" name="modelo" value="<?php echo $producto->getModelo(); ?>" /><br />
    </form>
  </body>
</html>

Como podemos ver, ambas vistas utilizan el layout "lproducto" que definiremos así:
<html>
  <head>
    <?php echo h("css",  array("name" => "main_style") ); ?>
    <?php echo $head; ?>
  </head>
  <body>
    <div class="menu">[ Inicio | Productos | Servicios ]</div>
    <div style="padding:10px;"><?php echo $body; ?></div>
    <div class="footer">Copyright 2008</div>
  </body>
</html>

El código del layout se simplificó para el ejemplo, claramente faltan los links del menú y la página generada será muy simple.

Por último, al mostrarle las páginas al usuario se produce el siguiente resultado:

<html>
  <head>
    <link type="text/css" rel="stylesheet" href="/css/main_style.css"/>
    <title>Product details</title> 
  </head>
  <body>
    <div class="menu">[ Inicio | Productos | Servicios ]</div>
    <div style="padding:10px;">
      Marca: Hyundai<br />
      Modelo: Accent<br />
    </div>
    <div class="footer">Copyright 2008</div>
  </body>
</html>

Aquí suponemos que la marca y modelo es de un coche Hyundai Accent. Ahora la página de edición del producto:

<html>
  <head>
    <link type="text/css" rel="stylesheet" href="/css/main_style.css"/>
    <title>Product edit</title> 
  </head>
  <body>
    <div class="menu">[ Inicio | Productos | Servicios ]</div>
    <div style="padding:10px;">
      <form action="save">
        Marca: <input type="text" name="marca" value="Hyundai" /><br />
        Modelo: <input type="text" name="modelo" value="Accent" /><br />
      </form> 
    </div>
    <div class="footer">Copyright 2008</div>
  </body>
</html>

Por consultas o comentarios ir al grupo:
Grupos de Google
Suscribirte a Yupp Framework PHP
Correo electrónico:
Consultar este grupo