# 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 @@ + + +
+ + + + + + +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:
+ +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:
+ + + +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.
+ +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:
+ + + +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>
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 @@ + + + + +The recommended directory structure of an XSLForms application is as +follows:
+__init__.py
file and other source files,
+containing the Web resources and other
+application logic.For example, we might create a directory structure like this:
+Configurator
,
+containing...__init__.py
file containing the Web
+resources and other application logic.Resources
containing
+non-code resources.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.
XSLOutput
)
and using Python's built-in help
function.
+