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]。