XForms/搜尋 Flickr
< XForms
許多網站提供簡單的方法使用 URL 進行搜尋。 REST（表述性狀態轉移）是一種結構化方式，可以訪問網路上的資料，而無需使用 Web 服務。此示例程式使用 Flickr REST 服務的 XForms 提交。
此示例在您從檔案系統本地載入表單時不起作用。它必須從 Web 伺服器執行。
要執行此應用程式，您必須啟用 XForms 才能將資料提交到其他域。在 FireFox 中，這是透過將域新增到您的信任列表來完成的。可以透過轉到 FireFox 的“工具”選單，選擇“首選項”，選擇“內容”選項卡，並將網站新增到您的 XForms 白名單網站來完成。在這種情況下，受信任的域是“flickr.com”。
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<title>Search Flickr using Firefox Form</title>
<!-- Inspired by http://skimstone.x-port.net/index.php?q=node/89 -->
<!-- and http://www.mozilla.org/projects/xforms/samples/flickr-search.xhtml -->
<xf:model>
<!-- The data sent to flickr -->
<xf:instance xmlns="">
<instanceData>
<method>flickr.photos.search</method>
<api_key>68149024a667e0be3c63708f002ffe1e</api_key>
<tags />
<per_page>12</per_page>
</instanceData>
</xf:instance>
<!-- The data returned by flickr -->
<xf:instance id="inst-rs" xmlns="">
<dummy />
</xf:instance>
<xf:submission id="sub-flickr"
method="get" action="http://www.flickr.com/services/rest/"
separator="&"
replace="instance" instance="inst-rs">
<xf:toggle case="case-busy" ev:event="xforms-submit" />
<xf:toggle case="case-submit-error" ev:event="xforms-submit-error" />
<xf:toggle case="case-done" ev:event="xforms-submit-done" />
</xf:submission>
<!-- Used to hold image size -->
<xf:instance id="inst-control" xmlns="">
<instanceData>
<size>s</size>
</instanceData>
</xf:instance>
</xf:model>
<!--Mozilla XForms Custom Control-->
<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" style="float: left; margin-right: 5px;"/>
</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>
</bindings>
<!-- Bind the custom control to output with class="image" -->
<style type="text/css">
@namespace xf url(http://www.w3.org/2002/xforms);
xf|output.image {
-moz-binding: url('#output-image');
}
</style>
</head>
<!-- BODY -->
<body>
<xf:group id="main-body">
<xf:input ref="tags">
<xf:label>Search for a tag (f.x. "suzuki"):</xf:label>
</xf:input>
<xf:submit submission="sub-flickr">
<xf:label>Find</xf:label>
</xf:submit>
<xf:select1 ref="instance('inst-control')/size" incremental="true">
<xf:label>Size: </xf:label>
<xf:item>
<xf:label>Small</xf:label>
<xf:value>s</xf:value>
</xf:item>
<xf:item>
<xf:label>Medium</xf:label>
<xf:value>m</xf:value>
</xf:item>
</xf:select1>
<xf:switch>
<xf:case id="case-start"></xf:case>
<xf:case id="case-busy">
<p>Searching...</p>
</xf:case>
<xf:case id="case-submit-error">
<p>Submission error! Did you remember to allow XForms to submit data to other domains?</p>
</xf:case>
<xf:case id="case-done">Done</xf:case>
</xf:switch>
<xf:group ref="instance('inst-rs')">
<xf:output ref="err/@msg"/>
<xf:repeat nodeset="photos/photo">
<xf:output
value="concat(
'http://static.flickr.com/',
@server, '/',
@id, '_',
@secret, '_',
instance('inst-control')/size,
'.jpg'
)"
class="image"
/>
</xf:repeat>
<div style="clear: both;"></div>
</xf:group>
</xf:group>
</body>
</html>
此示例展示瞭如何使用 switch/case/toggle 元素根據提交狀態顯示不同的狀態訊息。
關於 REST 的維基百科頁面有一個關於 公共實現 的列表REST 標準。這些應該可以透過大多數 XForms 訪問（具有適當的許可權）。
來自 Amazon S3 的 REST API [1]
此示例取自 FireFox 擴充套件示例頁面 [2]，該示例又取自 formsPlayer 網站 [3]，它是《XForms 入門》教程的一部分 [4]。