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"

Screen Image

File:XForms-flickr.jpg

Search results from flickr using tag "XForms"

Link to XForms Application

Load Form

Sample Program

<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="&amp;"
		     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>

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

Next Page: Web service | Previous Page: CSS tables
Home: XForms