Presentation Pattern Catalog
$Release: 3.1.2 $
$Date: 2006-09-28 22:22:34 +0900 (Thu, 28 Sep 2006) $
Preface
Kwartz is the template system which realized the concept of 'Independence of Presentation Logic (IoPL).' This concept enables to use complex presentation logics without breaking HTML design at all.
There are several patterns which help you to separate presentation logic from presentation data well. These patterns are called 'Presentation Patterns.'
This document shows Presentation Patterns.
Table of Contents
Replacement
Replace Element with Value Pattern
Description
You can replace the element with the value of expression. This is named 'Replace Element with Value Pattern.'
Situation
This pattern is very useful to print out the value of a variable or an expression as text.
Example Code
Hello <span id="mark:user">World</span>!
/* print value of variable 'username' instead of the element */
#user {
logic: {
print username
}
}
Hello <%= username %>!
Supplement
Kwartz supports the short-notation of this pattern.
#user {
elem: username;
}
The output script will be:
Hello <%= username %>!
Replace Content with Value Pattern
Description
You can also replace only the content of the element in the same way. This is named 'Replace Content with Value Pattern.'
Situation
This pattern is used frequently because the situation to replace the content with value is very popular.
Example Code
<h1 id="mark:title">Example</h1>
/* print expression value instead of content text */
#title {
logic: {
_stag # start-tag
print title
_etag # end-tag
}
}
<h1><%= title %></h1>
Supplement
Kwartz provides the shorter notation for this pattern.
#title {
cont: title;
/* or value: title; */
}
The output will be:
<h1><%= title %></h1>
Kwartz Directive 'kw:d="cont: expr"' or 'kw:d="kw:d="value: expr"' lets you to use this pattern without presentation logic file.
<h1 kw:d="value: title">Example</h1>
Default Content Pattern
Description
You can replace element or content only when a certain condition is true and the original element or content is displayed when the condition is false. This is named 'Default Content Pattern.'
This pattern is an combination of 'Replace Element with Value Pattern' and 'Delete Tag Pattern'.
Situation
For example, there may be a placeholder to display username, and string 'Guest' is displayed when username is null or empty.
Example Code
The following is an example to print content text as default value when value is null or empty.
Hello <span id="mark:user">World</span>!
/* Print 'guest' as a default value when 'username' is empty string */
#user {
logic: {
if username && !username.empty?
print username
else
_cont # print content text
end
}
}
Hello <% if username && !username.empty? %> <%= username %><% else %> World<% end %> !
Suppliement
Directive 'kw:d="default: expr"' is for Default Content Pattern.
Hello <span kw:d="default: user">World</span>!
The output is:
Hello <span><% if (user) && !(user).to_s.empty? then %><%= user %><% else %>World<% end %></span>!
Replace Element with Element/Content Pattern
Description
You can replace the element with other element or content. This pattern is named 'Replace Element with Element Pattern.' or 'Replace Element with Content Pattern'.
Situation
This pattern is very useful to reuse the element in other place.
Example Code
<div id="mark:links"> <a href="/">HOME</a> | <a href="/doc">Document</a> | <a href="/faq">FAQ</a> </div> <p>Welcome to my Home Page!</p> <div id="mark:links2"> Home | Document | FAQ </div>
/* replace the element 'links2' with the element 'links' */
#links2 {
logic: {
_element(links)
}
}
_element(name) represents the element which is marked with id="mark:name" or id="name".
<div> <a href="/">HOME</a> | <a href="/doc">Document</a> | <a href="/faq">FAQ</a> </div> <p>Welcome to my Home Page!</p> <div> <a href="/">HOME</a> | <a href="/doc">Document</a> | <a href="/faq">FAQ</a> </div>
Use '_content(name)' instead of '_element(name)' if you want to reuse content of other element.
/* replace the element 'links2' with the content 'links' */
#links2 {
logic: {
_content(links)
}
}
Supplement
Directive 'id="replace_element_with_element:name"' and 'id="replace_element_with_content:name"' lets you to use this pattern without presentation logic file.
<div id="mark:links"> <a href="/">HOME</a> | <a href="/doc">Document</a> | <a href="/faq">FAQ</a> </div> <p>Welcome to my Home Page!</p> <div id="replace_element_with_element:links"> Home | Document | FAQ </div>
The command-line option '-i file,file2,...' enables you
to use elements described in other files.
See Kwartz Users' Guide for details.
Replace Content with Element/Content Pattern
Description
You can replace content of an element with other element or content. This pattern is named 'Replace Content with Element Pattern' and 'Replace Content with Content Pattern'.
Situation
This pattern is very useful to separate contents data and design layout into separate files.
Example Code
The following example contains four files.
- contents.html, contents.plogic - repsesents contents data.
- layout.html, layout.plogic - represents desing layout.
<html>
<body>
<p>menu:</p>
<ul id="mark:menu">
<li><a href="..." id="mark:menu_item">menu1</a></li>
</ul>
<p>article:</p>
<div id="mark:article">
<h2>What is Kwartz?</h2>
<p>Kwartz is a template system, which realized the concept
<strong>`Independence of Presentation Logic</strong>.
</p>
</div>
</body>
</html>
#menu {
logic: {
_stag
for item in menu_list
_cont
end
_etag
}
}
#menu_item {
value: item['name'];
attrs: "href" item['url'];
}
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<title>webpage</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="design.css">
</head>
<body>
<table border="0">
<tr>
<!-- menu part -->
<td class="menu" width="100" valign="top"
id="mark:placeholder_menu">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</td>
<!-- article part -->
<td class="article" width="400" valign="top"
id="mark:placeholder_article">
aaa<br>
bbb<br>
ccc<br>
ddd<br>
</td>
</tr>
<!-- footer part -->
<tr>
<td colspan="2" class="copyright">
copyright© 2004-2006 kuwata-lab.com All Rights Reserverd
</td>
</tr>
</table>
</body>
</html>
/* replace content with other element */
#placeholder_menu {
logic: {
_stag
_element(menu)
_etag
}
}
/* replace content with other content */
#placeholder_article {
logic: {
_stag
_content(article)
_etag
}
}
Compilation requires the command-line option -i file1,file2,...
which enables to import elements defined in other files.
Compile:
$ kwartz -l eruby -i contents.html -p contens.plogic,layout.plogic layout.html
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<title>webpage</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="design.css">
</head>
<body>
<table border="0">
<tr>
<!-- menu part -->
<td class="menu" width="100" valign="top">
<ul>
<% for item in menu_list %>
<li><a href="<%= item['url'] %>"><%= item['name'] %></a></li>
<% end %>
</ul>
</td>
<!-- article part -->
<td class="article" width="400" valign="top">
<h2>What is Kwartz?</h2>
<p>Kwartz is a template system, which realized the concept
<strong>`Independence of Presentation Logic</strong>.
</p>
</td>
</tr>
<!-- footer part -->
<tr>
<td colspan="2" class="copyright">
copyright© 2004-2006 kuwata-lab.com All Rights Reserverd
</td>
</tr>
</table>
</body>
</html>
Supplement
Kwartz Directive 'id="replace_content_with_element:name"' and 'id="replace_content_with_content:name"' lets you to use this pattern without presentation logic file(layout.plogic).
:
<!-- menu part -->
<td class="menu" width="100" valign="top"
id="replace_content_with_element:menu">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</td>
<!-- article part -->
<td class="article" width="400" valign="top">
id="replace_content_with_content:article">
aaa<br>
bbb<br>
ccc<br>
ddd<br>
</td>
:
Deletion
Delete Element Pattern
Description
If presentation logic is empty, the element is not printed out. This pattern is named 'Delete Element Pattern' or 'Dummy Element Pattern.'
Situation
This pattern enables you to delete dummy element in presentation data.
Example Code
<ul> <li>foo</li> <li id="dummy">bar</li> </ul>
/* delete dummy element */
#dummy {
logic: {
}
}
<ul> <li>foo</li> </ul>
Supplement
Kwartz directive 'id="dummy:str"' lets you to use this pattern without presentation logic file.
<ul> <li>foo</li> <li id="dummy:d1">bar</li> </ul>
Delete Tag Pattern
Description
If you use only _cont and don't use _stag and _cont,
you can remove start and end tags of the element.
This pattern is named 'Delete Tag Pattern' or 'Dummy Tag Pattern.'
Situation
This pattern is very useful if you want to print tags according to condition.
Example Code
<a href="..." id="mark:next">Next</a>
/* delete tags when url is empty */
#next {
attrs: "href" url;
logic: {
if !url || url.empty?
_cont
else
_stag
_cont
_etag
end
}
}
<% if !url || url.empty? %> Next<% else %> <a href="<%= url %>">Next</a> <% end %>
Iteration
Iterate Element Pattern
Description
Iteration which contains _stag, _cont, and _etag represents to iterate the element.
This pattern is named 'Iterate Element' pattern.
Situation
The situation is very popular which requres to print list items. This pattern is very useful for all these situations.
Example Code
<table> <tr id="mark:list"> <td id="mark:item">item</td> </tr> </table>
/* iterate element */
#list {
logic: {
for item in list
_stag
_cont
_etag
end
}
}
#item {
value: item;
}
<table> <% for item in list %> <tr> <td><%= item %></td> </tr> <% end %> </table>
Supplement
Kwartz directive kw:d="for item in list" lets you to use this pattern without presentation logic file.
See reference manual for details.
<table>
<tr kw:d="for item in list">
<td kw:d="value: item">item</td>
</tr>
</table>
Iterate Content Pattern
Description
Iteration which contains only _cont represents to iterate the content.
This pattern is named 'Iterate Content' pattern.
Situation
This pattern is very useful when creating <dl></dl> list or table which repeats several rows.
Example Code
<dl id="mark:list"> <dt id="mark:text">text</dt> <dd id="mark:desc">description</dd> </dl>
/* iterate only content */
#list {
logic: {
_stag
for item in items
_cont
end
_etag
}
}
#text {
value: item.text;
}
#desc {
value: item.desc;
}
<dl> <% for item in items %> <dt><%= item.text %></dt> <dd><%= item.desc %></dd> <% end %> </dl>
Supplement
Kwartz directive kw:d=list item in list lets you to use this pattern without presentation logic file.
See reference manual for details.
<dl kw:d="list item in items"> <dt kw:d="value: item.text">text</dt> <dd kw:d="value: item.desc">description</dd> </dl>
Selection
Select Element/Content Pattern
Description
The following is an example to choose a certain element or content from some elements. This pattern is named 'Select Element Pattern' or 'Select Content Pattern'.
Situation
This pattern is very useful when you want to change data according to conditions.
Example Code
<div id="mark:message"> <span style="color:red" id="mark:error">ERROR!</span> <span style="color:blue" id="mark:warning">Warning:</span> <span style="color:black" id="mark:good">No error.</span> </div>
/* select element according to status */
#message {
logic: {
if status == 'error'
_element(error) # ERROR!
else if (status == 'warning')
_element(warning) # Warning:
else
_element(good) # No error.
end
}
}
<% if status == 'error' %> <span style="color:red">ERROR!</span> <% else if (status == 'warning') %> <span style="color:blue">Warning:</span> <% else %> <span style="color:black">No error.</span> <% end %>
Supplement
Kwartz directive 'kw:d="if condition"', 'kw:d="elsif condition"',
and 'kw:d="else"' let you to use this pattern without presentation logic file.
<div> <span style="color:red" kw:d="if status=='error'">ERROR!</span> <span style="color:blue" kw:d="elsif status=='warning'">Warning:</span> <span style="color:black" kw:d="else">No error.</span> </div>
Pick-up Element/Content Pattern
Description
If you want to use certain elements or contents, do marking the elements and use only them in presentation logic. Unmarked elements are ignored and not printed. This pattern is named 'Pick-up Element Pattern' or 'Pick-up Content Pattern'.
'Pick-up Element' pattern is opposite of 'Dummy Element' pattern. In 'Dummy Element' pattern, dummy elements are marked and removed so that necessary elements are leaved. In 'Pick-up Element' pattern, necessary elements are marked and leaved so that dummy elements are removed.
Situation
This pattern is useful when many dummy datas are exist.
Example Code
<html>
<body>
<div id="breadcrumbs">
<a href="/" id="mark:crumb">Home</a>
<span id="mark:separator">></span>
<a href="/aaa/">AAA</a> <
<a href="/aaa/bbb/">BBB</a> &lgt;
<a href="/aaa/bbb/ccc">CCC</a> &lgt;
<strong id="mark:title">title</strong>
</div>
</body>
</html>
#breadcrumbs {
logic: {
for item in list
_element(crumb) # print <a>...</a>
_content(separator) # print '>'
end
_element(title) # print <strong>title</strong>
}
}
#crumb {
value: item['name'];
attrs: "href" item['path'];
}
#title {
value: title;
}
<html>
<body>
<% for item in list %>
<a href="<%= item['path'] %>"><%= item['name'] %></a>
><% end %>
<strong><%= title %></strong>
</body>
</html>
Extract Element/Content Pattern
Description
It is able to extract a certain element or content form the whole presentation data. Other element and text strings are not printed. This pattern is named 'Extract Element Pattern' or 'Extract Content Pattern'.
Situation
This pattern is very useful to extract HTML fragments and make them libraries.
Example Code
The following is an example to extract the HTML fragments 'tablist', 'menulist', and 'copyright' and generates the output scripts for them.
<html id="mark:whole">
<head>
<title>Design Examples</title>
<link rel="stylesheet" href="design.css" type="text/css">
</head>
<body>
<div id="mark:tablist">
<div class="tabs" id="mark:tabs">
<a href="/" class="" id="mark:tab">Home</a>
<a href="/product/" class="selected">Product</a>
<a href="/download/" class="">Download</a>
<a href="/support/" class="">Support</a>
</div>
<div class="tabsline">
</div>
</div>
<br>
<div id="mark:menulist">
<span class="menu_title" id="value:menu_title">MenuList</span>
<div class="menus" id="mark:menus">
<a href="/cgi-bin/email.cgi" class="" id="mark:menu">E-Mail</a>
<span id="mark:menu_separator"><br></span>
<a href="/cgi-bin/board.cgi" class="selected">MesgBoard</a><br>
<a href="/cgi-bin/photo.cgi" class="">PhotoAlbum</a><br>
<a href="/cgi-bin/greeting.cgi" class="">GreetingCard</a><br>
</div>
</div>
<br>
<p> ..... </p>
<p> ..... </p>
<p> ..... </p>
<div align="center" class="copyright" id="mark:copyright">
Copyright© 2004-2006 kuwata-lab. All Rights Reserved.
</div>
</body>
</html>
/* replace the 'whole' element with the element you want to extract */
#whole {
logic: {
_element(copyright)
}
}
/* replace the 'whole' element with the element you want to extract */
#whole {
logic: {
_element(tablist)
}
}
#tabs {
logic: {
_stag
for tab in tablist
klass = current_tabname == tab['name'] ? 'selected' : ''
_element(tab)
end
_etag
}
}
#tab {
value: tab['name'];
attrs: "href" tab['href'],
"class" klass;
}
/* replace the 'whole' element with the element you want to extract */
#whole {
logic: {
_element(menulist)
}
}
#menus {
logic: {
_stag
for menu in menulist
_element(menu)
_element(menu_separator)
end
_etag
}
}
#menu {
value: menu['name'];
attrs: "href" menu['cgipath'],
"class" klass;
logic: {
klass = current_menu == menu['name'] ? 'selected' : ''
_elem
}
}
### copyright $ kwartz -l eruby -p copyright.plogic design.pdata > copyright.rhtml ### tablist $ kwartz -l eruby -p tablist.plogic design.pdata > tablist.rhtml ### menulist $ kwartz -l eruby -p menulist.plogic design.pdata > menulist.rhtml
<div align="center" class="copyright">
Copyright© 2004-2006 kuwata-lab. All Rights Reserved.
</div>
<div>
<div class="tabs">
<% for tab in tablist %>
<% klass = current_tabname == tab['name'] ? 'selected' : '' %>
<a href="<%= tab['href'] %>" class="<%= klass %>"><%= tab['name'] %></a>
<% end %>
</div>
<div class="tabsline">
</div>
</div>
<div>
<span class="menu_title" id="value:menu_title">MenuList</span>
<div class="menus">
<% for menu in menulist %>
<% klass = current_menu == menu['name'] ? 'selected' : '' %>
<a href="<%= menu['cgipath'] %>" class="<%= klass %>"><%= menu['name'] %></a>
<span><br></span>
<% end %>
</div>
</div>
Supplement
The command-line option '-X name' extracts the element marked with name in kwartz-ruby.
The command-line option '-x name' extracts the content of the element marked with name in kwartz-ruby.