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

KWu · March 5, 2020, 2:14pm

Bonjour,

Dans mon projet, je souhaiterai inclure un code HTML/CSS/JS sur une partie d’un template afin de pouvoir donner une partie dynamique dans mes formulaires

J’ai déjà le code HTML/CSS/JS, et dans cet exemple, je voudrais le placer dans un bloc, dans l’encadré rouge, puis lorsqu’on lance ce formulaire, le bloc recupère des données et génère un visuel du HTML/CSS/JS

Est-ce possible ?

[Platform]
Status=OK
Version=4.0.P24
BuiltOn=2020-02-20 23:46 (revision 33b1f370cc64d7c985e644e4e24860e0e5973a3b)
DBPatchLevel=P24;33b1f370cc64d7c985e644e4e24860e0e5973a3b

Cordialement,
KWu

david · March 5, 2020, 2:43pm

Oui bien entendu c’est possible.
Cf la demo l’objet DemoClientqui contient une div custom pour afficher une carte Google et un bouton “start hangout”:

Le HTML additionnel est dans le code HTML du template de l’objet:

Le JS est dans la resource SCRIPT de l’objet

KWu · March 5, 2020, 3:47pm

Bonjour,

Merci pour votre réponse
Cependant je n’ai pas trouvé où était situé l’objet DemoClient, pourriez-vous me l’indiquer ?
Par ailleurs, je vois que dans votre démo, l’affichage de la map Google se passe par une API ou une URL présente sur le net, pour mon projet, mon code HTML est seulement local et je voudrais que l’affichage se fasse seulement sur simplicité, est ce que cela marche tout de meme ?

Cordialement,
KWu

david · March 5, 2020, 4:00pm

La démo est là: https://github.com/simplicitesoftware/module-demo

Elle contient de nombreux exemples didactiques donc je vous recommande fortement de vous l’installer quelquepart pour avoir des sources d’inspiration.

Sinon dans ma 2ème copie d’écran la partie mise en surbrillance est bien du code HTML spécifique ajouté au code HTML du template de mon objet métier (ici il sert à afficher des composants externes mais peu importe, ça reste du code HTML specifique arbitraire).

Le pattern c’est donc d’insérer manuellement votre code HTML dans le HTML de votre template (et/ou de vos zones d’attributs).

Pour le JavaScript mettez le dans la ressource SCRIPT de votre objet en l’isolant bien du reste du JavaScript de la UI Simplicite via un namespace ad-hoc (là aussi cf. les exemples de la démo)

Pour le CSS mettez le dans la ressource STYLES de votre objet avec là aussi une logique hiérarchique qui isole du reste (là aussi cf. les exemples e la démo). A noter que ces ressources CSS acceptent une syntaxe LESS.

david · March 5, 2020, 4:02pm

PS: Par curiosité que souhaitez vous mettre dans ce HTML specifique ? Je pose la question pour savoir si cette approche spécifique est bien la bonne approche pour répondre au besoin sous-jacent.

KWu · March 5, 2020, 4:08pm

Merci pour ce complément d’information,
Pour mon projet, je souhaiterai ajouter un bout de code venant d’un projet open source qui s’appelle Cytoscape.js
Celui-ci utilise du HTML/CSS/JS afin de donner une visualisation graphique des éléments présents dans le projet et la connexion qu’ils ont entre eux
https://cytoscape.org/cytoscape.js-tutorial-demo/

david · March 5, 2020, 4:24pm

OK le modeler standard de Simplicité répond à ce genre de besoin de représentation graphique des records des objets métier et de leur relations entre eux

Ex sur la démo, représentation des clients/produits/commandes

ou un exemple type “cartographie frontionnelle”:

Etc.

Francois · March 5, 2020, 5:13pm

On peut aussi créer un objet externe avec des ressources et l’insérer dans le template de l’objet via l’éditeur de template.

david · March 5, 2020, 5:42pm

Oui effectivement pour des choses un peu complexes ou mutualisables c’est une bonne approche car ça isole le composant et ça permet de le réutiliser dans plusieurs objets.

Là aussi la démo donne de bons exemples d’objets externes.

KWu · March 6, 2020, 8:53am

Oui, pour le coup j’avais vue que le modeler de simplicité pouvait créer une première version de modelisation, mais il lui manquait quelques fonctionnalités que je n’ai pas su retrouver comme par exemple lorsque l’on clique sur l’un des records, de pouvoir avoir un zoom sur celui-ci et d’afficher plus simplement les records qui lui sont liés

La version de créer des objets externes pour ajouter des ressources m’intéresse, j’ai cru voir qu’on pouvait mettre plusieurs type de fichiers différents dans les ressources (HTML, CSS, JS, …) cependant je n’arrive pas a les faire se lier entre elles, auriez-vous un exemple en tête pour que je vois comment cela fonctionne ?

Cordialement,
KWu

david · March 6, 2020, 9:19am

Oui, à nouveau, il y a un exemple dans la démo : l’objet externe DemoPlaceNewOrder

david · March 6, 2020, 9:46am

D’autres exemples de page custom (internes/externes) sur les modules complémentaires de la démo:

et

Elles architecturées sur le même principe que la DemoPlaceNewOrder => un code serveur qui invoke le JavaScript de la ressource SCRIPT qui utilise le HTML de la ressource HTML (et les styles de la ressource STYLES).

Le pattern est décrit ici dans la doc: Simplicité® documentation/01-core/externalobject-code-examples

KWu · March 6, 2020, 3:43pm

Bonjour,

En essayant de comprendre le code qui est présent dans l’objet externe DemoPlaceNewOrder il y a juste une partie que je ne comprend
Dans la partie SCRIPT en javascript, il y a le code suivant:

return { render: render };

Le render de droite, je comprend qu’il fait appel à la fonction qui est définit plus haut dans le script, cependant le premier render, celui-ci, je ne comprend pas sa provenance, le code marchant sur la démo mais pas lorsque je copie-colle tous les codes de l’objet dans mon projet (en modifiant les parties faisant appel a des objets de la démo), je suppose que ce render doit être paramétré quelque part, sauriez-vous où il se trouve ?

Cordialement,
KWu

david · March 6, 2020, 4:53pm

Il n’y a absolument rien de specifique à Simplicité ici : c’est un pattern de dev JavaScript hyper classique pour ne rendre publique que certaines fonctions/variables.

Ici seule la fonction render est publique et c’est elle qui est appelée à l’affichage de la page (le code serveur de l’objet externe hérite de ResponsiveExternalObject, cette classe helper appelle justement par défaut la fonction render d’un objet JavaScript ayant le même nom que l’objet externe en question, cf. https://docs.simplicite.io/4.0/javadoc/com/simplicite/webapp/web/ResponsiveExternalObject.html)

david · March 6, 2020, 5:02pm

J’ai vérifié, ce pattern est bien décrit dans la doc que j’avais indiqué plus haut: https://docs.simplicite.io/documentation/01-core/externalobject-code-examples.md#responsive

KWu · March 9, 2020, 2:54pm

Bonjour,

Effectivement j’ai pu corriger ce petit soucis, cependant je me retrouve avec un autre soucis.
J’ai opté pour une option de mettre tout mon code dans une page HTML, je mets cette page dans une ressource simplicité, je mets cette ressource et une ressource javascript(vue que l’objet externe en a besoin) dans un objet externe
Lorsque j’essaye de voir le resultat, je vois ceci

Pourtant je sais que Simplicité est passé dans mon code HTML parce que j’avais mis des console.log() pour vérifier
log

Pouvez-vous m’aider ?

Cordialement,
KWu

david · March 9, 2020, 3:06pm

Une copie d’écran et 2 messages dans la console ne suffit pas pour que l’on investiguer un pb de ce genre.

Copiez/collez le code complet de votre objet métier = le code serveur de votre objet externe + le contenu des ressources HTML et JavaScript de cet objet externe.

Mais bon peut être devriez vous par commencer par des choses plus simples plutôt que de vouloir directement intégrer votre objet externe dans le formulaire d’un objet métier (car c’est un usage avancé des objets externes). Faites déjà marcher votre objet externe en tant que page standalone (à la manière des exemples de la démo), une fois que ça marchera alors seulement essayez d’intégrer cet objet externe au formulaire de votre objet métier.

Francois · March 9, 2020, 3:20pm

Si un composant retourne de l’HTML complet <html>..., la UI l’affiche dans une iframe pour une raison évidente d’isolation.

Les traces “common.js” indiquent que vous n’êtes pas dans la UI responsive mais une iframe avec à priori la legacy de Simplicité…

En gros si vous faites une page HTML complete / standalone, vous sortez de Simplicité et donc vous devez tout recharger, voir recréer une session ajax, je doute que vous en soyez à ce niveau.

Il faut avoir une approche composant donc votre HTML doit être de simples “div” alimentés par votre javascript au sein de la UI déjà chargée.

david · March 9, 2020, 3:22pm

Oui, je le redis, le bon pattern pour la UI responsive c’est celui décrit dans ce doc: https://docs.simplicite.io/documentation/01-core/externalobject-code-examples.md#responsive

Ca correspond aux exemples de la démo.

david · March 9, 2020, 4:12pm

Voici un exemple de base Cytoscape qui marche en tant qu’ objet externe:

Code serveur:

package com.simplicite.extobjects.Application;

public class AppTestCytoscape extends com.simplicite.webapp.web.ResponsiveExternalObject {
	private static final long serialVersionUID = 1L;
}

Resource HTML:

<div id="testcytoscape" style="width: 500px; height: 500px; border: solid 1px #555;"></div>

Resource JS:

AppTestCytoscape = typeof AppTestCytoscape !== "undefined" ? AppTestCytoscape : (function ($) {

	function chart(params) {
		cytoscape({
		  container: $("#testcytoscape"),
		  elements: [
		  	{ data: { id: 'a' } },
		  	{ data: { id: 'b' } },
		  	{ data: { id: 'c' } },
		  	{ data: { id: 'ab', source: 'a', target: 'b' } },
		  	{ data: { id: 'bc', source: 'b', target: 'c' } },
		  	{ data: { id: 'ca', source: 'a', target: 'c' } }
		  ],
		  style: [
		    { selector: 'node', style: { 'background-color': '#555', 'label': 'data(id)' } },
		    { selector: 'edge', style: { 'width': 3, 'line-color': '#ccc', 'target-arrow-color': '#ccc', 'target-arrow-shape': 'triangle' } }
		  ],
		  layout: { name: 'grid', rows: 1 }
		});
	}

	return {
		render: function(params) {
			if (typeof cytoscape === "undefined")
				$ui.loadScript({
					url: "https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.14.0/cytoscape.min.js",
					onload: function() { chart(params); }
				});
			else
				chart(params);
		}
	};
})(jQuery);

Voici cet objet externe affiché en tant que page standalone:

Et voici le même objet ajouté dans une vue de type home page:

Par contre @Francois je ne vois pas d’outil dans l’éditeur de template d’un objet métier pour ajouter facilement/visuellement un objet externe dans une div custom, de quel mécanisme parlais-tu ?