03 Nov Texto enriquecido en comandos de diálogo
La base de datos de Velneo guarda los textos con formato usando el campo Objeto Texto enriquecido. En el interfaz mostraremos el texto con formato mediante el control Texto enriquecido y el formato del texto se gestionará gracias a las etiquetas HTML.
El texto con formato no es una página HTML estándar ni el control Texto enriquecido es un editor de HTML, simplemente las opciones de formato como negrita, cursiva, listas, tipo de letra, … se guardan con etiquetas HTML.
Las etiquetas de formato son un subconjunto de HTML 4, el listado completo lo puedes consultar en http://doc.qt.io/qt-5.7/richtext-html-subset.html.
Añadir formato al texto de los comandos Mensaje y Pregunta
Hay 2 comandos de Interfaz, Mensaje y Pregunta, que muestran una ventana de diálogo con un mensaje de texto.
Una ventana de diálogo es una ventana de nivel superior que la aplicación utiliza para ejecutar tareas inmediatas y enviar breves comunicaciones al usuario.
Quizás no sepas que la fórmula del mensaje de texto de la ventana de diálogo puede contener etiquetas HTML, que se interpretarán como opciones de formato cuando se muestren en la pantalla.
Veamos un ejemplo en el que usaremos algunas etiquetas HTML para dar formato al mensaje. La imagen de la izquierda es un Mensaje y la de la derecha una Pregunta.
Tal como muestran las imágenes las posibilidades de dar formato a los mensajes son bastante interesantes. Vamos a examinar la fórmula del mensaje para entender cómo hemos conseguido dar formato al texto con las etiquetas HTML:
<html> <!-- Usamos el tag html, aunque no es necesario --> <!-- El estilo definido en el tag body afecta a todo el documento --> <body style=" font-family:'Consolas'; font-size:11pt; font-weight:normal; font-style:normal;"> <!-- margin establece los márgenes (sup der inf izq) color acepta los colores por nombre -qt-block-indent es 1 para establecer un párrafo blockquote text-indent indenta la primera línea del párrafo --> <h1 style="margin:0 0 0 5; color:DarkRed; text-indent:5px;"> HTML en comandos de Diálogo </h1> <hr width="100%"> <!-- Los hiperenlaces de las etiquetas <a> funcionan desde las ventanas de diálogo --> <p style="margin:5 5 0 0;"> Los comandos de Velneo <a href="https://velneo.es/info_v7_719_es/velneo_vdevelop/proyectos_objetos_y_editores/proceso/comandos/interfaz/dialogos/mensaje/">Mensaje</a> y <a href="https://velneo.es/info_v7_719_es/velneo_vdevelop/proyectos_objetos_y_editores/proceso/comandos/interfaz/dialogos/pregunta/"> Pregunta</a> pueden contener código HTML para mostrar texto enriquecido. </p> <p style="margin:10 0 5 0; text-indent:5px;">Podemos: </p> <p style="margin:0 0 0 30;"> Cambiar <span style=" font-size:18px;">el tamaño del texto</span><br> Colorear <span style=" color:#ff0000;">el texto</span><br> Aplicar <span style=" font-weight:600;">negrita</span> y <span style=" font-style:italic;">cursiva</span><br> <font face="Segoe script" size="5" color="green">Texto manuscrito</font> </p> <p style=" margin:20 0 0 30;"> Lista de opciones: </p> <!-- -qt-list-indent indenta las líneas de la Lista --> <ul type="square" style="margin:0; -qt-list-indent:2;"> <li>Opción 1</li> <li>Opción 2</li> <li>Opción 3</li> </ul> <!-- La imagen se carga desde el directorio por defecto. Lo fijamos en Velneo. El pie de imagen puede tener estilo personalizado con el tag span --> <p style="margin:20 0 10 30;"> <img src="BannerRueda.png" width="200" /><br> <span style="font-family:'Helvetiva'; font-size:12px; font-style:oblique;">Imagen desde la caché</span> </p> <p align="center" style="margin:10px; font-family:'helvetica'; font-size:x-large; font-weight:bold;"> TABLA </p> <!-- La mayor parte del aspecto de la tabla se determina en el tag table border es 1 para mostrar los bordes de la tabla border-color color de los bordes border-style estilo none,solid,dotted, ... cellspacing espacio entre celdas cellpadding espacio entre texto y bordes --> <table border="1" style="border-color:#2f4f4f; border-style:solid; margin:0px;" align="center" width="90%" cellspacing="1" cellpadding="4" bgcolor="#f0fff0"> <!-- Las celdas pueden ajustarse individualmente th celdas de cabecera bgcolor color de fondo de la celda padding espacio entre texto y bordes --> <tr> <th bgcolor="#adff2f" style="padding:10 2 4 2;">Cabecera 1</th> <th bgcolor="#adff2f" style="padding:10 2 4 2;">Cabecera 2</th> </tr> <tr> <td>Fila 1</td> <td align="right">2.562,23</td> </tr> <tr> <td>Fila 2</td> <td style="font-weight:600;" align="right">56.215,31</td> </tr> </table> </body> </html>
Podemos destacar lo siguiente:
-
- En el tag <body> se pueden establecer las opciones de formato globales de todo el texto.
- El formato asociado a un tag se establece con los valores de sus atributos (bgcolor, border, align, style, …).
- Es conveniente empezar siempre con el tag <html>, aunque no es necesario.
- Los enlaces de los tag <a> funcionan abriendo la página con el explorador predeterminado.
- El tag <img> accede a la imagen en el directorio por defecto establecido en Velneo (comando Cambiar directorio por defecto).
Existe otra ventana de diálogo que admite formato de texto enriquecido, es el comando Pedir dato.
En este ejemplo hemos colocado una imagen capcha y un texto debajo. El tag table nos permite colocar los elementos fácilmente.
La imagen se ha introducido en formato base64 porque es el resultado de la generación dinámica de un capcha.
Captcha o CAPTCHA son las siglas de Completely Automated Public Turing test to tell Computers and Humans Apart (prueba de Turing completamente automática y pública para diferenciar ordenadores de humanos).
<html> <table cellspacing="0" cellpadding="0" bgcolor="DarkRed"> <tr> <!-- Tenemos que ajustar el padding manualmente para que se centre correctamente la imagen--> <td align="center" style="padding:3 0 0 3;"> <img src="data:image/jpg;base64,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"> </td> </tr> <tr> <td style="padding:4;"> <span style="color:white; font:italic bold 14px Georgia, serif;">Introduzca el texto de la imagen</span> </td> </tr> </table> </p> </html>
Con estos ejemplos, a partir de ahora podrás hacer más vistosos tus cuadros de diálogo, de una forma rápida y sencilla.
Aplicar CSS a las ventanas de diálogo
Además de aplicar formato al texto de los mensajes, podemos estar interesados también en aplicar formato al resto de los elementos de las ventanas de diálogo.
Lamentablemente la implementación de CSS en Velneo no está del todo completada y por si fuera poco escasamente documentada. Por lo tanto debemos probar los distintos estilos CSS y esperar que los resultados sean los esperados. Las pruebas hechas con los comandos de Diálogo y con la versión Velneo 20 han llevado a las siguientes conclusiones:
-
- La clase que debemos utilizar con los CSS en las ventanas de diálogo es QMessageBox. La clase QDialog también funciona pero hay que tener en cuenta que los estilos aplicados también afectarán a los formularios modales.
- De la clase QMessageBox solo podemos fijar las propiedades CSS background, background-clip y background-origin.
- El comando Mensaje SÍ aplica el CSS. La versión javascript alert() SÍ aplica el CSS.
- El comando Pregunta SÍ aplica el CSS. La versión javascript confirm() SÍ aplica el CSS.
- El comando Pedir dato NO aplica el CSS. La versión javascript prompt() NO aplica el CSS (usando QDialog SÍ aplica el CSS).
- Para que no aparezca el título de la ventana tenemos que pasar como parámetro un espacio en blanco.
- El icono de la ventana de diálogo no se puede elegir. Si el formulario origen es una vista mostrará el icono del objeto autoexec y si es un formulario modal mostrará el de éste.
- La imagen de fondo y el resto de las imágenes deberán adjuntarse al proyecto para que se copien a la carpeta caché de vClient. Tendremos que fijar la carpeta por defecto a la caché antes de aplicar los estilos CSS.
Este comportamiento es deseable que mejore con las futuras versiones de Velneo para conseguir una homogeneidad plena en nuestro interface.
A continuación se muestran 2 ventanas de diálogo con CSS aplicado y texto enriquecido.
A la izquierda un mensaje con la función javascript alert() y a la derecha el comando de Velneo Pregunta.
El código CSS aplicado es el siguiente:
QMessageBox { /* background-color: qlineargradient(x1:1, y1:0, x2:0, y2:1, stop:1 #cfe7fa, stop:0 #6393c1); */ background-image: url(fondo_claro_1.jpg); /* background-color: transparent; */ } QMessageBox QPushButton { background: #63B8EE; background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #63B8EE, stop:1 #468CCF); min-width: 80px; font-family: arial; font-weight: bold; color: #FFFFFF; font-size: 16px; text-shadow: 1px 1px 0px #7CACDE; box-shadow: 1px 1px 1px #BEE2F9; padding: 10px 20px; border-radius: 8px; border: 1px solid #3866A3; } QMessageBox QPushButton:hover { color: #BAF7F5; background: #468CCF; background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #468CCF, stop: 1 #63B8EE); }
El texto enriquecido:
<p style="font: normal bold 30px verdana; color:Navy; margin:0; padding:0;"> BACKUP </p> <hr> <table border="0" style="margin:10px;" align="center" width="95%"> <tr> <td style="padding:20 20 20 30; background-color: rgba(25,128,225,0.15);"> <img src="data_disk.png" width="48"> <p style="font: normal 18px arial; color:DarkSlateGray;"> Se han generado los archivos de datos. <br> Pulse <b>Aceptar</b> para iniciar la copia de seguridad. </p> </td> </tr> </table> <hr width="90%">
En este artículo hemos partido de la ventana de diálogo nativa de Velneo y una vez que le aplicamos un poco de CSS y usando texto con formato HTML hemos conseguido cambiar totalmente su aspecto visual. Recuerda que el código CSS y el HTML nos permitirán cambiar dinámicamente el resultado final del interface de nuestras aplicaciones.
Coméntanos mas abajo tus progresos cambiando el interface de las aplicaciones Velneo.
Fernando
Posted at 11:08h, 03 noviembreEnhorabuena por los post y gracias a Paco Satue por su tiempo y dedicación. Después de tiempo con la plataforma se siguen descubriendo cosas interesantes.
Seguid así.
Un saludo.
Paco Satué
Posted at 11:59h, 03 noviembreGracias Fernando.
Eso es lo que pretendemos, contar cosas de Velneo que no aparecen en los manuales, y por supuesto divertirnos haciéndolo.
Saludos
Paco Satué