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:

%code%

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:

%code%
[@
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:

%code%
[@
<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:

%code%
[@
<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"/>
@]