BLOG

Un ejemplo usando estilos en Velneo V7

Por [N4] jmgonzalez.velneo el | 8 Comments

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 objeto

Aplicar 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.

Velneo es el entorno ágil para el desarrollo
de aplicaciones empresariales

PRUEBA VELNEO

8 Responses to "Un ejemplo usando estilos en Velneo V7"
  1. Pablo dice:

    Buenas.
     
    Una pregunta ¿cual es el widget que se aplica al Control Objeto de un formulario?, siempre pone un borde a todos estos subobjetos en ejecución, y quiero quitarlo pero no encuentro el widget que se le aplica.

  2. Manu dice:

    Me ha gustado mucho este artículo. La verdad es que las hojas de estilo le dan una potencia al diseño de las aplicaciones. Sobre todo para poder interacturar con el usuario.

  3. [N1] Nacho dice:

    Muy interesante.
    Ahora yo quería saber como puedo desde un fichero .CSS externo, configurar para que el objeto “texto estático” con id STATUS, tenga de inicio una determinada fuente y el resto de texos estáticos otra.
    La idea es el autoxec hacer un set hoja de estilo, pero pudiendo configurar algunos textos estáticos con diferentes propiedades, a través de su ID.
     
     

  4. [N4] a.amezaga.koopera dice:

    Pensar que podemos diseñar sin estilos y tener diferentes aspectos diferentes con sólo cambiar las hojas de estilos, me parece un avance notable. La respuesta a comentario anterior, CSS externo me parece interesante.
    Por otro lado, hasta que punto las hojas de estilo afectan al rendimiento de una aplicación?
    Un saludo y feliz año nuevo
     

  5. Hola, navegando entre otras publicaciones sobre CSS no puedo dar con la solución.
    Lo siguiente no me aparece:
    “Interfaz: Set hoja de estilo CSS”

  6. [N1] luis ponce dice:

    Hola, necesito cambiar el color de un campo numérico de un formulario cuando en el campo numérico se ha ingresado un valor.
    Por ejemplo: VALOR PAGADO debe ser comparado con VALOR DEL IMPORTE. Si el valor pagado es inferior entonces pasar a color rojo o mostrar algún tipo de mensaje.

    Podrían ayudarme con este procedimiento básico?
    Gracias

Deja un comentario

Esta web utiliza cookies. Si continúa navegando acepta dichas cookies y nuestra política de cookies. Gracias. ACEPTAR

Aviso de cookies