XForms Custom Controls Examples - Archive of obsolete content

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>