XSLTools

Change of docs/design.html

391:f1145b6cae5d
docs/design.html
     1.1 --- a/docs/design.html	Tue Nov 08 19:02:02 2005 +0000
     1.2 +++ b/docs/design.html	Tue Nov 08 19:04:00 2005 +0000
     1.3 @@ -1,12 +1,9 @@
     1.4  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     1.5 -<html xmlns="http://www.w3.org/1999/xhtml">
     1.6 -<head>
     1.7 +<html xmlns="http://www.w3.org/1999/xhtml"><head>
     1.8    <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type" />
     1.9 -  <title>Creating Applications: Design a Template</title>
    1.10 -  <meta name="generator"
    1.11 - content="amaya 8.1a, see http://www.w3.org/Amaya/" />
    1.12 -  <link href="styles.css" rel="stylesheet" type="text/css" />
    1.13 -</head>
    1.14 +  
    1.15 +  <title>Creating Applications: Design a Template</title><meta name="generator" content="amaya 8.1a, see http://www.w3.org/Amaya/" />
    1.16 +  <link href="styles.css" rel="stylesheet" type="text/css" /></head>
    1.17  <body>
    1.18  <h1>Creating Applications: Design
    1.19  a Template</h1>
    1.20 @@ -24,7 +21,7 @@
    1.21  <h2>The Template Outline</h2>
    1.22  <p>In raw HTML - that is, the code which defines how a Web page is made
    1.23  - we may wish to design the skeleton (or outline) of the page:</p>
    1.24 -<pre>&lt;?xml version="1.0"?&gt;<br />&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;<br />&lt;head&gt;<br />  &lt;title&gt;Example&lt;/title&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;form action="" method="POST"&gt;<br /><br />&lt;!-- Template text between the start and the interesting part. --&gt;<br /><br />&lt;!-- The interesting part which we will design below. --&gt;<br /><br />&lt;!-- Template text between the interesting part and the end. --&gt;<br /><br />&lt;/form&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</pre>
    1.25 +<pre>&lt;?xml version="1.0"?&gt;<br />&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;<br />&lt;head&gt;<br />  &lt;title&gt;Example&lt;/title&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;form action="" method="post"&gt;<br /><br />&lt;!-- Template text between the start and the interesting part. --&gt;<br /><br />&lt;!-- The interesting part which we will design below. --&gt;<br /><br />&lt;!-- Template text between the interesting part and the end. --&gt;<br /><br />&lt;/form&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</pre>
    1.26  <p>Most visual editors for Web pages will add such details
    1.27  automatically when creating a new page, but there are a few things to
    1.28  remember to check:</p>
    1.29 @@ -33,8 +30,7 @@
    1.30  choose to create XHTML pages. We casually refer to our XHTML templates
    1.31  as being "HTML" throughout this documentation, and the well-formed
    1.32  stipulation is just assumed, but it should be noted that old-style
    1.33 -ill-formed HTML, where start and end tags need not match, will <span
    1.34 - style="font-style: italic;">not</span> work with XSL transformations
    1.35 +ill-formed HTML, where start and end tags need not match, will <span style="font-style: italic;">not</span> work with XSL transformations
    1.36  and will therefore <span style="font-style: italic;">not</span> work
    1.37  with XSLForms.</li>
    1.38    <li>We add a&nbsp;<code>form</code> element to the outline so that
    1.39 @@ -46,11 +42,10 @@
    1.40  label and a text field. Alongside these things, we may also wish to
    1.41  have a button which can be pressed to remove that item from its list.
    1.42  The visual representation of this might resemble the following:</p>
    1.43 -<form method="post" action="" name="structure">
    1.44 +
    1.45    <p>Some
    1.46 -item: <input name="value" value="some value" /><input name="remove"
    1.47 - value="Remove" type="submit" /> </p>
    1.48 -</form>
    1.49 +item: <input name="value" value="some value" /><input name="remove" value="Remove" type="submit" /> </p>
    1.50 +
    1.51  <p>The HTML code which produces this representation might look like
    1.52  this:</p>
    1.53  <pre>&lt;div&gt;<br />  &lt;p&gt;<br />    Some item: &lt;input name="value" type="text" value="some value" /&gt;<br />    &lt;input name="remove" type="submit" value="Remove" /&gt;<br />  &lt;/p&gt;<br />&lt;/div&gt;</pre>
    1.54 @@ -67,13 +62,11 @@
    1.55  the above design for the items by adding some additional text and a
    1.56  similar label, field and button arrangement for each of the subitems.
    1.57  For example:</p>
    1.58 -<form method="post" action="" name="hierarchical">
    1.59 -  <p>Some item:&nbsp;<input name="value" value="some value" /><input
    1.60 - name="remove" value="Remove" type="submit" /></p>
    1.61 +
    1.62 +  <p>Some item:&nbsp;<input name="value" value="some value" /><input name="remove" value="Remove" type="submit" /></p>
    1.63    <p>Itself containing more items:</p>
    1.64 -  <p>Sub-item: <input name="subvalue" value="some other value" /><input
    1.65 - name="remove2" value="Remove" type="submit" /></p>
    1.66 -</form>
    1.67 +  <p>Sub-item: <input name="subvalue" value="some other value" /><input name="remove2" value="Remove" type="submit" /></p>
    1.68 +
    1.69  <p>This representation might be expressed in HTML as follows:</p>
    1.70  <pre>&lt;div&gt;<br />  &lt;p&gt;<br />    Some item: &lt;input name="value" type="text" value="some value" /&gt;<br />    &lt;input name="remove" type="submit" value="Remove" /&gt;<br />  &lt;/p&gt;<br />  &lt;p&gt;<br />    Itself containing more items:<br />  &lt;/p&gt;<br />  &lt;p&gt;<br />    Sub-item: &lt;input name="subvalue" type="text" value="some other value" /&gt;<br />    &lt;input name="remove2" type="submit" value="Remove" /&gt;<br />  &lt;/p&gt;<br />&lt;/div&gt;<br /></pre>
    1.71  <p>In the above example, the&nbsp;<code>div</code> element encloses the
    1.72 @@ -90,15 +83,13 @@
    1.73  We can thus extend our visual representation to incorporate such
    1.74  details. For example:
    1.75  </p>
    1.76 -<form method="post" action="" name="hierarchical">
    1.77 -  <p>Some item:&nbsp;<input name="value" value="some value" /><input
    1.78 - name="remove" value="Remove" type="submit" /></p>
    1.79 +
    1.80 +  <p>Some item:&nbsp;<input name="value" value="some value" /><input name="remove" value="Remove" type="submit" /></p>
    1.81    <p>Itself containing more items:</p>
    1.82 -  <p>Sub-item: <input name="subvalue" value="some other value" /><input
    1.83 - name="remove2" value="Remove" type="submit" /></p>
    1.84 +  <p>Sub-item: <input name="subvalue" value="some other value" /><input name="remove2" value="Remove" type="submit" /></p>
    1.85    <p><input name="add2" value="Add subitem" type="submit" /></p>
    1.86    <p><input name="add" value="Add item" type="submit" /></p>
    1.87 -</form>
    1.88 +
    1.89  <p>This representation might be expressed in HTML as follows:</p>
    1.90  <pre>&lt;div&gt;<br />  &lt;p&gt;<br />    Some item: &lt;input name="value" type="text" value="some value" /&gt;<br />    &lt;input name="remove" type="submit" value="Remove" /&gt;<br />  &lt;/p&gt;<br />  &lt;p&gt;<br />    Itself containing more items:<br />  &lt;/p&gt;<br />  &lt;p&gt;<br />    Sub-item: &lt;input name="subvalue" type="text" value="some other value" /&gt;<br />    &lt;input name="remove2" type="submit" value="Remove" /&gt;<br />  &lt;/p&gt;<br />  &lt;p&gt;<br />    &lt;input name="add2" type="submit" value="Add subitem" /&gt;<br />  &lt;/p&gt;<br />&lt;/div&gt;<br />&lt;p&gt;<br />  &lt;input name="add" type="submit" value="Add item" /&gt;<br />&lt;/p&gt;<br /></pre>
    1.91  <p>In the above example, the new buttons have been added alongside the
    1.92 @@ -112,12 +103,10 @@
    1.93  <h2>Saving the Template</h2>
    1.94  <p>Adding the above modifications to the outline, we end up with the
    1.95  following HTML code:</p>
    1.96 -<pre>&lt;?xml version="1.0"?&gt;<br />&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;<br />&lt;head&gt;<br />  &lt;title&gt;Example&lt;/title&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;form action="" method="POST"&gt;<br /><br />&lt;!-- Template text between the start and the interesting part. --&gt;<br /><br />&lt;div&gt;<br />  &lt;p&gt;<br />    Some item: &lt;input name="value" type="text" value="some value" /&gt;<br />    &lt;input name="remove" type="submit" value="Remove" /&gt;<br />  &lt;/p&gt;<br />  &lt;p&gt;<br />    Itself containing more items:<br />  &lt;/p&gt;<br />  &lt;p&gt;<br />    Sub-item: &lt;input name="subvalue" type="text" value="some other value" /&gt;<br />    &lt;input name="remove2" type="submit" value="Remove" /&gt;<br />  &lt;/p&gt;<br />  &lt;p&gt;<br />    &lt;input name="add2" type="submit" value="Add subitem" /&gt;<br />  &lt;/p&gt;<br />&lt;/div&gt;<br />&lt;p&gt;<br />  &lt;input name="add" type="submit" value="Add item" /&gt;<br />&lt;/p&gt;<br /><br />&lt;!-- Template text between the interesting part and the end. --&gt;<br /><br />&lt;/form&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</pre>
    1.97 +<pre>&lt;?xml version="1.0"?&gt;<br />&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;<br />&lt;head&gt;<br />  &lt;title&gt;Example&lt;/title&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;form action="" method="post"&gt;<br /><br />&lt;!-- Template text between the start and the interesting part. --&gt;<br /><br />&lt;div&gt;<br />  &lt;p&gt;<br />    Some item: &lt;input name="value" type="text" value="some value" /&gt;<br />    &lt;input name="remove" type="submit" value="Remove" /&gt;<br />  &lt;/p&gt;<br />  &lt;p&gt;<br />    Itself containing more items:<br />  &lt;/p&gt;<br />  &lt;p&gt;<br />    Sub-item: &lt;input name="subvalue" type="text" value="some other value" /&gt;<br />    &lt;input name="remove2" type="submit" value="Remove" /&gt;<br />  &lt;/p&gt;<br />  &lt;p&gt;<br />    &lt;input name="add2" type="submit" value="Add subitem" /&gt;<br />  &lt;/p&gt;<br />&lt;/div&gt;<br />&lt;p&gt;<br />  &lt;input name="add" type="submit" value="Add item" /&gt;<br />&lt;/p&gt;<br /><br />&lt;!-- Template text between the interesting part and the end. --&gt;<br /><br />&lt;/form&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</pre>
    1.98  <p>Once you are happy with the
    1.99  design of the page, save it to the <a href="directory.html">directory</a>
   1.100  created earlier (perhaps choosing the name&nbsp;<code>structure_template.xhtml</code>),
   1.101  then&nbsp;proceed to <a href="structure.html">adding
   1.102 -structure information</a> in the next stage of the <a
   1.103 - href="overview.html">process</a>.</p>
   1.104 -</body>
   1.105 -</html>
   1.106 +structure information</a> in the next stage of the <a href="overview.html">process</a>.</p>
   1.107 +</body></html>
   1.108 \ No newline at end of file