Skip to content

Commit f9ccc8e

Browse files
timbltimbl
committed
Now some examples of strcutures
1 parent 2a8b737 commit f9ccc8e

5 files changed

Lines changed: 3631 additions & 1901 deletions

File tree

‎Documentation/form-examples/demo.html‎

Lines changed: 5 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -8,48 +8,12 @@
88
<meta http-equiv="Content-Type" content=
99
"text/html; charset=us-ascii"/>
1010

11-
<title>Form fields demo zero</title>
11+
<title>Form fields</title>
1212
<link type="text/css" rel="stylesheet" href="https://solid.github.io/mashlib/dist/mash.css"/>
1313

14-
<style type="text/css">
15-
input {
16-
background-color: #eef;
17-
padding: 0.5em;
18-
border: .5em solid white;
19-
font-size: 120%;
20-
}
21-
22-
table {
23-
border-collapse: collapse;
24-
}
25-
26-
tr.naviMenu {
27-
background-color: white;
28-
}
29-
30-
tr.naviMenu td {
31-
text-align: middle;
32-
vertical-align: middle;
33-
padding-top: 4em;
34-
}
35-
36-
table.tbody tr td {
37-
padding: 1em;
38-
border: 0.1em solid gray;
39-
}
40-
41-
td.input {
42-
border-top: 0.1em solid gray;
43-
border-right: 0.1em dotted gray;
44-
padding: 1em;
45-
}
46-
47-
td.output {
48-
border-top: 0.1em solid gray;
49-
padding: 1em;
50-
}
51-
</style><!--
52-
<script type="text/javascript" src="https://solid.github.io/mashlib/dist/mashlib.js"></script> -->
14+
<!-- <script type="text/javascript" src="https://solid.github.io/mashlib/dist/mashlib.js"></script> -->
15+
<link type="text/css" rel="stylesheet" href="../style/demo-style.css"/>
16+
5317
<script type="text/javascript" src="https://timbl.com/timbl/Automation/Library/Mashup/mashlib.js"></script>
5418
<script type="text/javascript" src="test-form.js"></script>
5519
</head>
@@ -62,7 +26,7 @@
6226

6327
<div class="TabulatorOutline" id='UITestArea'></div>
6428

65-
<h1>Form fields demo</h1>
29+
<h1>Form fields</h1>
6630
<pre id='Prolog' style="display: none;">
6731
@prefix foaf: &lt;http://xmlns.com/foaf/0.1/&gt;.
6832
@prefix sched: &lt;http://www.w3.org/ns/pim/schedule#&gt;.

‎Documentation/form-examples/profile-demo.html‎

Lines changed: 6 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -3,57 +3,16 @@
33

44
<html xmlns="http://www.w3.org/1999/xhtml">
55
<head>
6+
<title>Profile form demo</title>
7+
68
<meta name="generator"
79
content="HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.17), see www.w3.org"/>
810
<meta http-equiv="Content-Type" content=
911
"text/html; charset=us-ascii"/>
1012

11-
<title>Profile form demo</title>
1213
<link type="text/css" rel="stylesheet" href="https://solid.github.io/mashlib/dist/mash.css"/>
13-
14-
<style type="text/css">
15-
16-
#Prolog {
17-
display: none;
18-
}
19-
input {
20-
background-color: #eef;
21-
padding: 0.5em;
22-
border: .5em solid white;
23-
font-size: 120%;
24-
}
25-
26-
table {
27-
border-collapse: collapse;
28-
}
29-
30-
tr.naviMenu {
31-
background-color: white;
32-
}
33-
34-
tr.naviMenu td {
35-
text-align: middle;
36-
vertical-align: middle;
37-
padding-top: 4em;
38-
}
39-
40-
table.tbody tr td {
41-
padding: 1em;
42-
border: 0.1em solid gray;
43-
}
44-
45-
td.input {
46-
border-top: 0.1em solid gray;
47-
border-right: 0.1em dotted gray;
48-
padding: 1em;
49-
}
50-
51-
td.output {
52-
border-top: 0.1em solid gray;
53-
padding: 1em;
54-
}
55-
</style><!--
56-
<script type="text/javascript" src="https://solid.github.io/mashlib/dist/mashlib.js"></script> -->
14+
<link type="text/css" rel="stylesheet" href="../style/demo-style.css"/>
15+
<!-- <script type="text/javascript" src="https://solid.github.io/mashlib/dist/mashlib.js"></script> -->
5716
<script type="text/javascript" src="https://timbl.com/timbl/Automation/Library/Mashup/mashlib.js"></script>
5817
<script type="text/javascript" src="test-form.js"></script>
5918
</head>
@@ -66,24 +25,10 @@
6625

6726
<div class="TabulatorOutline" id='UITestArea'></div>
6827

69-
<h1>Pofile form demo</h1>
70-
<pre id='Prolog' style="display: none;">
71-
@prefix foaf: &lt;http://xmlns.com/foaf/0.1/&gt;.
72-
@prefix sched: &lt;http://www.w3.org/ns/pim/schedule#&gt;.
73-
@prefix cal: &lt;http://www.w3.org/2002/12/cal/ical#&gt;.
74-
@prefix dc: &lt;http://purl.org/dc/elements/1.1/&gt;.
75-
@prefix rdfs: &lt;http://www.w3.org/2000/01/rdf-schema#&gt;.
76-
@prefix ui: &lt;http://www.w3.org/ns/ui#&gt;.
77-
@prefix trip: &lt;http://www.w3.org/ns/pim/trip#&gt;.
78-
@prefix vcard: &lt;http://www.w3.org/2006/vcard/ns#&gt;.
79-
@prefix xsd: &lt;http://www.w3.org/2001/XMLSchema#&gt;.
80-
@prefix ex: &lt;#&gt;. # Things in the examples
81-
@prefix : &lt;#&gt;.
82-
</pre>
83-
28+
<h1>Profile form</h1>
8429
<div>
8530
<table style=
86-
'border-collapse: collapse; border: 0.1em solid gray;' summary=
31+
'border-collapse: collapse; border: 0.1em solid gray; margin: 1em;' summary=
8732
"Table of form and data values and UI outputs generated">
8833
<tbody>
8934

@@ -95,7 +40,6 @@ <h1>Pofile form demo</h1>
9540
<td class='output'></td>
9641
</tr>
9742

98-
9943
</tbody>
10044
</table>
10145
</div>

‎Documentation/form-examples/structures.html‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2+
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3+
4+
<html xmlns="http://www.w3.org/1999/xhtml">
5+
<head>
6+
<meta name="generator"
7+
content="HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.17), see www.w3.org"/>
8+
<meta http-equiv="Content-Type" content=
9+
"text/html; charset=us-ascii"/>
10+
11+
<title>Form structures</title>
12+
<link type="text/css" rel="stylesheet" href="https://solid.github.io/mashlib/dist/mash.css"/>
13+
14+
<link type="text/css" rel="stylesheet" href="../style/demo-style.css"/>
15+
16+
<script type="text/javascript" src="https://solid.github.io/mashlib/dist/mashlib.js"></script> -->
17+
<script type="text/javascript" src="https://timbl.com/timbl/Automation/Library/Mashup/mashlib.js"></script>
18+
<script type="text/javascript" src="test-form.js"></script>
19+
</head>
20+
21+
<body>
22+
<div class="TabulatorOutline" id="DummyUUID">
23+
<table id="outline" summary="Space for where the test happens">
24+
</table>
25+
</div>
26+
27+
<div class="TabulatorOutline" id='UITestArea'></div>
28+
29+
<h1>Form structures</h1>
30+
<pre id='Prolog'>
31+
@prefix foaf: &lt;http://xmlns.com/foaf/0.1/&gt;.
32+
@prefix sched: &lt;http://www.w3.org/ns/pim/schedule#&gt;.
33+
@prefix cal: &lt;http://www.w3.org/2002/12/cal/ical#&gt;.
34+
@prefix dc: &lt;http://purl.org/dc/elements/1.1/&gt;.
35+
@prefix rdfs: &lt;http://www.w3.org/2000/01/rdf-schema#&gt;.
36+
@prefix ui: &lt;http://www.w3.org/ns/ui#&gt;.
37+
@prefix trip: &lt;http://www.w3.org/ns/pim/trip#&gt;.
38+
@prefix vcard: &lt;http://www.w3.org/2006/vcard/ns#&gt;.
39+
@prefix xsd: &lt;http://www.w3.org/2001/XMLSchema#&gt;.
40+
@prefix ex: &lt;#&gt;. # Things in the examples
41+
@prefix : &lt;#&gt;.
42+
</pre>
43+
44+
<div>
45+
<table style=
46+
'border-collapse: collapse; border: 0.1em solid gray;' summary=
47+
"Table of input data values and UI outputs generated">
48+
<tbody>
49+
50+
<tr class="form-demo">
51+
<td class='input'>
52+
<pre>
53+
# A simple group with two fields
54+
55+
ex:form a ui:Group;
56+
ui:parts (ex:part1 ex:part2).
57+
58+
ex:part1 a ui:SingleLineTextField ;
59+
ui:property vcard:fn;
60+
ui:label "name" .
61+
62+
ex:part2 a ui:EmailField ;
63+
ui:property vcard:hasEmail; # @@ chcek
64+
ui:label "email" .
65+
66+
67+
ex:this vcard:fn "Alice";
68+
vcard:hasEmail &lt;mailto:alice@example.com&gt; .
69+
</pre>
70+
</td>
71+
<td class='output'></td>
72+
</tr>
73+
74+
75+
76+
<tr class="form-demo">
77+
<td class='input'>
78+
<pre>
79+
# A group with two fields and a nested subgroup
80+
81+
:form a ui:Group;
82+
ui:parts (:nameField :emailField :addresses) .
83+
84+
:nameField a ui:SingleLineTextField ;
85+
ui:property vcard:fn;
86+
ui:label "name" .
87+
88+
:emailField a ui:EmailField ;
89+
ui:property vcard:hasEmail; # @@ chcek
90+
ui:label "email" .
91+
92+
:addresses
93+
a ui:Multiple ; # -- Allows zero or one or more
94+
ui:part :oneAddress ;
95+
ui:property vcard:hasAddress .
96+
97+
:oneAddress
98+
a ui:Group ; # A subgroup of the main form
99+
ui:parts ( :street :locality :postcode :region :country ).
100+
101+
:street
102+
a ui:SingleLineTextField ;
103+
ui:maxLength "128" ;
104+
ui:property vcard:street-address ;
105+
ui:size "40" .
106+
107+
:locality
108+
a ui:SingleLineTextField ;
109+
ui:maxLength "128" ;
110+
ui:property vcard:locality ;
111+
ui:size "40" .
112+
113+
:postcode
114+
a ui:SingleLineTextField ;
115+
ui:maxLength "25" ;
116+
ui:property vcard:postal-code ;
117+
ui:size "25" .
118+
119+
:region
120+
a ui:SingleLineTextField ;
121+
ui:maxLength "128" ;
122+
ui:property vcard:region ;
123+
ui:size "40" .
124+
125+
:country
126+
a ui:SingleLineTextField ;
127+
ui:maxLength "128" ;
128+
ui:property vcard:country-name ;
129+
ui:size "40" .
130+
131+
##### Data:
132+
133+
:this vcard:fn "Alice";
134+
vcard:hasEmail &lt;mailto:alice@example.com&gt; ;
135+
vcard:hasAddress [
136+
vcard:street-address "111 Accacia Avennue";
137+
vcard:country-name "UK"
138+
],
139+
[
140+
vcard:street-address "101 Autumn Ave";
141+
vcard:country-name "USA"
142+
] .
143+
</pre>
144+
</td>
145+
<td class='output'></td>
146+
</tr>
147+
148+
149+
150+
151+
152+
___________
153+
154+
</tbody>
155+
</table>
156+
</div>
157+
</body>
158+
</html>

‎Documentation/style/demo-style.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
input {
2+
background-color: #eef;
3+
padding: 0.5em;
4+
border: .5em solid white;
5+
font-size: 120%;
6+
}
7+
8+
table {
9+
10+
border-collapse: collapse;
11+
border: 0.1em solid gray;
12+
margin: 1em;
13+
14+
}
15+
16+
tr.naviMenu {
17+
background-color: white;
18+
}
19+
20+
tr.naviMenu td {
21+
text-align: middle;
22+
vertical-align: middle;
23+
padding-top: 4em;
24+
}
25+
26+
table tbody tr td {
27+
padding: 1em;
28+
border: 0.1em solid gray;
29+
}
30+
31+
td.input {
32+
border-top: 0.1em solid gray;
33+
border-right: 0.1em dotted gray;
34+
padding: 1em;
35+
}
36+
37+
td.output {
38+
border-top: 0.1em solid gray;
39+
padding: 1em;
40+
}
41+
42+
td.input pre { padding: 1em;}
43+

0 commit comments

Comments
 (0)