How to display QuiX custom widgets and load external stylesheets

First you need to load the JavaScript file (module) that contains your widget implementation. Simply, include the following declaration inside your QuiX UI file:

This loads the JavaScript file dynamically and your class becomes available. After this in order to have you custom widget displayed add this kind of node:

The classname attribute should contain the name of the JavaScript class that implements our custom widget.

Loading external stylesheets is pretty simple. All you have to do is to include the following declaration inside your QuiX UI file:

This declaration creates a new LINK node appended to the document's HEAD.

Third party widgets are implemented inside JavaScript files. A typical widget class looks like this:

function VPlayer(params) {
	params = params || {};

	params.width = params.width || '100%';
	params.height = params.height || '100%';
	params.overflow = 'hidden';

	this.base = Widget;
	this.base(params);
}

VPlayer.prototype = new Widget;

...add here your widget's methods...

Then, in order to include it inside a QuiX UI file, follow the following steps. First you need to load the JavaScript file (module) that contains your widget implementation. Incude the following declaration inside your QuiX? UI file:

<a:module xmlns:a="http://www.innoscript.org/quix" name="My Custom Widgets" src="JAVASCRIPT_FILE_URL"/>

This loads the JavaScript file dynamically. After this in order to have you custom widget displayed add this kind of node:

<a:custom classname="VPlayer"/>

The classname attribute should contain the name of the class that implements our custom widget.

That's all.

(:title How to display QuiX custom widgets and load external stylesheets:)

Loading external stylesheets is pretty simple. All you have to do is to include the following declaration inside your QuiX? UI file:

<a:stylesheet xmlns:a="http://www.innoscript.org/quix" name="THE_NAME_OF_YOUR_STYLESHEET" src="SYLESHEET_URL"/>