3.5 Vista

La Vista crea y presenta las páginas que generan las acciones. Es la parte en la que intervienen, además de los programadores, los diseñadores gráficos de la aplicación.

Para simplificar la tarea a ambos, la vista se apoya en las plantillas.

El propósito es que las plantillas sean muy fáciles de leer e interpretar por un diseñador, por lo que se componen en su mayor parte de código Html. El resto de código son llamadas en php a lo helpers y estructuras de control en php.

Helpers

¿Qué son los helpers?

Son funciones php que devuelven código html. Son, además una manera de ahorrar tiempo al escribir código html en una plantilla, ya que abstraen código que generalmente se repite continuamente.

¿Cómo se utilizan?

Para ver como usarlos, veamos un ejemplo:

<h1> Hola </h1>
<ul> Listado
<li> <?php echo linkTo('texto enlace', 'enlace') ?></li>
</ul>

En el ejemplo se utiliza un helper para insertar un texto con un link

Los helpers se encuentran en

OP_framework/lib/helpers

Están separados por archivos agrupados por funcionalidad. Para utilizar un grupo de helpers en una plantilla se declaran utilizando el helper useHelper().

<?php useHelper('i18n', 'form') ?>

Se pasa como parámetro el nombre de los archivos a incluir separados por comas.

No todos hace falta incluirlos, la Vista, por defecto ya incluye los siguientes,

url : helpers de gestión de enlaces y etiquetas
standard: helpers de inclusion de parciales y componentes
form : helpers de elementos de formulario
i18n : helpers para la internacionalización

Crear Helpers

Pueden crearse todos los helpers que sea necesario. Para ello hay que crear un archivo dentro de /lib/helpers con el nombre mishelpers.hlp.php. En éste archivo definir las funciones que ultilizaremos como helper en las plantillas. Y en éstas llamar a la función useHelper('mishelpers') para poder utilizarlos.

Variables accesibles desde las plantillas

Es posible, desde las plantillas acceder a una serie de variables predefinidas. Y lo que permiten es acceder a objetos del framework que contienen información que puede ser utilizada en las plantillas.

$op_context Objeto Contexto. Proporciona métodos para obtener las variables de sesion o información del usuario
$op_response Objeto Respuesta. Proporciona métodos apra obtener varibles de la repuesta.
$op_content Se llama desde el layout para indicarle donde se debe cargar el contenido.

$op_content sólo puede utilizarse en el 'Layout', ya que define dónde se mostrará el contenido

Layout

¿Qué es el layout?

La plantillas están estructuradas según el patrón de diseño "Decorador". 'Layout' es la plantilla decorador o plantilla global, es decir, la que contiene el código HTML común de una aplicación. Normalmente se utiliza para mostrar la navegación, el logotipo y cabecera, etc.

Todas las aplicaciones tienen un layout por defecto. El cual se define a nivel de plataforma.

OP_fframework/miplataforma/templates/miplataforma.tpl.php

Éste archivo debe existir en todas las aplicaciones. Además, el nombre debe coincidir con el nombre de la aplicación. Se pueden crear más de un layout. Los layout adicionales deberán colocarse en la misma carpeta, que el layout por defecto. Será desde las acciones, donde se podrá cambiar el layout que se va a utilizar.

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<title><?php echo includeTitle($op_response) ?></title>

<?php echo includeCss($op_response) ?>
<?php echo includeJs($op_response) ?>

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>

<?php echo $op_content ?>

</body>
</html>

En el ejemplo vemos la ultilización de algunos helpers y la variable $op_content, que define dónde se mostrará el contenido definido en los templates por las acciones.

Templates

El resto de código HTML se incluye en los denominados 'templates'. Éstos se encuentran en

OP_framework/miplataforma/apps/miaplicacion/modules/mimodulo/templates/miaccion.tpl.php

Dónde miaccion es el nombre que define una acción. Las acciones que tengan salida HTML deben tener un 'template' con el mismo nombre, que será el template por defecto asociado a la acción. Pero desde ésta se puede cambiar el 'Template' que se muestra utilizando el objeto $op_response. Véase Controlador.

<h1> Hola </h1>
<ul> Listado
<li> <?php echo linkTo('texto enlace', 'enlace') ?></li>
</ul>

Templates Parciales

Se utilizan para poder reutilizar partes de código HTML. Se guardan en el mismo sitio que los templates, pero se distinguen porque el nombre siempre empieza por _. En el ejemplo anterior podríamos extraer parte del código en una plantilla parcial. Para incluirlo se utiliza el helper includePartial("miparcial"). En siguiente ejemplo obtendríamos como resultado lo mismo que en el ejemplo anterior.

OP_framework/miplataforma/apps/miaplicacion/modules/mimodulo/templates/miaccion.tpl.php
<h1> Hola </h1>
<ul> Listado
<?php echo includePartial('miparcial') ?>
</ul>

OP_framework/miplataforma/apps/miaplicacion/modules/mimodulo/templates/_miparcial.tpl.php
<li> <?php echo linkTo('texto enlace', 'enlace') ?></li>

Podemos incluir 'Templates Parciales' tanto dentro de un 'Template' como de otro 'Template Parcial'.

Componentes

Se utilizan para definir partes de código reutilizable pero que además incluyen su propia lógica. Por lo tanto, es un elemento parcial que se compone de dos partes, la lógica y la vista. La lógica se define en la carpeta acciones en el archivo components.class.php.

Ejemplo: OP_framework/miplataforma/apps/miaplicacion/modules/mimodulo/actions/components.class.php
class mimoduloComponents extends OP_Components{
public function micomponente(){

$menu = OP_Context::getInstance()->getAcl()->getAvailables();
$this->data = array('menu'=>$menu);
}
}

En el ejemplo anterior vemos como pasar los datos a la plantilla. La variable $this->data contiene los datos que serán accesibles desde la plantilla. Ésta se define como un 'Template Parcial', en el directorio templates y comenzando el nombre del archivo por un guión bajo, _micomponente.tpl.php

Ejemplo: OP_framework/miplataforma/apps/miaplicacion/modules/mimodulo/templates/_micomponente.tpl.php
<ul>
<?php foreach($menu as $mkey=>$item) :?>
<li><a rel="<?=$mkey?>" href="#"><?=$mkey?></a></li>
<?php endforeach ?>
</ul>

Como podemos ver, desde la plantilla accedemos directamente a la variable $menu, que es la que hemos asignado desde el controlador a $this->data.

Nótese la relación existente entre los nombres del componente, las acciones del componente y los nombres de las plantillas. El nombre de la acción del componente micomponente coincide con el nombre de la platilla asociada _micomponente.tpl.php.

Slots. Elementos parciales en el layout

Como ya vimos anteriormente, el 'Layout' es la plantilla 'decorador'. Hasta ahora hemos visto que a través de "$op_content" podemos definir el contenido. Pero sería realmente útil poder añadir al 'Layout' elementos parciales como un 'Template Parcial' o un 'Componente'. Ésto es posible gracias a los 'Slots'.

Los 'Slots' son huecos que se definen en el 'Layout' y que serán rellenados por el código definido en un 'Template' o por un 'Componente'. Por lo tanto existen dos tipos de 'Slots', los que rellenan código HTML definido en un template y los que incluyen un 'Componente'. A éstos, para diferenciarlos los denominaremos 'Slot de Componentes'

Esa parte del código del 'Layout será sustituido por el código que se defina en cada plantilla, por lo tanto, dependiendo la acción que se ejecute podria cambiar el contenido de esa parte de código. Veamos un ejemplo:

Layout: OP_framework/miplataforma/templates/miplataforma.tpl.php
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<title><?php echo includeTitle($op_response) ?></title>
<?php echo includeCss($op_response) ?>
<?php echo includeJs($op_response) ?>
</head>
<body>

<div id="lateral">
<?php includeSlot('lateral') ?>
</div>

<?php echo $op_content ?>

</body>
</html>

Template de miaccion1: OP_framework/miplataforma/apps/miaplicacion/modules/mimodulo/templates/miaccion1.tpl.php
<h1> Hola mundo desde accion1 </h1>

//Ésta parte de código aparecera en el 'Slot lateral' definido en el 'Layout' cuando se ejecute la 'accion1'
<?php slot('lateral') ?>
<p> lateral de accion1 </p>
<?php endSlot() ?>

Template de miaccion2: OP_framework/miplataforma/apps/miaplicacion/modules/mimodulo/templates/miaccion2.tpl.php
<h1> Hola mundo desde accion2 </h1>

//Ésta parte de código aparecera en el 'Slot lateral' definido en el 'Layout' cuando se ejecute la 'accion2'
<?php slot('lateral') ?>
<p> lateral de accion2 </p>
<?php endSlot() ?>

Slot de Componentes

Si en el 'Layout se quiere incluir un componente debemos utilizar un 'Slot de Componentes'. Es decir, definimos un hueco en el 'Layout' que se sustituirá por un 'Componente'. Un ejemplo de utilización puede ser un menú o las migas de pan de una página web.

Los 'Componentes' se definen en el archivo de configuración, como veremos más adelante en éste capítulo. Y en el 'Layout' de definen utilizando un 'helper', como vemos en el ejemplo.

Layout: OP_framework/miplataforma/templates/miplataforma.tpl.php
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<title><?php echo includeTitle($op_response) ?></title>
<?php echo includeCss($op_response) ?>
<?php echo includeJs($op_response) ?>
</head>
<body>

<div id="menu">
<?php includeSlotComponent('componente1') ?>
</div>

<div id="lateral">
<?php includeSlot('lateral') ?>
</div>

<?php echo $op_content ?>

</body>
</html>

En archivo de configuración indicaremos que el componente1 se encuentra en miaplicacion dentro de mimodulo y se llama micomponente con la siguiente línea en 'view.ini.php'

[components]
componente1 = "{miaplicacion, mimodulo , micomponente}"

Esquema resumen

Archivo de Configuración

El archivo de configuración de la vista se encuentra en la carpeta 'config' dentro de la carpeta de la plataforma. Se llama "view.ini.php" y existe uno por cada plataforma.

OP_framework/miplataforma/config/view.ini.php

A continuación se muestra un ejemplo de archivo de configuración

[http_metas]
content-type = text/html
charset = iso-8859-1

[metas]
title = Open Populi
robots = index, folow
description = Plataforma de Ayuntamientos
keywords = Open Populi, ayuntamiento

[external_files]
css = "{reset.css,forms.css,tables.css,estilos.css}"
js = "{jquery-1.2.6.min.js,funciones.js}"
favicon = favicon.ico

[components]
menu = "{backend,cliente,menu}"

El formato es similar a un archivo ".ini". Las secciones se definen ente corchetes y sus atributos se separan por lineas. Cuando se necesita asignar más de un valor a un atributo, se enbloban entre "{ }" y separados por comas.

Se definen:

Las cabeceras Html
Los Meta Tags
Archivos externos: JavaScripts y hojas de estilo
Los componentes

Cambiar el formato de salida

Es posible cambiar el formato de salida para renderizar un tipo de plantilla diferente para una misma acción. Cada formato está asociado a un "mimetype". Por lo tanto desde una acción podemos definir que tipo de plantilla se va a renderizar para que se lancen las cabeceras adecuadas.

class miModuloActions extends OP_Controller
{
public function miAccion(){

//....

$request->setRequestFormat('xml');
}
}

Para la acción anterior tenemos que crear un plantilla apropiada para el formato en que se va a renderizar, en éste caso "xml". El nombre del archivo de la plantilla ahora deberá llamarse miaccion.xml.php.

Los formatos disponibles son:

txt: text/plain
json: [application/json, application/x-json]
xml: [text/xml, application/xml, application/x-xml]
rdf: application/rdf+xml
atom: application/atom+xml

««« Modelo | Controlador »»»