Mejora tu interfaz de escritorio con widgets web usando 4D Qodly Pro

¿Alguna vez ha querido enriquecer su interfaz de usuario con widgets conocidos de los sitios web, como un mapa de navegación? ¿No aprendiendo JavaScript y lidiando con CSS y HTML y luchando para pasar datos entre estos dos mundos?

Una nueva integración entre Web Areas y 4D Qodly Pro le permite ofrecer interfaces ricas y dinámicas dentro de sus formularios 4D manteniendo toda su lógica de negocio dentro de 4D Server.

HDI_SESSION_SHARING

Un ejemplo real: Detalles de almacén en una interfaz fluida

Los usuarios quieren aplicaciones de escritorio que parezcan nativas pero que evolucionen tan rápido como la web. Con 4D 21, esto ya no es un compromiso. Una nueva integración entre Web Areas y 4D Qodly Pro le permite ofrecer interfaces ricas y dinámicas dentro de sus formularios 4D manteniendo toda su lógica de negocio dentro del servidor 4D.

El resultado es una experiencia híbrida unificada donde los datos fluyen instantáneamente, las actualizaciones de la interfaz de usuario se sienten naturales y su flujo de trabajo de desarrollo se mantiene simple. Esto es un híbrido bien hecho.

Configuración del área Web para una experiencia conectada

Imagine un cuadro de lista 4D en la parte izquierda de la pantalla, mientras que a la derecha se muestran en un área Web los detalles del artículo seleccionado, incluidos la ubicación en el mapa y los controles de clasificación.

Seleccione un almacén diferente y los detalles se actualizarán al instante sin necesidad de recargar la página. Los usuarios se sienten como si estuvieran navegando por un panel nativo, no por una vista web. Esta es la flexibilidad de 4D Qodly Pro combinada con la fiabilidad de 4D.

FÁCIL CONFIGURACIÓN

Para permitir esta interacción sin fisuras, el Área Web se configura con dos simples propiedades: Usar motor de renderizado web incrustado y Acceder a métodos 4D. Estos ajustes dan a la página Qodly incrustada acceso completo a sus datos y lógica de servidor.

A partir de ahí, el evento «On Load» del Área Web inicializa la página, adjunta la sesión correcta, y pasa un contexto que expone sus métodos dataclass.

Espera, ¿qué sesión y por qué necesito un contexto?

Mientras que la página 4D Qodly es cargada en este caso dentro de un área web de la aplicación 4D, también puede ser ejecutada directamente desde un navegador. Por lo tanto, necesitamos priorizar la seguridad. Y habla directamente con el servidor 4D, por lo que el servidor necesita saber a qué sesión de cliente pertenece. Por último, podemos compartir un contexto entre el escritorio 4D y la página Qodly, lo que nos permite compartir datos. Similar a como usamos un contexto para compartir datos entre 4D y 4D Write Pro.

Ya sea que su aplicación se ejecute localmente o en modo cliente-servidor, la página Qodly debe operar dentro de la sesión 4D correcta. Esto proporciona llamadas a métodos seguros y asegura que los datos permanezcan consistentes.

Esta es la configuración exacta utilizada en la demostración:

var $otp : Text
var $url : Text
var $context : Variant

Case of 
	: (Form event code=On Load)	
                authentify("viewDetails")
		$otp := getOtp
		$url := "http://localhost/$lib/renderer/?w=warehouses&$4DSID="+ $otp
		WA OPEN URL(warehouseDetails; $url)
		$context:=ds.WareHouse
		WA SET CONTEXT(warehouseDetails; $context)
End case 

el authentify es un método del proyecto que necesita tener la propiedad «execute on server» marcada para tener acceso al objeto de sesión

#DECLARE($privilege : Text)
Session.clearPrivileges()
Session.setPrivileges($privilege)

y lo mismo ocurre con getOTP

#DECLARE() : Text
return Session.createOTP(60)

viewDetails es un permiso configurado así en Qodly Studio:

donde podemos leer la entidad Warehouse y ejecutar en Warehouse.getWarehouseById para obtener la entidad correspondiente cuando cambia el ID, para recuperar La lógica es sencilla. Session.setPrivileges asegura que el usuario tiene los derechos necesarios.
getOTP() emite un token único que vincula el Área Web a la sesión 4D actual.
La URL incluye el token $4DSID para que la página Qodly se ejecute dentro de esa sesión.
Finalmente, WA SET CONTEXT da acceso a la página a su Warehouse dataclass, incluyendo métodos como GetWarehouseById y Rate.

Esto crea una conexión limpia y segura entre Qodly y su capa de datos.

Actualizaciones instantáneas de la interfaz de usuario desde 4D Listbox

en el método del objeto Listbox que tenemos:

var $result : Variant
Case of 
	: (Form event code=On Load)
		LISTBOX SELECT ROW(*; "warehouseList"; 1)	
	: (Form event code=On Clicked)
	: (Form event code=On Selection Change)
		WA EXECUTE JAVASCRIPT FUNCTION(*; "warehouseDetails"; "Qodly.setSource"; $result; "warehouseId"; Form.WareHouse.ID)	
End case 

El listbox completa el flujo de trabajo. Cuando el usuario selecciona un almacén, 4D llama a WA EXECUTE JAVASCRIPT FUNCTION para activar Qodly.setSource dentro del Área Web. El ID del nuevo almacén es transmitido y la página Qodly se actualiza instantáneamente.

El usuario no ve una recarga de la web. Sólo ven los datos frescos que aparecen en el panel de detalles.

Una página Qodly moderna que da vida a los datos

Dentro de Qodly Studio, la página de detalles utiliza dos componentes personalizados. Un componente Mapa que muestra la ubicación exacta del almacén y un componente Valoración que permite a los usuarios actualizar la valoración. Ambos componentes están vinculados a la fuente de entidad del almacén.

La página escucha los cambios en la fuente warehouseId. Cuando esa fuente cambia, llama a getWarehouseById para cargar la entidad correcta y la muestra inmediatamente.

Si el usuario cambia la valoración, el componente Valoración activa el método Valoración en el contexto 4D. Las actualizaciones se guardan al instante.

Este es el tipo de capacidad de respuesta que los usuarios esperan de las herramientas modernas.

Por qué los equipos adoran este enfoque híbrido

Usted mantiene la potencia, seguridad y estructura de 4D en el backend. Obtiene la flexibilidad de diseño y la riqueza de componentes de 4D Qodly Pro en el front-end. Y sus usuarios obtienen una aplicación fluida y moderna que responde instantáneamente a sus acciones.