Creating Applications: Design a Template

To design a template, create a new Web page using whichever tools or applications you feel most comfortable with. Given that XSLForms applications involve Web forms, you will obviously need to add forms and fields to your page. In the beginning, it is not that important to use the correct names in each of the fields - these will be added later.

The following sections discuss various techniques used in designing a template.

Page Structure

Think about your form in terms of the structure of the data being represented. You may want to have a list of items where each item can be edited by changing a text field and removed by pressing a button next to that field, and you may want to have a button which adds new items to the list. Each item may look like this:

Some item:

The HTML code which produces this item in a Web page might look like this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
</head>
<body>

<!-- Template text between the start and the interesting part. -->

<form action="" method="POST">
<p>
Some item: <input name="value" type="text" value="some value" />
<input name="remove" type="submit" value="Remove" />
</p>

<!-- Template text between the interesting part and the end. -->

</form>
</body>
</html>

Although you will only need to "paint" one such item in the document, you should imagine that when many such items are presented they will be produced by copying the form of the original item; thus, the details of that item should reside in an HTML element which can be replicated many times at a particular position in a document, like this:

<p>
Some item: <input name="value" type="text" value="some value" />
<input name="remove" type="submit" value="Remove" />
</p>
<p>
Some item: <input name="value" type="text" value="some value" />
<input name="remove" type="submit" value="Remove" />
</p>
<p>
Some item: <input name="value" type="text" value="some value" />
<input name="remove" type="submit" value="Remove" />
</p>

Making sure that the final form of the list is sensible HTML code is an activity explored later in the development process.

Hierarchical Structures

Although we need not consider the structure of the template too deeply, given the above advice about how structure should be represented in HTML, it is interesting to consider hierarchical or nested structures. For example, each item in a list may itself contain a number of other items; for example:

Some item: 

Itself containing more items:

Sub-item:

Given that the whole of the above fragment is a single item in a list, to ensure that the above advice is heeded about items being easily replicated, we need to enclose the fragment in a single HTML element, like this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
</head>
<body>
<form action="" method="POST">

<!-- Template text between the start and the interesting part. -->

<div>
<p>
Some item: <input name="value" type="text" value="some value" />
<input name="remove" type="submit" value="Remove" />
</p>
<p>
Itself containing more items:
</p>
<p>
Sub-item: <input name="subvalue" type="text" value="some other value" />
<input name="remove2" type="submit" value="Remove" />
</p>
</div>

<!-- Template text between the interesting part and the end. -->

</form>
</body>
</html>

In the above example, the div element encloses the outer list item. Meanwhile, the inner list item is itself enclosed within a p element in the same way as the original example enclosed its simple list item. Consider the above example with replicated items:

<div>
<p>
Some item: <input name="value" type="text" value="some value" />
<input name="remove" type="submit" value="Remove" />
</p>
<p>
Itself containing more items:
</p>
<p>
Sub-item: <input name="subvalue" type="text" value="some other value" />
<input name="remove2" type="submit" value="Remove" />
</p>
<p>
Sub-item: <input name="subvalue" type="text" value="some other value" />
<input name="remove2" type="submit" value="Remove" />
</p>
<p>
Sub-item: <input name="subvalue" type="text" value="some other value" />
<input name="remove2" type="submit" value="Remove" />
</p>
</div>
<div>
<p>
Some item: <input name="value" type="text" value="some value" />
<input name="remove" type="submit" value="Remove" />
</p>
<p>
Itself containing more items:
</p>
<p>
Sub-item: <input name="subvalue" type="text" value="some other value" />
<input name="remove2" type="submit" value="Remove" />
</p>
</div>

Saving the Template

Once you are happy with the design of the page, save it to the directory created earlier, then proceed to adding structure information in the next stage of the process.