# HG changeset patch # User paulb # Date 1121562430 0 # Node ID 082c3973a0ede6dd39442708367097775802bd9f # Parent fe3182235a4d823276671ba9650fdd5eca374f39 [project @ 2005-07-17 01:07:10 by paulb] Added missing stylesheet. Added more documentation about designing templates and applications. diff -r fe3182235a4d -r 082c3973a0ed docs/design.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/design.html Sun Jul 17 01:07:10 2005 +0000 @@ -0,0 +1,112 @@ + + + + + + + + + + Creating Applications: Design a Template + + + + + + + + + +

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.

+ +

Here are some tips for +designing the 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 might look like this:

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

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:

+ +
<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. 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.

+ + + diff -r fe3182235a4d -r 082c3973a0ed docs/directory.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/directory.html Sun Jul 17 01:07:10 2005 +0000 @@ -0,0 +1,46 @@ + + + + + Creating Applications: Create a Directory + + + + +

Creating Applications: Create a Directory

+

The recommended directory structure of an XSLForms application is as +follows:

+ +

For example, we might create a directory structure like this:

+ +

In UNIX-style commands, this would be done as follows:

+
mkdir Configurator
mkdir Configurator/Resources
touch Configurator/__init__.py
+

It is in the Resources subdirectory that we will save +our template files when designing them as +part of the next activity in the application development process.

+ + diff -r fe3182235a4d -r 082c3973a0ed docs/index.html --- a/docs/index.html Sat Jul 16 20:59:23 2005 +0000 +++ b/docs/index.html Sun Jul 17 01:07:10 2005 +0000 @@ -38,5 +38,9 @@ within Python by importing modules (such as XSLOutput) and using Python's built-in help function.

+

About XSLForms Applications

+ diff -r fe3182235a4d -r 082c3973a0ed docs/overview.html --- a/docs/overview.html Sat Jul 16 20:59:23 2005 +0000 +++ b/docs/overview.html Sun Jul 17 01:07:10 2005 +0000 @@ -12,25 +12,13 @@

The following steps briefly describe how to make a new application:

    -
  1. Design a template, adding forms and fields. In the beginning, it -is not that important to use the correct names in each of the fields - -these will be added later.
  2. -
  3. Add structural template attributes such as template:element, -template:attribute and template:value so that the fields sit in -different parts of the input document format being modelled. Replace -the field names with special functions such as template:field-name(). -For buttons which add and remove parts of the input document, employ -selector notation and the template:this-position() function.
  4. -
  5. Where multiple choice fields are employed, input documents must -be transformed so that the multiple choice options are included in the -output. This can be achieved using documents containing the different -option values and transformations which insert those values into the -input document.
  6. -
  7. To produce the output document, the template needs preparing -first so that an output stylesheet is produced; then, the output -stylesheet is applied to the processed input document utilising various -extension functions which produce the computed field names in the final -output document.
  8. +
  9. Create a directory to hold your files
  10. +
  11. Design a template
  12. +
  13. Add structure to the template
  14. +
  15. Prepare catalogues of multiple-choice +values
  16. +
  17. Write a Web resource to display the +form

Recommendations

    diff -r fe3182235a4d -r 082c3973a0ed docs/structure.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/structure.html Sun Jul 17 01:07:10 2005 +0000 @@ -0,0 +1,122 @@ + + + + + + + + + + Creating Applications: Add Structure + + + + + + + + + +

    Creating Applications: Add Structure

    + +

    During the design activity, it was +necessary to consider the structure of the information being presented. +In proper XSLForms templates, we make such structural information +explicit by adding special attributes to the HTML code. Consider the +hierarchy example presented in the previous activity:

    + +

    The XSLForms Conceptual Model

    +

    In XSLForms applications form data is processed as XML documents.

    + +

    Therefore, it becomes important to imagine how we would represent +the data described above as an XML document; something like this might +be appropriate:

    +
    <?xml version="1.0"?>
    <item value="some value">
    <subitem subvalue="some other value"/>
    </item>
    +

    Therefore, we must seek to add the following structural information to our HTML code:

    + +

    What we must do is to find a way to describe how our template will +map onto the form data and present it as a Web page for the purpose of +user interaction.
    +

    +

    Annotating the Template

    +

    Taking the HTML example from before, we add special annotations to the template to produce something like this:

    +
    <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:template="http://www.boddie.org.uk/ns/xmltools/template">

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

    <div template:element="item">
    <p>
    Some item: <input template:attribute="value" name="{template:field-name()}" type="text" value="{$this-value}" />
    <input name="remove" type="submit" value="Remove" />
    </p>
    <p>
    Itself containing more items:
    </p>
    <p template:element="subitem">
    Sub-item: <input template:attribute="subvalue" name="{template:field-name()}" type="text" value="{$this-value}" />
    <input name="remove2" type="submit" value="Remove" />
    </p>
    </div>

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

    </html>
    +

    The following annotations have been added:

    + +

    In addition, some of the attributes in the original HTML code have been changed:

    + +

    Whereas the first set of annotations reproduce the desired +structure, the latter modifications are really housekeeping measures to +make sure that the final output contains the correct names and values +for each of the form fields shown to the user.

    +
    +

    Basic Template Annotation

    +

    The following special annotations can be used to describe XML document structures in templates:

    +
    +
    template:element
    +
    This attribute should be added to an element in the template in +order to mark that element and its contents as mapping onto or +representing an element in the XML document version of the +form. In the example, the div element is annotated with this attribute to indicate that it maps onto the item element in the XML document version of the form. It is possible to specify more than one name as the value for a template:element attribute by separating each name with a comma; for example:
    +
    <div template:element="parent,child">
    <p>This is a child element in the XML document version of the form.</p>
    </div>
    +
    +
    The meaning of this is that the annotated element maps onto all child elements within all parent +elements in the XML document version of the form. In other words, +instead of having to create separate HTML elements in the template for +each XML document element being represented, we can collapse the +annotations into a single template:element attribute on a single HTML element.
    +
    template:attribute
    +
    This attribute should be added to an element in the template in +order to mark that element and its contents as mapping onto  or +representing an attribute in the XML document version of the form. +The template:attribute annotation exposes various +special values which are described below - such value insert dynamic +content from the XML document version of the form into the final output +generated from the template.
    +
    {$this-value}
    +
    This special value should be used in HTML attributes where the +value of an attribute from the XML document version of the form is +to be included or presented in the final output. In the example, +the value and subvalue attributes are presented in the value attributes of the HTML input elements in this way.
    +
    {template:field-name()}
    +
    This special value should be used in HTML attributes where the +name of an attribute from the XML document version of the form is to be +included or presented in the final output.
    +
    +

    The reference guide provides a complete list of special values for use in template annotations.

    +
    +

    Adding Selectors

    +

    Whilst the above annotations permit the template to display the data +in XML documents containing form data, the other aspects of the user +interface - the addition and removal of items and subitems - are not +yet modelled in the template.

    + + + diff -r fe3182235a4d -r 082c3973a0ed docs/styles.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/styles.css Sun Jul 17 01:07:10 2005 +0000 @@ -0,0 +1,66 @@ +/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */ + + body { background-color: white; + } + + h1 { color: navy; + font-family: sans-serif; + font-size: 2.0em; + } + + h2 { color: navy; + font-family: sans-serif; + font-size: 1.8em; + } + + h3 { color: navy; + font-family: sans-serif; + font-size: 1.6em; + } + + h4 { color: navy; + font-family: sans-serif; + font-size: 1.4em; + } + + ul { list-style-type: disc; + } + + pre { border: 1pt solid black; + padding: 0.5em; + background-color: silver; + color: black; + } + + .WebStack { border: 1pt solid black; + background-color: rgb(224, 224, 224); + padding-left: 0.5em; + padding-right: 0.5em; + } + + .explanation { border-style: dotted; + border-width: 1px; + padding: 0.25em; + display: block; + position: relative; + background-color: rgb(255, 255, 153); + font-weight: normal; + top: 0.5em; + left: -1em; + } + + .layers { width: 60%; + text-align: center; + } + + .method { border-style: dotted; + border-width: 1px; + padding: 0.25em; + font-weight: normal; + display: block; + position: relative; + background-color: rgb(238, 238, 238); + left: 1em; + top: 1em; + } +