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 tacto, 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, transiciona entre 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 mediante entrada basada en gestos.

Instalación e internacionalización​

Agrega un Refresher instanciándolo y registrando un listener 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. Aunque este gesto es familiar en móviles, es menos común en escritorio; asegúrate de mantener y tirar con tu mouse.

Mostrar Código

Este enfoque se usa comúnmente para actualizar 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 íconos​

Puedes cambiar los Icons utilizados para los estados de pull/release y refreshing usando un Icon predefinido o una URL de ícono. Estos son útiles cuando deseas aplicar la marca o una animación personalizada.

Mostrar Código

Configuración del comportamiento de tirón​

Umbral​

Establece qué tan 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 estados​

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 listener onRefresh().

Dentro de este listener, se espera que realices la operación necesaria, como obtener nuevos datos o restablecer una lista, y luego llames explícitamente:

refresher.finish();
Falta finish()

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

También puedes desactivar 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 deberían estar temporalmente desactivadas; por ejemplo, durante una pantalla de carga o mientras otro proceso crítico se está ejecutando.

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, brindándote una vista previa en vivo de cómo se ve el Refresher a través de diferentes temas:

Mostrar Código

Loading...