XForms/Search Amazon

Motivation

Here is an example web service provided by Amazon. It also uses the custom control to bind images from the output to the screen.

↑Jump back a section

Screen Image

XForms-search-amazon.jpg
↑Jump back a section

Link to XForms Application

Load Form

↑Jump back a section

Sample Program

<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:xf="http://www.w3.org/2002/xforms"
   xmlns:xsd="http://www.w3.org/2001/XMLSchema"
   xmlns:xsi="http://www.w3.org/1999/XMLSchema-instance"
   xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
   <title>Searching Amazon</title>
   <xf:model id="mQuery">
 
         <xf:instance id="iQuery">
            <instanceData xmlns="">
               <t>webservices-20</t>
               <!-- please get your own key for any production work -->
               <dev-t>D1723OX2631XW0</dev-t>
               <KeywordSearch>xforms</KeywordSearch>
               <mode>books</mode>
               <type>lite</type>
               <page>1</page>
               <f>xml</f>
            </instanceData>
         </xf:instance>
 
         <xf:instance id="iResults">
            <instanceData xmlns=""/>
         </xf:instance>
 
         <xf:bind id="bndResults" nodeset="instance('iResults')/Details"/>
 
         <xf:submission
          id="subAmazonQuery"
          action="http://xml.amazon.com/onca/xml3"
          method="get"
          separator="&amp;"
          ref="instance('iQuery')"
          replace="instance"
          instance="iResults"
          omit-xml-declaration="yes"/>
 
         <xf:submission
          id="subTestAmazonQuery"
          action="http://xml.amazon.com/onca/xml3"
          method="get"
          separator="&amp;"
          ref="instance('iQuery')"
          replace="all"/>
      </xf:model>
 
      <!--Mozilla XForms Custom Control for binding images from results -->
    <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="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>
    <style type="text/css">
      @namespace xf url(http://www.w3.org/2002/xforms);
      body {
         font-family: Helvetica, sans-serif;
      }
      <!-- Bind the custom control to output with class="image" -->
      xf|output.image {
        -moz-binding: url('#output-image');
      }
      </style>
   </head>
   <body>
   <h1>Search Amazon With XForms Web Service</h1>
           <xf:input ref="KeywordSearch">
              <xf:label>Search string: </xf:label>
           </xf:input>
           <hr/>
           <xf:submit submission="subAmazonQuery">
              <xf:label>Search Amazon</xf:label>
           </xf:submit>
           <xf:submit submission="subTestAmazonQuery">
              <xf:label>Show results as XML</xf:label>
           </xf:submit>
           <xf:repeat bind="bndResults">
              <xf:output class="image" value="ImageUrlSmall"/>
              <xf:trigger appearance="minimal" style="cursor: hand;">
                  <xf:output ref="ProductName"><xf:label>Title: </xf:label></xf:output>
                  <br/>
                  <xf:output ref="Authors/Author"><xf:label>Author: </xf:label></xf:output>
                 <xf:load ev:event="DOMActivate" ref="@url" show="new"/>
              </xf:trigger>
              <br/>
              <hr/>
           </xf:repeat>
   </body>
</html>
↑Jump back a section

Discussion

Note: If you get the following error:

XML Parsing Error: not well-formed
Line Number 33, Column 23:
          separator="&"

You will have to remember to escape the ampersand before after you copy and paste this example into your text editor. You can get around this by doing a copy from the edit panel or just putting the following into the separator field:

separator="&amp;"
↑Jump back a section

References

This program was based on an example provided by formsPlayer [1].


Next Page: Custom Controls | Previous Page: Stock Quote

Home: XForms

↑Jump back a section
Last modified on 21 December 2010, at 13:13