7.5. Creación de un custom propio para una aplicación de gvHIDRA

El propósito del presente manual es servir como una guía para que, partiendo de un custom de aplicación básico (el custom "default" incluido en la distribución), podamos modificar/añadir características propias para nuestra aplicación .

El manual no explica sintaxis u opciones del lenguaje de hojas de estilo css, para ello ya hay varios tutoriales en la web que se pueden consultar par un conocimiento mas amplio de css.

Lo que se especificará a lo largo del manual será, la correspondencia entre las diferentes partes de una ventana de una aplicación gvHIDRA (barra superior, inferior, paneles, botones, etc), y los clases o secciones dentro del archivo .css responsables de controlar las características y apariencias de dichas partes .

7.5.1. Pasos previos

Para no empezar desde cero y ahorrarnos tiempo de teclear muchas directivas, primero copiamos un custom base que esta incluido en la distribución (el directorio "default" que esta en /ruta-de-nuestro-proyecto/igep/custom/ ) y lo pegamos en la misma ruta (cambiándole de nombre al que queremos que sea el nombre de nuestro custom) .

Una vez hecho eso modificamos las rutas dentro de los siguientes archivos para que

  • /ruta-de-nuestro-proyecto/igep/custom/nuestroCustom/include.php

  • /ruta-de-nuestro-proyecto/igep/custom/nuestroCustom/include_class.php

y donde haya una referencia a "default" la remplazamos por el nombre que le hemos dado al directorio de nuestro custom .

Por ultimo modificamos la directiva de configuración <customDirName> en el archivo /ruta-de-nuestro-proyecto/igep/gvHidraConfig.inc.xml indicando el nombre de nuestro directorio de custom (solamente el nombre, no la ruta completa):

<customDirName>nombre-dir-custom</customDirName>

y además especificamos el nombre de nuestra aplicación en el fichero /ruta-de-nuestro-proyecto/gvHidraConfig.inc.xml:

<applicationName>nombre_app</applicationName>

7.5.2. Correspondencias entre ventanas y código en el archivo aplicacion.css

Vamos a describir la correspondencia entre las partes de la ventana con cada una de los

selectores que se definen en el archivo /ruta de nuestro custom/css/aplicacion.css

  • .formularios:

    Controla las características de los diferentes formularios de la aplicación (tanto en modo tabular como registro), en él, podemos cambiar el tamaño de las fuentes, el borde, el color, el background, ...

    Aquí vemos el aspecto en una ventana con la definición por defecto:

    Si cambiamos el font-size (tamaño), el font-weight(bold = negrita), y el color de fondo (background)

    .formularios {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 16px;
       font-weight: bold;
       border: 0px;
       color: #857256;
       background-color: #cfcfcf;
    }

    Veríamos los siguientes cambios en el aspecto :

  • .text:

    Estilo que se aplica a la etiqueta que acompaña a un elemento de tipo radiobutton.

  • .menu y .submenu:

    Estilo de los menús y submenús de la pantalla inicial.

  • .cabecerainicial:

    Se corresponde con la barra superior de la página, en la que figura el nombre del usuario validado en el centro de la barra, y alineado a la derecha veremos el botón de salida de la aplicación si nos encontramos en la pantalla inicial, y en caso de que nos encontremos en una de las ventanas de la aplicación también veremos el botón de regreso a la pantalla principal.

    Probamos cambiar el color al negro, y la alineación de texto a izquierda:

    .cabecerainicial {
       font-size: 12px; 
       font-weight: bold;
       color: #000000;
       text-align: left;
       background-color: #B2691B;
    }
  • .fondo_titaplic:

    Corresponde al espacio que está debajo de la barra superior (.cabecerainicial) , y que está reservado para incluir el título y la descripción de la aplicación. Controlando el tamaño, alineación y el background del espacio.

    .fondo_titaplic {
       width: 100%;
       height: 200px;
       vertical-align: bottom;
       background-attachment: fixed;
       background-repeat: no-repeat;
       background-position: center;
       background-color: #dfdfdf;
    }
  • .titulo_aplicacion:

    Controla las propiedades de la fuente del título que aparecerá en la pantalla principal, normalmente será el título de la aplicación.

    .titulo_aplicacion {
      font-size: 80px;
      font-weight: bold;
      color: #2C658F;    
    }
  • .descrip_titaplic:

    Corresponde al estilo que se le da a una pequeña descripción que podemos tener encima del titulo de la aplicación.

    .descrip_titaplic {
      font-size: 20px;
      font-weight: bold;
      color: #000000;
    }

    Imagenes de ejemplo para las tres clases anteriores :

    Imagen 1:

    Imagen 2:

  • .fondo_inicio:

    Básicamente se especifica el color del fondo de la aplicación, solo lo podremos ver reflejado en el espacio restante de la pagina inicial , que no esta ocupado por ventanas o menús.

  • .cabecera_modulos:

    Controla color, alineación de texto, tamaño... de la barra que esta debajo del titulo de la aplicación.

  • .datos_cabecera:

    Controla la presentación del texto incluido en la cabecera anterior (módulos principales, herramientas auxiliares, administración del sistema).

  • .menu_modulos:

    Color, fondo, fuente tamaño de las entradas del menú de la aplicación.

    .menu_modulos {
       font-size: 14px;
       font-weight: bold; //cambiamos de normal a negrita
       color: #000000;    //el color lo ponemos a negro
       text-decoration: underline; //cambiamos de none a underline (subrayado)
    }

    Imágenes de ejemplo:

    Imagen 1:

    Imagen 2:

Una vez dentro de una de las opciones del menú podemos ver, dentro de la ventana, una barra superior que contiene algunos datos de la sesión actual, y debajo esta el formulario para trabajar con la aplicación:

  • .barra_superior:

    Definir el estilo de la barra superior, donde está el menú desplegable.

  • .txtcabecera:

    Controla las características (tamaño, color, color-fondo, alineación de texto,...) de la barra superior de la ventana actual (no la ventana inicial).

    .txtcabecera {
       color: #F5EEE1;
       background-color: #0000cc;  //cambiamos el fondo de la cabecera a azul.
    }
  • .formulariosBarra:

    Definir el estilo de la barra superior del panel, donde están los botones tooltip.

  • .bandaInferior:

    Define un color de fondo para dibujar una línea en la parte inferior de la barra superior de la ventana, donde aparece el menú desplegable.

  • .barraSupPanel:

    Controla las características de la barra superior de una ventana. Esta barra está situada directamente debajo de la barra superior de la ventana (.txtcabecera).

    .barraSupPanel {
      font-weight: bold;
      color: #ffff33;  //cambiamos el color de texto a amarillo .
      background-color: #A48669;
    }
  • .barraSupTitulo:

    Estilo aplicable al título de la barra superior de un panel.

    .barraSupTitulo {
      text-align: left;
    }
  • .barraSupBotones:

    Estilo aplicable a los botones tooltip de la barra superior de un panel.

    .barraSupBotones {
        float:right; 
        display:inline; 
    }
  • .ayuda:

    Estilo correspondiente a la barra de ayuda que nos proporciona el plugin CWInfoContenedor y que aparecerá en la parte superior del panel.

    .ayuda {
       width: auto;
       margin:0 auto;
       padding-left: 10px;
       background:#f7f2cf;
       -moz-border-radius: 10px;  
       -webkit-border-radius: 10px; 
       -webkit-box-shadow: 3px 3px 0 #DFDFDF;
       -moz-box-shadow: 3px 3px 0 #DFDFDF;
    }
  • .textAyuda:

    Estilo aplicable al tipo de fuente con el que se mostrará la ayuda en la barra de ayuda.

    .textAyuda {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 10px;
       font-weight: bold;
       border: 0px;
       color: #4E4E4E;
    }
  • .formulariosBarra:

    Estilo del texto que aparece en la barra superior del panel, barra donde aparecerá el título de la ventana y los botones tooltip.

  • .barraInfPanel:

    Controla las características de la barra inferior del panel. Es la barra donde se incluirán los botones (buscar, guardar, cancelar).

  • .paginador:

    Controla la apariencia del paginador, cuando la consulta nos devuelve más datos de los que se pueden visualizar en una sola página, tanto cuando nos encontremos en modo registro como modo tabular.

  • .buttonPag:

    Dentro de la apariencia del paginador, con este controlamos el aspecto de las imágenes que aparecen en el paginador, las imágenes que se utilizan para desplazarse entre páginas, por ejemplo , .

  • .solapas:

    Gestiona la presentación de las solapas en general, (color del fondo, tamaño, distancia entre la solapa y el borde del panel, ...).

    .solapas {
      clear:both;
      border-left:2px solid #8F8F8F;
      border-bottom:2px solid #8F8F8F;
      border-top:1px none #D2D2D2;
    }
  • .solapa:

    Apariencia de las solapas inactivas, no seleccionadas.

  • .esqSolapa:

    Apariencia de la esquina de la solapa (que tiene forma de triángulo).

  • .opcion:

    Controlar la apariencia del titulo de una solapa inactiva (color, fuente, distancia a bordes, ...), no se refleja en la apariencia de la solapa activa.

  • .solapaActiva, .esqSolapaActiva y .opcionActiva:

    En este caso se controla la gestión de la solapa activa.

  • .infoFecha:

    Estilo que marca la apariencia del texto que indica el día de la semana que aparecerá al lado de un campo de texto de tipo fecha.

  • .boton:

    Controla la apariencia de los botones (color, tamaño, fondo, ...), botones que aparecen en la barra inferior de la pantalla.

    .boton {
       color: #ffffff; 
       border: thin #857256 solid;
       background-color: #000000;
    }
  • .boton_on:

    Lo mismo que .boton pero solo cuando el ratón está sobre el botón.

    .boton_on {
      color: #F5EEE1;
      border: thin #F5EEE1 solid;
      background-color: #0000cc;//fondo azul cuando pasamos el ratón por encima
    }
  • .enlace:

    Apariencia para los enlaces dentro de un campo de texto.

  • .editable y .noEditable:

    Para controlar la apariencia de los campos de texto editables y no editables respectivamente.

    .editable {
      color: #857256; //color de texto de campos de texto editables amarillo
      border: 1px solid #857256;
      background-color: #0000cc; // fondo azul
    }

    Imágenes de ejemplo:

    Imagen 1:

    Imagen 2:

  • .nuevo, .modificable, .borrar:

    Apariencia de un elemento del formulario (campo de texto, lista...), cuando nos encontramos en un panel tipo registro. Estilo .nuevo será el que corresponderá cuando el registro vaya a ser insertado, el .modificable, cuando el registro se vaya a modificar, y .borrar, por deducción, el registro estará marcado para ser borrado.

  • .tablaNuevo, .tablaModificar, .tablaBorrar, .tablaInsertar:

    Lo mismo que hemos indicado antes para un panel registro pero si nos encontramos en un panel tabular.

    Imagen inicial, y código de los cambios a aplicar:

    .tablaModificar {
      font-weight: bold;
      color: #ffff00; //color del texto para una fila que se este modificando
      border: 3px solid #0000cc; //incrementamos el grosor del borde y el color de fondo.
    }
    .tablaBorrar {
      color: #ff0000; //rojo
      background-color: #ffff00;  //amarillo
    }
    .tablaInsertar {
      font-weight: bold;
      color: #ffffff; //cambiamos el color de texto para una fila nueva
      border: 1px solid #857256;
      background-color: #cc0033; //y también el color de fondo .
    }

    el resultado será:

  • .tablaEdi y .tablaNoEdi:

    Los campos de una tabla que son editables / noEditables (background, color texto, ...).

  • .cargando:

    Controla la apariencia del mensaje que aparece cuando una búsqueda o alguna operación tarda más en ejecutarse.

  • .registro_par, .registro_par input, .registro_par select, .registro_impar, .registro_impar input, .registro_impar select:

    Estilos para definir filas pares e impares en un panel tabular.

  • .alerta, .aviso, .error, .sugerencia:

    Como se ha explicado en el capítulo 3 punto Mensajes y Errores, se clasifican los mensajes en cuatro tipos, estos estilos corresponden con cada uno de esos tipos.

    .alerta {
      background-color: #FFE5C4;
    }
  • .alerta input, .alerta select

    .aviso input, .aviso select

    .error input, .error select

    .sugerencia input, .sugerencia select:

    Este aspecto se puede utilizar también para un marcado de aspecto de filas en un panel tabular, para ayudar a este marcado también se ha añadido para elementos de formulario que pueden aparecer en un tabular.

    .alerta input {
      background-color: #FFE5C4;
    }
    .alerta select {
      background-color: #FFE5C4;
    }

    Imagen inicial y código de los cambios que se aplicarán:

    Al cambiar el fondo de una fila, por ejemplo en modo alerta, vemos la diferencia en la primera y última fila de la tabla.

    .alerta {
      background-color: #FFFF00;  //cambiamos a color amarillo .
    }
    .alerta input {
      background-color: #FFFF00;
    }
    .alerta select {
      background-color: #FFFF00;
    }
  • .fila_on:

    Controla la apariencia (p.ej su color de fondo) de una fila de una tabla cuando esta se seleccione.

  • .fila_on input, .fila_on select:

    Estilo de una fila_on que se aplica a los elementos html .

  • .fila_over:

    Apariencia de la fila cuando se pasa por el ratón encima.

  • .fila_over input, .fila_over select:

    Estilo de una fila_over que se aplica a los elementos html .

  • .fila_borrada:

    Apariencia (básicamente el color) de una fila marcada como borrada de una tabla.

  • .fila_ borrada input, .fila_ borrada select:

    Estilo de fila borrada que se aplica a los elementos html .

  • .tabla_registros, .tabla_cabecera, .tabla_titulo, .columna_cabecera:

    Definir el estilo de la tabla que engloba los registros.

  • .linea_cabezera_tabla y .linea_separa_filas:

    Apariencia (grosor, color) de la línea que está debajo de los nombres de las columnas de una tabla y apariencia de las líneas entre filas de la tabla, respectivamente.

  • .cabecera_tabla, .tabla_titulo:

    Apariencia de la cabecera y el título de una tabla dentro de un panel.

  • .grupoCampos:

    Si necesitamos marcar un grupo de campos podemos utilizar este estilo.

    .grupoCampos {
       color: #4E4E4E;
       border: 1px solid #4E4E4E;
       height: 18px;
    }
  • .fondo_ (gris | azul | rojo …) .avisocorto , .avisolargo y codigoerror:

    Controlan la apariencia de los mensajes de alerta, aviso, sugerencia y error (colores de fondo básicamente), y tamaño de texto y color, y alineación de los diferentes tipos de aviso que se puedan lanzar.

  • .arbol:

    Apariencia del panel inicial de un árbol (que está en la parte izquierda de la ventana).

  • .arbolIgep :

    Controlar color, tamaño, background del nodo raíz del árbol.

  • .arbolIgep a , .arbolIgep a:link , .arbolIgep a:visited , .arbolIgep a:hover :

    Controlar apariencia del nodo raíz dependiendo del su estado (visitado: visited , no visitado: link , y cuando se pasa el ratón por encima sin pinchar : hover).

  • .arbolIgepSeleccionado a , .arbolIgepSeleccionado a:link , .arbolIgepSeleccionado a:visited , .arbolIgepSeleccionado a:hover :

    Lo mismo que en el caso anterior, pero solo se aplica cuando el nodo raíz ha sido ya seleccionado y expandido. Por ejemplo, cuando se pasa el ratón por encima del nodo raíz, una vez este ha sido seleccionado y expandido, se aplica entonces el código que está en la sección .arbolIgepSeleccionado a:hover , y no el de arbolIgep a:hover .

  • .nodoIgep1 y nodoIgep1Seleccionado (con sus posibles opciones a:link a:hover ...etc ) :

    Igual para el caso anterior (que se aplicaba solo al nodo raíz), pero se aplica en este caso solo a los nodo del árbol de primer nivel (solo los que aparecen al expandir el nodo raíz) .

    Imagen inicial y código de los cambios a aplicar:

    Cambiamos el estilo de los nodos del nivel 1:

    .nodoIgep1 {
      font-size: small;
      font-style: italic;
      color: #857256; //cambiamos el color a negro
      text-decoration: none;
    }
    
    .nodoIgep1 a:link {
      text-decoration: none;
      color: #000000; //color nodos del primer nivel no visitados a negro 
    }

    y cambiamos el estilo cuando se pasa por el ratón por encima de nodos de primer nivel del árbol:

    .nodoIgep1 a:hover {
      font-size: 20px ; //tamaño mas grande
      color: #0000cc; //se cambia de color
      font-weight: bold;
      text-decoration: underline; //y el nodo se subraya
    }
  • .nodoIgep2 y nodoIgep1Seleccionado (con sus posibles opciones a:link a:hover ...etc ) :

    Igual que nodoIgep1, pero aplicado en este caso solo a los nodos del segundo nivel y posteriores del árbol.

  • .enlacebotonActivo :

    Controlar la apariencia del botón activo (pulsado actualmente) de un panel maestro-nDetalles.

  • .enlaceboton , .enlaceboton:link , .enlaceboton:visit , .enlaceboton:hover :

    Controlan la apariencia para el resto de botones no activos del panel maestro-nDetalles (no visitados: aplica la selección de link, visitados: aplica la de visited, cuando pasamos el ratón por encima: se aplica el código en la sección hover).