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