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 con toques, y el componente Refresher lo trae 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. Funciona bien con InfiniteScroll para recargar o restablecer contenido a través de entrada basada en gestos.

Instanciación e internacionalización​

Agrega un Refresher instanciándolo y registrando un oyente de actualización. Cuando las operaciones de actualización se completen, 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. Si bien este gesto es familiar en dispositivos móviles, es menos común en desktop; asegúrate de mantener y tirar con tu ratón.

Mostrar Código

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

Internacionalización​

Cada etiqueta de estado también se puede localizar 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 iconos​

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

Mostrar Código

Configuración del comportamiento de tira​

Umbral​

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

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

Máximo umbral​

Para definir la distancia máxima de tirón permitida, usa el método setThresholdMax():

refresher.setThresholdMax(160);

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

Gestión de estado​

El componente Refresher mantiene su propio estado interno y comunica los cambios de estado a través de eventos. Cuando un usuario tira 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 obtener nuevos datos o restablecer una lista, y luego llamas 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 estar 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 para coincidir con la apariencia 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 tiras 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...