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

Tags: #<Tag:0x00007fe2944da6d8>

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

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 :

Ce module (aussi disponibel dans l’appstore via la UI) : https://github.com/simplicitesoftware/module-demo-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 :

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

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

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 :
image

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

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

1 Like

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);

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);
	}
}

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(); }
}