j-UIBuilder

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Deze component geeft de applicatie ontworpen via UI Builder. U kunt de app opladen via de path die in de component is aangegeven of via de optie config.url. De route kan een URL bevatten naar het JSON app schema of het app object (parsed JSON).

Configuratie:

app {String} een link naar de methode/variabele waar de instelling app zal worden opgeslagen
url {String} een link naar het app schema (dat moet in het json-formaat)
css {Boolean} is een app-stijl voor het huidige element (default: true)
id {String} overschrijft app ID

Methoden:

component.load(data) de methode loopt app in het huidige element

eigenschappen:

component.app bevatten een app Instantie

Hoe omgaan met gegevens?

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

Gebruik het met <ui-component name="uibuilder">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

example.html

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