Vylepšete své desktopové rozhraní pomocí webových widgetů pomocí aplikace 4D Qodly Pro

Chtěli jste někdy obohatit uživatelské rozhraní o widgety známé z webových stránek, například navigační mapu? Ne tím, že se naučíte JavaScript a budete se zabývat CSS a HTML a bojovat s předáváním dat mezi těmito dvěma světy?

Nová integrace mezi aplikacemi Web Areas a 4D Qodly Pro vám umožní poskytovat bohatá dynamická rozhraní v rámci formulářů 4D a zároveň zachovat veškerou obchodní logiku uvnitř 4D Serveru.

HDI_SESSION_SHARING

Skutečný příklad: Podrobnosti o skladu v jednom plynulém rozhraní

Uživatelé chtějí desktopové aplikace, které působí nativně a přitom se vyvíjejí stejně rychle jako web. S aplikací 4D 21 to již není kompromis. Nová integrace mezi webovými oblastmi a 4D Qodly Pro umožňuje poskytovat bohatá dynamická rozhraní uvnitř formulářů 4D a zároveň zachovat veškerou obchodní logiku uvnitř serveru 4D.

Výsledkem je jednotné hybridní prostředí, kde data proudí okamžitě, aktualizace uživatelského rozhraní jsou přirozené a váš vývojový pracovní postup zůstává jednoduchý. Tohle je správně provedený hybrid.

Nastavení webové oblasti pro propojený zážitek

Představte si, že v levé části obrazovky je seznam 4D, zatímco v pravé části se ve webové oblasti zobrazují podrobnosti o vybrané položce, včetně umístění na mapě a ovládacích prvků hodnocení.

Vyberte jiný sklad a podrobnosti se okamžitě aktualizují bez nutnosti znovu načíst stránku. Uživatelé mají pocit, že se pohybují v nativním panelu, nikoli ve webovém zobrazení. To je flexibilita systému 4D Qodly Pro spojená se spolehlivostí systému 4D.

SNADNÁ KONFIGURACE

Aby byla tato bezproblémová interakce umožněna, konfiguruje se webová oblast pomocí dvou jednoduchých vlastností: Použít vestavěné vykreslovací jádro webu a Přístup k metodám 4D. Tato nastavení poskytují vložené stránce Qodly plný přístup k vašim datům a serverové logice.

Odtud událost „On Load“ webové oblasti inicializuje stránku, připojí správnou relaci a předá kontext, který vystaví metody vaší datové třídy.

Počkat, jaká relace a proč potřebuji kontext?

Stránka 4D Qodly se sice v tomto případě načítá v rámci webové oblasti aplikace 4D, ale lze ji spustit i přímo z prohlížeče. Proto musíme upřednostnit bezpečnost. A komunikuje přímo se serverem 4D, takže server musí vědět, ke které relaci klienta patří. Nakonec můžeme sdílet kontext mezi pracovní plochou 4D a stránkou Qodly, což nám umožní sdílet data. Podobně jako používáme kontext ke sdílení dat mezi 4D a 4D Write Pro.

Ať už aplikace běží lokálně, nebo v režimu klient-server, stránka Qodly musí pracovat uvnitř správné relace 4D. To poskytuje bezpečné volání metod a zajišťuje, že data zůstanou konzistentní.

Zde je přesné nastavení použité v ukázce:

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 je metoda projektu, která musí mít zaškrtnutou vlastnost „execute on server“, aby měla přístup k objektu relace.

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

a totéž platí pro getOTP

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

viewDetails je oprávnění nakonfigurované v Qodly Studio takto:

kde můžeme načíst entitu Warehouse a provést příkaz Warehouse.getWarehouseById, abychom získali odpovídající entitu, když se změní ID, načíst Logika je jednoduchá. Session.setPrivileges zajistí, že uživatel má potřebná práva.
Funkce getOTP() vydá jednorázový token, který váže webovou oblast k aktuální relaci 4D.
Adresa URL obsahuje token $4DSID, takže stránka Qodly běží v rámci této relace.
Nakonec WA SET CONTEXT poskytne stránce přístup k datové třídě Warehouse, včetně metod jako GetWarehouseById a Rate.

Tím se vytvoří čisté a bezpečné spojení mezi Qodly a vaší datovou vrstvou.

Okamžité aktualizace uživatelského rozhraní ze 4D Listboxu

na metodě objektu Listbox máme:

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 

Listbox doplňuje pracovní postup. Když uživatel vybere sklad, 4D zavolá WA EXECUTE JAVASCRIPT FUNCTION a spustí Qodly.setSource uvnitř webové oblasti. Předá se nové ID skladu a stránka Qodly se okamžitě aktualizuje.

Uživateli se nezobrazí nové načtení webu. Vidí pouze, že se v panelu s podrobnostmi objevují čerstvá data.

Moderní stránka Qodly, která oživuje data

Uvnitř aplikace Qodly Studio využívá stránka s podrobnostmi dvě vlastní komponenty. Komponentu Mapa, která zobrazuje přesné umístění skladu, a komponentu Hodnocení, která umožňuje uživatelům aktualizovat hodnocení. Obě komponenty jsou vázány na zdroj entit skladu.

Stránka naslouchá změnám ve zdroji warehouseId. Když se tento zdroj změní, zavolá getWarehouseById, aby načetla správnou entitu, a okamžitě ji zobrazí.

Pokud uživatel změní hodnocení, komponenta Hodnocení spustí metodu Rate v kontextu 4D. Aktualizace se uloží okamžitě.

Takovou odezvu uživatelé od moderních nástrojů očekávají.

Proč týmy tento hybridní přístup milují

Zachováte si výkon, zabezpečení a strukturu 4D na zadní straně. Na přední straně získáte flexibilitu návrhu a bohatství komponent 4D Qodly Pro. A vaši uživatelé získají plynulou, moderní aplikaci, která okamžitě reaguje na jejich akce.