From Porcupine wiki

Developers: 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"/>

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. Simply, include 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 and your class becomes available. 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 JavaScript class that implements our custom widget.

That's all.

Retrieved from http://wiki.innoscript.org/pmwiki.php/Developers/HowToIncludeQuiXCustomWidgetsAndStylesheets
Page last modified on June 07, 2007, at 10:02 PM