3.6. Personalizando el estilo

El framework suministra un método para personalizar su aspecto y funcionamiento, que en adelante llamaremos 'temas'. Los temas están ubicados en la carpeta en igep/custom, podemos tener varios temas y activar uno en concreto mediante el atributo customDirName del fichero gvHidraConfig.inc.xml del framework o de la aplicación, o con el método ConfigFramework->setCustomDirName (ver configuración de gvHidraConfig.xml).

Con gvHidra vienen tres temas configurados:

Vamos a pasar a explicar la estructura inicial que debe contener un tema.

3.6.1. CSS

Tendremos un directorio CSS donde tendremos la hoja de estilo a utilizar en nuestra aplicación (aplicacion.css) y otra hoja de estilo para el menú desplegable (layersmenu-cit.css). La hoja de estilo que se aplica al calendario en estos momentos no es personalizable.

Para personalizar la hoja de estilo aplicacion.css entendiendo las reglas de estilo que se han definido para gvHidra existe una explicación detallada de qué significa cada una y dónde se aplica cada selector en el punto Creación de un custom propio del capítulo 7.

3.6.2. Imágenes

En el directorio imágenes tenemos una estructura de carpetas que hay que respetar, a la vez que también hay que respetar los nombres de los fichero, ya que el framework buscará en esa ruta y con ese nombre.

Explicación de la estructura de directorios:

  • acciones: Imágenes para los CWBoton y las flechas de ordenación en un CWTabla (14.gif y 16.gif).

  • arbol: Imágenes que se utilizan cuando trabajemos con el patrón árbol.

  • avisos: Imágenes que se utilizan para los diferentes mensajes que utiliza el framework (avisos, sugerencias, errores...)

  • botones: Imágenes de los botones tooltip. Existen dos imágenes por cada botón, uno con la imagen en color para cuando el botón está activo y otra para el estado inactivo, estos llevan el sufijo "off".

  • listados: Logo para listados.

  • logos: Imágenes para los logos de la pantalla principal y menú desplegable de la barra superior.

    "logo.gif": Logo que aparece al final de la pantalla de entrada.

    "logoMenu.gif": Logo del menú de la barra superior de las pantallas.

    "logoSuperior.gif": Logo de fondo en la pantalla de entrada.

  • menu: Imágenes para los menús de la pantalla principal.

  • paginacion: Imágenes para los botones de la paginación.

  • pestanyas: Imágenes para las pestañas de los modos de trabajo.

  • tablas: Imágenes que se utilizan en tablas. Actualmente tenemos la imagen que nos servirá para marcar la línea de separación de la cabecera en las tablas.

3.6.3. Ficheros de configuración del custom

Tenemos cuatro ficheros que nos permitirán una configuración del custom que sobreescribirá la propia del framework, pero, que a la vez estará por debajo de la configuración de cada aplicación:

  • include.php: fichero donde se deben incluir las clases propias del custom. Pueden ser clasesManejadoras (directorio actions), tipos (directorio types), clases de negocio (directorio class), ...

  • CustomMapping.php: define los mappings propios del custom.

  • gvHidraConfig.inc.xml: define la configuración estática del custom.

  • CustomMainWindow: define la configuración dinámica del custom.