En la entrada anterior hice el más básico de los ejemplos en kumbia y una burda explicación de algunos de los aspectos más importantes del framework.
Tal como prometí, en esta entrada voy a trabajar un poco con las vistas y para no extender, dejaremos para la siguiente entrada un ejemplo más completo donde se intercambia información entre las capas de vista y controlador.
En primer lugar voy a comenzar trabajando un poco con los partials. Como explique anteriormente, aquí vamos a guardar códigos parciales como lo son el header o footer de nuestras plantillas. La idea es seccionar nuestro código para facilitar posteriores modificaciones.
Lo primero que haremos será crear un directorio no65 dentro del directorio views/partials. Aquí vamos a guardar los partials de nuestro tema no65.
Ahora comenzaremos a desarmar nuestro default.phtml y colocar cada sección en un partial distinto. En este caso, tenemos una plantilla clásica con: header, menú lateral, cuerpo y footer.
Voy a empezar por el footer. Creamos un archivo footer.phtml, y en el colocamos todo el código que se encuentra entre "Begin Footer" y "End Footer" de default.phtml, y lo borramos de ahí. En sustitución, en default.phtml colocaremos lo siguiente:
<!-- Begin Footer -->
<?php View::partial('no65/footer') ?>
<!-- End Footer -->
El archivo footer.phtml quedará de la siguiente forma:
<div id="footer">
<p><a href="http://validator.w3.org/">Valid CSS</a> :: <a href="http://validator.w3.org/">Valid XHTML</a></p>
<p>Copyright © 2007 by Your Company</p>
<p>Template Designed By: <a href="http://web20templates.blogspot.com">Free Web 2.0 Website Templates</a></p>
</div>
Guardamos y recargamos la página en el navegador. Observamos que no hay ningún cambio, por lo que vamos por buen camino. Repetiremos lo mismo con el header y con el menú lateral. Así tendremos nuestro header, footer y menú lateral en archivos separados, lo cual facilitará la modificación de éstos por separado, y mayor legibilidad a nuestra plantilla.
Revisemos el cuerpo
El cuerpo de nuestra plantilla está compuesto actualmente por 3 divs tipo "textboxright": el que agregamos en la entrada anterior donde invocamos a View::content() y dos con códigos de ejemplo proporcionado por la plantilla.
Como no queremos mostrar los ejemplos de nuestra plantilla, lo que haremos será borrar los divs correspondientes, y para hacer más elegante nuestro código, nos llevaremos el "textboxright" donde se encuentra nuestro "Hola Twitter" al archivo hola.phtml. De esta manera dejaremos más limpio nuestro default.phtml, y además así podremos utilizar todos los textboxright que queramos dentro de nuestras vistas particulares.
El body de default.phtml quedaría así de elegante:
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<?php View::partial('no65/header') ?>
<!-- End Header -->
<!-- Begin Stripes -->
<div id="stripes">
</div>
<!-- End Stripes -->
<!-- Begin Left Column -->
<?php View::partial('no65/leftcolumn') ?>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<?php View::content(); ?>
</div>
<!-- End Right Column -->
<!-- Begin Footer -->
<?php View::partial('no65/footer') ?>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body> Demás está decir que debemos trabajar en nuestro header, footer y menú lateral, borrar lo que no necesitemos, agregar la data que nos haga falta. Cambiar el título, colocar un ícono, en fin, lo que queramos.
Tarea
En la entrada anterior colocamos nuestro archivo style.css directamente dentro de la carpeta public/css, e igual hicimos con nuestras imágenes. Si queremos mantener varios estilos, nuestros directorios css e img se van a llenar y luego no vamos a poder identificar con facilidad que archivo pertenece a cada estilo, en el caso de que necesitemos modificarlos. Lo mejor es incluir un directorio dentro css y otro dentro de img que identifique a nuestra plantilla, así como hicimos con los partials. Este cambio es bastante intuitivo, no tendrá mayor complicación.
Agregando otra plantilla
Ahora vamos a incluir en nuestro proyecto una segunda plantilla, para darnos cuenta de lo sencillo que será cambiar de una a la otra. Supongamos que nos bajamos la plantilla NonZero de http://nodethirtythree.com
A grandes rasgos, estos son los pasos que vamos a seguir:
1) Creamos nuestra plantilla nonzero.phtml dentro de views/templates
2) Creamos nuestro directorio de parciales views/partials/nonzero
3) Dentro del directorio de parciales incluiremos header.phtml, footer.phtml y en este caso un rightcolumn.phtml
4) Creamos nuestros directorios public/img/nonzero y public/css/nonzero y guardaremos en ellos los archivos correspondientes
5) Copiaremos el código de index.html de nonzero en nuestra plantilla nonzero.phtml
6) Cortar los trozos de código de nonzero.phtml y pegarlos en el partial correspondiente
Recordemos modificar la forma de llamar las imágenes y css. Recordemos también invocar a la función View::content() en el lugar correspondiente.
Si recargamos nuestro navegador, no habrá pasado nada, puesto que no hemos modificado la plantilla por omsión default.phtml. Lo que vamos a hacer es decirle a nuestro controlador saludo_controller que queremos utilizar la nueva plantilla; para ello, definiremos dentro de saludo_controller.php la variable template:
public $template = 'plantilla'; Ahora apuntamos a nuestro navegador y abrimos http://localhost/tutuitero/saludo/hola. ¿Qué estamos viendo? Estaremos en frente de nuestra nueva plantilla casi perfectamente renderizada. Y digo "casi", porque aunque el resultado general en este caso es muy bueno, recordemos que estamos utilizando dos hojas de estilo distintas y no estamos utilizando la misma convención de nombres de elementos en ambos.
Si queremos utilizar dos plantillas indistintamente, tendremos que trabajar un poco las hojas de estilo, para que utilicemos los mismos elementos en nuestras vistas.
Ejercicio sencillo
Vamos ahora a implementar una despedida (tal como hacen en el tutorial):
1) Creamos la función adios() dentro de saludo_controller.php
public function adios() {
$this->template = 'default';
}
Observe que le hemos a asignado a nuestra variable $template el valor 'default', para que tome la plantilla por omisión.
2) Creamos un documento adios.phtml dentro del directorio views/saludo
<div class="textboxright">
<h2>Adios KumbiaPHP</h2>
<?php echo link_to('saludo/hola/', 'Volver a Saludar') ?>
</div>
Observe que hemos puesto un enlace a hola, haciendo uso de la función echo_link_to(). Dentro de hola, pondremos un enlace a adios utilizando la misma función.
Ahora, haciendo clic en los enlaces estaremos cambiando tanto de función, como de plantilla.
Con este sencillo ejemplo, hemos hecho uso de templates y partials, para mantener simultáneamente dos plantillas distintas en nuestro sitio web. El uso de partials no es obligatorio, aunque recomendado para facilitar el entendimiento del código. El uso de templates agrega mucha versatilidad a nuestro sitio. Pensemos por ejemplo en que tenemos una plantilla para visitantes desde computadores, y una plantilla para visitantes desde dispositivos móviles; ésta es una de las muchas posibilidades de uso.
