Esta sección cubrirá sólo unos pocos aspectos básicos de la escritura de las plantillas de mason, especialmente aquellos detalles relacionados con eBox. Si necesita información concreta acerca de algún aspecto debería revistar la documentación de mason o el libro de mason. Más ejemplos se pueden encontrar en Capítulo 7.
La primera cosa que la plantilla de mason debe tener es la declaración de los argumentos que espera. Únicamente se ha de escribir el nombre de las variables, una por línea y nada más. Los argumentos declarados como arrays en la plantilla serán pasados como la referencia a un array por el CGI.
En nuestro ejemplo vamos a enviar un array con nombres a la plantilla, y la plantilla saludará a cada uno de ellos por separado. Utilizamos un array vacío como valor por defecto para la variable, aunque los valores por defecto son opcionales. Si no se le da nada y ni se le pasa ese argumento a la plantilla, se lanzará una excepción.
La siguiente parte es la sección de inicialización. En esta
sección podemos escribir código perl normal. Es opcional y la mayor
parte de las veces no necesario. Sin embargo, todas las plantillas de
eBox tienen uno, porque siempre está la necesidad de tener i18n, por
lo que importaremos EBox::Gettext:
Ahora podemos escribir el cuerpo de la plantilla. La idea es
escribir únicamente HTML y utilizar un par de características
sintácticas para insertar código de perl cuando es necesario. Primero,
aprenderemos a controlar el flujo de la plantilla. Todas las lineas
que comiencen por % son interpretadas como código
de perl.
Ejemplo 5.10. Incluyendo código perl en una plantilla de mason
<ul>
% foreach my $person (@people) {
<li>Hello</li>
% }
</ul>Queremos imprimir el nombre de una persona por cada elemento de
la lista. Incluir expresiones de perl en las marcas especiales
<% %> imprime el valor de la expresión en la
salida de la plantilla. Vamos a utilizar esta característica para
imprimir el nombre de la persona y traducir la cadena "Hola"
(internacionalización es explicada en Sección 2.4).
Ejemplo 5.11. Imprimiendo cadenas en una plantilla de mason
<ul>
% foreach my $person (@people) {
<li><% __('Hola ') %> <% $person %></li>
% }
</ul>La macro m4 de ebox exporta la ruta de instalación para las
plantillas de mason como TEMPLATESPATH, por lo que
deberían instalarse bajo ese directorio, posiblemente creando un
subdirectorio para el módulo. Cuando se necesite referenciar una
plantilla en el código, se puede usar una ruta relativa a
TEMPLATESPATH. Siguiendo nuestro ejemplo, se usará
un subdirectorio llamado hello para nuestras
plantillas, y colocaremos una plantilla denominada
world.mas en él.
Hay unos pocos elementos de la GUI que son mostrados de la misma forma en todos los módulos de eBox. Cosas como consejos, mensajes, avisos, errores, tablas y formularios mantienen un estilo común. Todas estas cosas están definidas en un fichero CSS, para que todos los módulos tengan un estilo consistente. Algunos de estos elementos tienen un comportamiento dinámico también. Los consejos son ocultados cuando la página se carga, y se muestran si el usuario pulsa sobre el enlace de la esquina superior derecha de la página. Esta sección da una repaso a todos estos elementos y como usarlos para alcanzar un interfaz de usuario consistente con el resto de módulos de eBox.
Toda información que queramos mostrar al usuario, ya sea para advertirle que una operación tiene riesgo, notificarle un error, mostrarle ayuda o darle una información relevante la escribiremos siguiendo el mismo esquema en html pero usando diferentes estilos CSS.
Ejemplo 5.12. Esquema html para mostrarle información al usuario
<div class='class-name'> Mensaje para el usuario. </div>
Nombres de clases CSS para mostrarle información al usuario
Para mostrar ayuda al usuario. Recordemos que al usar este estilo la ayuda aparecerá oculta al usuario hasta que el decida que sea visible.
Para notificar un error al usuario.
Para notificar al usuario ayuda de forma permanente. Cuando queremos que el usuario conozca una determinada información sin necesidad de activar la ayuda.
Para mostrar advertencias al usuario, por ejemplo, si queremos advertirle cuando va a borrar un determinado dato.
Si queremos mostrar un listado de datos, por ejemplo un listado de
usuarios, usamos una tabla con los elementos thead y
tbody para mostrar la cabecera del listado y su
contenido respectivamente. El estilo CSS para esta tabla es
dataTable.
Ejemplo 5.13. Tabla de listado de datos
<table class='dataTable'>
<caption><% __('Object List') %></caption>
<thead>
<tr>
<th class='tleft'><% __('Name') %></th>
<th class='thOptions'><% __('Action') %></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td class='tcenter'>
<a href='Del?objectname=<% $obj->{'name'} %>'>
<img src='/data/images/delete.gif'
title="<% __('Delete') %>"
alt="<% __('Delete') %>"/>
</a>
</td>
</tr>
</tbody>
</table>Como vemos en el ejemplo la tabla tiene una etiqueta
caption para especificar el título de la tabla, no es
obligatorio pero es de ayuda para identificar el tipo de datos que estamos
listando.
El resto de estilos CSS se usan para alinear el texto de las columnas:
Las columnas de cabecera (thead) tienen por defecto la alineación en el centro, nosotros obligamos a que sea a la izquierda para facilitar la lectura en los listados de datos.
Las acciones que podemos ejecutar sobre cada fila de un listado se alinean en el centro con este estilo.
Ajusta el tamaño de la columna al mínimo necesario y alinea el texto en el centro.
Para mostrar un formulario usamos una tabla de dos columnas con el estilo formTable.
Ejemplo 5.14. Formulario de entrada de datos
<table class='formTable'>
<tr>
<td class='tright'>
<span class='ftitle'><% __('Name') %>:</span>
</td>
<td>
<input class='inputText' type='text' name='name' />
</td>
</tr>
<tr>
<td></td>
<td>
<input class='inputButton' type='submit' />
</td>
</tr>
</table>La primera columna contiene la descripción correspondiente al dato
que vamos a introducir. Alineamos la columna de la descripción a la
derecha usando la clase tright, y el texto lo
escribimos dentro de la etiqueta span con la clase
ftitle para resaltarlo más.
La entrada de texto en la columna derecha tiene la clase inputText para decorar la caja de entrada de texto.
El botón del formulario tiene el estilo inputButton con un propósito meramente decorativo.