Estableciendo skins para nuestro portal

Como he comentado anteriormente la utilización de plantillas (skins) para nuestro portal agiliza enormemente el desarrollo de nuestra aplicación, dado que focalizamos nuestros esfuerzos en el ámbito de la programación o en el del diseño del portal.

Vamos a dotar a nuestro portal de soporte para plantillas (skins), para ello crearemos en la carpeta public la subcarpeta skins. Dentro de skins la carpeta con nuestra plantilla, en nuestro caso la llamaremos liquid.  Dentro de la misma las subcarpetas css e images.
El árbol de directorios queda:

/ public
  / skins
    / liquid
      / css
      / images

Es momento de mover el fichero antes creado public/css/layout.css a public/skins/liquid/css/layout.css, como todas las imágenes que pudiéramos tener de public/images a public/skins/liquid/images.
Crearemos un fichero xml en la raíz de nuestro skin con todos las hojas de estilo necesarias. Así pues creamos el fichero public/skins/liquid/skin.xml.

Contenido de public/skins/liquid/skin.xml:

<?xml version="1.0" encoding="ISO-8859-1"?>
<skin>
  <stylesheets>
    <stylesheet>layout.css</stylesheet>
    <stylesheet>text.css</stylesheet>
  </stylesheets>
</skin>

Crearemos una hoja de estilo para los textos, al igual que layout.css la ubicaremos en public/skins/liquid/css y tendrá como nombre text.css.

@CHARSET "ISO-8859-1";
body {
  font-family:Helvetica, Arial, sans-serif;
}

Nota: Ahora la referencia de nuestras imágenes debe ser relativa al path del skin, por lo tanto no olvidar renombrar la única imagen que tenemos en nuestro css:
Actualizar el fichero public/skins/liquid/css/layout.css:

#content-container {
 float: left;
 width: 100%;
 background: #FFF url(/skins/liquid/images/layout-two-liquid-background.gif) repeat-y 68% 0;
}

En Zend Framework surge la necesidad de la reutilización del código, para ayudarnos Zend Framework pone a nuestra disposición las "View Helpers", que son clases que extienden de Zend_View_Helper_Abstract y nos permiten invocar a los métodos de estas clases desde diferentes lugares de la aplicación.
Las "View Helper" van ubicadas en el directorio application/views/helpers, allí crearemos nuestra "View Helper" llamada LoadSkin.php.

Contenido de application/views/helpers/LoadSkin.php:

<?php
/**
 * Este "helper" cargará las hojas de estilos de nuestro skin
 *
 */
class Zend_View_Helper_LoadSkin extends Zend_View_Helper_Abstract
{
 public function loadSkin ($skin)
 {
  // Leemos del fichero de configuración xml las hojas he iteramos entre ellas
  $skinData = new Zend_Config_Xml('./skins/' . $skin . '/skin.xml');  
  $stylesheets = $skinData->stylesheets->stylesheet;
  // La documentación de Zend_Config_Xml indica que los datos leídos se retornarán
  // como strings, en el caso de haber un solo elemento retornaría un string. 
  // http://framework.zend.com/manual/1.12/en/zend.config.adapters.xml.html
  if($stylesheets instanceof Zend_Config)
   $stylesheetsArray = $stylesheets->toArray();
  else
   $stylesheetsArray = array($stylesheets);
  // Iteramos entre los diferentes elementos
  if (is_array($stylesheetsArray)) {
   foreach ($stylesheetsArray as $stylesheet) {
    $this->view->headLink()->appendStylesheet('/skins/' . $skin .
      '/css/' . $stylesheet);
   }
  }
 }
}

Es necesario pasarle al "View Helper" una plantilla (skin) válida, podemos usar muchos métodos pero de momento una forma rápida de inicializar el sistema de plantillas es establecer el entorno desde la clase Bootstrap, para ello añadiremos un método nuevo llamado _initview:
Contenido del fichero application/Bootstrap.php:

<?php
class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
 protected function _initView()
 {
  // Initialize view
  $view = new Zend_View();
  $view->doctype('XHTML1_STRICT');
  $view->headTitle('Centro de Documentación');
  $view->skin = 'liquid';
  // Add it to the ViewRenderer
  $viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper(
    'ViewRenderer'
  );
  $viewRenderer->setView($view);
  // Return it, so that it can be stored by the bootstrap
  return $view;
 }
}

Ahora que ya hemos inicializado las vistas con nuestra plantilla, solo nos falta invocarla en el layout: Meta del head del fichero application/layouts/scripts/layout.phtml:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<?php
$this->loadSkin($this->skin);
echo $this->headMeta();
echo $this->headTitle ();
echo $this->headScript (); 
echo $this->headLink ();
?>
</head>

Podemos ver el resultado navegando en http://localhost:

Realmente no veremos muchos cambios, si acaso la tipografía ya que hemos incluido un estilo específico para la misma.

Nota: Como detalle observaremos que el título de la página no se muestra. Esto es debido a la codificación UTF-8, si en lugar de  $view->headTitle('Centro de Documentación'); fuera  $view->headTitle('Centro de Documentacion'); el título sí se mostraría. Más adelante veremos como solucionar este problema.