3.4. Diseño de pantalla con smarty/plugins

3.4.1. ¿Qué es un template?

Es un fichero de texto con extensión TPL. La idea original de Smarty es que fuese una plantilla o TEMPLATE (de ahí su extensión). En el caso de gvHidra, se intentaba que la Web se pareciese lo máximo posible a un modelo Cliente-Servidor, con una estructutra de capas para distanciar lo máximo posible el diseño.

El fichero .tpl, es una plantilla en la que se diseña la parte de presentación combinando algunas etiquetas HTML (opcionalmente) con etiquetas propias de Smarty y elementos que denominamos "plugins" creados para gvHidra. Smarty actúa como motor de esas plantillas, y renderiza las etiquetas y plugins en código HTML y Javascript.

Smarty está implementado en PHP, por lo que se emplea ese lenguaje para procesar la presentación, es decir, los plugins lo utilizan para la lógica de presentación de una plantilla. Esto nos permite obtener una clara separación entre la aplicación lógica y el contenido en la presentación. No hay problema entre la lógica y su plantilla bajo la condición que esta lógica sea estrictamente para presentación.

3.4.2. Cómo realizar un template (tpl)

Los elementos que aparecen entre llaves dentro de la tpl pueden ser tanto plugins propios de gvHidra como etiquetas propias de Smarty. Principalmente utilizaremos plugins para diseñar la presentación de la aplicación, aunque en momentos puntuales puede ser que necesitemos el uso de alguna etiqueta de smarty.

Tenemos dos tipos de plugins:

  1. Plugin block: Son plugins que pueden anidar otros plugins. Se componen de una etiqueta de apertura y una de cierre. En la etiqueta de apertura es donde se parametrizará el plugin.

    Ej. {CWTabla conCheck="true" seleccionUnica="true" id="Tabla1" datos=$smty_datosTabla}

    ...

    {/CWTabla}

  2. Plugin function: Son plugins independientes, pueden estar dentro de un plugin block. Estos solamente tienen una etiqueta, y será en ella donde parametrizaremos el plugin.

    Ej. {CWCampoTexto nombre="lisCoche" editable="true" size="10" textoAsociado="Coche"}

La tpl deberá tener una estructura válida, es decir, hay ciertos plugins que no se deben colocar de forma aleatoria, sino que tienen su orden. En el punto 1.1 del capítulo 2 Anatomia de una ventana gvHidra se explicó las zonas que existen en una pantalla gvHidra, podemos decir que en la tpl se refleja esa distribución de la pantalla.

La imagen anterior nos muestra una pantalla, ella estará englobada por el plugin {CWVentana} ... {/CWVentana}

  • {CWBarra} ... {/CWBarra} (1)

    En este bloque tendremos el menú de la aplicación, si lo hay, con el plugin {CWMenuLayer}. A continuación diversa información, opcional, que podrá ser dada con los parámetros del plugin CWBarra. Los botones del final de la barra son fijos de gvHidra, la X vuelve al menú principal y el otro nos sacará de la aplicación.

    Dentro de este bloque podremos colocar botones tooltip, si son necesarios, que se corresponden con el plugin {CWBotonTooltip}

  • {CWMarcoPanel} ... {/CWMarcoPanel} (2) (3) (4) (5)

    Este plugin engloba todo lo que consideramos panel de la pantalla. Dentro de él se diferenciarán los distintos modos de trabajo, cada modo de trabajo, (2) (3) (4). irá englobado por las etiquetas {CWPanel} ... {/CWPanel}.

  • {CWBarraSupPanel} ... {/CWBarraSupPanel} (2)

    Dentro de este bloque podremos insertar el plugin {CWBotonTooltip} para crear los botones de la derecha.

  • {CWContenedor} ... {/CWContenedor} (3)

    Aquí es donde diseñaremos la parte principal de la pantalla, donde distribuiremos los campos, listas... donde ya utilizaremos unos plugins u otros dependiendo de si queremos diseñar un tabular o un registro.

    Tabular

    Necesitaremos insertar el plugin {CWTabla} al que se le pasarán ciertos parámetros, entre ellos está el más importante, datos, que será el que contendrá todos los datos.

    Tendrá una estructura como la siguiente:

    {CWTabla}

    {CWFila}

    ...

    {/CWFila}

    {/CWTabla}
    Registro

    Necesitaremos insertar el plugin {CWFichaEdicion} al que se le pasarán ciertos parámetros, entre ellos está el más importante, datos, que será el que contendrá todos los datos.

    Tendrá una estructura como la siguiente:

    {CWFichaEdicion}

    {CWFicha}

    ...

    {/CWFicha}

    {/CWFichaEdicion}

    Un caso especial será cuando estamos diseñando la búsqueda, en este caso tenemos un {CWFicha} pero sin necesidad de estar dentro de un bloque {CWFichaEdicion}.

    Búsqueda

    Tendrá una estructura como la siguiente:

    {CWFicha}

    ...

    {/CWFicha}

    En esta zona es donde conoceremos la totalidad de los datos con los que se va a trabajar, por eso tenemos la excepción de que el plugin {CWPaginador} se ubica dentro de este bloque aunque físicamente luego se vea en el bloque del {CWBarraInfPanel}.

  • {CWBarraInfPanel} ... {/CWBarraInfPanel} (4)

    En esta barra se incluirán, si se quieren, los botones que se corresponden con el plugin {CWBoton}.

  • {CWContenedorPestanyas} ... {/CWContenedorPestanyas} (5)

    Este bloque engloba las pestañas que aparecerán en la pantalla, tendremos que insertar un plugin {CWPestanya} por cada pestaña que queramos.

Hay una serie de plugins que serán obligatorios y otros opcionales, que añadiremos o quitaremos según la funcionalidad que se le quiera dar a la pantalla. En la documentación de los plugins se encuentra la definición de cada uno, así como la serie de argumentos que contendrán.

[NOTA: En la carpeta 'igep/doc/plantillasTipo' hay un ejemplo de plantilla para cada tipo de pantalla a crear.]

[NOTA: Tener en cuenta a la hora de diseñar la plantilla la resolución de pantalla de los usuarios. Si por ejemplo tienen 800x600 nos caben unas 12 líneas en una tabla, a diferencia de las 32 que nos caben en una resolución 1280x1024 .]

Vamos a presentar la estructura obligatoria para los principales modos de trabajo:

3.4.2.1. Estructura para mantenimientos generales

{CWVentana ...}
   {CWBarra ...}
      si existe menú habrá {CWMenuLayer}
   {/CWBarra}

   {CWMarcoPanel ...}

      PANEL DE FILTRO
      {CWPanel id="fil" ...}
         {CWBarraSupPanel ...}
            Si existen botones ToolTip {CWBotonToolTip ...}
         {/CWBarraSupPanel}
         {CWContenedor}
            {CWFicha}

            {/CWFicha}
         {/CWContenedor}
         {CWBarraInfPanel}
            Si existen botones {CWBoton ...}
         {/CWBarraInfPanel}
      {/CWPanel}

      PANEL DE EDICIÓN
      {CWPanel id="edi|ediMaestro|ediDetalle" ... }
         {CWBarraSupPanel ...}
            Si existen botones ToolTip {CWBotonToolTip ...}
         {/CWBarraSupPanel}
      {CWContenedor}
         {CWFichaEdicion ...}
            {CWFicha}

            {/CWFicha}
         {/CWFichaEdicion}
      {/CWContenedor}
      {CWBarraInfPanel}
         Si existen botones {CWBoton ...}
      {/CWBarraInfPanel}
   {/CWPanel}

   PANEL LISTADO
   {CWPanel id="lis|lisMaestro|lisDetalle" ...}
      {CWBarraSupPanel ...}
         Si existen botones ToolTip {CWBotonToolTip ...}
      {/CWBarraSupPanel}
      {CWContenedor}
         {CWTabla ...}
            {CWFila ...}

            {/CWFila}
         {/CWTabla}
      {/CWContenedor}
      {CWBarraInfPanel}
         Si existen botones {CWBoton ...}
      {/CWBarraInfPanel}
   {/CWPanel}

   {CWContenedorPestanyas ...}
      aparecera un {CWPestanya ... } por cada pestaña que tengamos.
   {/CWContenedorPestanyas}
 {/CWMarcoPanel}
{/CWVentana}

3.4.2.2. Mejorando el aspecto visual

Vamos a dar unas indicaciones a la hora de la distribución y aspecto de los campos en el panel para intentar mejorar su visualización.

  1. Distribución de campos dentro de un CWFicha.

    Para la distribución de los campos en la ficha nos tendremos que apoyar en el lenguaje HTML. Etiquetas como <br /> (saltos de línea), &nbsp; (espacios en blanco) y <table> (tablas) nos ayudarán a distribuir los campos en el panel. Si nos decantamos por la distribución mediante tablas, utilizar el estilo asociado llamado "formularios", ver punto Personalizando el estilo.

  2. Tabulación entre los campos.

    Para facilitar la navegación entre los campos de una ventana, todos los componentes disponen de un parámetro tabindex que permite indicar el orden en el que se quieren recorrer. Por convenio, recomendamos asignar valores de 10 en 10 entre los componentes, esto facilita la incorporación de nuevos componentes sin problemas.

    {CWCampoTexto tabindex="10" ...}
    {CWLista tabindex="20" ...}

    Los campos no editables no entrarán en esta navegación con el tabulador. Si, por una acción de interfaz un campo se convierte en editable, el sistema le asignará valor del parámetro "tabindex" de la tpl. Otra opción es que el programador desde una acción de interfaz cambie dinámicamente el tabindex de un componente. Para ello dispone del método setTabIndex.

    $objIU->setTabIndex('field1',30);
  3. Resaltado de filas en un CWTabla.

    Para poder resaltar una fila en una tabla de gvHidra tenemos que indicárselo en la construcción de la misma (típicamente en una acción buscar método postBuscar). Para ello utilizaremos el método del objDatos setRowColor, el cual tiene dos parámetros: la fila y el color. Actualmente, los posibles valores de color son: 'alerta', 'aviso', 'error' y 'sugerencia'.

    Ejemplo:

    function postBuscar($objDatos)
    {
       //Obtenemos la matriz de datos
       $m_datos = $objDatos->getAllTuplas();
    
       foreach($m_datos as $indice =>$tupla)
       {
          //Si el tipo de la tupla es urgente lo marcamos con un color.
          if($tupla['tipo']=='URGENTE')
             $objDatos->setRowColor($m_datos[$indice],'alerta');
          else
             $objDatos->setRowColor($m_datos[$indice],'none');
       }
    
       //Guardamos la matriz de datos modificada
       $objDatos->setAllTuplas($m_datos);
    }

3.4.3. Documentación de los plugins

La documentación respecto a los plugins, descripción, parámetros y uso la podemos ver en el Apéndice B Documentación de plugins gvHIDRA.