The following JavaScript functions are available for the triggering of in-page updates:
Parameters:
url'platforms'The above example causes an update to be sent to the location
platforms relative to the current page.sourceAreasStr'/package$1/platforms$1'Typically, one would use an XSLT/template function to provide such information. For example:
'{template:other-elements(..)}'Selector fields may be specified in addition to regions:'{template:selector-name('remove_platform', .)}'The above example causes the remove_platform selector field to be included in the update.targetNameid attribute) within which the outcome of the update shall appear.targetAreasStrsourceAreasStr parameter for more details.elementPathParameters:
urlurl parameter for the requestUpdateArea function for more details.fieldNamesStr'/package$1/name'Typically, one would use an XSLT/template function to provide such information. For example:
'{template:other-attributes('name', .)}'The above example causes the field associated with the name attribute on the current element to be included in the update.targetNameid attribute) within which the outcome of the update shall appear.targetFieldNamesStrfieldNamesStr parameter for more details.elementPathIn 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>
<?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:
@@ -33,8 +30,7 @@ choose to create XHTML pages. We casually refer to our XHTML templates as being "HTML" throughout this documentation, and the well-formed stipulation is just assumed, but it should be noted that old-style -ill-formed HTML, where start and end tags need not match, will not work with XSL transformations +ill-formed HTML, where start and end tags need not match, will not work with XSL transformations and will therefore not work with XSLForms.form element to the outline so that
@@ -46,11 +42,10 @@
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:
-
+item:
+
The HTML code which produces this representation might look like this:
<div>@@ -67,13 +62,11 @@ 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: - +
<p>
Some item: <input name="value" type="text" value="some value" />
<input name="remove" type="submit" value="Remove" />
</p>
</div>
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
@@ -90,15 +83,13 @@
We can thus extend our visual representation to incorporate such
details. For example:
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 @@ -112,12 +103,10 @@
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>
<?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.