In XSLForms applications, templates are just Web pages with some additional annotations. Thus, to begin the design of a template you can 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.
With a structure for the Web forms already defined, we must now concentrate on designing a suitable user interface for the editable items and subitems, along with some mechanisms for adding and removing these things.
In raw HTML - that is, the code which defines how a Web page is made - we may wish to design the skeleton (or outline) of the page:
<?xml version="1.0"?>
<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. -->
<!-- The interesting part which we will design below. -->
<!-- Template text between the interesting part and the end. -->
</form>
</body>
</html>
Most visual editors for Web pages will add such details automatically when creating a new page, but there are a few things to remember to check:
form
element to the outline so that
the form fields added later actually perform some function when testing
our application.Each of the items presented using the template may employ a simple label and a text field. Alongside these things, we may also wish to have a button which can be pressed to remove that item from its list. The visual representation of this might resemble the following:
Some item:
The HTML code which produces this representation might look like this:
<div>
<p>
Some item: <input name="value" type="text" value="some value" />
<input name="remove" type="submit" value="Remove" />
</p>
</div>
Although we have given names to the different input
elements, it
is actually not that important to use the correct names at this stage
in the development process - the actual names will be added later.
One important thing to note is that the item is defined within a single top-level HTML element - the significance of this will become clear later on.
In the structure of the form data, we decided to have lists of subitems belonging to each item. To achieve this, we can thus extend the above design for the items by adding some additional text and a similar label, field and button arrangement for each of the subitems. For example:
Some item:
Itself containing more items:
Sub-item:
This representation might be expressed in HTML as follows:
<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>
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.
It should be noted that the item and subitem are each defined within single enclosing HTML elements - as noted above, the motivation for this will become clear later on.
Our chosen user interface for adding items and subitems is through the use of buttons under each list. We can thus extend our visual representation to incorporate such details. For example:
Some item:
Itself containing more items:
Sub-item:
This representation might be expressed in HTML as follows:
<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>
<input name="add2" type="submit" value="Add subitem" />
</p>
</div>
<p>
<input name="add" type="submit" value="Add item" />
</p>
In the above example, the new buttons have been added alongside the
elements which define the subitem and item regions of the template.
Thus, the input
field called add2
which adds subitems is alongside, not inside, the p
element which defines the subitem region of the template. Likewise,
the input
field called add
which
adds items is alongside, not inside, the div
element
which defines the item region of the template.
Adding the above modifications to the outline, we end up with the following HTML code:
<?xml version="1.0"?>
<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>
<p>
<input name="add2" type="submit" value="Add subitem" />
</p>
</div>
<p>
<input name="add" type="submit" value="Add item" />
</p>
<!-- Template text between the interesting part and the end. -->
</form>
</body>
</html>
Once you are happy with the
design of the page, save it to the directory
created earlier (perhaps choosing the name structure_template.xhtml
),
then proceed to adding
structure information in the next stage of the process.