Introducción

Bienvenidos a otro artículo en nuestro blog «Hola Windev!». Hoy hablaremos de cómo optimizar la actualización de la interfaz de usuario utilizando RequestRefreshUI() en conjunto con Threads en Windev.

Vamos a trabajar usando POO.

Estos son los miembros de nuestra clase, fueron creados en base a la API que vamos a consumir.

Por defecto los miembros no se crean con el atributo “serialize”. Si vamos a trabajar con la Serialización tenemos que hacer que coincidan los nombres de nuestros campos o usar esta sintaxis.

Lograr que coincidan los nombres de nuestros campos exactamente con los de una API es algo bastante complejo de lograr, por lo general no coinciden con la nomenclatura estándar de PCSoft.

El manejo de esta sintaxis nos da la flexibilidad de poder indicarle con que nombre hacer el match al serializar cada campo. En este caso los iguale a lo que me va a devolver la API:

{
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat ",
    "body": "quia et suscipit\\nsuscipit recusandae consequuntur"
}

Desarrollo de una Aplicación Windows

Para empezar, crearemos una simple aplicación de Windows en Windev. Esta aplicación consumirá una API pública, en nuestro caso, la API de JSONPlaceholder.

Esta tabla se va a completar con un array de una clase que generamos. Usando POO podemos lograr esto de manera muy sencilla.

Al inicio de la ventana voy a declarar una variable global que va a ser un array de mi clase MPosts

PROCEDURE MyWindow()

garr_Posts is array of Mposts

La tabla va a hacer un DataBinding a esta variable y las columnas de esta van a tener un enlace a cada campo de mi clase MPosts

De este modo solo tenemos que refrescar el array que declaramos y actualizar la tabla para hacernos con los datos.

Uso de Threads para Consumir una API Pública

Para consumir la API de manera eficiente, utilizaremos Threads. Esto nos permitirá realizar tareas pesadas sin bloquear la UI.

El código del botón actualizar es muy sencillo, en él se programa el consumo de la API mencionada. Usamos Threads para esto junto con RequestRefreshUI()para el refresque de los datos en nuestra ventana

_update()

	INTERNAL PROCEDURE _update()<secure thread>
		http_Req is httpRequest
		http_Req.URL		= "https://jsonplaceholder.typicode.com/posts"
		http_Req.Method		= httpGet
		http_Req.ContentType	= mimeTypeJSON
		
		http_Req.Send(_processContent)
				
			INTERNAL PROCEDURE _processContent(http_Res is httpResponse)
				Deserialize(garr_Posts,http_Res.Content,psdJSON)
				RequestRefreshUI(1)			
			END
	END

Como ven ahí tenemos un procedimiento interno, al cual lo afectamos con un atributo <secure thread> para indicarle que se va a ejecutar en un hilo seguro.

Implementación de RequestRefreshUI

Al final del procesamiento de la respuesta de la API llamamos a la función RequestRefreshUI() para actualizar los datos de nuestra tabla.

Ejemplo de Código

INTERNAL PROCEDURE _processContent(http_Res is httpResponse)
    Deserialize(garr_Posts,http_Res.Content,psdJSON)
    RequestRefreshUI(1)			
END

Configuración del evento de refresque de pantalla

En el evento “Solicitud para actualizar la visualización” de nuestra ventana tenemos que ingresar un código similar a este:

Mi sugerencia es que lo hagan de esta manera, esto les va a dar una versatilidad extra para evaluar distintas condiciones y poder llamar desde diferentes lugares a la función RequestRefreshUI() para actualizar distintos elementos de nuestra ventana.

Conclusión

Optimizar la actualización de la interfaz de usuario es esencial para cualquier aplicación moderna. RequestRefreshUI() en conjunto con threads ofrece una solución elegante y eficiente.

Si este artículo te ha sido útil, te invitamos a que lo compartas y dejes tus comentarios aquí abajo. Para más interacción, únete a nuestro servidor de Discord «Hola Windev!».

Call to Action

Para discutir más sobre este y otros temas, únete a nuestro servidor de Discord «Hola Windev!».