kwartz 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/COPYING +340 -0
- data/ChangeLog +103 -0
- data/README.txt +37 -0
- data/bin/kwartz +12 -0
- data/doc-api/classes/Kwartz.html +218 -0
- data/doc-api/classes/Kwartz/Assertion.html +140 -0
- data/doc-api/classes/Kwartz/AssertionError.html +148 -0
- data/doc-api/classes/Kwartz/AttrInfo.html +320 -0
- data/doc-api/classes/Kwartz/BaseError.html +206 -0
- data/doc-api/classes/Kwartz/BaseTranslator.html +331 -0
- data/doc-api/classes/Kwartz/CharacterType.html +212 -0
- data/doc-api/classes/Kwartz/CommandOptionError.html +154 -0
- data/doc-api/classes/Kwartz/CommandOptions.html +374 -0
- data/doc-api/classes/Kwartz/Config.html +150 -0
- data/doc-api/classes/Kwartz/ConvertError.html +191 -0
- data/doc-api/classes/Kwartz/Converter.html +252 -0
- data/doc-api/classes/Kwartz/CssStyleParser.html +483 -0
- data/doc-api/classes/Kwartz/DocumentRuleset.html +369 -0
- data/doc-api/classes/Kwartz/ElementExpander.html +325 -0
- data/doc-api/classes/Kwartz/ElementInfo.html +312 -0
- data/doc-api/classes/Kwartz/ElementRuleset.html +582 -0
- data/doc-api/classes/Kwartz/EperlHandler.html +338 -0
- data/doc-api/classes/Kwartz/EperlTranslator.html +167 -0
- data/doc-api/classes/Kwartz/ErubisHandler.html +113 -0
- data/doc-api/classes/Kwartz/ErubisTranslator.html +168 -0
- data/doc-api/classes/Kwartz/ErubyHandler.html +337 -0
- data/doc-api/classes/Kwartz/ErubyTranslator.html +167 -0
- data/doc-api/classes/Kwartz/ExpandStatement.html +227 -0
- data/doc-api/classes/Kwartz/Expression.html +119 -0
- data/doc-api/classes/Kwartz/Handler.html +558 -0
- data/doc-api/classes/Kwartz/JstlHandler.html +657 -0
- data/doc-api/classes/Kwartz/JstlTranslator.html +226 -0
- data/doc-api/classes/Kwartz/KwartzError.html +146 -0
- data/doc-api/classes/Kwartz/Main.html +384 -0
- data/doc-api/classes/Kwartz/NativeExpression.html +236 -0
- data/doc-api/classes/Kwartz/NativeStatement.html +254 -0
- data/doc-api/classes/Kwartz/Node.html +156 -0
- data/doc-api/classes/Kwartz/ParseError.html +148 -0
- data/doc-api/classes/Kwartz/PhpHandler.html +333 -0
- data/doc-api/classes/Kwartz/PhpTranslator.html +194 -0
- data/doc-api/classes/Kwartz/PresentationLogicParser.html +830 -0
- data/doc-api/classes/Kwartz/PrintStatement.html +221 -0
- data/doc-api/classes/Kwartz/RailsHandler.html +587 -0
- data/doc-api/classes/Kwartz/RailsTranslator.html +167 -0
- data/doc-api/classes/Kwartz/RubyStyleParser.html +558 -0
- data/doc-api/classes/Kwartz/Ruleset.html +117 -0
- data/doc-api/classes/Kwartz/Statement.html +119 -0
- data/doc-api/classes/Kwartz/StrutsTranslator.html +190 -0
- data/doc-api/classes/Kwartz/TagInfo.html +314 -0
- data/doc-api/classes/Kwartz/TextConverter.html +270 -0
- data/doc-api/classes/Kwartz/Translator.html +318 -0
- data/doc-api/classes/Test.html +107 -0
- data/doc-api/classes/Test/Unit.html +101 -0
- data/doc-api/created.rid +1 -0
- data/doc-api/files/__/README_txt.html +150 -0
- data/doc-api/files/kwartz/assert_rb.html +114 -0
- data/doc-api/files/kwartz/binding/eperl_rb.html +116 -0
- data/doc-api/files/kwartz/binding/erubis_rb.html +116 -0
- data/doc-api/files/kwartz/binding/eruby_rb.html +115 -0
- data/doc-api/files/kwartz/binding/jstl_rb.html +116 -0
- data/doc-api/files/kwartz/binding/php_rb.html +116 -0
- data/doc-api/files/kwartz/binding/rails_rb.html +115 -0
- data/doc-api/files/kwartz/binding/struts_rb.html +117 -0
- data/doc-api/files/kwartz/config_rb.html +107 -0
- data/doc-api/files/kwartz/converter_rb.html +119 -0
- data/doc-api/files/kwartz/error_rb.html +107 -0
- data/doc-api/files/kwartz/main_rb.html +124 -0
- data/doc-api/files/kwartz/node_rb.html +114 -0
- data/doc-api/files/kwartz/parser_rb.html +117 -0
- data/doc-api/files/kwartz/translator_rb.html +115 -0
- data/doc-api/files/kwartz/util/assert-text-equal_rb.html +115 -0
- data/doc-api/files/kwartz/util/testcase-helper_rb.html +115 -0
- data/doc-api/files/kwartz_rb.html +120 -0
- data/doc-api/fr_class_index.html +75 -0
- data/doc-api/fr_file_index.html +45 -0
- data/doc-api/fr_method_index.html +216 -0
- data/doc-api/index.html +24 -0
- data/doc-api/rdoc-style.css +208 -0
- data/doc/docstyle.css +188 -0
- data/doc/p-pattern.html +1207 -0
- data/doc/reference.html +3396 -0
- data/doc/users-guide.html +1670 -0
- data/examples/breadcrumbs1/Makefile +15 -0
- data/examples/breadcrumbs1/breadcrumbs.eruby.plogic +27 -0
- data/examples/breadcrumbs1/breadcrumbs.html +12 -0
- data/examples/breadcrumbs1/breadcrumbs.jstl.plogic +28 -0
- data/examples/breadcrumbs1/breadcrumbs.php.plogic +26 -0
- data/examples/breadcrumbs1/main.php +12 -0
- data/examples/breadcrumbs1/main.rb +12 -0
- data/examples/breadcrumbs2/Makefile +15 -0
- data/examples/breadcrumbs2/breadcrumbs.eruby.plogic +22 -0
- data/examples/breadcrumbs2/breadcrumbs.html +14 -0
- data/examples/breadcrumbs2/breadcrumbs.jstl.plogic +24 -0
- data/examples/breadcrumbs2/breadcrumbs.php.plogic +23 -0
- data/examples/breadcrumbs2/main.php +12 -0
- data/examples/breadcrumbs2/main.rb +12 -0
- data/examples/pagelayout/Makefile +47 -0
- data/examples/pagelayout/content.eruby.plogic +44 -0
- data/examples/pagelayout/content.jstl.plogic +36 -0
- data/examples/pagelayout/content.php.plogic +37 -0
- data/examples/pagelayout/content1.html +36 -0
- data/examples/pagelayout/content2.html +29 -0
- data/examples/pagelayout/design.css +40 -0
- data/examples/pagelayout/layout.html +50 -0
- data/examples/pagelayout/main.php +55 -0
- data/examples/pagelayout/main.rb +77 -0
- data/examples/pagelayout/menu.eruby.plogic +14 -0
- data/examples/pagelayout/menu.html +13 -0
- data/examples/pagelayout/menu.jstl.plogic +14 -0
- data/examples/pagelayout/menu.php.plogic +14 -0
- data/examples/rails1/Makefile +36 -0
- data/examples/rails1/README +19 -0
- data/examples/rails1/application_helper.rb +31 -0
- data/examples/rails1/edit.html +28 -0
- data/examples/rails1/edit.plogic +10 -0
- data/examples/rails1/form.html +52 -0
- data/examples/rails1/form.plogic +33 -0
- data/examples/rails1/layout.plogic +15 -0
- data/examples/rails1/link_to.plogic +19 -0
- data/examples/rails1/list.html +48 -0
- data/examples/rails1/list.plogic +28 -0
- data/examples/rails1/new.html +27 -0
- data/examples/rails1/new.plogic +10 -0
- data/examples/rails1/reader.plogic +29 -0
- data/examples/rails1/show.html +40 -0
- data/examples/rails1/show.plogic +4 -0
- data/examples/rails1/writer.plogic +8 -0
- data/examples/table1/Makefile +15 -0
- data/examples/table1/main.php +11 -0
- data/examples/table1/main.rb +11 -0
- data/examples/table1/table1.eruby.plogic +21 -0
- data/examples/table1/table1.html +16 -0
- data/examples/table1/table1.jstl.plogic +21 -0
- data/examples/table1/table1.php.plogic +22 -0
- data/kwartz.gemspec +55 -0
- data/lib/kwartz.rb +13 -0
- data/lib/kwartz/assert.rb +31 -0
- data/lib/kwartz/binding/eperl.rb +166 -0
- data/lib/kwartz/binding/erubis.rb +61 -0
- data/lib/kwartz/binding/eruby.rb +164 -0
- data/lib/kwartz/binding/jstl.rb +334 -0
- data/lib/kwartz/binding/php.rb +167 -0
- data/lib/kwartz/binding/rails.rb +295 -0
- data/lib/kwartz/binding/struts.rb +109 -0
- data/lib/kwartz/config.rb +28 -0
- data/lib/kwartz/converter.rb +920 -0
- data/lib/kwartz/error.rb +41 -0
- data/lib/kwartz/main.rb +464 -0
- data/lib/kwartz/node.rb +454 -0
- data/lib/kwartz/parser.rb +903 -0
- data/lib/kwartz/translator.rb +153 -0
- data/lib/kwartz/util/assert-text-equal.rb +44 -0
- data/lib/kwartz/util/testcase-helper.rb +112 -0
- data/setup.rb +1331 -0
- data/test/test-compile.rb +36 -0
- data/test/test-compile.yaml +178 -0
- data/test/test-converter.rb +34 -0
- data/test/test-converter.yaml +127 -0
- data/test/test-directives.rb +32 -0
- data/test/test-directives.yaml +1411 -0
- data/test/test-main.rb +464 -0
- data/test/test-parser.rb +54 -0
- data/test/test-parser.yaml +394 -0
- data/test/test-rails.rb +28 -0
- data/test/test-rails.yaml +301 -0
- data/test/test-ruleset.rb +36 -0
- data/test/test-ruleset.yaml +804 -0
- data/test/test.rb +44 -0
- metadata +236 -0
data/doc-api/index.html
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="iso-8859-1"?>
|
|
2
|
+
<!DOCTYPE html
|
|
3
|
+
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
|
|
4
|
+
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
|
|
5
|
+
|
|
6
|
+
<!--
|
|
7
|
+
|
|
8
|
+
RDoc Documentation
|
|
9
|
+
|
|
10
|
+
-->
|
|
11
|
+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
12
|
+
<head>
|
|
13
|
+
<title>RDoc Documentation</title>
|
|
14
|
+
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
|
15
|
+
</head>
|
|
16
|
+
<frameset rows="20%, 80%">
|
|
17
|
+
<frameset cols="25%,35%,45%">
|
|
18
|
+
<frame src="fr_file_index.html" title="Files" name="Files" />
|
|
19
|
+
<frame src="fr_class_index.html" name="Classes" />
|
|
20
|
+
<frame src="fr_method_index.html" name="Methods" />
|
|
21
|
+
</frameset>
|
|
22
|
+
<frame src="files/__/README_txt.html" name="docwin" />
|
|
23
|
+
</frameset>
|
|
24
|
+
</html>
|
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
|
|
2
|
+
body {
|
|
3
|
+
font-family: Verdana,Arial,Helvetica,sans-serif;
|
|
4
|
+
font-size: 90%;
|
|
5
|
+
margin: 0;
|
|
6
|
+
margin-left: 40px;
|
|
7
|
+
padding: 0;
|
|
8
|
+
background: white;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
h1,h2,h3,h4 { margin: 0; color: #efefef; background: transparent; }
|
|
12
|
+
h1 { font-size: 150%; }
|
|
13
|
+
h2,h3,h4 { margin-top: 1em; }
|
|
14
|
+
|
|
15
|
+
a { background: #eef; color: #039; text-decoration: none; }
|
|
16
|
+
a:hover { background: #039; color: #eef; }
|
|
17
|
+
|
|
18
|
+
/* Override the base stylesheet's Anchor inside a table cell */
|
|
19
|
+
td > a {
|
|
20
|
+
background: transparent;
|
|
21
|
+
color: #039;
|
|
22
|
+
text-decoration: none;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* and inside a section title */
|
|
26
|
+
.section-title > a {
|
|
27
|
+
background: transparent;
|
|
28
|
+
color: #eee;
|
|
29
|
+
text-decoration: none;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* === Structural elements =================================== */
|
|
33
|
+
|
|
34
|
+
div#index {
|
|
35
|
+
margin: 0;
|
|
36
|
+
margin-left: -40px;
|
|
37
|
+
padding: 0;
|
|
38
|
+
font-size: 90%;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
div#index a {
|
|
43
|
+
margin-left: 0.7em;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
div#index .section-bar {
|
|
47
|
+
margin-left: 0px;
|
|
48
|
+
padding-left: 0.7em;
|
|
49
|
+
background: #ccc;
|
|
50
|
+
font-size: small;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
div#classHeader, div#fileHeader {
|
|
55
|
+
width: auto;
|
|
56
|
+
color: white;
|
|
57
|
+
padding: 0.5em 1.5em 0.5em 1.5em;
|
|
58
|
+
margin: 0;
|
|
59
|
+
margin-left: -40px;
|
|
60
|
+
border-bottom: 3px solid #006;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
div#classHeader a, div#fileHeader a {
|
|
64
|
+
background: inherit;
|
|
65
|
+
color: white;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
div#classHeader td, div#fileHeader td {
|
|
69
|
+
background: inherit;
|
|
70
|
+
color: white;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
div#fileHeader {
|
|
75
|
+
background: #057;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
div#classHeader {
|
|
79
|
+
background: #048;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
.class-name-in-header {
|
|
84
|
+
font-size: 180%;
|
|
85
|
+
font-weight: bold;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
div#bodyContent {
|
|
90
|
+
padding: 0 1.5em 0 1.5em;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
div#description {
|
|
94
|
+
padding: 0.5em 1.5em;
|
|
95
|
+
background: #efefef;
|
|
96
|
+
border: 1px dotted #999;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
div#description h1,h2,h3,h4,h5,h6 {
|
|
100
|
+
color: #125;;
|
|
101
|
+
background: transparent;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
div#validator-badges {
|
|
105
|
+
text-align: center;
|
|
106
|
+
}
|
|
107
|
+
div#validator-badges img { border: 0; }
|
|
108
|
+
|
|
109
|
+
div#copyright {
|
|
110
|
+
color: #333;
|
|
111
|
+
background: #efefef;
|
|
112
|
+
font: 0.75em sans-serif;
|
|
113
|
+
margin-top: 5em;
|
|
114
|
+
margin-bottom: 0;
|
|
115
|
+
padding: 0.5em 2em;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
/* === Classes =================================== */
|
|
120
|
+
|
|
121
|
+
table.header-table {
|
|
122
|
+
color: white;
|
|
123
|
+
font-size: small;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.type-note {
|
|
127
|
+
font-size: small;
|
|
128
|
+
color: #DEDEDE;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.xxsection-bar {
|
|
132
|
+
background: #eee;
|
|
133
|
+
color: #333;
|
|
134
|
+
padding: 3px;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.section-bar {
|
|
138
|
+
color: #333;
|
|
139
|
+
border-bottom: 1px solid #999;
|
|
140
|
+
margin-left: -20px;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
.section-title {
|
|
145
|
+
background: #79a;
|
|
146
|
+
color: #eee;
|
|
147
|
+
padding: 3px;
|
|
148
|
+
margin-top: 2em;
|
|
149
|
+
margin-left: -30px;
|
|
150
|
+
border: 1px solid #999;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.top-aligned-row { vertical-align: top }
|
|
154
|
+
.bottom-aligned-row { vertical-align: bottom }
|
|
155
|
+
|
|
156
|
+
/* --- Context section classes ----------------------- */
|
|
157
|
+
|
|
158
|
+
.context-row { }
|
|
159
|
+
.context-item-name { font-family: monospace; font-weight: bold; color: black; }
|
|
160
|
+
.context-item-value { font-size: small; color: #448; }
|
|
161
|
+
.context-item-desc { color: #333; padding-left: 2em; }
|
|
162
|
+
|
|
163
|
+
/* --- Method classes -------------------------- */
|
|
164
|
+
.method-detail {
|
|
165
|
+
background: #efefef;
|
|
166
|
+
padding: 0;
|
|
167
|
+
margin-top: 0.5em;
|
|
168
|
+
margin-bottom: 1em;
|
|
169
|
+
border: 1px dotted #ccc;
|
|
170
|
+
}
|
|
171
|
+
.method-heading {
|
|
172
|
+
color: black;
|
|
173
|
+
background: #ccc;
|
|
174
|
+
border-bottom: 1px solid #666;
|
|
175
|
+
padding: 0.2em 0.5em 0 0.5em;
|
|
176
|
+
}
|
|
177
|
+
.method-signature { color: black; background: inherit; }
|
|
178
|
+
.method-name { font-weight: bold; }
|
|
179
|
+
.method-args { font-style: italic; }
|
|
180
|
+
.method-description { padding: 0 0.5em 0 0.5em; }
|
|
181
|
+
|
|
182
|
+
/* --- Source code sections -------------------- */
|
|
183
|
+
|
|
184
|
+
a.source-toggle { font-size: 90%; }
|
|
185
|
+
div.method-source-code {
|
|
186
|
+
background: #262626;
|
|
187
|
+
color: #ffdead;
|
|
188
|
+
margin: 1em;
|
|
189
|
+
padding: 0.5em;
|
|
190
|
+
border: 1px dashed #999;
|
|
191
|
+
overflow: hidden;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
div.method-source-code pre { color: #ffdead; overflow: hidden; }
|
|
195
|
+
|
|
196
|
+
/* --- Ruby keyword styles --------------------- */
|
|
197
|
+
|
|
198
|
+
.standalone-code { background: #221111; color: #ffdead; overflow: hidden; }
|
|
199
|
+
|
|
200
|
+
.ruby-constant { color: #7fffd4; background: transparent; }
|
|
201
|
+
.ruby-keyword { color: #00ffff; background: transparent; }
|
|
202
|
+
.ruby-ivar { color: #eedd82; background: transparent; }
|
|
203
|
+
.ruby-operator { color: #00ffee; background: transparent; }
|
|
204
|
+
.ruby-identifier { color: #ffdead; background: transparent; }
|
|
205
|
+
.ruby-node { color: #ffa07a; background: transparent; }
|
|
206
|
+
.ruby-comment { color: #b22222; font-weight: bold; background: transparent; }
|
|
207
|
+
.ruby-regexp { color: #ffa07a; background: transparent; }
|
|
208
|
+
.ruby-value { color: #7fffd4; background: transparent; }
|
data/doc/docstyle.css
ADDED
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
body {
|
|
2
|
+
background-color:#FFFFFF;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.mainbody {
|
|
6
|
+
color:#333333;
|
|
7
|
+
line-height:150%;
|
|
8
|
+
margin: 5px 30px 5px 30px;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
a:link, a:active, a:hover {
|
|
12
|
+
color:#CC6600;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
a:visited {
|
|
16
|
+
color:#DD9900;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
p {
|
|
20
|
+
color:#333333;
|
|
21
|
+
line-height:150%;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
pre {
|
|
25
|
+
width: 100%;
|
|
26
|
+
line-height:130%;
|
|
27
|
+
white-space:pre;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.program {
|
|
31
|
+
border-style:solid;
|
|
32
|
+
border-width:1px;
|
|
33
|
+
border-color:#6699FF;
|
|
34
|
+
color:#333333;
|
|
35
|
+
background-color:#DDEEFF;
|
|
36
|
+
padding:8px 9px 8px 9px;
|
|
37
|
+
margin:0px;
|
|
38
|
+
word-break:break-all;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.terminal {
|
|
42
|
+
border-style:solid;
|
|
43
|
+
border-width:1;
|
|
44
|
+
border-color:#999999;
|
|
45
|
+
color:#333333;
|
|
46
|
+
background-color:#E0E0E0;
|
|
47
|
+
padding:9px 10px 9px 10px;
|
|
48
|
+
margin:0px;
|
|
49
|
+
word-break:break-all;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.output {
|
|
53
|
+
border-style:solid;
|
|
54
|
+
border-width:1px;
|
|
55
|
+
border-color:#CCCCCC;
|
|
56
|
+
color:#333333;
|
|
57
|
+
background-color:#FFFFFF;
|
|
58
|
+
padding:8px 9px 8px 9px;
|
|
59
|
+
margin:0px;
|
|
60
|
+
word-break:break-all;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
.program_caption {
|
|
65
|
+
margin-top: 20px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.terminal_caption {
|
|
69
|
+
margin-top: 20px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.output_caption {
|
|
73
|
+
margin-top: 20px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
ul,ol,dl {
|
|
78
|
+
/* margin:0px; */
|
|
79
|
+
/* padding:0px; */
|
|
80
|
+
color:#333333;
|
|
81
|
+
line-height:140%;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.dt2, .dt3 {
|
|
85
|
+
font-weight:bold;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.table1 {
|
|
89
|
+
padding:2px;
|
|
90
|
+
color:#333333;
|
|
91
|
+
background-color:#DDDDCC;
|
|
92
|
+
line-height:130%;
|
|
93
|
+
/*
|
|
94
|
+
border-width:1px;
|
|
95
|
+
border-style:solid;
|
|
96
|
+
border-color:#FFFFFF;
|
|
97
|
+
*/
|
|
98
|
+
margin:5;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.th1, .th2 {
|
|
102
|
+
padding:1px;
|
|
103
|
+
color:#333333;
|
|
104
|
+
/* background-color:#DDDDCC; */
|
|
105
|
+
background-color:#CCCCBB;
|
|
106
|
+
line-height:130%;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.td1, .th2 {
|
|
110
|
+
padding:1px;
|
|
111
|
+
color:#333333;
|
|
112
|
+
background-color:#EEEEDD;
|
|
113
|
+
line-height:130%;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.caption1, .caption2 {
|
|
117
|
+
/* font-size:x-small; */
|
|
118
|
+
color:#333333;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.table2 {
|
|
122
|
+
padding:1px;
|
|
123
|
+
color:#333333;
|
|
124
|
+
background-color:#DDDDCC;
|
|
125
|
+
line-height:130%;
|
|
126
|
+
/*
|
|
127
|
+
border-width:1px;
|
|
128
|
+
border-style:solid;
|
|
129
|
+
border-color:#FFFFFF;
|
|
130
|
+
*/
|
|
131
|
+
margin:5;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
h1, .chapter, .doctitle {
|
|
135
|
+
color:#333333;
|
|
136
|
+
font-weight:bold;
|
|
137
|
+
padding:30px 0px 10px 0px;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
h2, .section {
|
|
141
|
+
color:#333333;
|
|
142
|
+
font-weight:bold;
|
|
143
|
+
border-style:solid;
|
|
144
|
+
border-color:#6699FF;
|
|
145
|
+
border-width:0px 0px 2px 30px;
|
|
146
|
+
padding:10px 20px 0px 5px;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
h3, .subsection {
|
|
150
|
+
color:#333333;
|
|
151
|
+
font-weight:bold;
|
|
152
|
+
border-style:solid;
|
|
153
|
+
border-color:#6699FF;
|
|
154
|
+
border-width: 0px 0px 0px 15px;
|
|
155
|
+
padding: 10px 20px 0px 5px;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.em {
|
|
159
|
+
font-weight:bold;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.toc {
|
|
163
|
+
/* font-size:small; */
|
|
164
|
+
/* line-height:100%; */
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.footnote {
|
|
168
|
+
font-size:small;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.note {
|
|
172
|
+
background-color:#FFFFDD;
|
|
173
|
+
border-style:solid;
|
|
174
|
+
border-width:0px 1px 0px 1px;
|
|
175
|
+
border-color:#DDDD66;
|
|
176
|
+
color:#333300;
|
|
177
|
+
/* font-size:small; */
|
|
178
|
+
line-height:120%;
|
|
179
|
+
padding: 5px 20px 5px 20px;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.figure {
|
|
183
|
+
/*
|
|
184
|
+
border-width:1px;
|
|
185
|
+
border-color:#DDDD66;
|
|
186
|
+
white-space:pre;
|
|
187
|
+
*/
|
|
188
|
+
}
|
data/doc/p-pattern.html
ADDED
|
@@ -0,0 +1,1207 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-Type" content="text/html">
|
|
5
|
+
<title>Presentation Pattern Catalog</title>
|
|
6
|
+
<meta name="author" content="Makoto Kuwata <kwa(at)kuwata-lab.com>">
|
|
7
|
+
<meta name="generator" content="kwaser">
|
|
8
|
+
<meta http-equiv="Content-Style-Type" content="text/css">
|
|
9
|
+
<link rel="stylesheet" href="docstyle.css" type="text/css">
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
|
|
13
|
+
<blockquote>
|
|
14
|
+
<div class="mainbody">
|
|
15
|
+
|
|
16
|
+
<div align="left"><h1>Presentation Pattern Catalog</h1></div>
|
|
17
|
+
<div align="left">
|
|
18
|
+
Makoto Kuwata <kwa(at)kuwata-lab.com><br>
|
|
19
|
+
last update: $Date: 2006-05-31 11:14:08 +0900 (Wed, 31 May 2006) $<br>
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
<a name="preface"></a>
|
|
23
|
+
<h2 class="section1">Preface</h2>
|
|
24
|
+
<p>Kwartz is the template system which realized the concept of '<b>Independence of Presentation Logic (IoPL)</b>.'
|
|
25
|
+
This concept enables to use complex presentation logics without breaking HTML design at all.
|
|
26
|
+
</p>
|
|
27
|
+
<p>There are several patterns which help you to separate presentation logic from presentation data well.
|
|
28
|
+
These patterns are called 'Presentation Patterns.'
|
|
29
|
+
</p>
|
|
30
|
+
<p>This document shows Presentation Patterns.
|
|
31
|
+
</p>
|
|
32
|
+
<a name="toc"></a>
|
|
33
|
+
<h3 class="section2">Table of Contents</h3>
|
|
34
|
+
<ul>
|
|
35
|
+
<li><a href="#preface">Preface</a>
|
|
36
|
+
<ul>
|
|
37
|
+
<li><a href="#toc">Table of Contents</a>
|
|
38
|
+
</li>
|
|
39
|
+
</ul>
|
|
40
|
+
</li>
|
|
41
|
+
<li><a href="#replacement">Replacement</a>
|
|
42
|
+
<ul>
|
|
43
|
+
<li><a href="#replace-elem-with-value">Replace Element with Value Pattern</a>
|
|
44
|
+
</li>
|
|
45
|
+
<li><a href="#replace-cont-with-value">Replace Content with Value Pattern</a>
|
|
46
|
+
</li>
|
|
47
|
+
<li><a href="#default-cont">Default Content Pattern</a>
|
|
48
|
+
</li>
|
|
49
|
+
<li><a href="#replace-elem-with-elem">Replace Element with Element/Content Pattern</a>
|
|
50
|
+
</li>
|
|
51
|
+
<li><a href="#replace-cont-with-elem">Replace Content with Element/Content Pattern</a>
|
|
52
|
+
</li>
|
|
53
|
+
</ul>
|
|
54
|
+
</li>
|
|
55
|
+
<li><a href="#deletion">Deletion</a>
|
|
56
|
+
<ul>
|
|
57
|
+
<li><a href="#delete-elem">Delete Element Pattern</a>
|
|
58
|
+
</li>
|
|
59
|
+
<li><a href="#delete-tag">Delete Tag Pattern</a>
|
|
60
|
+
</li>
|
|
61
|
+
</ul>
|
|
62
|
+
</li>
|
|
63
|
+
<li><a href="#iteration">Iteration</a>
|
|
64
|
+
<ul>
|
|
65
|
+
<li><a href="#iterate-elem">Iterate Element Pattern</a>
|
|
66
|
+
</li>
|
|
67
|
+
<li><a href="#iterate-cont">Iterate Content Pattern</a>
|
|
68
|
+
</li>
|
|
69
|
+
</ul>
|
|
70
|
+
</li>
|
|
71
|
+
<li><a href="#selection">Selection</a>
|
|
72
|
+
<ul>
|
|
73
|
+
<li><a href="#select-elem">Select Element/Content Pattern</a>
|
|
74
|
+
</li>
|
|
75
|
+
<li><a href="#pickup-elem">Pick-up Element/Content Pattern</a>
|
|
76
|
+
</li>
|
|
77
|
+
<li><a href="#extract-elem">Extract Element/Content Pattern</a>
|
|
78
|
+
</li>
|
|
79
|
+
</ul>
|
|
80
|
+
</li>
|
|
81
|
+
</ul>
|
|
82
|
+
<br>
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
<br>
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
<a name="replacement"></a>
|
|
89
|
+
<h2 class="section1">Replacement</h2>
|
|
90
|
+
<a name="replace-elem-with-value"></a>
|
|
91
|
+
<h3 class="section2">Replace Element with Value Pattern</h3>
|
|
92
|
+
<a name="replace-elem-with-value-desc"></a>
|
|
93
|
+
<h4 class="section3">Description</h4>
|
|
94
|
+
<p>You can replace the element with the value of expression.
|
|
95
|
+
This is named 'Replace Element with Value Pattern.'
|
|
96
|
+
</p>
|
|
97
|
+
<br>
|
|
98
|
+
|
|
99
|
+
<a name="replace-elem-with-value-situation"></a>
|
|
100
|
+
<h4 class="section3">Situation</h4>
|
|
101
|
+
<p>This pattern is very useful to print out the value of a variable or an expression as text.
|
|
102
|
+
</p>
|
|
103
|
+
<br>
|
|
104
|
+
|
|
105
|
+
<a name="replace-elem-with-value-example"></a>
|
|
106
|
+
<h4 class="section3">Example Code</h4>
|
|
107
|
+
<a name="replace1.pdata"></a>
|
|
108
|
+
<div class="program_caption">
|
|
109
|
+
Presentation Data:</div>
|
|
110
|
+
<pre class="program">Hello <span <b>id="mark:user"</b>>World</span>!
|
|
111
|
+
</pre>
|
|
112
|
+
<a name="replace1.plogic"></a>
|
|
113
|
+
<div class="program_caption">
|
|
114
|
+
Presentation Logic:</div>
|
|
115
|
+
<pre class="program">/* print value of variable 'username' instead of the element */
|
|
116
|
+
#user {
|
|
117
|
+
logic: {
|
|
118
|
+
<b>print username</b>
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
</pre>
|
|
122
|
+
<a name="replace1.expected"></a>
|
|
123
|
+
<div class="output_caption">
|
|
124
|
+
Output Script:</div>
|
|
125
|
+
<pre class="output">Hello <b><%= username %></b>!
|
|
126
|
+
</pre>
|
|
127
|
+
<br>
|
|
128
|
+
|
|
129
|
+
<a name="replace-elem-with-value-suppliment"></a>
|
|
130
|
+
<h4 class="section3">Supplement</h4>
|
|
131
|
+
<p>Kwartz supports the short-notation of this pattern.
|
|
132
|
+
</p>
|
|
133
|
+
<a name="replace1a.plogic"></a>
|
|
134
|
+
<pre class="program">#user {
|
|
135
|
+
elem: username;
|
|
136
|
+
}
|
|
137
|
+
</pre>
|
|
138
|
+
<p>The output script will be:
|
|
139
|
+
</p>
|
|
140
|
+
<a name="replace1a.expected"></a>
|
|
141
|
+
<pre class="output">Hello <b><%= username %></b>!
|
|
142
|
+
</pre>
|
|
143
|
+
<br>
|
|
144
|
+
|
|
145
|
+
<br>
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
<a name="replace-cont-with-value"></a>
|
|
149
|
+
<h3 class="section2">Replace Content with Value Pattern</h3>
|
|
150
|
+
<a name="replace-cont-with-value-desc"></a>
|
|
151
|
+
<h4 class="section3">Description</h4>
|
|
152
|
+
<p>You can also replace only the content of the element in the same way.
|
|
153
|
+
This is named 'Replace Content with Value Pattern.'
|
|
154
|
+
</p>
|
|
155
|
+
<br>
|
|
156
|
+
|
|
157
|
+
<a name="replace-cont-with-value-situation"></a>
|
|
158
|
+
<h4 class="section3">Situation</h4>
|
|
159
|
+
<p>This pattern is used frequently because the situation to replace the content with value is very popular.
|
|
160
|
+
</p>
|
|
161
|
+
<br>
|
|
162
|
+
|
|
163
|
+
<a name="replace-cont-with-value-example"></a>
|
|
164
|
+
<h4 class="section3">Example Code</h4>
|
|
165
|
+
<a name="replace2.pdata"></a>
|
|
166
|
+
<div class="program_caption">
|
|
167
|
+
Presentation Data:</div>
|
|
168
|
+
<pre class="program"><h1 <b>id="mark:title"</b>>Example</h1>
|
|
169
|
+
</pre>
|
|
170
|
+
<a name="replace2.plogic"></a>
|
|
171
|
+
<div class="program_caption">
|
|
172
|
+
Presentation Logic:</div>
|
|
173
|
+
<pre class="program">/* print expression value instead of content text */
|
|
174
|
+
#title {
|
|
175
|
+
logic: {
|
|
176
|
+
_stag # start-tag
|
|
177
|
+
<b>print title </b>
|
|
178
|
+
_etag # end-tag
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
</pre>
|
|
182
|
+
<a name="replace2.expected"></a>
|
|
183
|
+
<div class="output_caption">
|
|
184
|
+
Output Script:</div>
|
|
185
|
+
<pre class="output"><h1><%= title %></h1>
|
|
186
|
+
</pre>
|
|
187
|
+
<br>
|
|
188
|
+
|
|
189
|
+
<a name="replace-cont-with-value-suppliment"></a>
|
|
190
|
+
<h4 class="section3">Supplement</h4>
|
|
191
|
+
<p>Kwartz provides the shorter notation for this pattern.
|
|
192
|
+
</p>
|
|
193
|
+
<a name="replace2a.plogic"></a>
|
|
194
|
+
<pre class="program">#title {
|
|
195
|
+
<b>cont: title;</b>
|
|
196
|
+
/* or value: title; */
|
|
197
|
+
}
|
|
198
|
+
</pre>
|
|
199
|
+
<p>The output will be:
|
|
200
|
+
</p>
|
|
201
|
+
<a name="replace2a.expected"></a>
|
|
202
|
+
<pre class="output"><h1><b><%= title %></b></h1>
|
|
203
|
+
</pre>
|
|
204
|
+
<p>Kwartz Directive '<code>title="cont: <i>expr</i>"</code>' or '<code>title="value: <i>expr</i>"</code>' lets you to use this pattern without presentation logic file.
|
|
205
|
+
</p>
|
|
206
|
+
<pre class="program"><h1 <b>id="value: title"</b>>Example</h1>
|
|
207
|
+
</pre>
|
|
208
|
+
<br>
|
|
209
|
+
|
|
210
|
+
<br>
|
|
211
|
+
|
|
212
|
+
|
|
213
|
+
<a name="default-cont"></a>
|
|
214
|
+
<h3 class="section2">Default Content Pattern</h3>
|
|
215
|
+
<a name="default-cont-description"></a>
|
|
216
|
+
<h4 class="section3">Description</h4>
|
|
217
|
+
<p>You can replace element or content only when a certain condition is true
|
|
218
|
+
and the original element or content is displayed when the condition is false.
|
|
219
|
+
This is named 'Default Content Pattern.'
|
|
220
|
+
</p>
|
|
221
|
+
<p>This pattern is an combination of 'Replace Element with Value Pattern' and 'Delete Tag Pattern'.
|
|
222
|
+
</p>
|
|
223
|
+
<br>
|
|
224
|
+
|
|
225
|
+
<a name="default-cont-situation"></a>
|
|
226
|
+
<h4 class="section3">Situation</h4>
|
|
227
|
+
<p>For example, there may be a placeholder to display username, and string 'Guest' is
|
|
228
|
+
displayed when username is null or empty.
|
|
229
|
+
</p>
|
|
230
|
+
<br>
|
|
231
|
+
|
|
232
|
+
<a name="default-content-example"></a>
|
|
233
|
+
<h4 class="section3">Example Code</h4>
|
|
234
|
+
<p>The following is an example to print content text as default value when value is null or empty.
|
|
235
|
+
</p>
|
|
236
|
+
<a name="replace5.pdata"></a>
|
|
237
|
+
<div class="program_caption">
|
|
238
|
+
Presentation Data:</div>
|
|
239
|
+
<pre class="program">Hello <span <b>id="mark:user"</b>>World</span>!
|
|
240
|
+
</pre>
|
|
241
|
+
<a name="replace5.plogic"></a>
|
|
242
|
+
<div class="program_caption">
|
|
243
|
+
Presentation Logic:</div>
|
|
244
|
+
<pre class="program">/* Print 'guest' as a default value when 'username' is empty string */
|
|
245
|
+
#user {
|
|
246
|
+
logic: {
|
|
247
|
+
if username && !username.empty?
|
|
248
|
+
<b>print username</b>
|
|
249
|
+
else
|
|
250
|
+
<b>_cont</b> # print content text
|
|
251
|
+
end
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
</pre>
|
|
255
|
+
<a name="replace5.expected"></a>
|
|
256
|
+
<div class="output_caption">
|
|
257
|
+
Output Script:</div>
|
|
258
|
+
<pre class="output">Hello <% if username && !username.empty? %>
|
|
259
|
+
<%= username %><% else %>
|
|
260
|
+
World<% end %>
|
|
261
|
+
!
|
|
262
|
+
</pre>
|
|
263
|
+
<br>
|
|
264
|
+
|
|
265
|
+
<a name="default-content-suppliment"></a>
|
|
266
|
+
<h4 class="section3">Suppliement</h4>
|
|
267
|
+
<p>Directive 'title="default: <i>expr</i>"' is for Default Content Pattern.
|
|
268
|
+
</p>
|
|
269
|
+
<a name="replace5a.pdata"></a>
|
|
270
|
+
<pre class="program">Hello <span <b>title="default: user"</b>>World</span>!
|
|
271
|
+
</pre>
|
|
272
|
+
<p>The output is:
|
|
273
|
+
</p>
|
|
274
|
+
<a name="replace5a.expected"></a>
|
|
275
|
+
<pre class="output">Hello <span><% if (user) && !(user).to_s.empty? then %><%= user %><% else %>World<% end %></span>!
|
|
276
|
+
</pre>
|
|
277
|
+
<br>
|
|
278
|
+
|
|
279
|
+
<br>
|
|
280
|
+
|
|
281
|
+
|
|
282
|
+
<a name="replace-elem-with-elem"></a>
|
|
283
|
+
<h3 class="section2">Replace Element with Element/Content Pattern</h3>
|
|
284
|
+
<a name="replace-elem-with-elem-desc"></a>
|
|
285
|
+
<h4 class="section3">Description</h4>
|
|
286
|
+
<p>You can replace the element with other element or content.
|
|
287
|
+
This pattern is named 'Replace Element with Element Pattern.'
|
|
288
|
+
or 'Replace Element with Content Pattern'.
|
|
289
|
+
</p>
|
|
290
|
+
<br>
|
|
291
|
+
|
|
292
|
+
<a name="replace-elem-with-elem-situation"></a>
|
|
293
|
+
<h4 class="section3">Situation</h4>
|
|
294
|
+
<p>This pattern is very useful to reuse the element in other place.
|
|
295
|
+
</p>
|
|
296
|
+
<br>
|
|
297
|
+
|
|
298
|
+
<a name="replace-elem-with-elem-example"></a>
|
|
299
|
+
<h4 class="section3">Example Code</h4>
|
|
300
|
+
<a name="replace3.pdata"></a>
|
|
301
|
+
<div class="program_caption">
|
|
302
|
+
Presentation Data:</div>
|
|
303
|
+
<pre class="program"><div <b>id="mark:links"</b>>
|
|
304
|
+
<a href="/">HOME</a> | <a href="/doc">Document</a> | <a href="/faq">FAQ</a>
|
|
305
|
+
</div>
|
|
306
|
+
|
|
307
|
+
<p>Welcome to my Home Page!</p>
|
|
308
|
+
|
|
309
|
+
<div <b>id="mark:links2"</b>>
|
|
310
|
+
Home | Document | FAQ
|
|
311
|
+
</div>
|
|
312
|
+
</pre>
|
|
313
|
+
<a name="replace3.plogic"></a>
|
|
314
|
+
<div class="program_caption">
|
|
315
|
+
Presentation Logic:</div>
|
|
316
|
+
<pre class="program">/* replace the element 'links2' with the element 'links' */
|
|
317
|
+
#links2 {
|
|
318
|
+
logic: {
|
|
319
|
+
<b>_element(links)</b>
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
</pre>
|
|
323
|
+
<p><code>_element(<i>name</i>)</code> represents the element which is marked with <code>id="mark:<i>name</i>"</code> or <code>id="<i>name</i>"</code>.
|
|
324
|
+
</p>
|
|
325
|
+
<a name="replace3.expected"></a>
|
|
326
|
+
<div class="output_caption">
|
|
327
|
+
Output Script:</div>
|
|
328
|
+
<pre class="output"><div>
|
|
329
|
+
<a href="/">HOME</a> | <a href="/doc">Document</a> | <a href="/faq">FAQ</a>
|
|
330
|
+
</div>
|
|
331
|
+
|
|
332
|
+
<p>Welcome to my Home Page!</p>
|
|
333
|
+
|
|
334
|
+
<div>
|
|
335
|
+
<a href="/">HOME</a> | <a href="/doc">Document</a> | <a href="/faq">FAQ</a>
|
|
336
|
+
</div>
|
|
337
|
+
</pre>
|
|
338
|
+
<p>Use '_content(<i>name</i>)' instead of '_element(<i>name</i>)'
|
|
339
|
+
if you want to reuse content of other element.
|
|
340
|
+
</p>
|
|
341
|
+
<a name="replace3a.plogic"></a>
|
|
342
|
+
<div class="program_caption">
|
|
343
|
+
Presentation Logic:</div>
|
|
344
|
+
<pre class="program">/* replace the element 'links2' with the content 'links' */
|
|
345
|
+
#links2 {
|
|
346
|
+
logic: {
|
|
347
|
+
<b>_content(links)</b>
|
|
348
|
+
}
|
|
349
|
+
}
|
|
350
|
+
</pre>
|
|
351
|
+
<br>
|
|
352
|
+
|
|
353
|
+
<a name="replace-elem-with-elem-supplement"></a>
|
|
354
|
+
<h4 class="section3">Supplement</h4>
|
|
355
|
+
<p>Directive '<code>id="replace_element_with_element: <i>name</i>"</code>' and '<code>id="replace_element_with_content: <i>name</i>"</code>' lets you to use this pattern without presentation logic file.
|
|
356
|
+
</p>
|
|
357
|
+
<pre class="program"><div <b>id="mark:links"</b>>
|
|
358
|
+
<a href="/">HOME</a> | <a href="/doc">Document</a> | <a href="/faq">FAQ</a>
|
|
359
|
+
</div>
|
|
360
|
+
|
|
361
|
+
<p>Welcome to my Home Page!</p>
|
|
362
|
+
|
|
363
|
+
<div <b>id="replace_element_with_element: links"</b>>
|
|
364
|
+
Home | Document | FAQ
|
|
365
|
+
</div>
|
|
366
|
+
</pre>
|
|
367
|
+
<p>The command-line option '<code>-i <i>file</i>,<i>file2</i>,...</code>' enables you
|
|
368
|
+
to use elements described in other files.
|
|
369
|
+
See Kwartz Users' Guide for details.
|
|
370
|
+
</p>
|
|
371
|
+
<br>
|
|
372
|
+
|
|
373
|
+
<br>
|
|
374
|
+
|
|
375
|
+
|
|
376
|
+
<a name="replace-cont-with-elem"></a>
|
|
377
|
+
<h3 class="section2">Replace Content with Element/Content Pattern</h3>
|
|
378
|
+
<a name="replace-cont-with-elem-desc"></a>
|
|
379
|
+
<h4 class="section3">Description</h4>
|
|
380
|
+
<p>You can replace content of an element with other element or content.
|
|
381
|
+
This pattern is named 'Replace Content with Element Pattern' and
|
|
382
|
+
'Replace Content with Content Pattern'.
|
|
383
|
+
</p>
|
|
384
|
+
<br>
|
|
385
|
+
|
|
386
|
+
<a name="replace-cont-with-elem-situation"></a>
|
|
387
|
+
<h4 class="section3">Situation</h4>
|
|
388
|
+
<p>This pattern is very useful to separate contents data and design layout into separate files.
|
|
389
|
+
</p>
|
|
390
|
+
<br>
|
|
391
|
+
|
|
392
|
+
<a name="replace-cont-with-elem-example"></a>
|
|
393
|
+
<h4 class="section3">Example Code</h4>
|
|
394
|
+
<p>The following example contains four files.
|
|
395
|
+
</p>
|
|
396
|
+
<ul type="disc">
|
|
397
|
+
<li>contents.html, contents.plogic - repsesents contents data.
|
|
398
|
+
</li>
|
|
399
|
+
<li>layout.html, layout.plogic - represents desing layout.
|
|
400
|
+
</li>
|
|
401
|
+
</ul>
|
|
402
|
+
<a name="contents.html"></a>
|
|
403
|
+
<div class="program_caption">
|
|
404
|
+
Presentation Data(contents.html):</div>
|
|
405
|
+
<pre class="program"><html>
|
|
406
|
+
<body>
|
|
407
|
+
|
|
408
|
+
<p>menu:</p>
|
|
409
|
+
<ul <b>id="mark:menu"</b>>
|
|
410
|
+
<li><a href="..." <b>id="mark:menu_item"</b>>menu1</a></li>
|
|
411
|
+
</ul>
|
|
412
|
+
|
|
413
|
+
<p>article:</p>
|
|
414
|
+
<div <b>id="mark:article"</b>>
|
|
415
|
+
<h2>What is Kwartz?</h2>
|
|
416
|
+
<p>Kwartz is a template system, which realized the concept
|
|
417
|
+
<strong>`Independence of Presentation Logic</strong>.
|
|
418
|
+
</p>
|
|
419
|
+
</div>
|
|
420
|
+
|
|
421
|
+
</body>
|
|
422
|
+
</html>
|
|
423
|
+
</pre>
|
|
424
|
+
<a name="contents.plogic"></a>
|
|
425
|
+
<div class="program_caption">
|
|
426
|
+
Presentation Logic(contents.plogic):</div>
|
|
427
|
+
<pre class="program">#menu {
|
|
428
|
+
logic: {
|
|
429
|
+
_stag
|
|
430
|
+
for item in menu_list
|
|
431
|
+
_cont
|
|
432
|
+
end
|
|
433
|
+
_etag
|
|
434
|
+
}
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
#menu_item {
|
|
438
|
+
value: item['name'];
|
|
439
|
+
attrs: "href" item['url'];
|
|
440
|
+
}
|
|
441
|
+
</pre>
|
|
442
|
+
<a name="layout.html"></a>
|
|
443
|
+
<div class="program_caption">
|
|
444
|
+
Presentation Data(layout.html):</div>
|
|
445
|
+
<pre class="program"><!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
446
|
+
<html lang="en">
|
|
447
|
+
<head>
|
|
448
|
+
<title>webpage</title>
|
|
449
|
+
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
|
450
|
+
<link rel="stylesheet" type="text/css" href="design.css">
|
|
451
|
+
</head>
|
|
452
|
+
<body>
|
|
453
|
+
|
|
454
|
+
<table border="0">
|
|
455
|
+
<tr>
|
|
456
|
+
|
|
457
|
+
<!-- menu part -->
|
|
458
|
+
<td class="menu" width="100" valign="top"
|
|
459
|
+
<b>id="mark:placeholder_menu"</b>>
|
|
460
|
+
<ul>
|
|
461
|
+
<li>menu1</li>
|
|
462
|
+
<li>menu2</li>
|
|
463
|
+
<li>menu3</li>
|
|
464
|
+
</ul>
|
|
465
|
+
</td>
|
|
466
|
+
|
|
467
|
+
<!-- article part -->
|
|
468
|
+
<td class="article" width="400" valign="top"
|
|
469
|
+
<b>id="mark:placeholder_article"</b>>
|
|
470
|
+
aaa<br>
|
|
471
|
+
bbb<br>
|
|
472
|
+
ccc<br>
|
|
473
|
+
ddd<br>
|
|
474
|
+
</td>
|
|
475
|
+
|
|
476
|
+
</tr>
|
|
477
|
+
|
|
478
|
+
<!-- footer part -->
|
|
479
|
+
<tr>
|
|
480
|
+
<td colspan="2" class="copyright">
|
|
481
|
+
copyright&copy; 2004-2006 kuwata-lab.com All Rights Reserverd
|
|
482
|
+
</td>
|
|
483
|
+
</tr>
|
|
484
|
+
</table>
|
|
485
|
+
|
|
486
|
+
</body>
|
|
487
|
+
</html>
|
|
488
|
+
</pre>
|
|
489
|
+
<a name="layout.plogic"></a>
|
|
490
|
+
<div class="program_caption">
|
|
491
|
+
Presentation Logic(layout.plogic):</div>
|
|
492
|
+
<pre class="program">/* replace content with other element */
|
|
493
|
+
#placeholder_menu {
|
|
494
|
+
logic: {
|
|
495
|
+
_stag
|
|
496
|
+
<b>_element(menu)</b>
|
|
497
|
+
_etag
|
|
498
|
+
}
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
/* replace content with other content */
|
|
502
|
+
#placeholder_article {
|
|
503
|
+
logic: {
|
|
504
|
+
_stag
|
|
505
|
+
<b>_content(article)</b>
|
|
506
|
+
_etag
|
|
507
|
+
}
|
|
508
|
+
}
|
|
509
|
+
</pre>
|
|
510
|
+
<p>Compilation requires the command-line option <code>-i <i>file1,file2,...</i></code>
|
|
511
|
+
which enables to import elements defined in other files.
|
|
512
|
+
</p>
|
|
513
|
+
<p>Compile:
|
|
514
|
+
</p>
|
|
515
|
+
<pre class="terminal">$ kwartz -l eruby <b>-i contents.html</b> -p contens.plogic,layout.plogic layout.html
|
|
516
|
+
</pre>
|
|
517
|
+
<a name="layout.expected"></a>
|
|
518
|
+
<div class="output_caption">
|
|
519
|
+
Output Script:</div>
|
|
520
|
+
<pre class="output"><!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
521
|
+
<html lang="en">
|
|
522
|
+
<head>
|
|
523
|
+
<title>webpage</title>
|
|
524
|
+
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
|
525
|
+
<link rel="stylesheet" type="text/css" href="design.css">
|
|
526
|
+
</head>
|
|
527
|
+
<body>
|
|
528
|
+
|
|
529
|
+
<table border="0">
|
|
530
|
+
<tr>
|
|
531
|
+
|
|
532
|
+
<!-- menu part -->
|
|
533
|
+
<td class="menu" width="100" valign="top">
|
|
534
|
+
<ul>
|
|
535
|
+
<% for item in menu_list %>
|
|
536
|
+
<li><a href="<%= item['url'] %>"><%= item['name'] %></a></li>
|
|
537
|
+
<% end %>
|
|
538
|
+
</ul>
|
|
539
|
+
</td>
|
|
540
|
+
|
|
541
|
+
<!-- article part -->
|
|
542
|
+
<td class="article" width="400" valign="top">
|
|
543
|
+
<h2>What is Kwartz?</h2>
|
|
544
|
+
<p>Kwartz is a template system, which realized the concept
|
|
545
|
+
<strong>`Independence of Presentation Logic</strong>.
|
|
546
|
+
</p>
|
|
547
|
+
</td>
|
|
548
|
+
|
|
549
|
+
</tr>
|
|
550
|
+
|
|
551
|
+
<!-- footer part -->
|
|
552
|
+
<tr>
|
|
553
|
+
<td colspan="2" class="copyright">
|
|
554
|
+
copyright&copy; 2004-2006 kuwata-lab.com All Rights Reserverd
|
|
555
|
+
</td>
|
|
556
|
+
</tr>
|
|
557
|
+
</table>
|
|
558
|
+
|
|
559
|
+
</body>
|
|
560
|
+
</html>
|
|
561
|
+
</pre>
|
|
562
|
+
<br>
|
|
563
|
+
|
|
564
|
+
<a name="replace-cont-with-elem-supplement"></a>
|
|
565
|
+
<h4 class="section3">Supplement</h4>
|
|
566
|
+
<p>Kwartz Directive '<code>id="replace_content_with_element:<i>name</i>"</code>' and '<code>id="replace_content_with_content:<i>name</i>"</code>' lets you to use this pattern without presentation logic file(layout.plogic).
|
|
567
|
+
</p>
|
|
568
|
+
<div class="program_caption">
|
|
569
|
+
Presentation Data(layout.html):</div>
|
|
570
|
+
<pre class="program"> :
|
|
571
|
+
<!-- menu part -->
|
|
572
|
+
<td class="menu" width="100" valign="top"
|
|
573
|
+
<b>id="replace_content_with_element:menu"</b>>
|
|
574
|
+
<ul>
|
|
575
|
+
<li>menu1</li>
|
|
576
|
+
<li>menu2</li>
|
|
577
|
+
<li>menu3</li>
|
|
578
|
+
</ul>
|
|
579
|
+
</td>
|
|
580
|
+
|
|
581
|
+
<!-- article part -->
|
|
582
|
+
<td class="article" width="400" valign="top">
|
|
583
|
+
<b>id="replace_content_with_content:article"</b>>
|
|
584
|
+
aaa<br>
|
|
585
|
+
bbb<br>
|
|
586
|
+
ccc<br>
|
|
587
|
+
ddd<br>
|
|
588
|
+
</td>
|
|
589
|
+
:
|
|
590
|
+
</pre>
|
|
591
|
+
<br>
|
|
592
|
+
|
|
593
|
+
<br>
|
|
594
|
+
|
|
595
|
+
|
|
596
|
+
<br>
|
|
597
|
+
|
|
598
|
+
|
|
599
|
+
<a name="deletion"></a>
|
|
600
|
+
<h2 class="section1">Deletion</h2>
|
|
601
|
+
<a name="delete-elem"></a>
|
|
602
|
+
<h3 class="section2">Delete Element Pattern</h3>
|
|
603
|
+
<a name="delete-elem-desc"></a>
|
|
604
|
+
<h4 class="section3">Description</h4>
|
|
605
|
+
<p>If presentation logic is empty, the element is not printed out.
|
|
606
|
+
This pattern is named 'Delete Element Pattern' or 'Dummy Element Pattern.'
|
|
607
|
+
</p>
|
|
608
|
+
<br>
|
|
609
|
+
|
|
610
|
+
<a name="delete-elem-situation"></a>
|
|
611
|
+
<h4 class="section3">Situation</h4>
|
|
612
|
+
<p>This pattern enables you to delete dummy element in presentation data.
|
|
613
|
+
</p>
|
|
614
|
+
<br>
|
|
615
|
+
|
|
616
|
+
<a name="delete-elem-example"></a>
|
|
617
|
+
<h4 class="section3">Example Code</h4>
|
|
618
|
+
<a name="dummy_elem.pdata"></a>
|
|
619
|
+
<div class="program_caption">
|
|
620
|
+
Presentation Data:</div>
|
|
621
|
+
<pre class="program"><ul>
|
|
622
|
+
<li>foo</li>
|
|
623
|
+
<li <b>id="dummy"</b>>bar</li>
|
|
624
|
+
</ul>
|
|
625
|
+
</pre>
|
|
626
|
+
<a name="dummy_elem.plogic"></a>
|
|
627
|
+
<div class="program_caption">
|
|
628
|
+
Presentation Logic:</div>
|
|
629
|
+
<pre class="program">/* delete dummy element */
|
|
630
|
+
#dummy {
|
|
631
|
+
logic: {
|
|
632
|
+
}
|
|
633
|
+
}
|
|
634
|
+
</pre>
|
|
635
|
+
<a name="dummy_elem.expected"></a>
|
|
636
|
+
<div class="output_caption">
|
|
637
|
+
Output Script:</div>
|
|
638
|
+
<pre class="output"><ul>
|
|
639
|
+
<li>foo</li>
|
|
640
|
+
</ul>
|
|
641
|
+
</pre>
|
|
642
|
+
<br>
|
|
643
|
+
|
|
644
|
+
<a name="delete-elem-supplement"></a>
|
|
645
|
+
<h4 class="section3">Supplement</h4>
|
|
646
|
+
<p>Kwartz directive '<code>id="dummy:<i>str</i>"</code>' lets you to use this pattern without presentation logic file.
|
|
647
|
+
</p>
|
|
648
|
+
<div class="program_caption">
|
|
649
|
+
Presentation Data:</div>
|
|
650
|
+
<pre class="program"><ul>
|
|
651
|
+
<li>foo</li>
|
|
652
|
+
<li <b>id="dummy:d1"</b>>bar</li>
|
|
653
|
+
</ul>
|
|
654
|
+
</pre>
|
|
655
|
+
<br>
|
|
656
|
+
|
|
657
|
+
<br>
|
|
658
|
+
|
|
659
|
+
|
|
660
|
+
<a name="delete-tag"></a>
|
|
661
|
+
<h3 class="section2">Delete Tag Pattern</h3>
|
|
662
|
+
<a name="delete-tag-desc"></a>
|
|
663
|
+
<h4 class="section3">Description</h4>
|
|
664
|
+
<p>If you use only <code>_cont</code> and don't use <code>_stag</code> and <code>_cont</code>,
|
|
665
|
+
you can remove start and end tags of the element.
|
|
666
|
+
This pattern is named 'Delete Tag Pattern' or 'Dummy Tag Pattern.'
|
|
667
|
+
</p>
|
|
668
|
+
<br>
|
|
669
|
+
|
|
670
|
+
<a name="delete-tag-situation"></a>
|
|
671
|
+
<h4 class="section3">Situation</h4>
|
|
672
|
+
<p>This pattern is very useful if you want to print tags according to condition.
|
|
673
|
+
</p>
|
|
674
|
+
<br>
|
|
675
|
+
|
|
676
|
+
<a name="delete-tag-example"></a>
|
|
677
|
+
<h4 class="section3">Example Code</h4>
|
|
678
|
+
<a name="dummy_tag.pdata"></a>
|
|
679
|
+
<div class="program_caption">
|
|
680
|
+
Presentation Data:</div>
|
|
681
|
+
<pre class="program"><a href="..." <b>id="mark:next"</b>>Next</a>
|
|
682
|
+
</pre>
|
|
683
|
+
<a name="dummy_tag.plogic"></a>
|
|
684
|
+
<div class="program_caption">
|
|
685
|
+
Presentation Logic:</div>
|
|
686
|
+
<pre class="program">/* delete tags when url is empty */
|
|
687
|
+
#next {
|
|
688
|
+
attrs: "href" url;
|
|
689
|
+
logic: {
|
|
690
|
+
if !url || url.empty?
|
|
691
|
+
<b>_cont</b>
|
|
692
|
+
else
|
|
693
|
+
_stag
|
|
694
|
+
_cont
|
|
695
|
+
_etag
|
|
696
|
+
end
|
|
697
|
+
}
|
|
698
|
+
}
|
|
699
|
+
</pre>
|
|
700
|
+
<a name="dummy_tag.expected"></a>
|
|
701
|
+
<div class="output_caption">
|
|
702
|
+
Output Script:</div>
|
|
703
|
+
<pre class="output"><% if !url || url.empty? %>
|
|
704
|
+
Next<% else %>
|
|
705
|
+
<a href="<%= url %>">Next</a>
|
|
706
|
+
<% end %>
|
|
707
|
+
</pre>
|
|
708
|
+
<br>
|
|
709
|
+
|
|
710
|
+
<br>
|
|
711
|
+
|
|
712
|
+
|
|
713
|
+
<br>
|
|
714
|
+
|
|
715
|
+
|
|
716
|
+
<a name="iteration"></a>
|
|
717
|
+
<h2 class="section1">Iteration</h2>
|
|
718
|
+
<a name="iterate-elem"></a>
|
|
719
|
+
<h3 class="section2">Iterate Element Pattern</h3>
|
|
720
|
+
<a name="iterate-elem-desc"></a>
|
|
721
|
+
<h4 class="section3">Description</h4>
|
|
722
|
+
<p>Iteration which contains <code>_stag</code>, <code>_cont</code>, and <code>_etag</code> represents to iterate the element.
|
|
723
|
+
This pattern is named 'Iterate Element' pattern.
|
|
724
|
+
</p>
|
|
725
|
+
<br>
|
|
726
|
+
|
|
727
|
+
<a name="iterate-elem-situation"></a>
|
|
728
|
+
<h4 class="section3">Situation</h4>
|
|
729
|
+
<p>The situation is very popular which requres to print list items.
|
|
730
|
+
This pattern is very useful for all these situations.
|
|
731
|
+
</p>
|
|
732
|
+
<br>
|
|
733
|
+
|
|
734
|
+
<a name="iterate-elem-example"></a>
|
|
735
|
+
<h4 class="section3">Example Code</h4>
|
|
736
|
+
<a name="iterate_elem.pdata"></a>
|
|
737
|
+
<div class="program_caption">
|
|
738
|
+
Presentation Data:</div>
|
|
739
|
+
<pre class="program"><table>
|
|
740
|
+
<tr <b>id="mark:list"</b>>
|
|
741
|
+
<td title="value: item">item</td>
|
|
742
|
+
</tr>
|
|
743
|
+
</table>
|
|
744
|
+
</pre>
|
|
745
|
+
<a name="iterate_elem.plogic"></a>
|
|
746
|
+
<div class="program_caption">
|
|
747
|
+
Presentation Logic:</div>
|
|
748
|
+
<pre class="program">/* iterate element */
|
|
749
|
+
#list {
|
|
750
|
+
logic: {
|
|
751
|
+
<b>for item in list</b>
|
|
752
|
+
_stag
|
|
753
|
+
_cont
|
|
754
|
+
_etag
|
|
755
|
+
<b>end</b>
|
|
756
|
+
}
|
|
757
|
+
}
|
|
758
|
+
</pre>
|
|
759
|
+
<a name="iterate_elem.expected"></a>
|
|
760
|
+
<div class="output_caption">
|
|
761
|
+
Output Script:</div>
|
|
762
|
+
<pre class="output"><table>
|
|
763
|
+
<% for item in list %>
|
|
764
|
+
<tr>
|
|
765
|
+
<td><%= item %></td>
|
|
766
|
+
</tr>
|
|
767
|
+
<% end %>
|
|
768
|
+
</table>
|
|
769
|
+
</pre>
|
|
770
|
+
<br>
|
|
771
|
+
|
|
772
|
+
<a name="iterate-elem-supplement"></a>
|
|
773
|
+
<h4 class="section3">Supplement</h4>
|
|
774
|
+
<p>Kwartz directive <code>title="for <i>item</i> in <i>list</i>"</code> lets you to use this pattern without presentation logic file.
|
|
775
|
+
See reference manual for details.
|
|
776
|
+
</p>
|
|
777
|
+
<pre class="program"><table>
|
|
778
|
+
<tr <b>title="for item in list"</b>>
|
|
779
|
+
<td title="value: item">item</td>
|
|
780
|
+
</tr>
|
|
781
|
+
</table>
|
|
782
|
+
</pre>
|
|
783
|
+
<br>
|
|
784
|
+
|
|
785
|
+
<br>
|
|
786
|
+
|
|
787
|
+
|
|
788
|
+
<a name="iterate-cont"></a>
|
|
789
|
+
<h3 class="section2">Iterate Content Pattern</h3>
|
|
790
|
+
<a name="iterate-cont-desc"></a>
|
|
791
|
+
<h4 class="section3">Description</h4>
|
|
792
|
+
<p>Iteration which contains only <code>_cont</code> represents to iterate the content.
|
|
793
|
+
This pattern is named 'Iterate Content' pattern.
|
|
794
|
+
</p>
|
|
795
|
+
<br>
|
|
796
|
+
|
|
797
|
+
<a name="iterate-cont-situation"></a>
|
|
798
|
+
<h4 class="section3">Situation</h4>
|
|
799
|
+
<p>This pattern is very useful when creating <dl></dl> list or table which repeats several rows.
|
|
800
|
+
</p>
|
|
801
|
+
<br>
|
|
802
|
+
|
|
803
|
+
<a name="iterate-cont-example"></a>
|
|
804
|
+
<h4 class="section3">Example Code</h4>
|
|
805
|
+
<a name="iterate_cont.pdata"></a>
|
|
806
|
+
<div class="program_caption">
|
|
807
|
+
Presentation Data:</div>
|
|
808
|
+
<pre class="program"><dl <b>id="mark:list"</b>>
|
|
809
|
+
<dt title="value: item.text">text</dt>
|
|
810
|
+
<dd title="value: item.desc">description</dd>
|
|
811
|
+
</dl>
|
|
812
|
+
</pre>
|
|
813
|
+
<a name="iterate_cont.plogic"></a>
|
|
814
|
+
<div class="program_caption">
|
|
815
|
+
Presentation Logic:</div>
|
|
816
|
+
<pre class="program">/* iterate only content */
|
|
817
|
+
#list {
|
|
818
|
+
logic: {
|
|
819
|
+
_stag
|
|
820
|
+
<b>for item in items</b>
|
|
821
|
+
_cont
|
|
822
|
+
<b>end</b>
|
|
823
|
+
_etag
|
|
824
|
+
}
|
|
825
|
+
}
|
|
826
|
+
</pre>
|
|
827
|
+
<a name="iterate_cont.expected"></a>
|
|
828
|
+
<div class="output_caption">
|
|
829
|
+
Output Script:</div>
|
|
830
|
+
<pre class="output"><dl>
|
|
831
|
+
<% for item in items %>
|
|
832
|
+
<dt><%= item.text %></dt>
|
|
833
|
+
<dd><%= item.desc %></dd>
|
|
834
|
+
<% end %>
|
|
835
|
+
</dl>
|
|
836
|
+
</pre>
|
|
837
|
+
<br>
|
|
838
|
+
|
|
839
|
+
<a name="iterate-cont-supplement"></a>
|
|
840
|
+
<h4 class="section3">Supplement</h4>
|
|
841
|
+
<p>Kwartz directive <code>title="list <i>item</i> in <i>list</i>"</code> lets you to use this pattern without presentation logic file.
|
|
842
|
+
See reference manual for details.
|
|
843
|
+
</p>
|
|
844
|
+
<pre class="program"><dl <b>title="list item in items"</b>>
|
|
845
|
+
<dt title="value: item.text">text</dt>
|
|
846
|
+
<dd title="value: item.desc">description</dd>
|
|
847
|
+
</dl>
|
|
848
|
+
</pre>
|
|
849
|
+
<br>
|
|
850
|
+
|
|
851
|
+
<br>
|
|
852
|
+
|
|
853
|
+
|
|
854
|
+
<br>
|
|
855
|
+
|
|
856
|
+
|
|
857
|
+
<a name="selection"></a>
|
|
858
|
+
<h2 class="section1">Selection</h2>
|
|
859
|
+
<a name="select-elem"></a>
|
|
860
|
+
<h3 class="section2">Select Element/Content Pattern</h3>
|
|
861
|
+
<a name="select-elem-desc"></a>
|
|
862
|
+
<h4 class="section3">Description</h4>
|
|
863
|
+
<p>The following is an example to choose a certain element or content from some elements.
|
|
864
|
+
This pattern is named 'Select Element Pattern' or 'Select Content Pattern'.
|
|
865
|
+
</p>
|
|
866
|
+
<br>
|
|
867
|
+
|
|
868
|
+
<a name="select-elem-situation"></a>
|
|
869
|
+
<h4 class="section3">Situation</h4>
|
|
870
|
+
<p>This pattern is very useful when you want to change data according to conditions.
|
|
871
|
+
</p>
|
|
872
|
+
<br>
|
|
873
|
+
|
|
874
|
+
<a name="select-elem-example"></a>
|
|
875
|
+
<h4 class="section3">Example Code</h4>
|
|
876
|
+
<a name="select_elem.pdata"></a>
|
|
877
|
+
<div class="program_caption">
|
|
878
|
+
Presentation Data:</div>
|
|
879
|
+
<pre class="program"><div id="mark:message">
|
|
880
|
+
<span style="color:red" <b>id="mark:error"</b>>ERROR!</span>
|
|
881
|
+
<span style="color:blue" <b>id="mark:warning"</b>>Warning:</span>
|
|
882
|
+
<span style="color:black" <b>id="mark:good"</b>>No error.</span>
|
|
883
|
+
</div>
|
|
884
|
+
</pre>
|
|
885
|
+
<a name="select_elem.plogic"></a>
|
|
886
|
+
<div class="program_caption">
|
|
887
|
+
Presentation Logic:</div>
|
|
888
|
+
<pre class="program">/* select element according to status */
|
|
889
|
+
#message {
|
|
890
|
+
logic: {
|
|
891
|
+
if status == 'error'
|
|
892
|
+
<b>_element(error)</b> # ERROR!
|
|
893
|
+
else if (status == 'warning')
|
|
894
|
+
<b>_element(warning)</b> # Warning:
|
|
895
|
+
else
|
|
896
|
+
<b>_element(good)</b> # No error.
|
|
897
|
+
end
|
|
898
|
+
}
|
|
899
|
+
}
|
|
900
|
+
</pre>
|
|
901
|
+
<a name="select_elem.expected"></a>
|
|
902
|
+
<div class="output_caption">
|
|
903
|
+
Output Script:</div>
|
|
904
|
+
<pre class="output"><% if status == 'error' %>
|
|
905
|
+
<span style="color:red">ERROR!</span>
|
|
906
|
+
<% else if (status == 'warning') %>
|
|
907
|
+
<span style="color:blue">Warning:</span>
|
|
908
|
+
<% else %>
|
|
909
|
+
<span style="color:black">No error.</span>
|
|
910
|
+
<% end %>
|
|
911
|
+
</pre>
|
|
912
|
+
<br>
|
|
913
|
+
|
|
914
|
+
<a name="select-elem-supplement"></a>
|
|
915
|
+
<h4 class="section3">Supplement</h4>
|
|
916
|
+
<p> Kwartz directive '<code>title="if <i>condition</i>"</code>', '<code>title="elsif <i>condition</i>"</code>',
|
|
917
|
+
and '<code>title="else"</code>' let you to use this pattern without presentation logic file.
|
|
918
|
+
</p>
|
|
919
|
+
<pre class="program"><div>
|
|
920
|
+
<span style="color:red" <b>title="if status=='error'"</b>>ERROR!</span>
|
|
921
|
+
<span style="color:blue" <b>title="elsif status=='warning'"</b>>Warning:</span>
|
|
922
|
+
<span style="color:black" <b>title="else"</b>>No error.</span>
|
|
923
|
+
</div>
|
|
924
|
+
</pre>
|
|
925
|
+
<br>
|
|
926
|
+
|
|
927
|
+
<br>
|
|
928
|
+
|
|
929
|
+
|
|
930
|
+
<a name="pickup-elem"></a>
|
|
931
|
+
<h3 class="section2">Pick-up Element/Content Pattern</h3>
|
|
932
|
+
<a name="pickup-elem-desc"></a>
|
|
933
|
+
<h4 class="section3">Description</h4>
|
|
934
|
+
<p>If you want to use certain elements or contents, do marking the elements and use only them in presentation logic.
|
|
935
|
+
Unmarked elements are ignored and not printed.
|
|
936
|
+
This pattern is named 'Pick-up Element Pattern' or 'Pick-up Content Pattern'.
|
|
937
|
+
</p>
|
|
938
|
+
<p>'Pick-up Element' pattern is opposite of 'Dummy Element' pattern.
|
|
939
|
+
In 'Dummy Element' pattern, dummy elements are marked and removed so that necessary elements are leaved.
|
|
940
|
+
In 'Pick-up Element' pattern, necessary elements are marked and leaved so that dummy elements are removed.
|
|
941
|
+
</p>
|
|
942
|
+
<br>
|
|
943
|
+
|
|
944
|
+
<a name="pickup-elem-situation"></a>
|
|
945
|
+
<h4 class="section3">Situation</h4>
|
|
946
|
+
<p>This pattern is useful when many dummy datas are exist.
|
|
947
|
+
</p>
|
|
948
|
+
<br>
|
|
949
|
+
|
|
950
|
+
<a name="pickup-elem-example"></a>
|
|
951
|
+
<h4 class="section3">Example Code</h4>
|
|
952
|
+
<a name="pickup_elem.pdata"></a>
|
|
953
|
+
<div class="program_caption">
|
|
954
|
+
Presentation Data:</div>
|
|
955
|
+
<pre class="program"><html>
|
|
956
|
+
<body>
|
|
957
|
+
<div <b>id="breadcrumbs"</b>>
|
|
958
|
+
<a href="/" <b>id="mark:crumb"</b>>Home</a>
|
|
959
|
+
<span <b>id="mark:separator"</b>>&gt;</span>
|
|
960
|
+
<a href="/aaa/">AAA</a> &lt;
|
|
961
|
+
<a href="/aaa/bbb/">BBB</a> &lgt;
|
|
962
|
+
<a href="/aaa/bbb/ccc">CCC</a> &lgt;
|
|
963
|
+
<strong <b>id="mark:title"</b>>title</strong>
|
|
964
|
+
</div>
|
|
965
|
+
</body>
|
|
966
|
+
</html>
|
|
967
|
+
</pre>
|
|
968
|
+
<a name="pickup_elem.plogic"></a>
|
|
969
|
+
<div class="program_caption">
|
|
970
|
+
Presentation Logic:</div>
|
|
971
|
+
<pre class="program">#breadcrumbs {
|
|
972
|
+
logic: {
|
|
973
|
+
for item in list
|
|
974
|
+
<b>_element(crumb)</b> # print <a>...</a>
|
|
975
|
+
<b>_content(separator)</b> # print '&gt;'
|
|
976
|
+
end
|
|
977
|
+
<b>_element(title)</b> # print <strong>title</strong>
|
|
978
|
+
}
|
|
979
|
+
}
|
|
980
|
+
|
|
981
|
+
#crumb {
|
|
982
|
+
value: item['name'];
|
|
983
|
+
attrs: "href" item['path'];
|
|
984
|
+
}
|
|
985
|
+
#title {
|
|
986
|
+
value: title;
|
|
987
|
+
}
|
|
988
|
+
</pre>
|
|
989
|
+
<a name="pickup_elem.expected"></a>
|
|
990
|
+
<div class="output_caption">
|
|
991
|
+
Output Script:</div>
|
|
992
|
+
<pre class="output"><html>
|
|
993
|
+
<body>
|
|
994
|
+
<% for item in list %>
|
|
995
|
+
<a href="<%= item['path'] %>"><%= item['name'] %></a>
|
|
996
|
+
&gt;<% end %>
|
|
997
|
+
<strong><%= title %></strong>
|
|
998
|
+
</body>
|
|
999
|
+
</html>
|
|
1000
|
+
</pre>
|
|
1001
|
+
<br>
|
|
1002
|
+
|
|
1003
|
+
<br>
|
|
1004
|
+
|
|
1005
|
+
|
|
1006
|
+
<a name="extract-elem"></a>
|
|
1007
|
+
<h3 class="section2">Extract Element/Content Pattern</h3>
|
|
1008
|
+
<a name="extract-elem-desc"></a>
|
|
1009
|
+
<h4 class="section3">Description</h4>
|
|
1010
|
+
<p>It is able to extract a certain element or content form the whole presentation data.
|
|
1011
|
+
Other element and text strings are not printed.
|
|
1012
|
+
This pattern is named 'Extract Element Pattern' or 'Extract Content Pattern'.
|
|
1013
|
+
</p>
|
|
1014
|
+
<br>
|
|
1015
|
+
|
|
1016
|
+
<a name="extract-elem-situation"></a>
|
|
1017
|
+
<h4 class="section3">Situation</h4>
|
|
1018
|
+
<p>This pattern is very useful to extract HTML fragments and make them libraries.
|
|
1019
|
+
</p>
|
|
1020
|
+
<br>
|
|
1021
|
+
|
|
1022
|
+
<a name="extract-elem-example"></a>
|
|
1023
|
+
<h4 class="section3">Example Code</h4>
|
|
1024
|
+
<p>The following is an example to extract the HTML fragments 'tablist', 'menulist', and 'copyright' and generates the output scripts for them.
|
|
1025
|
+
</p>
|
|
1026
|
+
<a name="design.html"></a>
|
|
1027
|
+
<div class="program_caption">
|
|
1028
|
+
Presentation Data (<a href="p-pattern/design.html">design.html</a>):</div>
|
|
1029
|
+
<pre class="program"><html <b>id="mark:whole"</b>>
|
|
1030
|
+
<head>
|
|
1031
|
+
<title>Design Examples</title>
|
|
1032
|
+
<link rel="stylesheet" href="design.css" type="text/css">
|
|
1033
|
+
</head>
|
|
1034
|
+
<body>
|
|
1035
|
+
|
|
1036
|
+
<div <b>id="mark:tablist"</b>>
|
|
1037
|
+
<div class="tabs" id="mark:tabs">
|
|
1038
|
+
<a href="/" class="" <b>id="mark:tab"</b>>Home</a>
|
|
1039
|
+
<a href="/product/" class="selected">Product</a>
|
|
1040
|
+
<a href="/download/" class="">Download</a>
|
|
1041
|
+
<a href="/support/" class="">Support</a>
|
|
1042
|
+
</div>
|
|
1043
|
+
<div class="tabsline">
|
|
1044
|
+
</div>
|
|
1045
|
+
</div>
|
|
1046
|
+
|
|
1047
|
+
<br>
|
|
1048
|
+
|
|
1049
|
+
<div <b>id="mark:menulist"</b>>
|
|
1050
|
+
<span class="menu_title" id="value:menu_title">MenuList</span>
|
|
1051
|
+
<div class="menus" <b>id="mark:menus"</b>>
|
|
1052
|
+
<a href="/cgi-bin/email.cgi" class="" <b>id="mark:menu"</b>>E-Mail</a>
|
|
1053
|
+
<span <b>id="mark:menu_separator"</b>><br></span>
|
|
1054
|
+
<a href="/cgi-bin/board.cgi" class="selected">MesgBoard</a><br>
|
|
1055
|
+
<a href="/cgi-bin/photo.cgi" class="">PhotoAlbum</a><br>
|
|
1056
|
+
<a href="/cgi-bin/greeting.cgi" class="">GreetingCard</a><br>
|
|
1057
|
+
</div>
|
|
1058
|
+
</div>
|
|
1059
|
+
<br>
|
|
1060
|
+
|
|
1061
|
+
<p> ..... </p>
|
|
1062
|
+
<p> ..... </p>
|
|
1063
|
+
<p> ..... </p>
|
|
1064
|
+
|
|
1065
|
+
<div align="center" class="copyright" <b>id="mark:copyright"</b>>
|
|
1066
|
+
Copyright&copy; 2004-2005 kuwata-lab. All Rights Reserved.
|
|
1067
|
+
</div>
|
|
1068
|
+
|
|
1069
|
+
</body>
|
|
1070
|
+
</html>
|
|
1071
|
+
</pre>
|
|
1072
|
+
<a name="copyright.plogic"></a>
|
|
1073
|
+
<div class="program_caption">
|
|
1074
|
+
Presentation Logic (copyright.plogic):</div>
|
|
1075
|
+
<pre class="program">/* replace the 'whole' element with the element you want to extract */
|
|
1076
|
+
<b>#whole</b> {
|
|
1077
|
+
logic: {
|
|
1078
|
+
<b>_element(copyright)</b>
|
|
1079
|
+
}
|
|
1080
|
+
}
|
|
1081
|
+
</pre>
|
|
1082
|
+
<a name="tablist.plogic"></a>
|
|
1083
|
+
<div class="program_caption">
|
|
1084
|
+
Presentation Logic (tablist.plogic):</div>
|
|
1085
|
+
<pre class="program">/* replace the 'whole' element with the element you want to extract */
|
|
1086
|
+
<b>#whole</b> {
|
|
1087
|
+
logic: {
|
|
1088
|
+
<b>_element(tablist)</b>
|
|
1089
|
+
}
|
|
1090
|
+
}
|
|
1091
|
+
|
|
1092
|
+
#tabs {
|
|
1093
|
+
logic: {
|
|
1094
|
+
_stag
|
|
1095
|
+
for tab in tablist
|
|
1096
|
+
klass = current_tabname == tab['name'] ? 'selected' : ''
|
|
1097
|
+
_element(tab)
|
|
1098
|
+
end
|
|
1099
|
+
_etag
|
|
1100
|
+
}
|
|
1101
|
+
}
|
|
1102
|
+
|
|
1103
|
+
#tab {
|
|
1104
|
+
value: tab['name'];
|
|
1105
|
+
attrs: "href" tab['href'],
|
|
1106
|
+
"class" klass;
|
|
1107
|
+
}
|
|
1108
|
+
</pre>
|
|
1109
|
+
<a name="menulist.plogic"></a>
|
|
1110
|
+
<div class="program_caption">
|
|
1111
|
+
Presentation Logic (menulist.plogic):</div>
|
|
1112
|
+
<pre class="program">/* replace the 'whole' element with the element you want to extract */
|
|
1113
|
+
<b>#whole</b> {
|
|
1114
|
+
logic: {
|
|
1115
|
+
<b>_element(menulist)</b>
|
|
1116
|
+
}
|
|
1117
|
+
}
|
|
1118
|
+
|
|
1119
|
+
#menus {
|
|
1120
|
+
logic: {
|
|
1121
|
+
_stag
|
|
1122
|
+
foreach (menu in menulist) {
|
|
1123
|
+
_element(menu)
|
|
1124
|
+
_element(menu_separator)
|
|
1125
|
+
}
|
|
1126
|
+
_etag
|
|
1127
|
+
}
|
|
1128
|
+
}
|
|
1129
|
+
|
|
1130
|
+
#menu {
|
|
1131
|
+
value: menu['name'];
|
|
1132
|
+
attrs: "href" menu['cgipath'],
|
|
1133
|
+
"class" klass;
|
|
1134
|
+
logic: {
|
|
1135
|
+
klass = current_menu == menu['name'] ? 'selected' : ''
|
|
1136
|
+
_elem
|
|
1137
|
+
}
|
|
1138
|
+
}
|
|
1139
|
+
</pre>
|
|
1140
|
+
<div class="terminal_caption">
|
|
1141
|
+
Compile:</div>
|
|
1142
|
+
<pre class="terminal">### copyright
|
|
1143
|
+
$ kwartz -l eruby -p copyright.plogic design.pdata > copyright.rhtml
|
|
1144
|
+
|
|
1145
|
+
### tablist
|
|
1146
|
+
$ kwartz -l eruby -p tablist.plogic design.pdata > tablist.rhtml
|
|
1147
|
+
|
|
1148
|
+
### menulist
|
|
1149
|
+
$ kwartz -l eruby -p menulist.plogic design.pdata > menulist.rhtml
|
|
1150
|
+
</pre>
|
|
1151
|
+
<a name="copyright.expected"></a>
|
|
1152
|
+
<div class="output_caption">
|
|
1153
|
+
Output Script (copyright.rhtml):</div>
|
|
1154
|
+
<pre class="output"> <div align="center" class="copyright">
|
|
1155
|
+
Copyright&copy; 2004-2005 kuwata-lab. All Rights Reserved.
|
|
1156
|
+
</div>
|
|
1157
|
+
</pre>
|
|
1158
|
+
<a name="tablist.expected"></a>
|
|
1159
|
+
<div class="output_caption">
|
|
1160
|
+
Output Script (tablist.rhtml):</div>
|
|
1161
|
+
<pre class="output"> <div>
|
|
1162
|
+
<div class="tabs">
|
|
1163
|
+
<% for tab in tablist %>
|
|
1164
|
+
<% klass = current_tabname == tab['name'] ? 'selected' : '' %>
|
|
1165
|
+
<a href="<%= tab['href'] %>" class="<%= klass %>"><%= tab['name'] %></a>
|
|
1166
|
+
<% end %>
|
|
1167
|
+
</div>
|
|
1168
|
+
<div class="tabsline">
|
|
1169
|
+
</div>
|
|
1170
|
+
</div>
|
|
1171
|
+
</pre>
|
|
1172
|
+
<a name="menulist.expected"></a>
|
|
1173
|
+
<div class="output_caption">
|
|
1174
|
+
Output Script (menulist.rhtml):</div>
|
|
1175
|
+
<pre class="output"> <div>
|
|
1176
|
+
<span class="menu_title" id="value:menu_title">MenuList</span>
|
|
1177
|
+
<div class="menus">
|
|
1178
|
+
<% foreach (menu in menulist) { %>
|
|
1179
|
+
<% klass = current_menu == menu['name'] ? 'selected' : '' %>
|
|
1180
|
+
<a href="<%= menu['cgipath'] %>" class="<%= klass %>"><%= menu['name'] %></a>
|
|
1181
|
+
<span><br></span>
|
|
1182
|
+
<% } %>
|
|
1183
|
+
</div>
|
|
1184
|
+
</div>
|
|
1185
|
+
</pre>
|
|
1186
|
+
<br>
|
|
1187
|
+
|
|
1188
|
+
<a name="extract-elem-supplement"></a>
|
|
1189
|
+
<h4 class="section3">Supplement</h4>
|
|
1190
|
+
<p> The command-line option '<code>-X <i>name</i></code>' extracts the element marked with <code><i>name</i></code> in kwartz-ruby.
|
|
1191
|
+
</p>
|
|
1192
|
+
<p> The command-line option '<code>-x <i>name</i></code>' extracts the content of the element marked with <code><i>name</i></code> in kwartz-ruby.
|
|
1193
|
+
</p>
|
|
1194
|
+
<br>
|
|
1195
|
+
|
|
1196
|
+
<br>
|
|
1197
|
+
|
|
1198
|
+
|
|
1199
|
+
<br>
|
|
1200
|
+
|
|
1201
|
+
|
|
1202
|
+
|
|
1203
|
+
</div>
|
|
1204
|
+
</blockquote>
|
|
1205
|
+
|
|
1206
|
+
</body>
|
|
1207
|
+
</html>
|