XForms/自定義控制元件
< XForms
通常，複雜的表單需要超出 W3C XForm 標準提供的基本功能。好訊息是，XForms 被設計得易於擴充套件。這個過程稱為建立自定義控制元件。
建立 XForms 自定義控制元件有幾個原因
- 自定義呈現 - 由您的 XForms 處理器呈現的 XForms 控制元件無法為您表單提供正確的呈現
- 自定義資料型別和日期型別到 UI 的對映 - 現有的 XForms 控制元件無法與您的資料型別正常工作（例如，將布林值繫結到複選框）
- 高階 XForms 控制元件 - 您需要自定義控制元件來擴充套件基本 XForms 控制元件的功能
- 新宿主語言 - 您希望在宿主語言中支援 XForms
以下示例使用名為 XML 繫結（XML Bindings）的技術來建立一個新控制元件。當選擇 select1 列表時，此控制元件將顯示不同的影像。
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>Custom Image Control Sample</title>
<bindings id="xformsBindings" xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml">
<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>
<!--
set the src attribute on the html:img to be the simpleContent
of the instance node bound to this control
-->
var img = document.getAnonymousElementByAttribute(this, "anonid", "content");
img.setAttribute("src", this.stringValue);
return true;
</body>
</method>
</implementation>
</binding>
</bindings>
<xf:model>
<xf:instance xmlns="">
<data>
<curimg />
<img label="Firefox">http://www.mozilla.org/foundation/identity-guidelines/firefox-128.png</img>
<img label="Thunderbird">http://www.mozilla.org/foundation/identity-guidelines/thunderbird-128.png</img>
<img label="Bugzilla">http://www.mozilla.org/images/p-bugz.gif</img>
<img label="Mozilla">http://www.mozilla.org/images/mozhead-80x64.gif</img>
</data>
</xf:instance>
</xf:model>
<style type="text/css">
@namespace xf url(http://www.w3.org/2002/xforms);
xf|output[mediatype="image/*"] {
-moz-binding: url('#output-image');
}
</style>
</head>
<body>
<h1>Custom Control Sample</h1>
<xf:select1 ref="curimg">
<xf:label>Select image to display: </xf:label>
<xf:itemset nodeset="../img">
<xf:label ref="@label" />
<xf:value ref="." />
</xf:itemset>
</xf:select1>
<xf:output ref="curimg" mediatype="image/*" />
</body>
</html>
此示例使用 xbl:binding 結構、幾行 JavaScript 程式碼和 CSS 檔案中的繫結。請注意，此示例僅在 FireFox 中有效，因為 XML 繫結目前不是 XForms 規範的一部分。
請注意，XML 繫結語言 (xbl) 目前是 w3C 的工作草案。參見 XBL 工作草案。當 XBL 成為建議時，這些示例可能更有可能在 XForms 的多個實現中執行。現在我們需要使用實現特定的標籤。
此示例程式由 Allan Beaufour 於 2005 年 7 月釋出在 FireFox XForms 文件網站上：XForms 自定義控制元件