Erweitern Sie Ihr Desktop Interface mit Web Widgets mit 4D Qodly Pro

Wollten Sie schon immer Ihre Benutzeroberfläche mit Widgets anreichern, die Sie von Websites kennen, z. B. mit einer Navigationskarte? Nicht, indem Sie JavaScript lernen und sich mit CSS und HTML auseinandersetzen und damit kämpfen, Daten zwischen diesen beiden Welten zu übertragen?

Eine neue Integration zwischen Web Areas und 4D Qodly Pro ermöglicht es Ihnen, reichhaltige, dynamische Schnittstellen in Ihren 4D Formularen bereitzustellen, während Ihre gesamte Geschäftslogik in 4D Server verbleibt.

HDI_SESSION_SHARING

Ein echtes Beispiel: Lagerdetails in einer flüssigen Schnittstelle

Anwender wünschen sich Desktop-Anwendungen, die sich wie native Anwendungen anfühlen, sich aber genauso schnell weiterentwickeln wie das Web. Mit 4D 21 ist dies kein Kompromiss mehr. Durch die neue Integration von Web Areas und 4D Qodly Pro können Sie reichhaltige, dynamische Oberflächen in Ihren 4D Formularen bereitstellen, während die gesamte Geschäftslogik auf dem 4D Server bleibt.

Das Ergebnis ist ein einheitliches Hybrid-Erlebnis, bei dem Daten sofort fließen, UI-Updates sich natürlich anfühlen und Ihr Entwicklungs-Workflow einfach bleibt. Das ist Hybrid richtig gemacht.

Web Area Setup für ein vernetztes Erlebnis

Stellen Sie sich eine 4D Listbox auf der linken Seite Ihres Bildschirms vor, während auf der rechten Seite in einem Webbereich Details zum ausgewählten Artikel angezeigt werden, einschließlich der Lage auf der Karte und der Bewertungsfunktionen.

Wählen Sie ein anderes Lagerhaus und die Details werden sofort aktualisiert, ohne dass die Seite neu geladen werden muss. Die Benutzer haben das Gefühl, in einem eigenen Panel zu navigieren, nicht in einer Webansicht. Dies ist die Flexibilität von 4D Qodly Pro gepaart mit der Zuverlässigkeit von 4D.

EINFACHE KONFIGURATION

Um diese nahtlose Interaktion zu ermöglichen, wird der Webbereich mit zwei einfachen Eigenschaften konfiguriert: Use embedded web rendering engine und Access 4D methods. Mit diesen Einstellungen erhält die eingebettete Qodly-Seite vollen Zugriff auf Ihre Daten und Serverlogik.

Das „On Load“-Ereignis des Webbereichs initialisiert die Seite, fügt die richtige Sitzung hinzu und übergibt einen Kontext, der Ihre Datenklassenmethoden offenlegt.

Moment, welche Sitzung und warum brauche ich einen Kontext?

Die 4D Qodly Seite wird zwar in diesem Fall innerhalb eines Webbereichs der 4D Anwendung geladen, kann aber auch direkt von einem Browser aus gestartet werden. Daher müssen wir der Sicherheit Vorrang einräumen. Da sie direkt mit dem 4D Server kommuniziert, muss der Server wissen, zu welcher Client-Sitzung sie gehört. Schließlich können wir einen Kontext zwischen dem 4D Desktop und der Qodly Seite austauschen, so dass wir Daten gemeinsam nutzen können. Ähnlich wie wir einen Kontext verwenden, um Daten zwischen 4D und 4D Write Pro auszutauschen.

Unabhängig davon, ob Ihre Anwendung lokal oder im Client-Server-Modus läuft, muss die Qodly Seite innerhalb der richtigen 4D Sitzung arbeiten. Dies ermöglicht sichere Methodenaufrufe und stellt sicher, dass die Daten konsistent bleiben.

Hier ist der genaue Aufbau, der in der Demo verwendet wird:

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 ist eine Projektmethode, bei der die Eigenschaft „execute on server“ aktiviert sein muss, um Zugriff auf das Session Object zu erhalten

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

und das gleiche gilt für getOTP

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

viewDetails ist eine Berechtigung, die in Qodly Studio wie folgt konfiguriert ist:

wo wir die Warehouse-Entität lesen und auf Warehouse.getWarehouseById ausführen können, um die entsprechende Entität zu erhalten, wenn sich die ID ändert, um die Logik abzurufen ist einfach. Session.setPrivileges stellt sicher, dass der Benutzer über die notwendigen Rechte verfügt.
getOTP() gibt ein einmaliges Token aus, das den Webbereich an die aktuelle 4D Sitzung bindet.
Die URL enthält das $4DSID-Token, so dass die Qodly-Seite innerhalb dieser Sitzung läuft.
Mit WA SET CONTEXT schließlich erhält die Seite Zugriff auf Ihre Warehouse-Datenklasse, einschließlich Methoden wie GetWarehouseById und Rate.

So entsteht eine saubere, sichere Verbindung zwischen Qodly und Ihrer Datenschicht.

Sofortige UI Updates aus der 4D Listbox

auf die Objektmethode der Listbox haben wir:

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 

Die Listbox vervollständigt den Workflow. Wenn der Benutzer ein Lager auswählt, ruft 4D die WA EXECUTE JAVASCRIPT FUNCTION auf, um Qodly.setSource innerhalb des Webbereichs auszulösen. Die neue Lager-ID wird weitergegeben und die Qodly-Seite wird sofort aktualisiert.

Der Benutzer sieht kein Neuladen des Webs. Er sieht nur, dass neue Daten im Detailbereich angezeigt werden.

Eine moderne Qodly-Seite, die Daten zum Leben erweckt

Innerhalb von Qodly Studio verwendet die Detailseite zwei benutzerdefinierte Komponenten. Eine Kartenkomponente, die den genauen Standort des Lagers anzeigt, und eine Bewertungskomponente, mit der die Benutzer die Bewertung aktualisieren können. Beide Komponenten sind an die Entitätsquelle des Lagers gebunden.

Die Seite wartet auf Änderungen in der warehouseId-Quelle. Wenn sich diese Quelle ändert, ruft sie getWarehouseById auf, um die richtige Entität zu laden, und zeigt sie sofort an.

Wenn der Benutzer die Bewertung ändert, löst die Komponente Rating die Methode Rate im 4D Kontext aus. Die Aktualisierungen werden sofort gespeichert.

Dies ist die Art von Reaktionsfähigkeit, die Benutzer von modernen Tools erwarten.

Warum Teams diesen Hybrid-Ansatz lieben

Sie behalten die Leistungsfähigkeit, Sicherheit und Struktur von 4D im Backend. Sie erhalten die Designflexibilität und den Komponentenreichtum von 4D Qodly Pro im Frontend. Und Ihre Benutzer erhalten eine flüssige, moderne Anwendung, die sofort auf ihre Aktionen reagiert.