Intégrer une bibliothèque Javascript en front pour afficher un widget spécifique

[Nadege]

Bonjour,

Je suis actuellement en train de travailler sur la mise en place de “widgets” utilisateur qui apparaitront sous différentes formes.

L’utilsateur va sélectionner ceux qu’il aimerait voir apparaitre sur sa page d’accueil ou son tableau de bord.

Pour cela, j’ai intégré à une vue Simplicité, l’affichage d’un objet externe que je configurerai en fonction des choix indiqués dans un objet métier dédié.

L’une des formes à mettre en place est “la jauge”. Pour cela, j’ai trouvé une bibliothèque Javascript que j’aimerais utiliser.

Pouvez-vous m’indiquer comment faire pour intégrer cette bibliothèque JS svp?

Cordialement,

Nadège

[Francois (François Genestin)]

Bonjour,

Il faut soit charger ta lib à l’ouverture du site (trigger document ui.loaded ou ui.ready dans le SCRIPT de la disposition responsive) ou soit directement depuis l’objet qui en a besoin, ce qui est préférable en terme d’UX et de temps d’attente à l’ouverture de session.

Pour un objet externe, tu peux expliciter les CSS/JS à charger depuis le display en back.

package com.simplicite.extobjects.MyModule;
import com.simplicite.util.tools.Parameters;
import com.simplicite.util.tools.HTMLTool;

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

    @Override
    public Object display(Parameters params) {
        appendCSSIncludes("http://url/of/a/file.css");
        appendJSIncludes("http://url/of/a/file.js");
        setHTML("<div id=\"mychart\" style=\"width: 100px; height: 100px;\"></div>");
        return javascript("$('#mychart').html(...)");
    }
}

https://docs.simplicite.io/documentation/01-core/externalobject-code-examples.md

ou en front tu peux mettre du code <script> dans un template ou JS existant ou un hook d’objet :

$ui.loadScript({
	url: "http://url/of/a/file.js",
	onload: function() {
		$('#mychart').html(...);
	}
});

Autre exemple d’intégration de graphique dans un objet métier via hook form.onload :

Chart usage example

The example here consists in adding a chart to a form using the UI API, like so: [Simplicit%C3%A9%C2%AE] In order to do so, just add a SCRIPT ressource to the object: [Simplicit%C3%A9%C2%AE] And add / adapt the following snippet of code, which loads the chart library and draws a chart after the object form has loaded (of course you could use the object’s data instead of the hard-coded values in this example): (function(ui) { var options = { type: 'bar', data: { labels:…

[david (David AZOULAY)]

Ce module (aussi disponibel dans l’appstore via la UI) : GitHub - simplicitesoftware/module-demo-dashboard: Demo custom dashboard contient des exemples de charts spécifiques basés sur la lib externe Google Charts, y compris une “gauge”:

Sinon il y a déjà intégrés dans Simplicité les libs Charts.js (https://www.chartjs.org/) et jQplot (http://www.jqplot.com/) il est aisé de s’en servir specifiquement dans ses objets externes. Ex: la page d’accueil du domaine Operation contient des charts de type “gauge” basés sur Charts.js :

[david (David AZOULAY)]

PS: jQplot contient un type de chart “gauge” : http://www.jqplot.com/deploy/dist/examples/meterGauge.html

[Francois (François Genestin)]

@david

la page d’accueil du domaine Operation contient des charts de type “gauge” basés sur Charts.js :

non là ce sont des progress bars en affichage circulaire de nos $ui.view.widget simplicité
C’est jQplot qui a des gauges.

[Nadege]

Merci pour ces informations

Je compte mettre en place la jauge de la bibliothèque JQplot qui correspond complétement à ce que je recherchais.

J’ai juste une petite question concernant l’utilsation de cette bibliothèque directement dans le code Front de mon objet externe.

Dans le code du back, je mets en place l’utilsation de cette bibliothèque via le code suivant :

public Object display(Parameters params) {
	JSONObject urlJson = new JSONObject();
	String url = recupererURL("ADMIN","");
	urlJson.put("URL",url);
	urlJson.put("JqplotJS",HTMLTool.jqplotJS());
	urlJson.put("JqplotCSS",HTMLTool.jqplotCSS());
	
	try {
		setDecoration(false);
		this.appendCSSIncludes(HTMLTool.jqplotCSS());
		this.appendJSIncludes(HTMLTool.jqplotJS());


		return this.javascript(this.getName()+".render(" + urlJson + ");");
	} catch (Exception e) {
		AppLog.error(getClass(), "display", null, e, getGrant());
		return e.getMessage();
	}
}

et dans le code du Front, je créer une fonction de création de jauge que j’appelle quand l’indicateur configuré par l’utilsateur est de type “Jauge” :

	function createJauge(nomDiv,nomIndicateur,minimum,maximum,valeur,seuil){
		val = [valeur]
		plot3 = $.jqplot(nomDiv,[val],{
			title : nomDiv,
	       seriesDefaults: {
	           renderer: $.jqplot.MeterGaugeRenderer,
	           rendererOptions: {
	           	label: nomIndicateur,
	        	labelPosition: 'bottom',
	               min: minimum,
	               max: maximum,
	               ticks: [minimum,valeur,seuil,maximum],
	               intervals:[minimum,seuil,maximum],
	               intervalColors:['#66cc66', '#E7E658', '#cc6666']
	           }
	       }
	   });
	}

Quelques fois la jauge apparait mais la plupart du temps, il semblerait que la bibliothèque ne se charge pas à l’ouverture de la vue contenant mon objet externe et déclenche l’erreur suivante :

Y-a t-il un autre élement à ajouter pour parvenir à appeler correctement cette bibliothèque dans le Front ?

[david (David AZOULAY)]

Oui il faut charger les libs explicitement dans le script JS de votre page via un :

$ui.loadScripts([ <list of JS URLs>], function() {
    <do something with libs>
});

A la manière de ce qu’on fait dans le module dashboard de démo indiqué ci-dessus, le JS code en question est là: https://github.com/simplicitesoftware/module-demo-dashboard/blob/master/resources/ObjectExternal/DemoDashboard/SCRIPT.js

Pour certaines libs ça peut aussi se faire dans le code serveur qui dit à la UI de cherger les libs de cette manière de manière transparente.

Je vais bricoler un exemple pour vous mettre sur la bonne voie dans le cas particulier de jQPlot

[david (David AZOULAY)]

Voilà:

Code Java de l’objet externe:

package com.simplicite.extobjects.Application;

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

	@Override
	public Object display(com.simplicite.util.tools.Parameters params) {
		addJQPlot(); // This tells the UI to load JQPlot
		return javascript(getName() + ".render(" + params.toJSON() + ");"); // This tells the UI what to call in JS
	}
}

Resource HTML de l’objet externe:

<div id="testjqplot"></div>

Resource SCRIPT de l’objet externe:

var AppTestJQPlot = AppTestJQPlot || (function ($) {

	function render(params) {
		$.jqplot('testjqplot', [[ 350 ]], {
			seriesDefaults: {
				renderer: $.jqplot.MeterGaugeRenderer,
				rendererOptions: { min: 100, max: 500, intervals:[ 200, 300, 400, 500 ], intervalColors:['#66cc66', '#93b75f', '#E7E658', '#cc6666']
				}
			}
		});
	}

	return { render: render };

})(jQuery);

[david (David AZOULAY)]

PS: Le Java peut s’écrire aussi comme ça en utilisant la helper class ResponsiveExternalObject :

package com.simplicite.extobjects.Application;

public class AppTestJQPlot extends com.simplicite.webapp.web.ResponsiveExternalObject {
	private static final long serialVersionUID = 1L;
	
	@Override
	public String getRenderStatement(com.simplicite.util.tools.Parameters params) {
		addJQPlot();
		return super.getRenderStatement(params);
	}
}

[david (David AZOULAY)]

Et de manière plus “propre” (avec une amélioration de la helper class ResponsiveExternalObject qui sera poussée ce soir):

package com.simplicite.extobjects.Application;

import com.simplicite.util.tools.HTMLTool;

public class AppTestJQPlot extends com.simplicite.webapp.web.ResponsiveExternalObject {
	private static final long serialVersionUID = 1L;
	
	@Override
	public String[] getJSIncludes() { return HTMLTool.jqplotJS(); }

	@Override
	public String[] getCSSIncludes() { return HTMLTool.jqplotCSS(); }
}