XForms, Search flickr

Motivation

Many sites give you a simple way of using a URL to perform a search. REST (Representational State Transfer) is a structured way to access data on the web without having to use a web service. This example program uses an XForm submission using the Flickr REST service.

Warnings

This example does NOT work when you load the form locally from a file system. It must run from a webserver.
To run this application you MUST enable XForms to submit data to other domains. In FireFox this is done by adding the domains to your trusted list. This can be done by going to the FireFox "Tools" menu, selecting Preferences, selecting the "Content" tab, and adding the sites to your XForms white listed sites. In this case the trusted domain is "flickr.com"

Link to XForms Application

Load Form

Sample Program

xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">;

Search Flickr using Firefox Form

xmlns="">

flickr.photos.search
68149024a667e0be3c63708f002ffe1e
/>
12

id="inst-rs" xmlns="">
/>

id="sub-flickr"
method="get" action="http://www.flickr.com/services/rest/"
separator="&"
replace="instance" instance="inst-rs">
case="case-busy" ev:event="xforms-submit" />
case="case-submit-error" ev:event="xforms-submit-error" />
case="case-done" ev:event="xforms-submit-done" />

id="inst-control" xmlns="">

s

id="xformsBindings"
xmlns="http://www.mozilla.org/xbl"
xmlns:html="http://www.w3.org/1999/xhtml">;
id="output-image"
extends="chrome://xforms/content/xforms.xml#xformswidget-base">

anonid="content" style="float: left; margin-right: 5px;"/>

implements="nsIXFormsUIWidget">
name="refresh">

var img = document.getAnonymousElementByAttribute(this, "anonid", "content");
img.setAttribute("src", this.stringValue);
return true;

type="text/css">
@namespace xf url(http://www.w3.org/2002/xforms);

xf|output.image {
-moz-binding: url('#output-image');
}

id="main-body">
ref="tags">

Search for a tag (f.x. "suzuki"):

submission="sub-flickr">
Find

ref="instance('inst-control')/size" incremental="true">
Size:

Small
s

Medium
m

id="case-start">
id="case-busy">
Searching...

id="case-submit-error">
Submission error! Did you remember to allow XForms to submit data to other domains?

id="case-done">Done

ref="instance('inst-rs')">
ref="err/@msg"/>
nodeset="photos/photo">

value="concat(
'http://static.flickr.com/',
@server, '/',
@id, '_',
@secret, '_',
instance('inst-control')/size,
'.jpg'
)"
class="image"
/>

style="clear: both;">

Discussion

This example shows how to display a different status message based on the state of a submission using the switch/case/toggle elements.

More to Explore

The wikipedia page on REST has a list of
public implementations of the REST standards. These should be acessible by most XForms (with the appropriate permissions).

REST API from Amazon S3 [1]

References

This example was taken from the FireFox extension examples page [2] which in turn was taken from the formsPlayer web site [3] where it is part of the Introduction to XForms tutorial [4].

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.