Cómo usar las CSS de Velneo vERP en tus aplicaciones

La interfaz es la piel de nuestras aplicaciones

Los desarrolladores sabemos que la base de datos es fundamental así como los procesos que aplican las reglas de negocio, sin embargo, para el usuario final la interfaz es el punto de conexión con la aplicación, es lo que toca y lo que siente. Por este motivo la interfaz tiene un papel fundamental en la satisfacción del usuario final. Además, a cada cliente le satisface ver su imagen corporativa aplicada en el software que utilizan, y las CSS permiten que el se cumpla ese deseo.

CSS permite cambiar de piel de forma sencilla

Al igual que ocurre en el desarrollo de soluciones web donde se pueden aplicar CSS para configurar el aspecto de las páginas, en las aplicaciones que desarrollamos con Velneo disponemos también de la posibilidad de aplicar CSS para ajustar el aspecto visual de nuestras aplicaciones de forma rápida, sencilla. Además, con el uso de CSS tenemos la capacidad de cambiar el aspecto de nuestras aplicaciones sin tener que cambiar nuestro código.

Las CSS de Velneo vERP

En el componente de la plataforma Velneo vERP se incluyen unas CSS con un estilo claro y sencillo que algunos pueden llegar a catalogar como minimalista. Estas CSS están disponibles para los suscriptores de Velneo a través de este enlace a la base de datos de conocimiento del centro de soporte. Estas CSS son completas ya que incluyen configuración de la mayoría de objetos y controles más usados. Además, están documentadas con un un índice por orden alfabético de todos los selectores correspondientes a los objetos y controles de Velneo para que los puedas localizar rápidamente.

Velneo vERP CSS indice

Intégralas en tus aplicaciones

Una vez descargado el fichero con la CSS es muy fácil de integrar en tus aplicaciones.

Puedes usar esta CSS de forma local a un objeto, es decir, que tu aplicación tendrá un estilo visual diferente solo para determinados objetos. En este ejemplo vamos a aplicarlo a un formulario. Éste es el aspecto del formulario antes de aplicar las CSS.

Velneo vERP CSS formulario antes

Para hacerlo, en el manejador de evento que se ejecuta en el evento Pre-inicialización, añadimos el código que ves en la siguiente captura.

Velneo vERP CSS pre-inicialización formulario

Es importante aplicar las CSS en el evento Pre-inicialización para evitar el efecto de repintado que se produciría si lo aplicamos en el evento Post-inicializado ya que esa señal se dispara una vez que los controles ya han sido creados y están pintados.

Como las CSS se aplican en cascada, al hacerlo en un formulario de forma específica, esta CSS solo se aplicará en ese formulario y en todos los que se abren desde este formulario.

Tras aplicar la CSS en el formulario, éste es su nuevo aspecto.

Velneo vERP CSS formulario después

Si deseamos aplicar una CSS a toda la aplicación, utilizaremos el mismo código pero en el evento Pre-inicialización del marco AUTOEXEC, de esta forma y gracias a su aplicación en cascada, todos los objetos de interfaz de nuestra aplicación aplicados en la CSS se verán afectados. Así quedaría toda la aplicación con las CSS de Velneo vERP aplicada.

Velneo vERP CSS aplicada al AUTOEXEC

Un aspecto destacado de las CSS es que se pueden aplicar estilos a controles específicos basándonos en su identificador. En estas CSS vemos como el botón aceptar tiene un estilo específico de llamada a la acción, para conseguirlo se utiliza el código que se muestra en la siguiente captura.

Velneo vERP CSS botón aceptar

Finalmente debemos destacar que en la CSS se aplican iconos en determinados controles, como podemos ver en los controles de edición de maestro de la siguiente imagen.

Para conseguirlo debemos incluir los objetos dibujo estático en nuestro proyecto de aplicación o datos. No es necesario meterlos como ficheros adjuntos, aunque también se podría. Gracias al uso del siguiente script, podemos guardar estos objetos dibujo declarados en nuestros proyectos a la carpeta de cacheclient del usuario. En el código que veíamos que se ejecutaba en el evento Pre-inicialización observaremos que en su parte inicial se ejecuta el proceso llamado GUA_ICO_CSS, se trata de un proceso JavaScript que contiene el siguiente código encargado de guardar los objetos dibujo en disco.

// Guardar iconos en disco para usarlos en las CSS
importClass("VFile");
importClass("VImage");

// Preparar variables de trabajo
var fichero = new VFile();
var icono   = new VImage();
var iconos  = ["ABA", "ABA_BLA", "ARR", "ARR_BLA", "CRR", "DER", "DER_BLA", "IZQ", "IZQ_BLA"];
var alias   = "velneo_verp_2_app/";
var senda   = theApp.clientCachePath();

// Verificamos si el icono ya existe en el directorio del cacherun, en caso contrario se crea
for (var numIcono = 0; numIcono < iconos.length; numIcono++) {
	var fichero = new VFile(senda + iconos[numIcono]);
	if (fichero.exists() === false) {
		icono.loadResource(alias + iconos[numIcono]);
		icono.save(senda + iconos[numIcono] + ".png", "PNG");
	}
}

En la variable iconos del JavaScript se declara el array de los identificadores de los objetos dibujo con las imágenes a guardar en el directorio desde el que lo atrapará las CSS.

Velneo vERP CSS pre-inicialización formulario

Una vez que hemos guardado los dibujos en disco, guardamos la CSS de Velneo vERP en una variable local llamada CSS, y finalmente la aplicamos con el comando de instrucción Interfaz: Establecer hoja de estilo CSS una sustitución de caracteres para que las imágenes declaradas apunten a la senda del directorio de caché del usuario, con la fórmula replaceString(CSS, "SENDA_ICONOS_", sysCacheClientPath), ya que en la CSS las imágenes se nombran con el prefijo SENDA_ICONOS_ como podemos ver en la siguiente captura.

Velneo vERP CSS image

Espero que este pequeño tutorial te sea de ayuda para ponerle una bonita piel a tus aplicaciones.

Este artículo Cómo usar las CSS de Velneo vERP en tus aplicaciones es original de Velneo.