Revision 201201 of XForms Custom Controls Examples

Revision slug: XForms/Custom_Controls_Examples
Revision title: XForms Custom Controls Examples
Revision id: 201201
Created: Apr 18, 2006, 10:16:03 AM
Creator: Beaufour
Is current revision? No
Comment Add link to main page

Tags:

XForms

Revision 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 for 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>

Revision Source

<p> 
</p>
<h3 name="Introduction"> Introduction </h3>
<p>Here is a collection of misc. custom control examples. Please feel free to add your own examples.
</p><p>A full example showing a complete for can be found on <a href="en/XForms/Custom_Controls">XForms:Custom_Controls</a>.
</p>
<h3 name="Output_Showing_Images"> Output Showing Images </h3>
<pre>&lt;binding id="output-image"
	 extends="chrome://xforms/content/xforms.xml#xformswidget-base"&gt;
  &lt;content&gt;
    &lt;html:div&gt;
      &lt;html:img anonid="content"/&gt;
    &lt;/html:div&gt;
  &lt;/content&gt;

  &lt;implementation implements="nsIXFormsUIWidget"&gt;
    &lt;method name="refresh"&gt;
      &lt;body&gt;
	var img = document.getAnonymousElementByAttribute(this, "anonid", "content");
	img.setAttribute("src", this.stringValue);
	return true;
      &lt;/body&gt;
    &lt;/method&gt;
  &lt;/implementation&gt;
&lt;/binding&gt;
</pre>
<h3 name="Output_Showing_XHTML"> Output Showing XHTML </h3>
<pre>&lt;binding id="output-xhtml"
	 extends="chrome://xforms/content/xforms-xhtml.xml#xformswidget-output"&gt;
  &lt;content&gt;
    &lt;children includes="label"/&gt;
    &lt;xhtml:div class="xf-value" anonid="content"&gt;&lt;/xhtml:div&gt;
    &lt;children/&gt;
  &lt;/content&gt;

  &lt;implementation implements="nsIXFormsUIWidget"&gt;

    &lt;field name="_domparser"&gt;null&lt;/field&gt;

    &lt;property name="domparser" readonly="true"&gt;
      &lt;getter&gt;
	if (!this._domparser)
	this._domparser = new DOMParser();
	return this._domparser;
      &lt;/getter&gt;
    &lt;/property&gt;
    
    &lt;method name="refresh"&gt;
      &lt;body&gt;
	// 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;
      &lt;/body&gt;
    &lt;/method&gt;
  &lt;/implementation&gt;
&lt;/binding&gt;
</pre>

Revert to this revision