Una UX mejorada con AJUI_Progressbar

¿Alguna vez has ejecutado una acción, no parecía pasar nada y no sabías si debías volver a hacer clic o seguir esperando? ¿No hay respuesta, aunque la aplicación esté realizando una acción en segundo plano? ¿Quizás la acción requiere algún tiempo para devolver un resultado? Como sabrás, 4D ya proporciona un componente de barra de progreso integrado que hace que el tiempo de ejecución sea más tolerable, pero si quieres algo con un diseño más parecido al de la web, sigue leyendo, ¡porque eso es lo que te ofrece AJUI_Progressbar!

Qué es AJUI_Progressbar

AJUI ProgressBar es un componente desarrollado con 4D 17 R3, basado en la tecnología SVG y 4D Worker. Te permite generar barras de progreso muy fácilmente. El componente crea un conjunto de propiedades para definir las características y la representación visual de las barras de progreso. También hay fórmulas para acceder a los evaluadores y métodos para generar barras de progreso.

El componente contiene dos tipos de instancias, que representan dos variantes específicas de las barras de progreso disponibles. El primer diseño es un estilo lineal y el segundo es circular. Cada variante tiene propiedades específicas de su diseño.

A las barras se les pueden asignar valores numéricos que van de 0 a 100, pero como el texto mostrado puede ser personalizado, es posible representar visualmente otros valores. El componente utiliza el Worker para refrescar la página cuando se generan las barras de progreso. El Worker también tiene otro uso: proporcionar la capacidad de gestionar animaciones.

El componente ofrece varios métodos para personalizar y manipular la barra de progreso utilizando un objeto y funciones. También proporciona dos métodos para recuperar instancias para cada tipo de barra de progreso:

• Nueva AJUI_ProgressBar: Barra de progreso lineal.
• Nueva AJUI CircularProgressBar: Barra de progreso circular.

Ambos métodos devuelven objetos que contienen las propiedades de la barra, sus valores por defecto, así como fórmulas para manipularlas.

Los otros métodos disponibles llevan el prefijo «HDI» (How do I). Estos métodos permiten llamar a formularios que contienen ejemplos de cómo utilizar las características del componente.

Configuración de una barra de progreso lineal

• En primer lugar, añada un objeto imagen a un formulario. Este objeto se utilizará para alojar la barra de progreso. Puede añadir varios objetos imagen si desea generar varias barras de progreso simultáneamente.
• El segundo paso es crear una instancia de la barra de progreso. Puede elegir lanzar uno de los dos métodos descritos anteriormente. Lo ideal es que el objeto devuelto por el método de su elección se almacene en la variable «Formulario». También se recomienda añadir un nivel al objeto «Formulario».

Una vez hecho esto, añada el nombre de su objeto imagen a la instancia. Luego, para probar, le sugerimos que modifique el valor de la progresión (por defecto: 0) y active las animaciones. Para generar su barra de progreso, basta con lanzar la fórmula de «lanzamiento» correspondiente.

Si ha añadido varios objetos de imagen, repita el segundo paso para cada uno (una instancia por objeto de imagen).

Este es el aspecto del código para una barra de progreso lineal:

AJUI_Progressbar en profundidad

Más detalles, así como un tutorial paso a paso sobre el uso y la configuración del componente, están disponibles aquí. Tanto si eliges utilizar AJUI_Progressbar como el componente de barra de progreso incorporado en 4D, asegurarás a los usuarios que algo está sucediendo. ¡Diviértete!