Introduction
Here is a collection of misc. custom control examples. Please feel free to add your own examples.
A full example showing a complete form can be found on XForms:Custom_Controls.
Output Showing Images
<binding id="output-image"
extends="chrome://xforms/content/xforms.xml#xformswidget-base">
<content>
<html:div>
<html:img anonid="content"/>
</html:div>
</content>
<implementation implements="nsIXFormsUIWidget">
<method name="refresh">
<body>
var img = document.getAnonymousElementByAttribute(this, "anonid", "content");
img.setAttribute("src", this.stringValue);
return true;
</body>
</method>
</implementation>
</binding>
Output Showing XHTML
<binding id="output-xhtml"
extends="chrome://xforms/content/xforms-xhtml.xml#xformswidget-output">
<content>
<children includes="label"/>
<xhtml:div class="xf-value" anonid="content"></xhtml:div>
<children/>
</content>
<implementation implements="nsIXFormsUIWidget">
<field name="_domparser">null</field>
<property name="domparser" readonly="true">
<getter>
if (!this._domparser)
this._domparser = new DOMParser();
return this._domparser;
</getter>
</property>
<method name="refresh">
<body>
// Get new value, parse, and import it.
var val = this.stringValue;
var newdom = this.domparser.parseFromString(val, "text/xml");
var impnode = document.importNode(newdom.firstChild, true);
// Get content node, clean it, and update it
var content = document.getAnonymousElementByAttribute(this, "anonid", "content");
if (content.firstChild) {
content.removeChild(content.firstChild);
}
content.appendChild(impnode);
return true;
</body>
</method>
</implementation>
</binding>