Ajouter du code HTML dans les templates (pour afficher un Cytoscape)

PS: et avec le code serveur suivant:

package com.simplicite.extobjects.Application;

public class AppTestCytoscape extends com.simplicite.util.ExternalObject {
	private static final long serialVersionUID = 1L;

	@Override
	public Object display(com.simplicite.util.tools.Parameters params) {
		setDecoration(!params.getBooleanParameter("embedded"));
		return javascript(getName() + ".render(" + params.toJSON() + ")");
	}
}

On gère mieux le cas “embedded” (= div simple sans titre et bouton close) dans une vue ou autre:

Effectivement on ne peut ajouter qu’une vue dans un formulaire contenant l’objet externe. Une vue est un conteneur d’objet complet :

image

Il faudrait reporter le mécanisme pour avoir l’option sans passer par une vue, mais c’est le role de la vue pour insérer un chart, print template, etc.

Sinon mettre un <div> dans son template n’a pas besoin d’éditeur.

Oui ça c’est clair mais le point c’est plus le code qu’il faut mettre pour insérer l’objet externe dans cette div

Il n’y en a pas car le parser de template d’objet actuel sait uniquement insérer une vue (qui elle sait insérer d’autres éléments balisés avec des data-area).

Alimenter le div avec un objet externe, ce n’est donc pas qu’un pb d’éditeur de template.
Il faut faire évoluer le parser qui affiche le template pour reconnaitre et substituer par exemple :

<div class="extern" data-extern="myExtObject">

Je vote pour !
On peut avoir ça pour quand et, question subsidiaire, est-ce que ce sera backportable en release ?
Si non il faudra le bout de code en attendant

Oui surtout que le code front c’est juste un $ui.loadURL(div, externURL)
le reste doit être porté par l’objet externe, sauf peut être pour mettre en paramètre le embedded qui affiche ou non le titre.

je mets ça au backlog…

Oui il faut mettre embedded=true comme c’est fait dans les vues

(Pour rappel, je sais pas si ça convient ici mais il y a aussi un exemple d’ajout de composant sans objet externe ici : Chart usage example )

Oui c’est un exemple qui répond bien à la question initiale. Au même titre que l’exemple de la carte Google du client dans la démo.

Ici on a dérivé sur un autre débat = comment intégrer facilement un objet externe dans le formulaire d’un objet métier. L’idée étant, par exemple, qu’on puisse reutiliser cet objet externe dans plusieurs objets métier et/ou vues.

PS: Au delà de ces débats, et maintenant que je l’ai vu un peu en action, je reste très dubitatif sur l’intérêt de Cytoscape vs le modeler Simplicité…

Je pense que tu confonds setDecoration() et setTitle().

On peut très bien avoir

  • un composant encapsulé dans un panel/card = décoré (border de panel, marges…)
  • et sans titre

La notion embedded à mon sens doit conditionner le panel, pas le titre .
En tout cas en V5 sans legacy, les travaux iront dans ce sens.

Au niveau du template on devrait converger vers le paramétrage suivant :

<div class="extern" data-extern="name"/>

avec des options :

  • data-embedded = encapsulé ou non dans un panel/card
  • data-title = affichage ou non du titre (si true, il faut forcement un panel/card avec header)
  • data-iframe = intégré ou non dans une iframe (par défaut ce sera le cas si le contenu est un doctype html)
  • et des styles comme width / height.

Ce n’est pas backportable à cause de la legacy en V4.

OK ça me va pour la v5

Par contre pour la release 4.0 c’est quoi le code qu’il faut utiliser dans le script d’un objet métier pour que ça se comporte exactement comme dans les vues ?

J’ai essayé ça:

ui.loadURL($("#mydiv"), ui.getAjax().getExternalObjectURL("MyExtObject"));

mais ça ouvre du JSON dans une iframe :-(

Oui, il faut indiquer noiframe, sinon le loadURL qui reçoit une URL absolue en 'https://…"
la charge dans une iframe, et donc n’interprête pas le JS :

			$ui.loadURL(div, url, { noiframe: true })

Sinon il faut juste une URL relative.

ERRATUM ce paramètre noiframe est en V5 uniquement.
Je vais le rajouter car le cas se présente souvent.

Merci beaucoup pour vos réponses, le code que tu as montré David m’aide beaucoup pour ce que je voulais faire pour mon projet
Pour le choix de cytoscape, j’ai choisis cet outil parce que j’y ais vue des possibilités de manipulation graphique qui pouvait être intéressant pour le visuel des utilisateurs, notamment certaines fonctionnalités présente dans ces démo:
http://www.wineandcheesemap.com/
Dans l’idée, lorsque l’on clique sur une des nodes (pour simplicité, ca serait un record d’objet), on zoom sur cette node et l’on voit toutes les autres nodes qui lui sont liées (d’autres records de d’autres objets)

https://cytoscape.org/cytoscape.js-cxtmenu/
Pour celle-ci, lorsque l’on reste cliqué sur une node, cela ouvre un menu contextuel et permet de choisir une info que l’on voudrait avoir

https://js.cytoscape.org/demos/images-breadthfirst-layout/
L’inverse de cette démo, lorsque l’on clique sur une des nodes, d’autres nodes sortent de celle-ci pour donner plus d’informations

Cordialement,
KWu

Bonjour David,
en complément des éléments partagés par Kevin, nous nous appuyons aussi beaucoup sur les capacités de layout automatique embarquées dans Cytoscape (avec parfois une combinaison/séquence ajustée d’algorithmes de positionnement).
Nous étudions en parallèle le modeleur interne Simplicité.
Bruno

Ok je vous laisse voir si Cytoscape répond à votre besoin mais j’ai peur que vous vous lanciez dans la réécriture de choses qui existent déjà dans le modeler (hormis les algos de positionnement).

Sinon en 4.0 pour insérer un objet externe dans le template du formulaire d’un objet métier il faut:

  • Créer une vue avec 1 zone de type objet externe pour votre objet externe (ex: via l’éditeur de vues)
  • Associer cette vue à l’objet métier via une fonction
  • Insérer la vue dans le template de l’objet (ex: via l’éditeur de template)

Et voilà:

C’est pas simple mais ça marche

Bonjour David,
merci beaucoup pour ton aide et ton expertise.

Je suis 100% en phase avec toi: la cible pour nous est de pouvoir disposer d’un maximum de fonctionnalités avec une dette technique minimisée -> c’est clairement le modeleur Simplicité que nous visons.

Néanmoins, nous essayons de voir comment produire de manière automatisée et à la volée des représentations réactives (ajout/suppression de nœuds et relations positionnés automatiquement selon des règles propres à chaque contexte). Dans un premier temps, nous n’avons pas besoin de rendre ces vues persistantes.

Bruno

Il faudrait voir dans quelle mesure ce genre de service d’affichage à la volée non persistant ne pourrait pas être réalisé par le modeler. @Francois ?

NB: je pense que ça pourrait intéresser @Quentin_RICO aussi

1 Like

Bonjour,

@david pour revenir sur ton code côté serveur:

package com.simplicite.extobjects.Application;

public class AppTestCytoscape extends com.simplicite.util.ExternalObject {
	private static final long serialVersionUID = 1L;

	@Override
	public Object display(com.simplicite.util.tools.Parameters params) {
		setDecoration(!params.getBooleanParameter("embedded"));
		return javascript(getName() + ".render(" + params.toJSON() + ")");
	}
}

[/quote]

Je voulais savoir où était appelé la méthode display tout premier lieu, parce que je souhaiterais réutiliser la méthode mais en ajoutant d’autres paramètres dans le params afin de mettre à jour cytoscape en fonction de certaines recherches

Cordialement,
KWu

La méthode display est un hook appelé par le moteur, on ne peux pas jouer sur la manière dont il est appelé.

Si tu veux ajouter des paramètres à passer depuis le coté serveur à la partie JS tu peux faire des params.setParameter("myparam", (...)), cf. https://docs.simplicite.io/4.0/javadoc/com/simplicite/util/tools/Parameters.html#setParameter(java.lang.String,java.lang.String)

A noter que quand on embedde un objet externe via une vue dans le template d’un objet métier celui-ci passe déjà son nom et son row ID lors de l’appel à l’objet externe:

Je ne sais pas trop ce que tu veux ajouter comme paramètres mais normalement avec ces deux là tu as tout ce qu’il faut pour faire interagir ton objet externe avec l’objet métier…

Ex: avec le code suivant au niveau du script JS de l’objet externe:

(...)
	function chart(params) {
		var p = params.parameters;
		if (p.object && p.row_id) {
			$("#testcytoscape").text("Called from " + p.object + " (row ID " + p.row_id + ")");
		}
(...)

Ca donne ça: