Setting Up the Search

In our del.icio.us form we saw that all of the parameters we needed had a corresponding form control. We could do the same here, but it would mean creating a form control for things like the method and api_key which are not pieces of information that we want our users to be able to update. To create a nice easy to use form for searching Flickr, we only really need one form control, and that is for the tags value; all the other fields can be given fixed values.

XForms Data Islands

To achieve this we need to create an XForms data island that will hold all of our items. This may seem a little different to how we worked with the del.icio.us example, but in fact it isn't--all that happened with the del.icio.us form was that formsPlayer created a 'default' data island for us since we didn't specify one explicitly. And it used the form controls that we had provided to 'work out' how the 'automatic' data island should be structured. (This is called 'lazy authoring', for obvious reaons.)

Let's create a data island that contains the items we need for our search on Flickr (instances are placed inside an XForms model):

    <link rel="stylesheet" href="flickr.css" type="text/css" />
    <xf:model>
      <xf:instance>
        <instanceData xmlns="">
          <method>flickr.photos.search</method>
          <api_key>68149024a667e0be3c63708f002ffe1e</api_key>
          <tags />
          <per_page>12</per_page>
        </instanceData>
      </xf:instance>
    </xf:model>
  </head>

Hopefully this all looks familiar to you, since all we have created is one XML item for each of the parameters that Flickr needs, and given each a value should it need one. Note that we've also created an empty entry for tags, even though we have a form control that refers to it. This is because the automatic creation of 'default' items only happens if we don't provide an instance; but once you do create one, then you will have to include within it any items that you need for your controls. However, the input control that we created earlier will correctly reference the tags item in this instance, just as before it was referencing the one that was created automatically.

Specifying a Separator for Submission

Now that we have set up a data island ready to send to Flickr, we can go on to prepare the request that will be used to indicate where to send everything. You saw earlier how to specify a request to del.icio.us, and we need to do much the same here:

      </xf:instance>
      <xf:submission id="sub-flickr"
       method="get" action="http://www.flickr.com/services/rest/"
       separator="&amp;"
      />
    </xf:model>

The only difference you will see is that we had to explicitly say that the separator value is "&amp;", since with XForms the default is ";". (We didn't bother to do this for del.icio.us, since their servers understand both values.)

Save the form, refresh, type a value into the input control, and press the "Find" button, and you should get something like this:

Screenshot of XML returned from Flickr.

We mentioned in an earlier section that replacing the form with the data returned from the server was the default behaviour for XForms, making it exactly the same as HTML forms. In the next section we'll show how to make use of the XML without replacing the entire form, but before we do, go 'back' in the browser to your form, and try pressing "Find" again without entering a tag; note that this time you should get an error message from Flickr:

Screenshot of XML returned from Flickr when there is an error.