03 Nov Texto enriquecido en comandos de diálogo

Posted at 10:00h in Empezar, Velneo a fondo by

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.

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

vaf_02_pedirdato

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.

vaf_02_mensaje_css vaf_02_pregunta_css

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.

 

Otras lecturas recomendadas:
  1. Comandos de Configuración del sistema
  2. El laboratorio del profesor vBacterio
  3. Sabías que (2) …
Tags:
, , , ,
Paco Satué
correo@pacosatu.es

Es un Ingeniero de Telecomunicación de carrera y un Informático-programador por vocación, que empezó en los 80 con DBase, Clipper y FoxBase. Hasta el año 2012 utilizó Visual Foxpro, pero debido a su abandono por parte de Microsoft tuvo que buscar una herramienta de desarrollo alternativa. La elección fue Velneo porque principalmente es una empresa española con soporte cercano, aparte de un producto moderno y adaptado a las últimas tecnologías Cliente-Servidor en Cloud.

2 Comments
  • Fernando
    Posted at 11:08h, 03 noviembre Responder

    Enhorabuena 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 noviembre Responder

      Gracias 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é

Post A Comment

Información básica sobre Protección de Datos: Responsable: Francisco José Vila Martín. Finalidad: Gestionar y moderar los comentarios. Legitimación: Tu consentimiento. Destinatarios: Tus datos se alojarán en los servidores de Web Empresa S.L. (UE). Derechos: Tienes derecho a acceder, rectificar, limitar y suprimir los datos, así como otros derechos, como se explica en la información adicional. Información adicional: Puedes consultar la información adicional y detallada sobre protección de datos personales en mi Política de Privacidad.

Pin It on Pinterest