Velneo con estilo (II)
En la primera parte, estuvimos echando un vistazo a las posibilidades que nos brinda la librería QT para poder personalizar el comportamiento de la interfaz de aplicaciones.
En esta segunda parte, y para finalizar de momento con CSS, tras el salto, profundizaremos un poco más en estas posibilidades.
Vamos a comenzar, partiendo del siguiente CSS, que en los controles mencionados, nos pone un borde gris redondeado y el fondo en amarillo.
| “QLineEdit, QDateEdit, QDoubleSpinBox { border: 2px solid gray; border-radius: 10px; padding: 0 8px; background: yellow; selection-background-color: darkgray; }” |
Estados
Por requerimientos del cliente, necesitamos destacar el control que contiene el foco, para ello, usaremos la propiedad “focus”. Para establecer los estilos para un determinado estado del control, usaremos el símbolo “:” tras el nombre de la clase del Widget, y a continuación, el estado en cuestión, y el resto, os lo podéis imaginar. Por ejemplo, para los Edits sería “QLineEdit:focus { … }”. Pongámoslo a la práctica con nuestro anterior CSS.
Añadimos lo siguiente a nuestro código:
| QLineEdit:focus {
border: 2px solid red; } |
Y el resultado es….
Con “:focus”, hemos definido que cuando un Edit reciba el foco, cambiará el borde a rojo, el fondo a azul, y el color de selección a amarillo. Obviamente, no es una combinación de colores buena, pero la intención es que se noten los distintos colores (y mi gandulería de ponerme a convertir colores a hexadecimal 
)
| QLineEdit:focus {
border: 2px solid red; } |
Si quisiéramos heredar este comportamiento a los otros dos controles, bastaría con especificarlo en la cabecera:
| QDateEdit:focus, QDoubleSpinBox:focus, QLineEdit:focus {
border: 2px solid red; }” |
Con el estado “:Hover” podemos controlar el comportamiento visual cuando el puntero del ratón pasa por encima del control, así, podemos copiar y pegar el anterior bloque, y modificar simplemente el borde y fondo, para que al pasar el ratón sobre el control, el borde aparezca azul, y el fondo naranja…
| QDateEdit:focus, QDoubleSpinBox:focus, QLineEdit:focus {
border: 2px solid blue; }” |
Foco (:focus) en campo código..puntero del raton sobre (:hover) control con texto “Komenco”
Aunque sólamente hemos hablado del típico foco, etc.. si el control se encuentra deshabilitado, en modo sólo lectura, etc.. éstos, también son estados, y podríamos especificarlos en la hoja de estilo como “:disabled“, “:readonly“, “:pressed“, etc…
Definiendo estilos a controles, por su identificador
Según la documentación de QT, también podemos definir estilos a los controles partiendo de su identificador. Ésto nos ofrece bastante potencia. Por ejemplo, imagina que en una aplicación, queremos que los campos de edición de intervalos de fechas (los típicos Fecha Desde y Fecha Hasta), tengan un estilo distinto al resto de campos de edición de fechas. A todos estos controles, podríamos ponerle el identificador FECHADESDE y FECHAHASTA, por ejemplo, y modificar su estilo, definiénodolos con el símbolo “#” de la siguiente manera.
| QDateEdit#FECHADESDE, QDateEdit#FECHAHASTA {
border: 2px solid blue; }” |
Todos los widgets DateEdit que tengan esos identificadores, podrán disponer de su propio estilo respecto al resto de DateEdits.
La mala noticia, es, que según las pruebas que he podido realizar, no he conseguido que ésto funcione desde Velneo.
Cambiar imagen microscroller
En Velneo, para trabajar con números, y que éstos sean visualizados correctamente en pantalla, debemos hacer uso forzosamente del control microscroller. Este control, no es muy diferente de un Edit normal, salvo que dispone de dos flechas que a mucha gente puede llegar a molestar según en qué situaciones. Para variar, las posibilidades de las hojas de estilo en QT, salen al rescate, y podemos definir el comportamiento de estos “molestos” botones, para que o bien, tengan una imágen distinta, o bien, directamente no aparezcan. Para ello, el microscroller (QSpinBox y QDoubleSpinBox) dispone de dos “estados” que nos permiten acceder a sus “minicontroles” (las flechas)
| QSpinBox:down-button, QSpinBox:up-button{ margin: 1px 1px 1px 1px; subcontrol-origin: border; subcontrol-position: top right; width: 10px; height: 10px; background-color: transparent; } |
Hay más estados, widgets y posibilidades, pero la documentación de QT es bastante extensa y bien documentada, y la intención de este documento no es en entrar en detalle en cada una de ellas
Hola Giussepe, perdona que me deje caer tan tarde por aqui, y es que aunque te parezca mentira “yo no tengo Internet en casa”;)
Y como todos le damos un poco a esto del CSS son de agradecer estos artículos, de hecho cuando he leido el apartado “definiendo estilos a controles por su identificador” me he dicho !Ostia! si eso también se puede hacer! seré capullo!
Un saludo
Hola Miguel,
Gracias por tu comentario…
Sí, se puede hacer, pero no se puede jejejeje así que.. Yo no sé ni un 10% de la mayoría de los que pululan por los foros de Velneo, y no me considero un capullo, solo un incompetente
Otra consulta Giussepe,
Me molan esos videos a lo “Amenabar” que montas, se nota que tienes dotes de “artista” y me gustaria incorporar esa funcionalidad a mi blog, pero como yo soy un “troglodita” no tengo ni idea de que utilidad usar para montarlos, ¿que aplicación usas para grabarlos? Anda! dale algun consejo a este nobel realizador.
Pero mejor aun, como yo soy bastante vago y los esfuerzos intelectuales luego me pasan factura, ¿por que no me grabas un “corto” de como se utiliza?
Un saludo
P.D. La segunda petición es una broma, no te vayas a sentir obligado !pero me vendria de p.m.!
Esta tarde lo tienes…
Pero te refieres al último video que he subido?
Me refiero a tu filmoteca en general.
Ok, hoy te hago un video pero sobre el último. Los anteriores sobre Velneo (que creo que son a los que te refieres) los grabé bajo Linux si no recuerdo mal, y puesto no dispongo de un Linux a mano ahora mismo no podría incluirlo en el video.