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>