Presentation Pattern Catalog
4 Selection
4-1 Select Element/Content Pattern
4-1-1 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'.
4-1-2 Situation
This pattern is very useful when you want to change data according to conditions.
4-1-3 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 %>
4-1-4 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>
4-2 Pick-up Element/Content Pattern
4-2-1 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.
4-2-2 Situation
This pattern is useful when many dummy datas are exist.
4-2-3 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>
4-3 Extract Element/Content Pattern
4-3-1 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'.
4-3-2 Situation
This pattern is very useful to extract HTML fragments and make them libraries.
4-3-3 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>
4-3-4 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.