Améliorez votre interface de bureau avec des widgets Web en utilisant 4D Qodly Pro

Vous avez déjà voulu enrichir votre interface utilisateur avec des widgets connus des sites web, tels qu’une carte de navigation ? Pas en apprenant JavaScript et en manipulant CSS et HTML et en se battant pour faire passer des données entre ces deux mondes ?

Une nouvelle intégration entre Web Areas et 4D Qodly Pro vous permet de fournir des interfaces riches et dynamiques dans vos formulaires 4D tout en gardant toute votre logique d’entreprise dans 4D Server.

HDI_SESSION_SHARING

Un exemple concret : Détails de l’entrepôt dans une interface fluide

Les utilisateurs veulent des applications de bureau qui donnent l’impression d’être natives tout en évoluant aussi rapidement que le web. Avec 4D 21, ce n’est plus un compromis. Une nouvelle intégration entre Web Areas et 4D Qodly Pro vous permet de fournir des interfaces riches et dynamiques à l’intérieur de vos formulaires 4D tout en gardant toute votre logique d’entreprise à l’intérieur du serveur 4D.

Le résultat est une expérience hybride unifiée où les données circulent instantanément, les mises à jour de l’interface utilisateur sont naturelles et votre flux de développement reste simple. C’est un hybride bien fait.

Configuration de la zone Web pour une expérience connectée

Imaginez une zone de liste 4D sur la partie gauche de votre écran, tandis que la partie droite affiche dans une zone Web les détails de l’article sélectionné, y compris l’emplacement sur la carte et les contrôles d’évaluation.

Sélectionnez un autre entrepôt et les détails sont mis à jour instantanément, sans qu’il soit nécessaire de recharger la page. Les utilisateurs ont l’impression de naviguer dans un panneau natif, et non dans une vue Web. C’est la flexibilité de 4D Qodly Pro associée à la fiabilité de 4D.

CONFIGURATION FACILE

Pour permettre cette interaction transparente, la zone Web est configurée avec deux propriétés simples : Utiliser le moteur de rendu Web intégré et Accéder aux méthodes 4D. Ces paramètres donnent à la page Qodly intégrée un accès complet à vos données et à la logique du serveur.

À partir de là, l’événement « On Load » de la zone Web initialise la page, associe la bonne session et transmet un contexte qui expose vos méthodes de classe de données.

Attendez, quelle session et pourquoi ai-je besoin d’un contexte ?

Bien que la page 4D Qodly soit chargée dans ce cas au sein d’une zone web de l’application 4D, elle peut également être exécutée directement à partir d’un navigateur. C’est pourquoi nous devons donner la priorité à la sécurité. De plus, elle communique directement avec le serveur 4D, qui doit donc savoir à quelle session client elle appartient. Enfin, nous pouvons partager un contexte entre le bureau 4D et la page Qodly, ce qui nous permet de partager des données. De la même manière que nous utilisons un contexte pour partager des données entre 4D et 4D Write Pro.

Que votre application soit exécutée localement ou en mode client-serveur, la page Qodly doit fonctionner dans la bonne session 4D. Cela permet de sécuriser les appels de méthode et de garantir la cohérence des données.

Voici la configuration exacte utilisée dans la démo :

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 

la méthode authentify est une méthode de projet qui doit avoir la propriété « execute on server » cochée afin d’avoir accès à l’objet session

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

et il en va de même pour getOTP

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

viewDetails est une permission configurée dans Qodly Studio de la manière suivante :

où nous pouvons lire l’entité Warehouse et exécuter sur Warehouse.getWarehouseById pour obtenir l’entité correspondante lorsque l’ID change, pour récupérer La logique est simple. Session.setPrivileges s’assure que l’utilisateur dispose des droits nécessaires.
getOTP() émet un jeton unique qui lie la zone Web à la session 4D en cours.
L’URL comprend le jeton $4DSID, de sorte que la page Qodly s’exécute dans le cadre de cette session.
Enfin, WA SET CONTEXT permet à la page d’accéder à votre classe de données Warehouse, y compris à des méthodes telles que GetWarehouseById et Rate.

Cela crée une connexion propre et sécurisée entre Qodly et votre couche de données.

Mises à jour instantanées de l’interface utilisateur à partir de la boîte de liste 4D

sur la méthode de l’objet 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 zone de liste complète le flux de travail. Lorsque l’utilisateur sélectionne un entrepôt, 4D appelle WA EXECUTE JAVASCRIPT FUNCTION pour déclencher Qodly.setSource dans la zone Web. Le nouvel identifiant de l’entrepôt est transmis et la page Qodly est mise à jour instantanément.

L’utilisateur ne voit pas le site se recharger. Il voit seulement de nouvelles données apparaître dans le panneau des détails.

Une page Qodly moderne qui donne vie aux données

Dans Qodly Studio, la page de détails utilise deux composants personnalisés. Un composant Carte qui indique l’emplacement exact de l’entrepôt et un composant Classement qui permet aux utilisateurs de mettre à jour le classement. Les deux composants sont liés à l’entité source de l’entrepôt.

La page est à l’écoute des modifications apportées à la source warehouseId. Lorsque cette source change, elle appelle getWarehouseById pour charger l’entité correcte et l’afficher immédiatement.

Si l’utilisateur modifie l’évaluation, le composant Rating déclenche la méthode Rate dans le contexte 4D. Les mises à jour sont enregistrées instantanément.

C’est le type de réactivité que les utilisateurs attendent des outils modernes.

Pourquoi les équipes apprécient cette approche hybride

Vous conservez la puissance, la sécurité et la structure de 4D en arrière-plan. Vous bénéficiez de la souplesse de conception et de la richesse des composants de 4D Qodly Pro sur le front-end. Et vos utilisateurs obtiennent une application fluide et moderne qui répond instantanément à leurs actions.