¿Alguna vez se ha visto inundado por diálogos de confirmación, cuadros de alerta y ventanas de ayuda contextual que hacen casi imposible localizar la ventana del formulario en la que estaba trabajando? ¿No sería más fácil para el usuario permanecer en la misma página y ver burbujas de ayuda apuntando directamente al objetivo original?
Esto es posible gracias al componente AJUI_Tip de 4D. Es un potente motor de tooltip basado en las tecnologías disponibles en 4D como ORDA, New Formula, SVG, SubForm, CALL FORM, por nombrar algunas. En esta entrada del blog, destacaremos el uso del componente, y mostraremos cómo puede diseñar hermosos tooltips para mejorar la UI de sus aplicaciones. Un enlace de descarga se puede encontrar al final de la entrada del blog.
Qué es AJUI_Tip
AJUI_Tip es un componente 4D que permite generar y mostrar dinámicamente información sobre herramientas (Tip) en el contexto de un formulario. El componente ofrece varios métodos para personalizar y manipular los consejos a través de un objeto y funciones.
El componente está compuesto por tres elementos:
- Una variable de imagen: El componente construye la imagen a partir de una serie de propiedades en lenguaje SVG. El resultado es un conjunto de cálculos basados en diferentes criterios (tamaño del contenido, relleno, radio, etc.) que se utilizarán para dibujar el contorno del tooltip y su flecha. El SVG también puede integrar un cuadro de texto y un botón (para cerrar el tooltip).
- Un subformulario: Puede integrar un formulario de la base de datos principal en el tooltip. El subformulario, si se define, toma el lugar de un cuadro de texto.
- Una variable de objeto: Mantiene las propiedades del tooltip durante varias operaciones del componente.
Hola mundo
La configuración de su primer tooltip puede resumirse en cuatro pasos:
- En primer lugar, hay que llamar al método de inicialización new AJUI_Tip para recuperar un objeto y una instancia con todas las propiedades y fórmulas de un tooltip por defecto. Recomendamos usar la variable «Form» directamente para almacenar la instancia actual para poder navegar fácilmente entre su método de formulario y sus objetos de formulario.
Form.Tip:= new AJUI_Tip
- Utilice las fórmulas de su objeto para definir las propiedades de la instancia del tooltip, según sus necesidades.
Form.Tip.TipName("test")
Form.Tip.TextLabel("Hola Mundo")
- Defina un nombre que quedará asociado a la instancia de tooltip.
- Asegúrese de definir un texto para mostrar. Este texto puede tener estilo(por ejemplo, palabras o letras en negrita, cursiva o color en un cuadro de texto).
- Por último, utilice la fórmula «mostrar» para lanzar la generación de la instancia de información sobre herramientas. Por ejemplo, puede probarlo en uno de sus objetos de formulario con un evento «On Clicked».
Case of
( ) ()$evt=On Clicked
Form.Tip.show
End case
Siguiendo los pasos anteriores, deberías ver algo como la imagen de abajo. ¡Enhorabuena, ha creado su primer tooltip!
anima tus tooltips
¿Qué tal si haces tu tooltip aún más expresivo? Bueno, AJUI_Tip te permite animar estas pequeñas burbujas con diferentes estilos de animación(por ejemplo, desvanecimiento, parpadeo, salto, etc.).
AJUI_Tip en profundidad
Este post apenas ha arañado la superficie de este potente componente. Más detalles, así como un tutorial paso a paso sobre su uso y configuración, están disponibles aquí. También puedes descargarlo. ¡Que lo disfrutes!