Saltar al contenido principal

Refresher

Abrir en ChatGPT
Sombra dwc-refresher 25.00
Java API

Pull-to-refresh es un patrón común en interfaces móviles y amigables al toque, y el componente Refresher lo lleva a contenedores desplazables en webforJ. A medida que los usuarios deslizan hacia abajo más allá de un umbral configurable, transita a través de estados visuales: pull, release, y refreshing, cada uno con un ícono personalizable y texto localizado. Se complementa bien con InfiniteScroll para recargar o restablecer contenido a través de entrada basada en gestos.

Instanciación e internacionalización​

Añade un Refresher instanciándolo y registrando un oyente de actualización. Cuando las operaciones de actualización se completan, llama a finish() para restablecer el componente a su estado inactivo.

Cómo activar el Refresher

Para activar el Refresher, haz clic y arrastra hacia abajo desde la parte superior del área desplazable. Mientras que este gesto es familiar en dispositivos móviles, es menos común en escritorio—asegúrate de mantener y tirar con tu ratón.

Mostrar Código

Este enfoque se utiliza comúnmente para actualizar listas paginadas o reiniciar la carga de desplazamiento infinito.

Internacionalización​

Cada etiqueta de estado también puede ser localizada utilizando el objeto RefresherI18n. Los tres estados son:

  • Pull: Texto del gesto inicial (por ejemplo, "Desliza hacia abajo para actualizar")
  • Release: Umbral de activación alcanzado (por ejemplo, "Suelta para actualizar")
  • Refresh: Estado de carga (por ejemplo, "Actualizando")

Esto permite soporte multilingüe y ajustes de marca según sea necesario.

Mostrar Código

Personalización de íconos​

Puedes cambiar los Íconos utilizados para las etapas de pull/release y refreshing utilizando un Icon predefinido o una URL de ícono. Estos son útiles cuando deseas aplicar branding o una animación personalizada.

Mostrar Código

Configuración del comportamiento de arrastre​

Umbral​

Establece cuán lejos debe arrastrar el usuario (en píxeles) antes de activar la actualización:

refresher.setThreshold(80); // predeterminado: 80px

Máxima umbral​

Para definir la distancia máxima de arrastre permitida, utiliza el método setThresholdMax():

refresher.setThresholdMax(160);

Estos umbrales controlan la sensibilidad del gesto y la curva de resistencia.

Gestión de estados​

El componente Refresher mantiene su propio estado interno y comunica cambios de estado a través de eventos. Cuando un usuario arrastra hacia abajo más allá del umbral definido, el Refresher emite un evento de actualización al que puedes responder registrando un oyente onRefresh().

Dentro de este oyente, se espera que realices la operación requerida—como recuperar nuevos datos o restablecer una lista—y luego llames explícitamente a:

refresher.finish();
Falta finish()

Si olvidas llamar a finish(), el refresher permanecerá en el estado de carga indefinidamente.

También puedes deshabilitar programáticamente el Refresher en cualquier momento para evitar que el usuario active el comportamiento de actualización:

refresher.setEnabled(false);

Esto es útil cuando las actualizaciones deben ser temporalmente deshabilitadas—por ejemplo, durante una pantalla de carga o mientras se está ejecutando otro proceso crítico.

Estilo​

Temas​

El componente Refresher admite múltiples temas para distinguir visualmente diferentes estados o coincidir con el aspecto y la sensación de tu aplicación. Los temas se pueden aplicar utilizando el método setTheme().

El siguiente ejemplo cicla a través de todos los temas disponibles cada vez que deslizas para actualizar, dándote una vista previa en vivo de cómo se ve el Refresher a través de diferentes temas:

Mostrar Código

Loading...