j-UIBuilder

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Cette composante rend l'application conçue par UI BuilderVous pouvez télécharger l’application via le path spécifié dans le composant ou par la config.url La voie peut contenir une adresse URL à JSON Le schéma de l'application ou l'objet de l’application (parsed JSON).

Configuration :

app {String} : un lien vers la méthode/variable où sera stockée l’instance app
url {String} un lien vers le schéma de l'application (il doit être dans le format json)
css {Boolean} applique le style d'application à l'élément actuel (défaut: true)
id {String} surécrite l'ID de l'application

Méthodes :

component.load(data) la méthode charge le app dans l'élément actuel

Propriétés :

component.app contient une instance de app.

Comment gérer les données ?

<ui-component name="uibuilder" ... config="app:myapphandler"></ui-component>

<script>

	function myapphandler(app) {

		// app.component {jComponent}
		// app.schema {Object} uibuilder compiled design
		// app.schema.inputs {Array Objects}
		// app.schema.outputs {Array Objects}

		// How to capture data?
		app.on('output', function(meta) {
			// meta.id {String} output identifier
			// meta.data {Object} raw data from the builder
			// meta.app {Object} app instance
			// meta.instance {Object} which instance sent data?
			// meta.instanceid {String} an instance identifier
			// meta.component {Object} which component sent data?
			// meta.componentid {String} a component identifier
			// meta.err {String} optional, error handler (nullable)
			// meta.output {String} an output name
			// meta.note {String} optional, a note
			// meta.ref {String} an internal reference

			AJAX('POST /yourapi/', meta.data, function(response) {
				// What next?
			});

		});

		// How to inject data?
		// Example
		app.on('ready', function() {
			// First, you must know input identifier
			app.input('cidlm5caacg_load', { email: '@' }, console.log);
		});

	}

</script>

Utilisez-le avec <ui-component name="uibuilder">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

example.html

<ui-component name="uibuilder" config="url:https://cdn.componentator.com/uibuilder/demo/render/dashboard.json"></ui-component>