Setting Up Your Development Environment

Building an XForms application might be as simple as editing a file with Notepad and pressing F5 in the browser, or as complex as configuring servers and pipelines, and building an XForm on the fly. Either way you will need some kind of editor and some kind of XForms processor.

Get an Editor

Since XForms are XML documents then any text editor can be used to create and edit them. If you've done much HTML development you may already have a favourite editor, in which case you are already up and running.

If you decide to do much serious development with XForms then you will probably find it easier to make use of an XML editor. Such editors will help keep your document structured correctly, and some editors have features that are specific to XForms. For example, XFormation will help you with your XPath expressions, whilst both Eclipse and XFormation can save a lot of time by automatically generating forms from schemas, WSDL files and XML data documents.

We'll discuss some of these editors in a separate tutorial, since to get started with this tutorial, you need nothing more than your current HTML editor, or simply use Notepad or Wordpad.

Get an XForms Processor

There are a large number of XForms processors, and which one is most appropriate for you will depend on a number of factors. Issues such as which devices and platforms you are targetting, and whether the XForms should be translated into something else or delivered to the end-user intact will all need to be considered.

The easiest development configuration is to install a client-side processor onto your development machine; even if the forms are later deployed in some other fashion it makes for an extremely quick design and development cycle if you develop them using a client-side XForms processor, running inside a browser, without the need for a server.

For a quick way to get going with this tutorial use formsPlayer, a plug-in for Internet Explorer 6 on Windows. You can get an automatic install (using a signed CAB file) from the project page, which also contains links to the support forums, screenshots, samples, lists of bugs and feature requests, and so on.

Creating a Form Template

You'll find it easier to create new forms if you have an empty template that you can start with. Many XML editors will allow you to place such a template in a special folder so that it is available as a choice whenever you create a new XML document.

The template that follows is an HTML document that contain XForms; even if you plan to use XForms in some other language--and XForms was designed to make that possible--we would still recommend beginners to get acquainted with XForms within HTML.

To create the template:

Create a new, empty file using your preferred editor;

Paste in the following mark-up:

<?xml version="1.0" encoding="utf-8"?>
<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"
 xmlns:xs="http://www.w3.org/2001/XMLSchema"
>
  <head>
    <script src="http://lib-xh.googlecode.com/svn/trunk/xH.js" type="text/javascript">/**/</script>
    <title>Empty XForm</title>
  </head>
  <body>
    <p>Empty XForm</p>
  </body>
</html>

save the file to a handy location or to your XML editor's templates directory, calling it something like xforms-template.html.

As you can see the document is much the same as an ordinary HTML page, with the following differences:

The XForms, XML Events and XML Schema namespaces have been added to the root element:
```
<?xml version="1.0" encoding="utf-8"?>
<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"
 xmlns:xs="http://www.w3.org/2001/XMLSchema"
>
  <head>
```
We don't always need XML Events and XML Schema, but since this is meant to be a template that you can just use without thinking about it, we might as well add them here.
there is a reference to the lib-xh loader script:
```
    <script src="http://lib-xh.googlecode.com/svn/trunk/xH.js" type="text/javascript">/**/</script>
```
This script checks for XForms support on the browser that your users have used to load your form. If formsPlayer is present, that is used, and similarly if the Firefox XForms extension is available, that will be used. The script will also automatically install formsPlayer if the user is running Internet Explorer, and no version of formsPlayer is present.

Testing Your Development Environment

Now you are ready to start building web applications with XForms! Let's see if we can create a working form, before we move on to the tutorial.

Create a new form by using your template.

In the body element, replace the text Empty form with:

<xf:input ref="q" incremental="true">
  <xf:label>Search:</xf:label>
</xf:input>
(<xf:output ref="q" />)

Save your new form to a convenient location. If you opened your template as a quick way to get started then be sure to use Save As....
Use IE6 to open the file that you just saved. You should see:
- the formsPlayer splash-page for a second or two;
- a single input control with a caption of Search;
- a pair of brackets.
Anything you now type into the input control should also be displayed between the brackets:

If this does not happen then there may be a problem with your installation or browser security settings. For information on troubleshooting see the installation forum.