kwartz 3.0.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
@@ -0,0 +1,1670 @@
|
|
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>Kwartz 3.0 Users' Guide</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>Kwartz 3.0 Users' Guide</h1></div>
|
17
|
+
<div align="left">
|
18
|
+
Makoto Kuwata <kwa(at)kuwata-lab.com><br>
|
19
|
+
last update: $Date: 2006-05-22 22:25:43 +0900 (Mon, 22 May 2006) $<br>
|
20
|
+
</div>
|
21
|
+
|
22
|
+
<a name="preface"></a>
|
23
|
+
<h2 class="section1">Preface</h2>
|
24
|
+
<p>This is the users' guide of Kwartz<sup>(<a href="#fnref:1" name="fnlink:1">*1</a>)</sup>,
|
25
|
+
a template system which realized the concept of 'Independence of Presentation Logic'.
|
26
|
+
</p>
|
27
|
+
<div class="footnote">
|
28
|
+
<dl compact>
|
29
|
+
<dt>(<a name="fnref:1" href="#fnlink:1">*1</a>)</dt>
|
30
|
+
<dd>Development of Kwartz had subsidized by Exploratory Software Project of <a href="http://www.ipa.go.jp/about/english/index.html">IPA (Information-Technology Promotion Agency Japan)</a>.</dd>
|
31
|
+
</dl>
|
32
|
+
</div>
|
33
|
+
<a name="toc"></a>
|
34
|
+
<h3 class="section2">Table of Contents</h3>
|
35
|
+
<ul>
|
36
|
+
<li><a href="#preface">Preface</a>
|
37
|
+
<ul>
|
38
|
+
<li><a href="#toc">Table of Contents</a>
|
39
|
+
</li>
|
40
|
+
</ul>
|
41
|
+
</li>
|
42
|
+
<li><a href="#intro">Introduction to Kwartz</a>
|
43
|
+
<ul>
|
44
|
+
<li><a href="#whatis">What's Kwartz?</a>
|
45
|
+
</li>
|
46
|
+
<li><a href="#features">Features Overview</a>
|
47
|
+
</li>
|
48
|
+
<li><a href="#example1">Simple Example</a>
|
49
|
+
</li>
|
50
|
+
<li><a href="#example2">Complex Example</a>
|
51
|
+
</li>
|
52
|
+
<li><a href="#pattern">Other Examples of Presentation Logic</a>
|
53
|
+
</li>
|
54
|
+
</ul>
|
55
|
+
</li>
|
56
|
+
<li><a href="#detail">Features Detail</a>
|
57
|
+
<ul>
|
58
|
+
<li><a href="#ruleset">RuleSet and Properties</a>
|
59
|
+
</li>
|
60
|
+
<li><a href="#directives">Directives</a>
|
61
|
+
</li>
|
62
|
+
<li><a href="#escape">Escape</a>
|
63
|
+
</li>
|
64
|
+
<li><a href="#langs">Multi-language</a>
|
65
|
+
</li>
|
66
|
+
<li><a href="#span">Span Tag Deletion</a>
|
67
|
+
</li>
|
68
|
+
<li><a href="#import-plogic">Import Presentation Logic File</a>
|
69
|
+
</li>
|
70
|
+
<li><a href="#import-elem">Import Elements in Other Files</a>
|
71
|
+
</li>
|
72
|
+
<li><a href="#extract">Extract Element</a>
|
73
|
+
</li>
|
74
|
+
<li><a href="#print-statement">Print Statement</a>
|
75
|
+
</li>
|
76
|
+
<li><a href="#begin">Add Code at Beginning/End of Document</a>
|
77
|
+
</li>
|
78
|
+
</ul>
|
79
|
+
</li>
|
80
|
+
<li><a href="#topics">Other Topics</a>
|
81
|
+
<ul>
|
82
|
+
<li><a href="#restriction1">Restrictions around presentation logic</a>
|
83
|
+
</li>
|
84
|
+
<li><a href="#restriction2">Restrictions around presentation data</a>
|
85
|
+
</li>
|
86
|
+
<li><a href="#makefile">Makefile and Rakefile</a>
|
87
|
+
</li>
|
88
|
+
<li><a href="#kwartz-lib">Use Kwartz as Library</a>
|
89
|
+
</li>
|
90
|
+
<li><a href="#start_link_to"><code>link_to()</code> method in Ruby on Rails</a>
|
91
|
+
</li>
|
92
|
+
</ul>
|
93
|
+
</li>
|
94
|
+
</ul>
|
95
|
+
<br>
|
96
|
+
|
97
|
+
|
98
|
+
<br>
|
99
|
+
|
100
|
+
|
101
|
+
<a name="intro"></a>
|
102
|
+
<h2 class="section1">Introduction to Kwartz</h2>
|
103
|
+
<a name="whatis"></a>
|
104
|
+
<h3 class="section2">What's Kwartz?</h3>
|
105
|
+
<p>Kwartz<sup>(<a href="#fnref:2" name="fnlink:2">*2</a>)</sup> is a template system
|
106
|
+
which realized the concept of <b>'Independence of Presentation Logic'(IoPL)</b>.
|
107
|
+
It means that Kwartz separates presentaion logics from both presentation data (typically HTML document) and business logics.
|
108
|
+
</p>
|
109
|
+
<p>You know CSS (Cascading Style Sheet). CSS separates design from HTML file.
|
110
|
+
In the same way, Kwartz separates presentation logics from HTML template.
|
111
|
+
If you are familiar with CSS, you'll be also familiar with Kwartz.
|
112
|
+
</p>
|
113
|
+
<p>The following figure show the relation of HTML, CSS, JavaScript, and Kwartz.
|
114
|
+
</p>
|
115
|
+
<ul type="disc">
|
116
|
+
<li>HTML represents document structure.
|
117
|
+
</li>
|
118
|
+
<li>CSS represents document design.
|
119
|
+
</li>
|
120
|
+
<li>JavaScript represents client-side logics.
|
121
|
+
</li>
|
122
|
+
<li>Kwartz represents server-side presentation logics.<br>
|
123
|
+
(Notice that Kwartz represents only presentation logics and not business logics.)
|
124
|
+
</li>
|
125
|
+
</ul>
|
126
|
+
<div style="text-align: center">
|
127
|
+
<span>Figure1. Relation of HTML, CSS, JavaScript, and Kwartz.</span><br />
|
128
|
+
<img src="img/fig04.png" alt="relation of HTML, CSS, JavaScript, and Kwartz" />
|
129
|
+
</div>
|
130
|
+
<p>Kwartz-ruby is an implemenation of Kwartz in Ruby.
|
131
|
+
There is a plan to implement Kwartz in PHP or Java.
|
132
|
+
</p>
|
133
|
+
<p>In the following, the word 'Kwartz' means the specification of the template system
|
134
|
+
and the word 'Kwartz-ruby' means the implementation of it in Ruby language.
|
135
|
+
</p>
|
136
|
+
<div class="footnote">
|
137
|
+
<dl compact>
|
138
|
+
<dt>(<a name="fnref:2" href="#fnlink:2">*2</a>)</dt>
|
139
|
+
<dd>'Kwartz' is pronounced like 'Quartz'.</dd>
|
140
|
+
</dl>
|
141
|
+
</div>
|
142
|
+
<br>
|
143
|
+
|
144
|
+
|
145
|
+
<a name="features"></a>
|
146
|
+
<h3 class="section2">Features Overview</h3>
|
147
|
+
<p>Kwartz has the following features:
|
148
|
+
</p>
|
149
|
+
<dl class="dl2">
|
150
|
+
<dt class="dt2">
|
151
|
+
Separates presentation logic from presentation data.</dt>
|
152
|
+
<dd class="dd2">
|
153
|
+
<p> Using template systems such as Smarty, Velocity, XMLC, amrita, etc,
|
154
|
+
you can separate HTML design from business logic as a template.
|
155
|
+
With Kwartz, you can separate presentation logic from a template.
|
156
|
+
In other words, Kwartz divides a template into 'presentation data' and 'presentation logic'.
|
157
|
+
You need not mix presentation logic into HTML files nor main program.
|
158
|
+
</p>
|
159
|
+
</dd>
|
160
|
+
<dt class="dt2">
|
161
|
+
Very fast</dt>
|
162
|
+
<dd class="dd2">
|
163
|
+
<p> Kwartz creates a script from a template (= presentation data and presentaion logic).
|
164
|
+
All you have to do in main program is to call the output script.
|
165
|
+
Because Kwartz doesn't use DOM trees or the like, it is both fast and light-weight.
|
166
|
+
</p>
|
167
|
+
</dd>
|
168
|
+
<dt class="dt2">
|
169
|
+
Multi-languages support</dt>
|
170
|
+
<dd class="dd2">
|
171
|
+
<p> Kwartz can create output scripts for Ruby(eRuby), PHP, JSP(JSTL 1.2 & 1.1).
|
172
|
+
Presentation logics are written in each language<sup>(<a href="#fnref:3" name="fnlink:3">*3</a>)</sup>.
|
173
|
+
This approach gives you the power of the target language fully.
|
174
|
+
For example, you can write Ruby on Rails helper method (such as <code>link_to</code>, <code>field_tag</code>, and so on) directly in your template file.
|
175
|
+
</p>
|
176
|
+
</dd>
|
177
|
+
<dt class="dt2">
|
178
|
+
Doesn't break HTML design at all</dt>
|
179
|
+
<dd class="dd2">
|
180
|
+
<p> You must use directives like
|
181
|
+
<code>{foreach ...}{/foreach}</code> in <a href="http://smarty.php.net/">Smarty</a> or
|
182
|
+
<code>#foreach(...)</code> in <a href="http://jakarta.apache.org/velocity/">Jakarta Velocity</a>.
|
183
|
+
These directives break the HTML design of template.
|
184
|
+
Kwartz doesn't break HTML design because Kwartz uses id or title attributes for marking in an HTML template.
|
185
|
+
</p>
|
186
|
+
</dd>
|
187
|
+
<dt class="dt2">
|
188
|
+
Able to handle any text file</dt>
|
189
|
+
<dd class="dd2">
|
190
|
+
<p> Kwartz uses an original template parser; not using an HTML or XML parser,
|
191
|
+
it is able to handle any type of text file (HTML, PostScript, CSV, and so on).
|
192
|
+
This also means that Kwartz can handle non-well-formed XML files, as well as well-formed XML files.
|
193
|
+
This is an advantage of Kwartz against <a href="http://xmlc.objectweb.org/">Enhydra XMLC</a> or
|
194
|
+
<a href="http://amrita.sourceforge.jp/">amrita</a>, which handle only XML/HTML files.
|
195
|
+
</p>
|
196
|
+
</dd>
|
197
|
+
<dt class="dt2">
|
198
|
+
Auto-escape and Partial-escape</dt>
|
199
|
+
<dd class="dd2">
|
200
|
+
<p> Kwartz can do sanitizing automatically.
|
201
|
+
You don't need to write '<code>CGI.escapeHTML(var)</code>' or '<code>htmlspecialchars($var)</code>'.
|
202
|
+
You are free to turn sanitizing on/off, as well specifying which parts of the template to sanitize.
|
203
|
+
</p>
|
204
|
+
</dd>
|
205
|
+
</dl>
|
206
|
+
<div class="footnote">
|
207
|
+
<dl compact>
|
208
|
+
<dt>(<a name="fnref:3" href="#fnlink:3">*3</a>)</dt>
|
209
|
+
<dd>Previous version of Kwartz adopt original language and convert it to each target language(Ruby, PHP, JSTL, and so on). From Current version, it is required to write presentation logic in target language.</dd>
|
210
|
+
</dl>
|
211
|
+
</div>
|
212
|
+
<br>
|
213
|
+
|
214
|
+
|
215
|
+
<a name="example1"></a>
|
216
|
+
<h3 class="section2">Simple Example</h3>
|
217
|
+
<p>In Kwartz, a template is defined as both presentation data and presentation logic.
|
218
|
+
They may be described in separate files.
|
219
|
+
</p>
|
220
|
+
<p>This is an example of a presentation data file.
|
221
|
+
</p>
|
222
|
+
<ul type="disc">
|
223
|
+
<li>'<b><code>id="list1"</code></b>' means "I'll operate this element in presentation logic" (called 'marking' in Kwartz).
|
224
|
+
</li>
|
225
|
+
<li>'<b><code>id="mark:item1"</code></b>' is also an marking.
|
226
|
+
Difference between <code>id="mark:item1"</code> and <code>id="item1"</code> is that id attribute in the former format is removed automatically and the latter format is leaved.
|
227
|
+
</li>
|
228
|
+
</ul>
|
229
|
+
<p>Presentation data file(example1.html):
|
230
|
+
</p>
|
231
|
+
<a name="example1.html"></a>
|
232
|
+
<pre class="program"><table>
|
233
|
+
<tr <b>id="list1"</b>>
|
234
|
+
<td <b>id="mark:item1"</b>>foo</td>
|
235
|
+
</tr>
|
236
|
+
</table>
|
237
|
+
</pre>
|
238
|
+
<p>And the following is an example of presentation logic.
|
239
|
+
In presentation logic, you can operate on elements which are marked in presentation data.
|
240
|
+
</p>
|
241
|
+
<ul type="disc">
|
242
|
+
<li>'<b><code>#list1 { ... }</code></b>' represents an element marked with name 'list1' (= '<tr>...</tr>')
|
243
|
+
<ul type="circle">
|
244
|
+
<li>'<b><code>logic: { ... }</code></b>' represents presentation logic of the element.
|
245
|
+
</li>
|
246
|
+
<li>'<b><code>_stag</code></b>' represents a start tag (= '<tr>').
|
247
|
+
</li>
|
248
|
+
<li>'<b><code>_cont</code></b>' represents content(= '<td id="mark:item1">foo</td>').
|
249
|
+
</li>
|
250
|
+
<li>'<b><code>_etag</code></b>' represents an end tag(= '</tr>').
|
251
|
+
</li>
|
252
|
+
<li>'<b><code>for <i>var</i> in <i>list</i> ...</code></b>' is a Ruby code to loop.
|
253
|
+
In this case, the element(= start-tag + content + end-tag) is looped.
|
254
|
+
</li>
|
255
|
+
</ul>
|
256
|
+
</li>
|
257
|
+
<li>'<b><code>#item1 { ... }</code></b>' represents an element marked with name 'item1' (= '<td>...</td>').
|
258
|
+
<ul type="circle">
|
259
|
+
<li>'<b><code>value: <i>expression</i>;</code></b>' represents that the content of the element is replaced by value of <code><i>expression</i></code>, which is value of a variable <code>member</code> in this case.
|
260
|
+
</li>
|
261
|
+
</ul>
|
262
|
+
</li>
|
263
|
+
</ul>
|
264
|
+
<a name="example1.plogic"></a>
|
265
|
+
<div class="program_caption">
|
266
|
+
Presentation logic file(example1.plogic):</div>
|
267
|
+
<pre class="program">/* The element which is marked by 'id="list1"' */
|
268
|
+
<b>#list1</b> {
|
269
|
+
logic: {
|
270
|
+
for member in @members
|
271
|
+
<b>_stag</b> # start tag
|
272
|
+
<b>_cont</b> # content
|
273
|
+
<b>_etag</b> # end tag
|
274
|
+
end
|
275
|
+
}
|
276
|
+
}
|
277
|
+
|
278
|
+
/* The element which is marked by 'id="mark:item1"' */
|
279
|
+
<b>#item1</b> {
|
280
|
+
/* replace the content with value of a variable 'member' */
|
281
|
+
value: member;
|
282
|
+
}
|
283
|
+
</pre>
|
284
|
+
<p>(Don't forget the semicolon at the end of line especially for Ruby user!)
|
285
|
+
</p>
|
286
|
+
<p>Kwartz generates eRuby script from the above files. This action is called 'compiling'.
|
287
|
+
</p>
|
288
|
+
<div class="terminal_caption">
|
289
|
+
how to compile eRuby script</div>
|
290
|
+
<pre class="terminal">$ kwartz -p example1.plogic example1.html > example1.rhtml
|
291
|
+
</pre>
|
292
|
+
<p>The following is the compiled eRuby script.
|
293
|
+
Notice that <code>id="mark:item1"</code> is removed automatically while <code>id="list1"</code> is leaved.
|
294
|
+
</p>
|
295
|
+
<a name="example1.expected"></a>
|
296
|
+
<div class="program_caption">
|
297
|
+
generated eRuby script</div>
|
298
|
+
<pre class="program"><table>
|
299
|
+
<% for member in @members %>
|
300
|
+
<tr id="list1">
|
301
|
+
<td><%= member %></td>
|
302
|
+
</tr>
|
303
|
+
<% end %>
|
304
|
+
</table>
|
305
|
+
</pre>
|
306
|
+
<br>
|
307
|
+
|
308
|
+
|
309
|
+
<a name="example2"></a>
|
310
|
+
<h3 class="section2">Complex Example</h3>
|
311
|
+
<p>Next is bordered table example which is a little complex than previous.
|
312
|
+
</p>
|
313
|
+
<a name="example2.html"></a>
|
314
|
+
<div class="program_caption">
|
315
|
+
Presentation Data (example2.html):</div>
|
316
|
+
<pre class="program"><table>
|
317
|
+
<tr bgcolor="#CCCCFF" <b>id="mark:list"</b>>
|
318
|
+
<td <b>id="mark:name"</b>>foo</td>
|
319
|
+
<td>
|
320
|
+
<a href="mailto:foo@mail.com" <b>id="mark:email"</b>>foo@mail.com</a>
|
321
|
+
</td>
|
322
|
+
</tr>
|
323
|
+
</table>
|
324
|
+
</pre>
|
325
|
+
<p>The following is the presentation logic file.
|
326
|
+
In the presentation logic, you should detect whether odd or even line in the iteration.
|
327
|
+
</p>
|
328
|
+
<p>Presentation Logic (example2.plogic):
|
329
|
+
</p>
|
330
|
+
<a name="example2.plogic"></a>
|
331
|
+
<pre class="program">/*
|
332
|
+
* an element which is marked by 'id="mark:list"'
|
333
|
+
* - print value of a variable 'color' as bgcolor attribute value.
|
334
|
+
*/
|
335
|
+
<b>#list</b> {
|
336
|
+
attrs: "bgcolor" color;
|
337
|
+
logic: {
|
338
|
+
@members.each_with_index do |member, i|
|
339
|
+
color = i % 2 == 0 ? '#FFCCCC' : '#CCCCFF';
|
340
|
+
_stag # start tag
|
341
|
+
_cont # content
|
342
|
+
_etag # end tag
|
343
|
+
end
|
344
|
+
}
|
345
|
+
}
|
346
|
+
|
347
|
+
/*
|
348
|
+
* an element which is marked by 'id="mark:name"':
|
349
|
+
* - print value of member[:name] as content of the element.
|
350
|
+
*/
|
351
|
+
<b>#name</b> {
|
352
|
+
value: member[:name];
|
353
|
+
}
|
354
|
+
|
355
|
+
/*
|
356
|
+
* an element marked by 'id="mark:email"':
|
357
|
+
* - print value of member[:email] as contentn of the element.
|
358
|
+
* - print "mailto:" and member[:email] as href attribute value.
|
359
|
+
*/
|
360
|
+
<b>#email</b> {
|
361
|
+
value: member[:email];
|
362
|
+
attrs: "href" "mailto:#{member[:email]}";
|
363
|
+
}
|
364
|
+
</pre>
|
365
|
+
<p>(Don't forget the semicolon at the end of line especially for Ruby user!)
|
366
|
+
</p>
|
367
|
+
<p>You will find that there is no HTML tag in the presentation logic and no logic in the presentation data.
|
368
|
+
That is to say, Kwartz can separate presentation logic from presentation data.
|
369
|
+
</p>
|
370
|
+
<div class="terminal_caption">
|
371
|
+
compilation</div>
|
372
|
+
<pre class="terminal">$ kwartz -p example2.plogic example2.html > example2.rhtml
|
373
|
+
</pre>
|
374
|
+
<a name="example2.expected"></a>
|
375
|
+
<div class="program_caption">
|
376
|
+
output script</div>
|
377
|
+
<pre class="program"><table>
|
378
|
+
<b><% @members.each_with_index do |member, i| %></b>
|
379
|
+
<b><% color = i % 2 == 0 ? '#FFCCCC' : '#CCCCFF'; %></b>
|
380
|
+
<tr bgcolor="<b><%= color %></b>">
|
381
|
+
<td><b><%= member[:name] %></b></td>
|
382
|
+
<td>
|
383
|
+
<a href="<b><%= "mailto:#{member[:email]}" %></b>"><b><%= member[:email] %></b></a>
|
384
|
+
</td>
|
385
|
+
</tr>
|
386
|
+
<b><% end %></b>
|
387
|
+
</table>
|
388
|
+
</pre>
|
389
|
+
<br>
|
390
|
+
|
391
|
+
|
392
|
+
<a name="pattern"></a>
|
393
|
+
<h3 class="section2">Other Examples of Presentation Logic</h3>
|
394
|
+
<p>Kwartz enables you to write complex presentation logic natulally.
|
395
|
+
This section shows some examples.
|
396
|
+
See <a href="p-pattern.html">Presentation Pattern Catalog</a> for details.
|
397
|
+
</p>
|
398
|
+
<ul type="disc">
|
399
|
+
<li>Iterate an element.
|
400
|
+
<pre class="program">#list {
|
401
|
+
logic: {
|
402
|
+
for member in @members
|
403
|
+
_stag
|
404
|
+
_cont
|
405
|
+
_etag
|
406
|
+
end
|
407
|
+
}
|
408
|
+
}
|
409
|
+
</pre>
|
410
|
+
Or
|
411
|
+
<pre class="program">#list {
|
412
|
+
logic: {
|
413
|
+
for member in @members
|
414
|
+
_elem # equivarent to _stag + _cont + _etag
|
415
|
+
end
|
416
|
+
}
|
417
|
+
}
|
418
|
+
</pre>
|
419
|
+
</li>
|
420
|
+
</ul>
|
421
|
+
<ul type="disc">
|
422
|
+
<li>Iterate only contents. This is useful for <dl></dl>.
|
423
|
+
<pre class="program">#list {
|
424
|
+
logic: {
|
425
|
+
_stag
|
426
|
+
for member in @members
|
427
|
+
_cont
|
428
|
+
end
|
429
|
+
_etag
|
430
|
+
}
|
431
|
+
}
|
432
|
+
</pre>
|
433
|
+
</li>
|
434
|
+
</ul>
|
435
|
+
<ul type="disc">
|
436
|
+
<li>Replace content of element by expression value.
|
437
|
+
<pre class="program">#list {
|
438
|
+
logic: {
|
439
|
+
_stag
|
440
|
+
print expr
|
441
|
+
_etag
|
442
|
+
}
|
443
|
+
}
|
444
|
+
</pre>
|
445
|
+
Or
|
446
|
+
<pre class="program">#list {
|
447
|
+
value: expr;
|
448
|
+
}
|
449
|
+
</pre>
|
450
|
+
</li>
|
451
|
+
</ul>
|
452
|
+
<ul type="disc">
|
453
|
+
<li>Replace element by exression value
|
454
|
+
<pre class="program">#list {
|
455
|
+
logic: {
|
456
|
+
print expr
|
457
|
+
}
|
458
|
+
}
|
459
|
+
</pre>
|
460
|
+
Or
|
461
|
+
<pre class="program">#list {
|
462
|
+
elem: expr;
|
463
|
+
}
|
464
|
+
</pre>
|
465
|
+
</li>
|
466
|
+
</ul>
|
467
|
+
<ul type="disc">
|
468
|
+
<li>Delete start-tag and end-tag, and leaves content only.
|
469
|
+
<pre class="program">#list {
|
470
|
+
logic: {
|
471
|
+
_cont
|
472
|
+
}
|
473
|
+
}
|
474
|
+
</pre>
|
475
|
+
</li>
|
476
|
+
</ul>
|
477
|
+
<ul type="disc">
|
478
|
+
<li>Delete elemnt. This is useful for delete dummy data.
|
479
|
+
<pre class="program">#list {
|
480
|
+
logic: {
|
481
|
+
}
|
482
|
+
}
|
483
|
+
</pre>
|
484
|
+
</li>
|
485
|
+
</ul>
|
486
|
+
<ul type="disc">
|
487
|
+
<li>Replace element with other element.
|
488
|
+
<pre class="program">#list {
|
489
|
+
logic: {
|
490
|
+
_element(foo) # expand other element marked with name 'foo'
|
491
|
+
}
|
492
|
+
}
|
493
|
+
</pre>
|
494
|
+
</li>
|
495
|
+
</ul>
|
496
|
+
<ul type="disc">
|
497
|
+
<li>Replace element with other element's content.
|
498
|
+
<pre class="program">#list {
|
499
|
+
logic: {
|
500
|
+
_content(foo) # expand content of other element
|
501
|
+
}
|
502
|
+
}
|
503
|
+
</pre>
|
504
|
+
</li>
|
505
|
+
</ul>
|
506
|
+
<ul type="disc">
|
507
|
+
<li>Include complex presentation logics.
|
508
|
+
<pre class="program">#list {
|
509
|
+
logic: {
|
510
|
+
i = 0
|
511
|
+
for member in @members
|
512
|
+
i += 1
|
513
|
+
if i % 2 == 0
|
514
|
+
color = '#FFCCCC'
|
515
|
+
else
|
516
|
+
color = '#CCCCFF'
|
517
|
+
end
|
518
|
+
_elem # '_elem' is equivarent to _stag + _cont + _etag
|
519
|
+
end
|
520
|
+
}
|
521
|
+
}
|
522
|
+
</pre>
|
523
|
+
</li>
|
524
|
+
</ul>
|
525
|
+
<p>It is very important that tag/attribute names don't appear in presentation logic at all.
|
526
|
+
This way, you don't need to change presentation logic files even if the tag/attribute names are changed in the presentation data.
|
527
|
+
</p>
|
528
|
+
<p>Kwartz separates presentation logic from presentation data and main program.
|
529
|
+
</p>
|
530
|
+
<br>
|
531
|
+
|
532
|
+
|
533
|
+
<br>
|
534
|
+
|
535
|
+
|
536
|
+
<a name="detail"></a>
|
537
|
+
<h2 class="section1">Features Detail</h2>
|
538
|
+
<a name="ruleset"></a>
|
539
|
+
<h3 class="section2">RuleSet and Properties</h3>
|
540
|
+
<p>Format of presentation logic in Kwartz is similar to CSS (Cascading Style Sheet).
|
541
|
+
</p>
|
542
|
+
<ul type="disc">
|
543
|
+
<li>Presentation logic file is a set of Ruleset.
|
544
|
+
</li>
|
545
|
+
<li>Ruleset is a pair of selector and declarations.
|
546
|
+
</li>
|
547
|
+
<li>Declaration is a pair of property name and value.
|
548
|
+
</li>
|
549
|
+
</ul>
|
550
|
+
<p>The following rules are available in presesntation logic file.
|
551
|
+
These are similar to CSS. If you are familiar with CSS, you'll be so with Kwartz.
|
552
|
+
</p>
|
553
|
+
<dl class="dl3">
|
554
|
+
<dt class="dt3"><b>
|
555
|
+
stag: <i>expr</i>; </b></dt>
|
556
|
+
<dd class="dd3">
|
557
|
+
Replace start-tag by expression value.
|
558
|
+
</dd>
|
559
|
+
</dl>
|
560
|
+
<dl class="dl3">
|
561
|
+
<dt class="dt3"><b>
|
562
|
+
etag: <i>expr</i>; </b></dt>
|
563
|
+
<dd class="dd3">
|
564
|
+
Replace end-tag by expression value.
|
565
|
+
</dd>
|
566
|
+
</dl>
|
567
|
+
<dl class="dl3">
|
568
|
+
<dt class="dt3"><b>
|
569
|
+
elem: <i>expr</i>; </b></dt>
|
570
|
+
<dd class="dd3">
|
571
|
+
Replace elemnt by expression value.
|
572
|
+
</dd>
|
573
|
+
</dl>
|
574
|
+
<dl class="dl3">
|
575
|
+
<dt class="dt3"><b>
|
576
|
+
cont: <i>expr</i>; </b></dt>
|
577
|
+
<dd class="dd3">
|
578
|
+
Replace content of element by expressin value.
|
579
|
+
</dd>
|
580
|
+
</dl>
|
581
|
+
<dl class="dl3">
|
582
|
+
<dt class="dt3"><b>
|
583
|
+
value: <i>expr</i>; </b></dt>
|
584
|
+
<dd class="dd3">
|
585
|
+
Equivarent to <code>cont: <i>expr</i></code>.
|
586
|
+
</dd>
|
587
|
+
</dl>
|
588
|
+
<dl class="dl3">
|
589
|
+
<dt class="dt3"><b>
|
590
|
+
attrs: 'attrname' <i>expr</i>; </b></dt>
|
591
|
+
<dd class="dd3">
|
592
|
+
Replace attribute value by expression.
|
593
|
+
The following is an example to specify some attributes.
|
594
|
+
<pre class="program">#foo {
|
595
|
+
attrs: 'href' item[:url],
|
596
|
+
'id' item[:id],
|
597
|
+
'class' classname;
|
598
|
+
}
|
599
|
+
</pre>
|
600
|
+
</dd>
|
601
|
+
</dl>
|
602
|
+
<dl class="dl3">
|
603
|
+
<dt class="dt3"><b>
|
604
|
+
append: <i>expr</i>; </b></dt>
|
605
|
+
<dd class="dd3">
|
606
|
+
Append expression value to tail of tag.
|
607
|
+
This is used especially to add 'checked="checked"', 'selected="selected"'
|
608
|
+
into the form control tag.
|
609
|
+
<pre class="program">#checkbox1 {
|
610
|
+
append: member[:age] > 18 ? ' checked="checked"' : '';
|
611
|
+
}
|
612
|
+
#select_options {
|
613
|
+
append: option[:value] == current_val ? ' selected="selected"' : '';
|
614
|
+
}
|
615
|
+
</pre>
|
616
|
+
</dd>
|
617
|
+
</dl>
|
618
|
+
<dl class="dl3">
|
619
|
+
<dt class="dt3"><b>
|
620
|
+
remove: 'attr1', 'attr2', 'attr3'; </b></dt>
|
621
|
+
<dd class="dd3">
|
622
|
+
Remove the attributes from the element.
|
623
|
+
</dd>
|
624
|
+
</dl>
|
625
|
+
<dl class="dl3">
|
626
|
+
<dt class="dt3"><b>
|
627
|
+
logic: { ... } </b></dt>
|
628
|
+
<dd class="dd3">
|
629
|
+
Logic of the element.
|
630
|
+
</dd>
|
631
|
+
</dl>
|
632
|
+
<p>'stag:' and 'elem:' are useful especially for Ruby on Rails.
|
633
|
+
The following is an examle to use Kwartz in Ruby on Rails.
|
634
|
+
</p>
|
635
|
+
<a name="form1.html"></a>
|
636
|
+
<div class="program_caption">
|
637
|
+
presentation data (form1.html)</div>
|
638
|
+
<pre class="program"><form <b>id="form"</b>>
|
639
|
+
Name: <input type="text" <b>id="member_name"</b>><br>
|
640
|
+
Birthday: <select <b>id="member_birth"</b>>
|
641
|
+
<option> - </option>
|
642
|
+
</select><br>
|
643
|
+
<input type="submit" <b>id="submit"</b>>
|
644
|
+
</form>
|
645
|
+
</pre>
|
646
|
+
<a name="form1.plogic"></a>
|
647
|
+
<div class="program_caption">
|
648
|
+
presentation logic (form1.plogic)</div>
|
649
|
+
<pre class="program"><b>#form</b> {
|
650
|
+
<b>stag:</b> start_form_tag :action=>'new';
|
651
|
+
}
|
652
|
+
<b>#member_name</b> {
|
653
|
+
<b>elem:</b> text_field 'member', 'name';
|
654
|
+
}
|
655
|
+
<b>#member_birth</b> {
|
656
|
+
<b>elem:</b> date_select 'member', birth';
|
657
|
+
}
|
658
|
+
<b>#submit</b> {
|
659
|
+
<b>elem:</b> submit_to 'Submit';
|
660
|
+
}
|
661
|
+
</pre>
|
662
|
+
<a name="form1.expected"></a>
|
663
|
+
<div class="terminal_caption">
|
664
|
+
compile</div>
|
665
|
+
<pre class="terminal">$ kwartz -p form1.plogic form1.html
|
666
|
+
<b><%= start_form_tag :action=>'new' %></b>
|
667
|
+
Name: <b><%= text_field 'member', 'name' %></b><br>
|
668
|
+
Birthday: <b><%= date_select 'member', birth' %></b><br>
|
669
|
+
<b><%= submit_to 'Submit' %></b>
|
670
|
+
</form>
|
671
|
+
</pre>
|
672
|
+
<br>
|
673
|
+
|
674
|
+
|
675
|
+
<a name="directives"></a>
|
676
|
+
<h3 class="section2">Directives</h3>
|
677
|
+
<p>Presentation logic may be embedded into presentation data in Kwartz.
|
678
|
+
You can choose to separate or not to sepearate presentation logic from presentation data.
|
679
|
+
</p>
|
680
|
+
<p>The reason to provide both solutions (separate or not) is <b>choosability</b>.
|
681
|
+
Some preferes to separate presentation logic from presentaion data, and others may
|
682
|
+
prefere to mix them.
|
683
|
+
Both approaches have own advantages and disadvantages.
|
684
|
+
Thus it is the user who determine which solution to adopt.
|
685
|
+
Kwartz provides both approaches and you can select which to use.
|
686
|
+
Kwartz doesn't enforce you to adopt a solution.
|
687
|
+
</p>
|
688
|
+
<p>To embed presentation logic into presentation data, use directives.
|
689
|
+
Directive is a command to embed presentation logic into presentation data.
|
690
|
+
In Kwartz, 'title' attributes<sup>(<a href="#fnref:4" name="fnlink:4">*4</a>)</sup> are used to describe directives.
|
691
|
+
</p>
|
692
|
+
<p>The following is an example to use directives.
|
693
|
+
</p>
|
694
|
+
<ul type="disc">
|
695
|
+
<li>Directive <code>title="for <i>var</i> in <i>list</i>"</code> means to iterate the element.
|
696
|
+
</li>
|
697
|
+
<li>Directive <code>title="value: <i>expression</i>"</code> means to print value of expression as content of the element.
|
698
|
+
</li>
|
699
|
+
<li>Directive <code>title="dummy:"</code> means that the element is a dummy and is not printed out.
|
700
|
+
</li>
|
701
|
+
</ul>
|
702
|
+
<a name="directive1.html"></a>
|
703
|
+
<div class="program_caption">
|
704
|
+
Presentation Data(directive1.html):</div>
|
705
|
+
<pre class="program"><table>
|
706
|
+
<tr <b>title="for member in @members"</b>>
|
707
|
+
<td <b>title="value: member.name"</b>>foo</td>
|
708
|
+
<td>
|
709
|
+
<a href="mailto:<%= member.email %>"
|
710
|
+
title="<b>value: member.email</b>">foo@mai.com</a>
|
711
|
+
</td>
|
712
|
+
</tr>
|
713
|
+
<tr <b>title="dummy:"</b>>
|
714
|
+
<td>bar</td>
|
715
|
+
<td><a href="mailto:bar@mail.org">bar@mail.org</a></td>
|
716
|
+
</tr>
|
717
|
+
<tr <b>title="dummy:"</b>>
|
718
|
+
<td>baz</td>
|
719
|
+
<td><a href="mailto:baz@mail.net">baz@mail.net</a></td>
|
720
|
+
</tr>
|
721
|
+
</table>
|
722
|
+
</pre>
|
723
|
+
<div class="terminal_caption">
|
724
|
+
Compile:</div>
|
725
|
+
<pre class="terminal">$ kwartz -l eruby directive1.html > directive1.rhtml
|
726
|
+
</pre>
|
727
|
+
<a name="directive1.expected"></a>
|
728
|
+
<div class="program_caption">
|
729
|
+
Output script:</div>
|
730
|
+
<pre class="program"><table>
|
731
|
+
<b><% for member in @members do %></b>
|
732
|
+
<tr>
|
733
|
+
<td><b><%= member.name %></b></td>
|
734
|
+
<td>
|
735
|
+
<a href="mailto:<b><%= member.email %></b>"><b><%= member.email %></b></a>
|
736
|
+
</td>
|
737
|
+
</tr>
|
738
|
+
<b><% end %></b>
|
739
|
+
</table>
|
740
|
+
</pre>
|
741
|
+
<p>If the first character of target attribute is a space, Kwartz recognize it as non-directive<sup>(<a href="#fnref:5" name="fnlink:5">*5</a>)</sup>.
|
742
|
+
</p>
|
743
|
+
<a name="directive2.html"></a>
|
744
|
+
<div class="program_caption">
|
745
|
+
presentation data (directive2.html)</div>
|
746
|
+
<pre class="program"><span <b>title="value: expr1"</b>>foo</span>
|
747
|
+
<span <b>title=" value: expr2"</b>>bar</span>
|
748
|
+
</pre>
|
749
|
+
<a name="directive2.expected"></a>
|
750
|
+
<div class="terminal_caption">
|
751
|
+
compile</div>
|
752
|
+
<pre class="terminal">$ kwartz directive2.html
|
753
|
+
<span><b><%= expr1 %></b></span>
|
754
|
+
<span <b>title="value: expr2"</b>>bar</span>
|
755
|
+
</pre>
|
756
|
+
<p>Directives are different in each target language.
|
757
|
+
For example, foreach loop is 'for item in list' in eRuby, 'foreach($list as $item)' in PHP, 'forEach(item in list)' in JSTL.
|
758
|
+
See reference manual for details about directives.
|
759
|
+
</p>
|
760
|
+
<div class="footnote">
|
761
|
+
<dl compact>
|
762
|
+
<dt>(<a name="fnref:4" href="#fnlink:4">*4</a>)</dt>
|
763
|
+
<dd>It is able to change attribute name by command-line option '--dattr=name' or configuration option PROPRERTY_DATTR.</dd>
|
764
|
+
<dt>(<a name="fnref:5" href="#fnlink:5">*5</a>)</dt>
|
765
|
+
<dd>This spec may change in the future if I get have better idea.</dd>
|
766
|
+
</dl>
|
767
|
+
</div>
|
768
|
+
<br>
|
769
|
+
|
770
|
+
|
771
|
+
<a name="escape"></a>
|
772
|
+
<h3 class="section2">Escape</h3>
|
773
|
+
<p>Kwartz supports Automatic-escape and Partial-escape/unescape.
|
774
|
+
</p>
|
775
|
+
<ul type="disc">
|
776
|
+
<li>If command-line option '<code>-e</code>' is specified, values of '<code>value: <i>expr</i></code>'
|
777
|
+
are escaped. (Automatic-escape)
|
778
|
+
</li>
|
779
|
+
<li>'<code>Value: <i>expr</i></code>' always escapes value even when '<code>-e</code>' is not specified. (Partial-escape)
|
780
|
+
</li>
|
781
|
+
<li>'<code>VALUE: <i>expr</i></code>' always doesn't escapes value even when '<code>-e</code>' is specified. (Partial-unescape)
|
782
|
+
</li>
|
783
|
+
</ul>
|
784
|
+
<a name="escape1.html"></a>
|
785
|
+
<div class="program_caption">
|
786
|
+
presentation Data (escape1.html):</div>
|
787
|
+
<pre class="program"><tr>
|
788
|
+
<td id="mark:val1">foo</td>
|
789
|
+
<td id="mark:val2">bar</td>
|
790
|
+
<td id="mark:val3">baz</td>
|
791
|
+
</tr>
|
792
|
+
</pre>
|
793
|
+
<a name="escape1.plogic"></a>
|
794
|
+
<div class="program_caption">
|
795
|
+
presentation logic (escape1.plogic)</div>
|
796
|
+
<pre class="program">#val1 {
|
797
|
+
<b>value:</b> expr;
|
798
|
+
}
|
799
|
+
#val2 {
|
800
|
+
<b>Value:</b> expr;
|
801
|
+
}
|
802
|
+
#val3 {
|
803
|
+
<b>VALUE:</b> expr;
|
804
|
+
}
|
805
|
+
</pre>
|
806
|
+
<a name="escape1.expected"></a>
|
807
|
+
<div class="terminal_caption">
|
808
|
+
compile without '<code>-e</code>' option.</div>
|
809
|
+
<pre class="terminal">$ kwartz -p escape1.plogic escape1.html
|
810
|
+
<tr>
|
811
|
+
<td><%= expr %></td>
|
812
|
+
<td><%=h expr %></td>
|
813
|
+
<td><%= expr %></td>
|
814
|
+
</tr>
|
815
|
+
</pre>
|
816
|
+
<a name="escape1e.expected"></a>
|
817
|
+
<div class="terminal_caption">
|
818
|
+
comple with '<code>-e</code>' option.</div>
|
819
|
+
<pre class="terminal">$ kwartz <b>-e</b> -p escape1.plogic escape1.html
|
820
|
+
<tr>
|
821
|
+
<td><b><%=h expr %></b></td>
|
822
|
+
<td><b><%=h expr %></b></td>
|
823
|
+
<td><b><%= expr %></b></td>
|
824
|
+
</tr>
|
825
|
+
</pre>
|
826
|
+
<p>In the same way, '<code>Stag:</code>', '<code>Etag:</code>', '<code>Elem:</code>',
|
827
|
+
'<code>Cont:</code>', '<code>Attrs:</code>', and '<code>Append:</code>' properties are
|
828
|
+
always escaped, '<code>STAG:</code>', '<code>ETAG:</code>', '<code>ELEM:</code>',
|
829
|
+
'<code>CONT:</code>', '<code>ATTRS:</code>', and '<code>APPEND:</code>' properties are
|
830
|
+
never escaped.
|
831
|
+
</p>
|
832
|
+
<p>Escape function or method is different for each tareget language.
|
833
|
+
'h()' is used in eRuby and 'htmlspecialchars()' in PHP.
|
834
|
+
JSTL prints escaped value in default.
|
835
|
+
</p>
|
836
|
+
<p>Directives <code>title="Value: <i>expr</i>"</code>, <code>title="Attr: '<i>name</i>' <i>expr</i>"</code>, and <code>title="Append: <i>expr</i>"</code> always escape expression value even when the command-line option '<code>-e</code>' is not specified.
|
837
|
+
</p>
|
838
|
+
<p>Directives <code>title="VALUE: <i>expr</i>:"</code>, <code>title="ATTR: '<i>name</i>' <i>expr</i>"</code>, and <code>title="APPEND: <i>expr</i>"</code> doesn't escape expression value even when the command-line option '<code>-e</code>' is specified.
|
839
|
+
</p>
|
840
|
+
<p>Configuration option PROPERTY_ESCAPE in 'kwartz/config.rb' determines whether values are escaped or not in default.
|
841
|
+
If this is true then Kwartz will escape values in default.
|
842
|
+
</p>
|
843
|
+
<br>
|
844
|
+
|
845
|
+
|
846
|
+
<a name="langs"></a>
|
847
|
+
<h3 class="section2">Multi-language</h3>
|
848
|
+
<p>Kwartz-ruby now supports the following programming language.
|
849
|
+
</p>
|
850
|
+
<ul type="disc">
|
851
|
+
<li>Ruby (eRuby)
|
852
|
+
</li>
|
853
|
+
<li>PHP
|
854
|
+
</li>
|
855
|
+
<li>JSP (JSTL 1.1 and 1.2)
|
856
|
+
</li>
|
857
|
+
<li>Perl (ePerl) [experimental]
|
858
|
+
</li>
|
859
|
+
</ul>
|
860
|
+
<p>Presentation logics must be described in each target language.
|
861
|
+
It means that if you have wrote presentation logics in Ruby, they were not reusable
|
862
|
+
for PHP project (but you can get full-power of Ruby in presentation logic).
|
863
|
+
</p>
|
864
|
+
<p>The followings are examples of Ruby, PHP, JSP, and Perl.
|
865
|
+
</p>
|
866
|
+
<a name="table1.html"></a>
|
867
|
+
<div class="program_caption">
|
868
|
+
table1.html</div>
|
869
|
+
<pre class="program"><html>
|
870
|
+
<body>
|
871
|
+
|
872
|
+
<table>
|
873
|
+
<tr bgcolor="#CCCCFF" <b>id="mark:row"</b>>
|
874
|
+
<td <b>id="mark:name"</b>>Foo</td>
|
875
|
+
<td <b>id="mark:mail"</b>>foo@mail.com</td>
|
876
|
+
</tr>
|
877
|
+
<tr bgcolor="#FFCCCC" <b>id="dummy:row1"</b>>
|
878
|
+
<td>Bar</td>
|
879
|
+
<td>bar@mail.net</td>
|
880
|
+
</tr>
|
881
|
+
<tr bgcolor="#CCCCFF" <b>id="dummy:row2"</b>>
|
882
|
+
<td>Baz</td>
|
883
|
+
<td>baz@mail.org</td>
|
884
|
+
</tr>
|
885
|
+
</table>
|
886
|
+
|
887
|
+
</body>
|
888
|
+
</html>
|
889
|
+
</pre>
|
890
|
+
<a name="table1.eruby.plogic"></a>
|
891
|
+
<div class="program_caption">
|
892
|
+
table1.eruby.plogic</div>
|
893
|
+
<pre class="program">#row {
|
894
|
+
attrs: "bgcolor" color;
|
895
|
+
logic: {
|
896
|
+
@list.each_with_index do |user, i|
|
897
|
+
color = i % 2 == 1 ? '#FFCCCC' : '#CCCCFF';
|
898
|
+
_elem
|
899
|
+
}
|
900
|
+
}
|
901
|
+
}
|
902
|
+
|
903
|
+
#name {
|
904
|
+
Value: user[:name];
|
905
|
+
}
|
906
|
+
|
907
|
+
#mail {
|
908
|
+
value: user[:mail];
|
909
|
+
}
|
910
|
+
</pre>
|
911
|
+
<a name="table1.php.plogic"></a>
|
912
|
+
<div class="program_caption">
|
913
|
+
table1.php.plogic</div>
|
914
|
+
<pre class="program">#row {
|
915
|
+
attrs: "bgcolor" $color;
|
916
|
+
logic: {
|
917
|
+
$i = 0;
|
918
|
+
foreach ($list as $user) {
|
919
|
+
$color = ++$i % 2 == 0 ? '#FFCCCC' : '#CCCCFF';
|
920
|
+
_elem();
|
921
|
+
}
|
922
|
+
}
|
923
|
+
}
|
924
|
+
|
925
|
+
#name {
|
926
|
+
Value: $user['name'];
|
927
|
+
}
|
928
|
+
|
929
|
+
#mail {
|
930
|
+
value: $user['mail'];
|
931
|
+
}
|
932
|
+
</pre>
|
933
|
+
<a name="table1.jstl.plogic"></a>
|
934
|
+
<div class="program_caption">
|
935
|
+
table1.jstl.plogic</div>
|
936
|
+
<pre class="program">#row {
|
937
|
+
attrs: "bgcolor" color;
|
938
|
+
logic: {
|
939
|
+
<c:forEach var="user" items="${list}" varStatus="loop">
|
940
|
+
<c:set var="color" value="${loop.index % 2 == 0 ? '#FFCCCC' : '#CCCCFF'}"/>
|
941
|
+
_elem
|
942
|
+
</c:forEach>
|
943
|
+
}
|
944
|
+
}
|
945
|
+
|
946
|
+
#name {
|
947
|
+
Value: user.name;
|
948
|
+
}
|
949
|
+
|
950
|
+
#mail {
|
951
|
+
value: user.mail;
|
952
|
+
}
|
953
|
+
</pre>
|
954
|
+
<a name="table1.eperl.plogic"></a>
|
955
|
+
<div class="program_caption">
|
956
|
+
table1.eperl.plogic</div>
|
957
|
+
<pre class="program">#row {
|
958
|
+
attrs: "bgcolor" $color;
|
959
|
+
logic: {
|
960
|
+
$i = 0;
|
961
|
+
foreach ($user in @list) {
|
962
|
+
$color = ++$i % 2 == 0 ? '#FFCCCC' : '#CCCCFF';
|
963
|
+
_elem();
|
964
|
+
}
|
965
|
+
}
|
966
|
+
}
|
967
|
+
|
968
|
+
#name {
|
969
|
+
Value: $user{'name'};
|
970
|
+
}
|
971
|
+
|
972
|
+
#mail {
|
973
|
+
value: $user{'mail'};
|
974
|
+
}
|
975
|
+
</pre>
|
976
|
+
<div class="terminal_caption">
|
977
|
+
compile</div>
|
978
|
+
<pre class="terminal">$ kwartz -l eruby -p table1.eruby.plogic table1.html > table1.rhtml
|
979
|
+
$ kwartz -l php -p table1.php.plogic table1.html > table1.php
|
980
|
+
$ kwartz -l jstl -p table1.jstl.plogic table1.html > table1.jsp
|
981
|
+
$ kwartz -l eperl -p table1.eperl.plogic table1.html > table1.iphtml
|
982
|
+
</pre>
|
983
|
+
<a name="table1.rhtml"></a>
|
984
|
+
<div class="program_caption">
|
985
|
+
output script (table1.rhtml)</div>
|
986
|
+
<pre class="program"><html>
|
987
|
+
<body>
|
988
|
+
|
989
|
+
<table>
|
990
|
+
<b><% @list.each_with_index do |user, i| %></b>
|
991
|
+
<b><% color = i % 2 == 1 ? '#FFCCCC' : '#CCCCFF' %></b>
|
992
|
+
<tr bgcolor="<b><%= color %></b>">
|
993
|
+
<td><b><%=h user[:name] %></b></td>
|
994
|
+
<td><b><%= user[:mail] %></b></td>
|
995
|
+
</tr>
|
996
|
+
<b><% end %></b>
|
997
|
+
</table>
|
998
|
+
|
999
|
+
</body>
|
1000
|
+
</html>
|
1001
|
+
</pre>
|
1002
|
+
<a name="table1.php"></a>
|
1003
|
+
<div class="program_caption">
|
1004
|
+
output script (table1.php)</div>
|
1005
|
+
<pre class="program"><html>
|
1006
|
+
<body>
|
1007
|
+
|
1008
|
+
<table>
|
1009
|
+
<b><?php $i = 0; ?></b>
|
1010
|
+
<b><?php foreach ($list as $user) { ?></b>
|
1011
|
+
<b><?php $color = ++$i % 2 == 0 ? '#FFCCCC' : '#CCCCFF'; ?></b>
|
1012
|
+
<tr bgcolor="<b><?php echo $color; ?></b>">
|
1013
|
+
<td><b><?php echo htmlspecialchars($user['name']); ?></b></td>
|
1014
|
+
<td><b><?php echo $user['mail']; ?></b></td>
|
1015
|
+
</tr>
|
1016
|
+
<b><?php } ?></b>
|
1017
|
+
</table>
|
1018
|
+
|
1019
|
+
</body>
|
1020
|
+
</html>
|
1021
|
+
</pre>
|
1022
|
+
<a name="table1.jsp"></a>
|
1023
|
+
<div class="program_caption">
|
1024
|
+
output script (JSTL 1.2)</div>
|
1025
|
+
<pre class="program"><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
1026
|
+
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
|
1027
|
+
<html>
|
1028
|
+
<body>
|
1029
|
+
|
1030
|
+
<table>
|
1031
|
+
<b><c:forEach var="user" items="${list}" varStatus="loop"></b>
|
1032
|
+
<b><c:set var="color" value="${loop.index % 2 == 0 ? '#FFCCCC' : '#CCCCFF'}"/></b>
|
1033
|
+
<tr bgcolor="<b>${color}</b>">
|
1034
|
+
<td><b>${user.name}</b></td>
|
1035
|
+
<td><b>${user.mail}</b></td>
|
1036
|
+
</tr>
|
1037
|
+
<b></c:forEach></b>
|
1038
|
+
</table>
|
1039
|
+
|
1040
|
+
</body>
|
1041
|
+
</html>
|
1042
|
+
</pre>
|
1043
|
+
<a name="table1.iphtml"></a>
|
1044
|
+
<div class="program_caption">
|
1045
|
+
output script (ePerl)</div>
|
1046
|
+
<pre class="program"><html>
|
1047
|
+
<body>
|
1048
|
+
|
1049
|
+
<table>
|
1050
|
+
<b><? $i = 0; !></b>
|
1051
|
+
<b><? foreach ($user in @list) { !></b>
|
1052
|
+
<b><? $color = ++$i % 2 == 0 ? '#FFCCCC' : '#CCCCFF'; !></b>
|
1053
|
+
<tr bgcolor="<b><?= $color !></b>">
|
1054
|
+
<td><b><?= encode_entities($user{'name'}) !></b></td>
|
1055
|
+
<td><b><?= $user{'mail'} !></b></td>
|
1056
|
+
</tr>
|
1057
|
+
<b><? } !></b>
|
1058
|
+
</table>
|
1059
|
+
|
1060
|
+
</body>
|
1061
|
+
</html>
|
1062
|
+
</pre>
|
1063
|
+
<br>
|
1064
|
+
|
1065
|
+
|
1066
|
+
<a name="span"></a>
|
1067
|
+
<h3 class="section2">Span Tag Deletion</h3>
|
1068
|
+
<p>Kwartz regards span tags which contain only directives as dummy tags and delete them automatically when command-line option '--delspan' is specified.
|
1069
|
+
</p>
|
1070
|
+
<a name="delspan1.html"></a>
|
1071
|
+
<div class="program_caption">
|
1072
|
+
presentation data (delspan1.html)</div>
|
1073
|
+
<pre class="program"><h1><span <b>id="mark:title"</b>>title</span></h1>
|
1074
|
+
|
1075
|
+
Hello <span <b>title="value: user"</b>>World</span>!
|
1076
|
+
</pre>
|
1077
|
+
<a name="delspan1.plogic"></a>
|
1078
|
+
<div class="program_caption">
|
1079
|
+
presentation logic (delspan1.plogic)</div>
|
1080
|
+
<pre class="program">#title {
|
1081
|
+
value: title;
|
1082
|
+
}
|
1083
|
+
</pre>
|
1084
|
+
<a name="delspan1.expected"></a>
|
1085
|
+
<div class="terminal_caption">
|
1086
|
+
compile</div>
|
1087
|
+
<pre class="terminal">$ kwartz -p delspan1.plogic <b>--delspan</b> delspan1.html
|
1088
|
+
<h1><b><%= title %></b></h1>
|
1089
|
+
|
1090
|
+
Hello <b><%= user %></b>!
|
1091
|
+
</pre>
|
1092
|
+
<p>The span tags are not removed when they have other attributes.
|
1093
|
+
</p>
|
1094
|
+
<a name="delspan2.html"></a>
|
1095
|
+
<div class="program_caption">
|
1096
|
+
presentation data (delspan2.html)</div>
|
1097
|
+
<pre class="program">Hello <span <b>title="value: user" style="color:black"</b>>World</span>!
|
1098
|
+
</pre>
|
1099
|
+
<a name="delspan2.expected"></a>
|
1100
|
+
<div class="terminal_caption">
|
1101
|
+
compile</div>
|
1102
|
+
<pre class="terminal">$ kwartz <b>--delspan</b> delspan2.html
|
1103
|
+
Hello <b><span style="color:black"></b><%= user %><b></span></b>!
|
1104
|
+
</pre>
|
1105
|
+
<br>
|
1106
|
+
|
1107
|
+
|
1108
|
+
<a name="import-plogic"></a>
|
1109
|
+
<h3 class="section2">Import Presentation Logic File</h3>
|
1110
|
+
<p>'<code>@imort "filename.plogic"</code>' imports filename.plogic.
|
1111
|
+
This is useful to share common presentation logic in many files.
|
1112
|
+
</p>
|
1113
|
+
<a name="link_to2.plogic"></a>
|
1114
|
+
<div class="program_caption">
|
1115
|
+
link_to.plogic</div>
|
1116
|
+
<pre class="program"><b>#link_to_new</b> {
|
1117
|
+
elem: start_link_to :action=>'new';
|
1118
|
+
}
|
1119
|
+
<b>#link_to_show</b> {
|
1120
|
+
elem: start_link_to :action=>'show', :id=>@member;
|
1121
|
+
}
|
1122
|
+
<b>#link_to_edit</b> {
|
1123
|
+
elem: start_link_to :action=>'edit', :id=>@member;
|
1124
|
+
}
|
1125
|
+
<b>#link_to_list</b> {
|
1126
|
+
elem: start_link_to :action=>'list';
|
1127
|
+
}
|
1128
|
+
<b>#link_to_destroy</b> {
|
1129
|
+
stag: start_link_to({:action=>'destroy', :id=>@member}, :confirm=>'Are you sure?');
|
1130
|
+
}
|
1131
|
+
</pre>
|
1132
|
+
<a name="show2.html"></a>
|
1133
|
+
<div class="program_caption">
|
1134
|
+
show.html</div>
|
1135
|
+
<pre class="program"><p>
|
1136
|
+
Name: <span id="mark:name">foo</span> <br>
|
1137
|
+
Email: <span id="mark:email">foo@mail.com</span> <br>
|
1138
|
+
</p>
|
1139
|
+
<a href="#" <b>id="link_to_edit"</b>>Edit this member</a> |
|
1140
|
+
<a href="#" <b>id="link_to_new"</b>>Create new member</a> |
|
1141
|
+
<a href="#" <b>id="link_to_list"</b>>Return to list</a>
|
1142
|
+
</pre>
|
1143
|
+
<div class="program_caption">
|
1144
|
+
show.plogic</div>
|
1145
|
+
<pre class="program"><b>@import 'link_to.plogic';</b>
|
1146
|
+
|
1147
|
+
#name {
|
1148
|
+
Value: @member.name;
|
1149
|
+
}
|
1150
|
+
#email {
|
1151
|
+
Value: @member.email;
|
1152
|
+
}
|
1153
|
+
</pre>
|
1154
|
+
<a name="show2.expected"></a>
|
1155
|
+
<div class="terminal_caption">
|
1156
|
+
compile</div>
|
1157
|
+
<pre class="terminal">$ kwartz -p show.plogic show.html
|
1158
|
+
<p>
|
1159
|
+
Name: <span><%=h @member.name %></span> <br>
|
1160
|
+
Email: <span><%=h @member.email %></span> <br>
|
1161
|
+
</p>
|
1162
|
+
<%= start_link_to :action=>'edit', :id=>@member %> |
|
1163
|
+
<%= start_link_to :action=>'new' %> |
|
1164
|
+
<%= start_link_to :action=>'list' %>
|
1165
|
+
</pre>
|
1166
|
+
<br>
|
1167
|
+
|
1168
|
+
|
1169
|
+
<a name="import-elem"></a>
|
1170
|
+
<h3 class="section2">Import Elements in Other Files</h3>
|
1171
|
+
<p>Command-line option '-i <i>filename,...</i>' imports element definitions form other files.
|
1172
|
+
</p>
|
1173
|
+
<a name="form.html"></a>
|
1174
|
+
<div class="program_caption">
|
1175
|
+
form.html</div>
|
1176
|
+
<pre class="program"><form>
|
1177
|
+
<div <b>id="mark:form_content"</b>>
|
1178
|
+
<b>Name: <input type="text"><br></b>
|
1179
|
+
<b>Password: <input type="password"><br></b>
|
1180
|
+
</div>
|
1181
|
+
<input type="submit">
|
1182
|
+
</form>
|
1183
|
+
</pre>
|
1184
|
+
<a name="new.html"></a>
|
1185
|
+
<div class="program_caption">
|
1186
|
+
new.html</div>
|
1187
|
+
<pre class="program"><form action="/new">
|
1188
|
+
<div <b>id="mark:placeholder"</b>></div>
|
1189
|
+
<input type="submit" value="Create">
|
1190
|
+
</form>
|
1191
|
+
</pre>
|
1192
|
+
<a name="new.plogic"></a>
|
1193
|
+
<div class="program_caption">
|
1194
|
+
new.plogic</div>
|
1195
|
+
<pre class="program">/* use element which is defined other file */
|
1196
|
+
<b>#placeholder</b> {
|
1197
|
+
logic: {
|
1198
|
+
<b>_content(form_content)</b>
|
1199
|
+
}
|
1200
|
+
}
|
1201
|
+
</pre>
|
1202
|
+
<a name="new.expected"></a>
|
1203
|
+
<div class="terminal_caption">
|
1204
|
+
compile</div>
|
1205
|
+
<pre class="terminal">$ kwartz <b>-i form.html</b> -p new.plogic new.html
|
1206
|
+
<form action="/new">
|
1207
|
+
<b>Name: <input type="text"><br></b>
|
1208
|
+
<b>Password: <input type="password"><br></b>
|
1209
|
+
<input type="submit" value="Create">
|
1210
|
+
</form>
|
1211
|
+
</pre>
|
1212
|
+
<br>
|
1213
|
+
|
1214
|
+
|
1215
|
+
<a name="extract"></a>
|
1216
|
+
<h3 class="section2">Extract Element</h3>
|
1217
|
+
<p>Command option '-X <i>name</i>' extracts element marked as <i>name</i>
|
1218
|
+
and command option '-x <i>name</i>' extracts content of element.
|
1219
|
+
</p>
|
1220
|
+
<a name="show.html"></a>
|
1221
|
+
<div class="program_caption">
|
1222
|
+
show.html</div>
|
1223
|
+
<pre class="program"><html>
|
1224
|
+
<body>
|
1225
|
+
<div <b>id="mark:content"</b>>
|
1226
|
+
<h1>Show</h1>
|
1227
|
+
<p>Name: <span id="mark:name">foo</span></p>
|
1228
|
+
<p>Email: <span id="mark:email">foo@mail.com</span></p>
|
1229
|
+
</div>
|
1230
|
+
</body>
|
1231
|
+
</html>
|
1232
|
+
</pre>
|
1233
|
+
<a name="show.plogic"></a>
|
1234
|
+
<div class="program_caption">
|
1235
|
+
show.plogic</div>
|
1236
|
+
<pre class="program">#name {
|
1237
|
+
value: user.name;
|
1238
|
+
}
|
1239
|
+
#email {
|
1240
|
+
value: user.email;
|
1241
|
+
}
|
1242
|
+
</pre>
|
1243
|
+
<div class="terminal_caption">
|
1244
|
+
compile with '-X'</div>
|
1245
|
+
<pre class="terminal">$ kwartz <b>-X content</b> -p show.plogic show.html
|
1246
|
+
<div>
|
1247
|
+
<h1>Show</h1>
|
1248
|
+
<p>Name: <span><%= user.name %></span></p>
|
1249
|
+
<p>Email: <span><%= user.email %></span></p>
|
1250
|
+
</div>
|
1251
|
+
</pre>
|
1252
|
+
<a name="test_show_cont.expected"></a>
|
1253
|
+
<div class="terminal_caption">
|
1254
|
+
compile with '-x'</div>
|
1255
|
+
<pre class="terminal">$ kwartz <b>-x content</b> -p show.plogic show.html
|
1256
|
+
<h1>Show</h1>
|
1257
|
+
<p>Name: <span><%= user.name %></span></p>
|
1258
|
+
<p>Email: <span><%= user.email %></span></p>
|
1259
|
+
</pre>
|
1260
|
+
<br>
|
1261
|
+
|
1262
|
+
|
1263
|
+
<a name="print-statement"></a>
|
1264
|
+
<h3 class="section2">Print Statement</h3>
|
1265
|
+
<p>Print statement is available in 'logic:' property.
|
1266
|
+
</p>
|
1267
|
+
<a name="print-stmt.html"></a>
|
1268
|
+
<div class="program_caption">
|
1269
|
+
print-stmt.html</div>
|
1270
|
+
<pre class="program"><ul>
|
1271
|
+
<li id="items">foo</li>
|
1272
|
+
</ul>
|
1273
|
+
</pre>
|
1274
|
+
<a name="print-stmt.eruby.plogic"></a>
|
1275
|
+
<div class="program_caption">
|
1276
|
+
print-stmt.eruby.plogic</div>
|
1277
|
+
<pre class="program">#items {
|
1278
|
+
logic: {
|
1279
|
+
for item in list
|
1280
|
+
_stag
|
1281
|
+
<b>print item</b>
|
1282
|
+
_etag
|
1283
|
+
end
|
1284
|
+
}
|
1285
|
+
}
|
1286
|
+
</pre>
|
1287
|
+
<a name="print-stmt.eruby.expected"></a>
|
1288
|
+
<div class="terminal_caption">
|
1289
|
+
compile</div>
|
1290
|
+
<pre class="terminal">$ kwartz -l eruby -p print-stmt.eruby.plogic print-stmt.html
|
1291
|
+
<ul>
|
1292
|
+
<% for item in list %>
|
1293
|
+
<li id="items"><b><%= item %></b></li>
|
1294
|
+
<% end %>
|
1295
|
+
</ul>
|
1296
|
+
</pre>
|
1297
|
+
<a name="print-stmt.php.plogic"></a>
|
1298
|
+
<div class="program_caption">
|
1299
|
+
print-stmt.php.plogic</div>
|
1300
|
+
<pre class="program">#items {
|
1301
|
+
logic: {
|
1302
|
+
foreach ($list as $item) {
|
1303
|
+
_stag();
|
1304
|
+
<b>print($item);</b>
|
1305
|
+
_etag();
|
1306
|
+
}
|
1307
|
+
}
|
1308
|
+
}
|
1309
|
+
</pre>
|
1310
|
+
<a name="print-stmt.php.expected"></a>
|
1311
|
+
<div class="terminal_caption">
|
1312
|
+
compile</div>
|
1313
|
+
<pre class="terminal">$ kwartz -l php -p print-stmt.php.plogic print-stmt.html
|
1314
|
+
<ul>
|
1315
|
+
<?php foreach ($list as $item) { ?>
|
1316
|
+
<li id="items"><b><?php echo $item; ?></b></li>
|
1317
|
+
<?php } ?>
|
1318
|
+
</ul>
|
1319
|
+
</pre>
|
1320
|
+
<a name="print-stmt.jstl.plogic"></a>
|
1321
|
+
<div class="program_caption">
|
1322
|
+
print-stmt.jstl.plogic</div>
|
1323
|
+
<pre class="program">#items {
|
1324
|
+
logic: {
|
1325
|
+
<c:forEach var="item" items="${list}">
|
1326
|
+
_stag
|
1327
|
+
<b>print item</b>
|
1328
|
+
_etag
|
1329
|
+
</c:forEach>
|
1330
|
+
}
|
1331
|
+
}
|
1332
|
+
</pre>
|
1333
|
+
<a name="print-stmt.jstl12.expected"></a>
|
1334
|
+
<div class="terminal_caption">
|
1335
|
+
compile (JSTL 1.2)</div>
|
1336
|
+
<pre class="terminal">$ kwartz -l jstl -p print-stmt.jstl.plogic print-stmt.html
|
1337
|
+
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
1338
|
+
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
|
1339
|
+
<ul>
|
1340
|
+
<c:forEach var="item" items="${list}">
|
1341
|
+
<li id="items"><b>${item}</b></li>
|
1342
|
+
</c:forEach>
|
1343
|
+
</ul>
|
1344
|
+
</pre>
|
1345
|
+
<a name="print-stmt.jstl11.expected"></a>
|
1346
|
+
<div class="terminal_caption">
|
1347
|
+
compile (JSTL 1.1)</div>
|
1348
|
+
<pre class="terminal">$ kwartz -l jstl -p print-stmt.jstl.plogic --jstl=1.1 print-stmt.html
|
1349
|
+
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
|
1350
|
+
<ul>
|
1351
|
+
<c:forEach var="item" items="${list}">
|
1352
|
+
<li id="items"><b><c:out value="${item}"/></b></li>
|
1353
|
+
</c:forEach>
|
1354
|
+
</ul>
|
1355
|
+
</pre>
|
1356
|
+
<p>It is recommended to use 'elem:', 'stag:', 'etag:', 'cont:', or 'value:' instead of
|
1357
|
+
print statement because they can escape or unescape exression value.
|
1358
|
+
</p>
|
1359
|
+
<br>
|
1360
|
+
|
1361
|
+
|
1362
|
+
<a name="begin"></a>
|
1363
|
+
<h3 class="section2">Add Code at Beginning/End of Document</h3>
|
1364
|
+
<p>'#DOCUMENT' is a special selector which represents the document.
|
1365
|
+
In '#DOCUMENT', properties 'begin:' and 'end:' are available to add codes at beginning/end of document.
|
1366
|
+
</p>
|
1367
|
+
<a name="document-test.html"></a>
|
1368
|
+
<div class="program_caption">
|
1369
|
+
document-test.html</div>
|
1370
|
+
<pre class="program"><html>
|
1371
|
+
<body>hello</body>
|
1372
|
+
</html>
|
1373
|
+
</pre>
|
1374
|
+
<a name="document-test.plogic"></a>
|
1375
|
+
<div class="program_caption">
|
1376
|
+
document-test.plogic</div>
|
1377
|
+
<pre class="program"><b>#DOCUMENT</b> {
|
1378
|
+
<b>begin:</b> {
|
1379
|
+
title = _context[:title]
|
1380
|
+
user = _context[:user]
|
1381
|
+
}
|
1382
|
+
<b>end:</b> {
|
1383
|
+
print "<!--end-->\n"
|
1384
|
+
}
|
1385
|
+
}
|
1386
|
+
</pre>
|
1387
|
+
<a name="document-test.expected"></a>
|
1388
|
+
<div class="terminal_caption">
|
1389
|
+
compile</div>
|
1390
|
+
<pre class="terminal">$ kwartz -p document-test.plogic document-test.html
|
1391
|
+
<b><% title = _context[:title] %></b>
|
1392
|
+
<b><% user = _context[:user] %></b>
|
1393
|
+
<html>
|
1394
|
+
<body>hello</body>
|
1395
|
+
</html>
|
1396
|
+
<b><%= "<!--end-->\n" %></b>
|
1397
|
+
</pre>
|
1398
|
+
<br>
|
1399
|
+
|
1400
|
+
|
1401
|
+
<br>
|
1402
|
+
|
1403
|
+
|
1404
|
+
<a name="topics"></a>
|
1405
|
+
<h2 class="section1">Other Topics</h2>
|
1406
|
+
<a name="restriction1"></a>
|
1407
|
+
<h3 class="section2">Restrictions around presentation logic</h3>
|
1408
|
+
<p>There are several restrictions in presentation logic file.
|
1409
|
+
</p>
|
1410
|
+
<ul type="disc">
|
1411
|
+
<li>Position in which comment '<code>/* ... */</code>' is available is limited.
|
1412
|
+
In the following example, 'value:' property will be error because
|
1413
|
+
string from 'expr;' to the end of comment is regared as argument of 'value:' property.
|
1414
|
+
<pre class="program"> /* this comment is ok */
|
1415
|
+
#foo {
|
1416
|
+
/* this comment is ok */
|
1417
|
+
value: expr; /* this comment is NG! */
|
1418
|
+
logic: { /* this comment will be Ruby syntax error! */
|
1419
|
+
for item in list # ruby comment is OK in 'logic:' property
|
1420
|
+
_stag
|
1421
|
+
_cont
|
1422
|
+
_etag
|
1423
|
+
end
|
1424
|
+
}
|
1425
|
+
}
|
1426
|
+
</pre>
|
1427
|
+
</li>
|
1428
|
+
</ul>
|
1429
|
+
<ul type="disc">
|
1430
|
+
<li>'_stag', '_cont', '_etag', '_elem', '_element()', and '_content()' must be placed
|
1431
|
+
one in per line, because Kwartz-ruby scans 'logic:' property with regular expression
|
1432
|
+
pattern such as '/^\s*_(stag|cont|etag|element|content)(\(.*\))\s*$/' or so.
|
1433
|
+
<pre class="program"> #foo {
|
1434
|
+
logic: {
|
1435
|
+
# OK
|
1436
|
+
if x > 0
|
1437
|
+
_elem
|
1438
|
+
end
|
1439
|
+
|
1440
|
+
# NG (parse failed)
|
1441
|
+
_elem if x > 0
|
1442
|
+
}
|
1443
|
+
}
|
1444
|
+
</pre>
|
1445
|
+
</li>
|
1446
|
+
</ul>
|
1447
|
+
<ul type="disc">
|
1448
|
+
<li>The number of '{' and '}' must be equal in 'logic:' property.
|
1449
|
+
<pre class="program">#foo {
|
1450
|
+
logic: {
|
1451
|
+
str = "{" # this will be parse error
|
1452
|
+
_elem
|
1453
|
+
}
|
1454
|
+
}
|
1455
|
+
#bar {
|
1456
|
+
logic: {
|
1457
|
+
str = "{" # add dummy '}' in comment!
|
1458
|
+
_elem
|
1459
|
+
}
|
1460
|
+
}
|
1461
|
+
</pre>
|
1462
|
+
</li>
|
1463
|
+
</ul>
|
1464
|
+
<ul type="disc">
|
1465
|
+
<li>'@import "file.plogic"' should be at the beginning of presentation logic file.
|
1466
|
+
<pre class="program"> /* OK */
|
1467
|
+
@import 'file1.plogic';
|
1468
|
+
|
1469
|
+
#foo {
|
1470
|
+
}
|
1471
|
+
|
1472
|
+
/* NG */
|
1473
|
+
@import 'file2.plogic';
|
1474
|
+
</pre>
|
1475
|
+
</li>
|
1476
|
+
</ul>
|
1477
|
+
<br>
|
1478
|
+
|
1479
|
+
|
1480
|
+
<a name="restriction2"></a>
|
1481
|
+
<h3 class="section2">Restrictions around presentation data</h3>
|
1482
|
+
<p>Kwartz parses presentation data file by regular expression pattern matching.
|
1483
|
+
It means that Kwartz doesn't use HTML parser nor XML parser for parsing presentation data.
|
1484
|
+
This approach enables Kwartz to handle any type of text file, and also brings the following restrictions to Kwartz.
|
1485
|
+
</p>
|
1486
|
+
<ul type="disc">
|
1487
|
+
<li>Cannot omit end tag if id attribute is specified.
|
1488
|
+
<pre class="program"><!-- Kwartz cannot parse the following because </li> is omitted. -->
|
1489
|
+
<ul>
|
1490
|
+
<li id="foo">foo
|
1491
|
+
</ul>
|
1492
|
+
</pre>
|
1493
|
+
An Element which doesn't have any content is to be written as an empty tag such as <code><foo id="..."/></code>.
|
1494
|
+
</li>
|
1495
|
+
</ul>
|
1496
|
+
<ul type="disc">
|
1497
|
+
<li>However, <code><input></code>, <code><br></code>, <code><meta></code>, <code><img></code>, and <code><hr></code> are allowed to omit end tag.
|
1498
|
+
And these doesn't have to be written as an empty tag.
|
1499
|
+
<pre class="program"><!-- </input/> is omitted but Kwartz can parse correctly. -->
|
1500
|
+
<input type="text" name="user" id="user">
|
1501
|
+
</pre>
|
1502
|
+
Configuration option PROPERTY_NOEND lists these tag names in file 'kwartz/config.rb'.
|
1503
|
+
Upper-case and lower-case are distinguished.
|
1504
|
+
</li>
|
1505
|
+
</ul>
|
1506
|
+
<ul type="disc">
|
1507
|
+
<li>Attribute values should be surrounded with '<code>"</code>'.
|
1508
|
+
<pre class="program"><!-- Kwartz fails parsing because attribute value is not surrounded with '"'. -->
|
1509
|
+
<h1 id="value:title" class=title>title</h1>
|
1510
|
+
</pre>
|
1511
|
+
</li>
|
1512
|
+
</ul>
|
1513
|
+
<br>
|
1514
|
+
|
1515
|
+
|
1516
|
+
<a name="makefile"></a>
|
1517
|
+
<h3 class="section2">Makefile and Rakefile</h3>
|
1518
|
+
<p>The followings are examples of Makefile, Rakefile, Rantfile, and Rookbook.
|
1519
|
+
</p>
|
1520
|
+
<div class="program_caption">
|
1521
|
+
example of Makefile</div>
|
1522
|
+
<pre class="program">.SUFFIXES: .rhtml .html .plogic
|
1523
|
+
|
1524
|
+
ALL = file1.rhtml file2.rhtml file3.rhtml
|
1525
|
+
LAYOUT = layout.html
|
1526
|
+
|
1527
|
+
default: $(ALL)
|
1528
|
+
|
1529
|
+
%.rhtml: %.html %.plogic
|
1530
|
+
kwartz -l eruby -p $*.plogic $*.html > $@
|
1531
|
+
|
1532
|
+
file3.rhtml: file3.html file3.plogic $(LAYOUT)
|
1533
|
+
kwartz -p file3.plogic -L $(LAYOUT) file3.html > file3.rhtml
|
1534
|
+
</pre>
|
1535
|
+
<div class="program_caption">
|
1536
|
+
example of Rakefile for <a href="http://rake.rubyforge.org/">Rake</a></div>
|
1537
|
+
<pre class="program">all = ["file1.rhtml", "file2.rhtml", "file3.rhtml"]
|
1538
|
+
layout = 'layout.html'
|
1539
|
+
|
1540
|
+
task :default => all
|
1541
|
+
|
1542
|
+
rule '.rhtml' => ['.html', '.plogic'] do |t|
|
1543
|
+
pdata, plogic = t.sources
|
1544
|
+
sh "kwartz -l eruby -p #{plogic} #{pdata} > #{t.name}"
|
1545
|
+
end
|
1546
|
+
|
1547
|
+
file 'file3.rhtml' => ["file3.html", "file3.plogic", layout] do |t|
|
1548
|
+
pdata, plogic, layout = t.prerequisites
|
1549
|
+
sh "kwartz -p #{plogic} -L #{layout} #{pdata} > #{t.name}"
|
1550
|
+
end
|
1551
|
+
</pre>
|
1552
|
+
<div class="program_caption">
|
1553
|
+
example of Rantfile for <a href="http://make.rubyforge.org/">Rant</a></div>
|
1554
|
+
<pre class="program">all = ["file1.rhtml", "file2.rhtml", "file3.rhtml"]
|
1555
|
+
layout = 'layout.html'
|
1556
|
+
|
1557
|
+
task :default => all
|
1558
|
+
|
1559
|
+
gen Rule, ".rhtml" => [".html", ".plogic"] do |t|
|
1560
|
+
pdata, plogic = t.prerequisites
|
1561
|
+
sys "kwartz -p #{plogic} #{pdata} > #{t.name}"
|
1562
|
+
end
|
1563
|
+
|
1564
|
+
file "file3.rhtml" => ["file3.html", "file3.plogic", layout] do |t|
|
1565
|
+
pdata, plogic, layout = t.prerequisites
|
1566
|
+
sys "kwartz -p #{plogic} -L #{layout} #{pdata} > #{t.name}"
|
1567
|
+
end
|
1568
|
+
</pre>
|
1569
|
+
<div class="program_caption">
|
1570
|
+
example of Rookbook for <a href="http://www.rubyforge.org/projects/rook">Rook</a></div>
|
1571
|
+
<pre class="program">properties:
|
1572
|
+
- layout : layout.html
|
1573
|
+
|
1574
|
+
variables:
|
1575
|
+
- all : [ file1.rhtml, 'file2.rhtml', file3.rhtml ]
|
1576
|
+
- rook_product: $(all)
|
1577
|
+
|
1578
|
+
recipes:
|
1579
|
+
|
1580
|
+
- product: *.rhtml
|
1581
|
+
ingreds: [ $(1).html, $(1).plogic ]
|
1582
|
+
method: |
|
1583
|
+
pdata, plogic = @ingreds
|
1584
|
+
sys "kwartz -p #{plogic} #{pdata} > #{@product}"
|
1585
|
+
|
1586
|
+
- product: file3.rhtml
|
1587
|
+
ingres: [ file3.html, file3.plogic, $(layout) ]
|
1588
|
+
method: |
|
1589
|
+
pdata, plogic, layout = @ingreds
|
1590
|
+
sys "kwartz- p #{plogic} -L $(layout) #{pdata} > #{@product}"
|
1591
|
+
</pre>
|
1592
|
+
<br>
|
1593
|
+
|
1594
|
+
|
1595
|
+
<a name="kwartz-lib"></a>
|
1596
|
+
<h3 class="section2">Use Kwartz as Library</h3>
|
1597
|
+
<p>If you want to use Kwartz library in your Ruby script, use Kwartz::Main class.
|
1598
|
+
</p>
|
1599
|
+
<div class="program_caption">
|
1600
|
+
usage of Kwartz::Main class</div>
|
1601
|
+
<pre class="program"><b>require 'kwartz'</b>
|
1602
|
+
<b>require 'kwartz/main'</b>
|
1603
|
+
|
1604
|
+
argv = %w[-p hello.plogic -L layout.html hello.html]
|
1605
|
+
<b>main = Kwartz::Main.new(argv)</b>
|
1606
|
+
<b>output = main.execute()</b>
|
1607
|
+
File.open('hello.rhtml', 'w') { |f| f.write(output) }
|
1608
|
+
</pre>
|
1609
|
+
<br>
|
1610
|
+
|
1611
|
+
|
1612
|
+
<a name="start_link_to"></a>
|
1613
|
+
<h3 class="section2"><code>link_to()</code> method in Ruby on Rails</h3>
|
1614
|
+
<p><code>link_to()</code> method in Ruby on Rails is a little incompatible with Kwartz
|
1615
|
+
because you must specify link label in both presentation data and presentation logic.
|
1616
|
+
It's not DRY.
|
1617
|
+
</p>
|
1618
|
+
<div class="program_caption">
|
1619
|
+
presentation data</div>
|
1620
|
+
<pre class="program"><a href="#" id="mark:link_to_new"><b>Create new recipe</b></a>
|
1621
|
+
</pre>
|
1622
|
+
<div class="program_caption">
|
1623
|
+
presentation logic</div>
|
1624
|
+
<pre class="program">#link_to_new {
|
1625
|
+
elem: link_to <b>'Create new recipe'</b>, :action=>'new';
|
1626
|
+
}
|
1627
|
+
</pre>
|
1628
|
+
<p>It is recommended to include the following helper method
|
1629
|
+
in your 'app/helpers/application_helper.rb'.
|
1630
|
+
</p>
|
1631
|
+
<pre class="program">module ApplicationHelper
|
1632
|
+
|
1633
|
+
def start_link_to(options = {}, html_options = nil, *parameters_for_method_reference)
|
1634
|
+
s = link_to('', options, html_options, *parameters_for_method_reference)
|
1635
|
+
s.sub!(/<\/a>\z/, '')
|
1636
|
+
end
|
1637
|
+
alias anchor start_link_to
|
1638
|
+
|
1639
|
+
def start_link_to_remote(options = {}, html_options = {})
|
1640
|
+
s = link_to_remote(options, html_options)
|
1641
|
+
s.sub!(/<\/a>\z/, '')
|
1642
|
+
end
|
1643
|
+
alias anchor_remote start_link_to_remote
|
1644
|
+
|
1645
|
+
end
|
1646
|
+
</pre>
|
1647
|
+
<p>The above methods prints only start tag. You don't need to write label twice.
|
1648
|
+
</p>
|
1649
|
+
<div class="program_caption">
|
1650
|
+
presentation data</div>
|
1651
|
+
<pre class="program"><a href="#" id="mark:link_to_new">Create new recipe</a>
|
1652
|
+
</pre>
|
1653
|
+
<div class="program_caption">
|
1654
|
+
presentation logic</div>
|
1655
|
+
<pre class="program">#link_to_new {
|
1656
|
+
stag: <b>start_link_to</b> :action=>'new';
|
1657
|
+
}
|
1658
|
+
</pre>
|
1659
|
+
<br>
|
1660
|
+
|
1661
|
+
|
1662
|
+
<br>
|
1663
|
+
|
1664
|
+
|
1665
|
+
|
1666
|
+
</div>
|
1667
|
+
</blockquote>
|
1668
|
+
|
1669
|
+
</body>
|
1670
|
+
</html>
|