Presentation Pattern Catalog
last update: $Date: 2005-06-29 12:58:35 +0900 (Wed, 29 Jun 2005) $
Preface
<<<<<<< .mine Kwartz is the template system which realized the concept of 'Separation of Presentation Logic and Presentation Data (SoPL/PD)' or 'Independence of Presentation Logic (IoPL).' SoPL/PD (or IoPL) enables to use complex presentation logics without breaking HTML design at all. ======= Kwartz is a template system which realized the concept 'Separation of Presentation Logic and Presentation Data (SoPL/PD)' or 'Independence of Presentation Logic (IoPL)'. SoPL/PD (or IoPL) enables to use complex presentation logics without breaking HTML design at all. >>>>>>> .r95
There are several patterns which help you to separate presentation logic and presentation data well. These patterns are called 'Presentation Patterns.'
This document shows Presentation Patterns.
Table of Contents
ChangeLog
- 2005-06-27
-
- Wrong output script in the section 'Iterate Element Pattern' is corrected ([bug:1228301]).
- '<ul></ul>' is changed to '<dl></dl>' in the section 'Iterate Content Pattern' ([bug:1228301]).
- 2005-03-21
-
- add text for Kwartz directives.
- add subsubsection title for all patterns.
- add 'supplement' subsubsection for 'Replace Element by Value Pattern'.
Replacement
Replace Element by Value Pattern
Description
You can replace the element with the value of a variable or an expression. This is named 'Replace Element by 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>!
#user { plogic: { print(username); // print value of variable 'username' instead of the element } }
### for eRuby Hello <%= username %>! ### for PHP Hello <?php echo $username; ?>! ### for JSTL Hello <c:out value="${username}" escapeXml="false"/>! ### for Velocity Hello $!{username}!
Supplement
The following is an example to print content text as default value when value is null or empty. This examples is an combination of 'Replace Element by Value Pattern' and 'Delete Tag Pattern'.
#user { plogic: { // Print out value of variable 'username'. // Print 'guest' as a default value when 'username' is null or empty string. if (username == empty) { @cont; // print out content text } else { print(username); // print out value of variable } } }
Replace Content by Value Pattern
Description
You can also replace only the content of the element in the same way. This is named 'Replace Content by Value Pattern.'
Situation
This pattern is used frequently because the situation to replace the content by value is very popular.
Example Code
<h1 id="mark:title">Example</h1>
#title { plogic: { @stag; print(title); // print value of a variable 'title' instead of content @etag; } }
### for eRuby <h1><%= title %></h1> ### for PHP <h1><?php echo $title; ?></h1> ### for JSTL <h1><c:out value="${title}" escapeXml="false"/></h1> ### for Velocity <h1>$!{title}</h1>
Supplement
The 'Replace Content by Value Pattern' is to be described as the following in Kwartz.
#title { value: title; // print value of a variable 'title' instead of content }
Kwartz Directive 'id="value:expression"
' lets you to use this pattern without presentation logic file.
<h1 id="value:title">Example</h1>
Replace Element by Element Pattern
Description
You can replace the element by other element. This pattern is named 'Replace Element by Element 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>
#links2 { plogic: { @element(links); // replace the element 'links2' by the element 'links' } }
@element(name)
represents the element which is marked by 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>
Supplement
Directive 'id="replace: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:links"> Home | Document | FAQ </div>
The command-line option '-i file,file2,...
' enables you to use elements
which are described in other files.
<div id="mark:links"> <a href="/">HOME</a> | <a href="/doc">Document</a> | <a href="/faq">FAQ</a> </div>
<div id="mark:links1"> Home | Document | FAQ </div> <p>Welcome to my Home Page!</p> <div id="mark:links2"> Home | Document | FAQ </div>
#links1 { plogic: { @element(links); } } #links2 { plogic: { @element(links); } }
$ kwartz -l eruby -i links.html -p page.plogic page.html
<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>
Replace Content by Element Pattern
Description
You can replace content of an element by other element. This pattern is named 'Replace Content by Element Pattern' or 'Placeholder 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>`Separation of Presentation Logic and Presentation Data'(SoPL/PD)</strong>. </p> </div> </body> </html>
#menu { plogic: { @stag; foreach (item in menu_list) { @cont; } @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 id="value:title">...title...</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 width="100" valign="top"> <div class="menu" id="mark:placeholder_menu"> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> </div> </td> <!-- article part --> <td width="400" valign="top"> <div class="article" id="mark:placeholder_article"> aaa<br> bbb<br> ccc<br> ddd<br> </div> </td> </tr> <!-- footer part --> <tr> <td colspan="2" class="copyright"> copyright© 2004-2005 kuwata-lab.com All Rights Reserverd </td> </tr> </table> </body> </html>
#placeholder_menu { plogic: { @stag; @element(menu); // replace content by other element @etag; } } #placeholder_article { plogic: { @stag; @element(article); // replace content by other element @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><%= title %></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 width="100" valign="top"> <div class="menu"> <ul> <% for item in menu_list do %> <li><a href="<%= item["url"] %>"><%= item["name"] %></a></li> <% end %> </ul> </div> </td> <!-- article part --> <td width="400" valign="top"> <div class="article"> <div> <h2>What is Kwartz?</h2> <p>Kwartz is a template system, which realized the concept <strong>`Separation of Presentation Logic and Presentation Data'(SoPL/PD)</strong>. </p> </div> </div> </td> </tr> <!-- footer part --> <tr> <td colspan="2" class="copyright"> copyright© 2004-2005 kuwata-lab.com All Rights Reserverd </td> </tr> </table> </body> </html>
Supplement
Kwartz Directive 'id="placeholder:name"
' lets you to use this pattern without presentation logic file(layout.plogic).
Presentation Data(layout.html):
: : <!-- menu part --> <td width="100" valign="top"> <div class="menu" id="placeholder:menu"> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> </div> </td> <!-- article part --> <td width="400" valign="top"> <div class="article" id="placeholder:article"> aaa<br> bbb<br> ccc<br> ddd<br> </div> </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 use dummy data in presentation data.
Example Code
<ul> <li>foo</li> <li id="dummy">bar</li> </ul>
#dummy { plogic: { // empty } }
### for eRuby <ul> <li>foo</li> </ul> ### for PHP <ul> <li>foo</li> </ul> ### for JSTL <ul> <li>foo</li> </ul> ### for Velocity <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>
#next { attrs: "href" url; plogic: { if (url == null) { @cont; // delete tags when url is null } else { @stag; @cont; @etag; } } }
### for eRuby <% if url == nil then %> Next<% else %> <a href="<%= url %>">Next</a> <% end %> ### for PHP <?php if ($url == NULL) { ?> Next<?php } else { ?> <a href="<?php echo $url; ?>">Next</a> <?php } ?> ### for JSTL <c:choose><c:when test="${url eq null}"> Next</c:when><c:otherwise> <a href="<c:out value="${url}" escapeXml="false"/>">Next</a> </c:otherwise></c:choose> ### for Velocity #if($url) 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:items"> <td>@{item}@</td> </tr> </table>
#items { plogic: { // iterate start tag, content, and end tag foreach (item in list) { @stag; @cont; @etag; } } }
### for eRuby <table> <% for item in list do %> <tr> <td><%= item %></td> </tr> <% end %> </table> ### for PHP <table> <?php foreach ($list as $item) { ?> <tr> <td><?php echo $item; ?></td> </tr> <?php } ?> </table> ### for JSTL <table> <c:forEach var="item" items="${list}"> <tr> <td><c:out value="${item}" escapeXml="false"/></td> </tr> </c:forEach> </table> ### for Velocity <table> #foreach($item in $list) <tr> <td>$!{item}</td> </tr> #end </table>
Supplement
Kwartz directive id="foreach:item=list"
lets you to use this pattern without presentation logic file.
<table> <tr id="foreach:item=list"> <td>@{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:items"> <dt>@{item.text}@</dt> <dd>@{item.desc}@</dd> </dl>
#items { plogic: { // iterate only content @stag; foreach (item in list) { @cont; } @etag; } }
### for eRuby <dl> <% for item in list do %> <dt><%= item.text %></dt> <dd><%= item.desc %></dd> <% end %> </dl> ### for PHP <dl> <?php foreach ($list as $item) { ?> <dt><?php echo $item->text; ?></dt> <dd><?php echo $item->desc; ?></dd> <?php } ?> </dl> ### for JSTL <dl> <c:forEach var="item" items="${list}"> <dt><c:out value="${item.text}" escapeXml="false"/></dt> <dd><c:out value="${item.desc}" escapeXml="false"/></dd> </c:forEach> </dl> ### for Velocity <dl> #foreach($item in $list) <dt>$!{item.text}</dt> <dd>$!{item.desc}</dd> #end </dl>
Supplement
Kwartz directive id="loop:item=list"
lets you to use this pattern without presentation logic file.
<dl id="loop:item=list"> <dt>@{item.text}@</dt> <dd>@{item.desc}@</dd> </dl>
Selection
Select Element Pattern
Description
The following is an example to choose a certain element from some elements. This pattern is named 'Select Element 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>
#message { plogic: { if (status == 'error') { @element(error); // ERROR! } else if (status == 'warning') { @element(warning); // Warning: } else { @element(good); // No error. } } }
### for eRuby <% if status == "error" then %> <span style="color:red">ERROR!</span> <% elsif status == "warning" then %> <span style="color:blue">Warning:</span> <% else %> <span style="color:black">No error.</span> <% end %> ### for PHP <?php if ($status == "error") { ?> <span style="color:red">ERROR!</span> <?php } elseif ($status == "warning") { ?> <span style="color:blue">Warning:</span> <?php } else { ?> <span style="color:black">No error.</span> <?php } ?> ### for JSTL <c:choose><c:when test="${status eq 'error'}"> <span style="color:red">ERROR!</span> </c:when><c:when test="${status eq 'warning'}"> <span style="color:blue">Warning:</span> </c:when><c:otherwise> <span style="color:black">No error.</span> </c:otherwise></c:choose> ### for Velocity #if($status == "error") <span style="color:red">ERROR!</span> #elseif($status == "warning") <span style="color:blue">Warning:</span> #else <span style="color:black">No error.</span> #end
Supplement
Kwartz directive 'id="if:condition"
', 'id="elseif:condition"
', and 'id="else:"
'
let you to use this pattern without presentation logic file.
<div> <span style="color:red" id="if:status=='error'">ERROR!</span> <span style="color:blue" id="elseif:status=='warning'">Warning:</span> <span style="color:black" id="else:">No error.</span> </div>
Pick-up Element Pattern
Description
If you want to use certain elemnts, do marking the elements and use only them in presentation logic. Elements which are not marked are ignored and not printed. This pattern is named 'Pick-up Element 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 { plogic: { foreach (item in list) { @element(crumb); // print <a>...</a> @element(separator); // print '>' } @element(title); // print <b>title</b> } } #crumb { value: item['name']; attrs: "href" item['path']; } #title { value: title; }
### for eRuby <html> <body> <% for item in list do %> <a href="<%= item["path"] %>"><%= item["name"] %></a> > <% end %> <strong><%= title %></strong> </body> </html> ### for PHP <html> <body> <?php foreach ($list as $item) { ?> <a href="<?php echo $item["path"]; ?>"><?php echo $item["name"]; ?></a> > <?php } ?> <strong><?php echo $title; ?></strong> </body> </html> ### for JSTL <html> <body> <c:forEach var="item" items="${list}"> <a href="<c:out value="${item['path']}" escapeXml="false"/>"><c:out value="${item['name']}" escapeXml="false"/></a> > </c:forEach> <strong><c:out value="${title}" escapeXml="false"/></strong> </body> </html> ### for Velocity <html> <body> #foreach($item in $list) <a href="$!{item["path"]}">$!{item["name"]}</a> > #end <strong>$!{title}</strong> </body> </html>
Extract Element Pattern
Description
It is able to extract a certain element form the whole presentation data. Other element and text strings are not printed. This pattern is named 'Extract Element 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-2005 kuwata-lab. All Rights Reserved. </div> </body> </html>
#whole { // replace the element 'whole' with the element you want to extract plogic: { @element(copyright); } }
#whole { // replace the element 'whole' with the element you want to extract plogic: { @element(tablist); } } #tabs { plogic: { @stag; foreach (tab in tablist) { klass = current_tabname == tab['name'] ? 'selected' : ''; @element(tab); } @etag; } } #tab { value: tab['name']; attrs: "href" tab['href'], "class" klass; }
#whole { // replace the element 'whole' with the element you want to extract plogic: { @element(menulist); } } #menus { plogic: { @stag; foreach (menu in menulist) { @element(menu); @element(menu_separator); } @etag; } } #menu { value: menu['name']; attrs: "href" menu['cgipath'], "class" klass; plogic: { klass = current_menu == menu['name'] ? 'selected' : ''; @stag; @cont; @etag; } }
### copyright $ kwartz -l eruby -p copyright.plogic design.pdata $ kwartz -l php -p copyright.plogic design.pdata ### tablist $ kwartz -l eruby -p tablist.plogic design.pdata $ kwartz -l php -p tablist.plogic design.pdata ### menulist $ kwartz -l eruby -p menulist.plogic design.pdata $ kwartz -l php -p menulist.plogic design.pdata
### for eRuby <div align="center" class="copyright"> Copyright© 2004-2005 kuwata-lab. All Rights Reserved. </div> ### for PHP <div align="center" class="copyright"> Copyright© 2004-2005 kuwata-lab. All Rights Reserved. </div>
### for eRuby <div> <div class="tabs"> <% for tab in tablist do %> <% klass = current_tabname == tab["name"] ? "selected" : "" %> <a href="<%= tab["href"] %>" class="<%= klass %>"><%= tab["name"] %></a> <% end %> </div> <div class="tabsline"> </div> </div> ### for PHP <div> <div class="tabs"> <?php foreach ($tablist as $tab) { ?> <?php $klass = $current_tabname == $tab["name"] ? "selected" : ""; ?> <a href="<?php echo $tab["href"]; ?>" class="<?php echo $klass; ?>"><?php echo $tab["name"]; ?></a> <?php } ?> </div> <div class="tabsline"> </div> </div>
### for eRuby <div> <span class="menu_title"><%= menu_title %></span> <div class="menus"> <% for menu in menulist do %> <% klass = current_menu == menu["name"] ? "selected" : "" %> <a href="<%= menu["cgipath"] %>" class="<%= klass %>"><%= menu["name"] %></a> <br> <% end %> </div> </div> ### for PHP <div> <span class="menu_title"><?php echo $menu_title; ?></span> <div class="menus"> <?php foreach ($menulist as $menu) { ?> <?php $klass = $current_menu == $menu["name"] ? "selected" : ""; ?> <a href="<?php echo $menu["cgipath"]; ?>" class="<?php echo $klass; ?>"><?php echo $menu["name"]; ?></a> <br> <?php } ?> </div> </div>
Supplement
The command-line option --extract=name
extracts the element marked with name
in Kwartz.