Un ejemplo usando estilos en Velneo V7

Vamos a ver en este artículo como controlar que en un formulario se introducen los campos obligatorios de forma visual usando las instrucciones Interfaz: Set hoja de estilo CSS e Interfaz: Ocultar objetoAplicar estilos a un determinado control o a toda la aplicación es extremadamente fácil con Velneo V7. Por ejemplo, supongamos que queremos que los controles edición (editores de una línea), tengan un borde diferente:

QLineEdit {border: 2px solid gray;border-radius: 4px;}

De esta manera, en lugar del aspecto original (usando estilo Windows)

edicion normal

tendremos este nuevo estilo

edicion css

En Velneo V7 si aplicamos un estilo a un determinado objeto, todos los que se creen "dentro" de ese heredarán sus estilos. Esto es, si creamos un formulario y en el evento Inicializado (on_init) le aplicamos un estilo al formulario, todos los controles de ese formulario incluidos controles objetos y todos los objetos dentro de él, heredan los estilos del formulario contenedor. El contenedor mayor o de primer nivel es el marco autoexec.Como lo que queremos es que todos nuestros controles edición tengan el aspecto de la imagen anterior, la forma más sencilla es aplicar el estilo al marco. Para ello seleccionamos el objeto marco y añadimos una conexión de evento y un evento. Al evento lo llamamos, por ejemplo, on_init. Y las propiedades de la conexión de evento quedarían así:

conex evento marco

Y en el evento lanzamos la siguiente instrucción:

onInit

De esta manera cuando mostremos un formulario cualquiera de nuestra aplicación los controles edición tendrán el siguiente aspecto:

Ejecu 1

Ahora veamos como aplicar estilos únicamente a un control. Para ello vamos a montar un sencillo sistema de control de campos obligatorios. Supongamos que en el formulario anterior quisiéramos que el campo Nombre fuera obligatorio. Para nuestro ejemplo hacemos lo siguiente:- Creamos un evento y lo llamamos p.e. Aceptar. Vamos a las propiedades del botón Aceptar y en Comando le indicamos Ejecutar evento y le indicamos el evento creado en este punto.- Creamos un texto estático con ID status donde mostraremos el mensaje de que el campo es requerido. En la propiedad nombre indicamos el texto deseado.

Formulario factura

- Al igual que hicimos al principio de este artículo, vamos a darle estilo a ese control estático y ocultarlo cuando se inicia el formulario. Para ello creamos un evento y una conexión de evento con la señal Inicializado, el objeto formulario y el evento creado en este punto. El evento queda de la siguiente manera:

factura on init

Como vemos, cuando aplicamos el estilo le estamos indicando exactamente el control STATUS, por lo que el estilo sólo se aplicará a ese objeto.- Nuestra intención es que cuando el usuario pulse el botón Aceptar, comprobamos si el campo nombre tiene valor y en caso negativo mostramos el status y le cambiamos el estilo al objeto ED_NAME (campo nombre). De esta manera, el evento Aceptar tiene estas instrucciones:

Aceptar

y en tiempo de ejecución el resultado es el siguiente:

ejecu 2

Por último, sólo nos queda ocultar el objeto STATUS y quitar las css al objeto ED_NAME. Podemos hacerlo de multitud de formas. En este ejemplo lo hacemos cuando el control ED_NAME recibe el foco. Por tanto, simplemente creando un evento y una conexión de evento Ganar foco indicando el control ED_NAME y el evento creado en este punto y añadiendo las siguientes instrucciones obtenemos el efecto deseado.

Gana foco

Hemos visto con un sencillo ejemplo cómo aplicar estilos a toda nuestra aplicación o a un determinado control.

Fernando Félix
29/12/2009
Déjanos tus datos para probar la plataforma