Migliorate la vostra interfaccia desktop con i widget Web utilizzando 4D Qodly Pro

Avete mai desiderato arricchire la vostra interfaccia utente con widget conosciuti dai siti web, come ad esempio una mappa di navigazione? Non dovendo imparare JavaScript, gestire CSS e HTML e lottare per passare i dati tra questi due mondi?

Una nuova integrazione tra Web Areas e 4D Qodly Pro vi permette di offrire interfacce ricche e dinamiche all’interno dei vostri moduli 4D, mantenendo tutta la logica aziendale all’interno di 4D Server.

HDI_SESSION_SHARING

Un esempio reale: Dettagli di magazzino in un’interfaccia fluida

Gli utenti vogliono applicazioni desktop che sembrino native ma che si evolvano con la stessa rapidità del web. Con 4D 21, questo non è più un compromesso. Una nuova integrazione tra Web Areas e 4D Qodly Pro consente di offrire interfacce ricche e dinamiche all’interno dei moduli 4D, mantenendo tutta la logica aziendale all’interno del server 4D.

Il risultato è un’esperienza ibrida unificata in cui i dati fluiscono istantaneamente, gli aggiornamenti dell’interfaccia utente sono naturali e il flusso di lavoro di sviluppo rimane semplice. Questo è un ibrido fatto bene.

Configurazione dell’area Web per un’esperienza connessa

Immaginate una casella di riepilogo 4D sulla parte sinistra dello schermo, mentre sulla destra vengono visualizzati in un’area Web i dettagli dell’articolo selezionato, compresi la posizione sulla mappa e i controlli di valutazione.

Selezionate un altro magazzino e i dettagli si aggiorneranno istantaneamente senza ricaricare la pagina. Gli utenti hanno la sensazione di navigare in un pannello nativo, non in una visualizzazione web. Questa è la flessibilità di 4D Qodly Pro unita all’affidabilità di 4D.

CONFIGURAZIONE FACILE

Per consentire questa interazione senza soluzione di continuità, l’Area Web viene configurata con due semplici proprietà: Usa motore di rendering web incorporato e Accedi ai metodi 4D. Queste impostazioni danno alla pagina Qodly incorporata pieno accesso ai dati e alla logica del server.

Da qui, l’evento “On Load” dell’area Web inizializza la pagina, attribuisce la sessione corretta e passa un contesto che espone i metodi della classe di dati.

Aspettate, quale sessione e perché ho bisogno di un contesto?

Sebbene in questo caso la pagina di 4D Qodly venga caricata all’interno di un’area web dell’applicazione 4D, può anche essere eseguita direttamente da un browser. Pertanto, dobbiamo dare priorità alla sicurezza. Inoltre, parla direttamente con il server 4D, quindi il server deve sapere a quale sessione client appartiene. Infine, possiamo condividere un contesto tra il desktop 4D e la pagina Qodly, consentendoci di condividere i dati. Analogamente a come si usa un contesto per condividere i dati tra 4D e 4D Write Pro.

Sia che l’applicazione venga eseguita localmente o in modalità client-server, la pagina Qodly deve operare all’interno della sessione 4D corretta. In questo modo le chiamate ai metodi sono sicure e i dati rimangono coerenti.

Ecco l’esatta configurazione utilizzata nella demo:

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 

authentify è un metodo di progetto che deve avere la proprietà “execute on server” spuntata per avere accesso all’oggetto sessione

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

e lo stesso vale per getOTP

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

viewDetails è un permesso configurato in Qodly Studio in questo modo:

dove possiamo leggere l’entità Warehouse ed eseguire Warehouse.getWarehouseById per ottenere l’entità corrispondente quando l’ID cambia, per recuperare La logica è semplice. Session.setPrivileges assicura che l’utente abbia i diritti necessari.
getOTP() rilascia un token una tantum che lega l’area Web alla sessione 4D corrente.
L’URL include il token $4DSID, in modo che la pagina Qodly venga eseguita all’interno della sessione.
Infine, WA SET CONTEXT dà alla pagina l’accesso alla classe di dati Warehouse, compresi i metodi GetWarehouseById e Rate.

Questo crea una connessione pulita e sicura tra Qodly e il vostro livello di dati.

Aggiornamenti istantanei dell’interfaccia utente dalla casella di riepilogo 4D

sul metodo oggetto della Listbox:

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 

La listbox completa il flusso di lavoro. Quando l’utente seleziona un magazzino, 4D chiama WA EXECUTE JAVASCRIPT FUNCTION per attivare Qodly.setSource nell’area Web. Il nuovo ID del magazzino viene trasmesso e la pagina Qodly si aggiorna immediatamente.

L’utente non vede un ricaricamento del web. Vede solo i nuovi dati apparire nel pannello dei dettagli.

Una pagina Qodly moderna che dà vita ai dati

All’interno di Qodly Studio, la pagina dei dettagli utilizza due componenti personalizzati. Un componente Mappa che mostra l’esatta posizione del magazzino e un componente Valutazione che consente agli utenti di aggiornare la valutazione. Entrambi i componenti sono legati all’origine dell’entità magazzino.

La pagina ascolta i cambiamenti nella sorgente warehouseId. Quando questa fonte cambia, chiama getWarehouseById per caricare l’entità corretta e la visualizza immediatamente.

Se l’utente modifica la valutazione, il componente Rating attiva il metodo Rate nel contesto 4D. Gli aggiornamenti vengono salvati istantaneamente.

Questo è il tipo di reattività che gli utenti si aspettano dagli strumenti moderni.

Perché i team amano questo approccio ibrido

Si mantengono la potenza, la sicurezza e la struttura di 4D sul backend. La flessibilità di progettazione e la ricchezza di componenti di 4D Qodly Pro sul front-end. E gli utenti ottengono un’applicazione fluida e moderna che risponde istantaneamente alle loro azioni.