Presentation Pattern Catalog

Makoto Kuwata <kwa(at)kuwata-lab.com>
last update: $Date: 2006-05-31 11:14:08 +0900 (Wed, 31 May 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.

Preface
- Table of Contents
Replacement
Deletion
- Delete Element Pattern
- Delete Tag Pattern
Iteration
- Iterate Element Pattern
- Iterate Content Pattern
Selection

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

Presentation Data:

Hello <span id="mark:user">World</span>!

Presentation Logic:

/* print value of variable 'username' instead of the element */
#user {
  logic: {
    print username
  }
}

Output Script:

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

Presentation Data:

<h1 id="mark:title">Example</h1>

Presentation Logic:

/* print expression value instead of content text */
#title {
  logic: {
    _stag   # start-tag
    print title 
    _etag   # end-tag
  }
}

Output Script:

<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 'title="cont: expr"' or 'title="value: expr"' lets you to use this pattern without presentation logic file.

<h1 id="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.

Presentation Data:

Hello <span id="mark:user">World</span>!

Presentation Logic:

/* 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
  }
}

Output Script:

Hello <%     if username && !username.empty? %>
<%= username %><%     else %>
World<%     end %>
!

Suppliement

Directive 'title="default: expr"' is for Default Content Pattern.

Hello <span title="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

Presentation Data:

<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>

Presentation Logic:

/* 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".

Output Script:

<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.

Presentation Logic:

/* 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.

Presentation Data(contents.html):

<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>

Presentation Logic(contents.plogic):

#menu {
  logic: {
    _stag
    for item in menu_list
      _cont
    end
    _etag
  }
}

#menu_item {
  value:  item['name'];
  attrs:  "href" item['url'];
}

Presentation Data(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"
	    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&copy; 2004-2006 kuwata-lab.com All Rights Reserverd
        </td>
      </tr>
    </table>
    
  </body>
</html>

Presentation Logic(layout.plogic):

/* 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

Output Script:

<!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&copy; 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).

Presentation Data(layout.html):

             :
        <!-- 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

Presentation Data:

<ul>
  <li>foo</li>
  <li id="dummy">bar</li>
</ul>

Presentation Logic:

/* delete dummy element */
#dummy {
  logic: {
  }
}

Output Script:

<ul>
  <li>foo</li>
</ul>

Supplement

Kwartz directive 'id="dummy:str"' lets you to use this pattern without presentation logic file.

Presentation Data:

<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

Presentation Data:

<a href="..." id="mark:next">Next</a>

Presentation Logic:

/* delete tags when url is empty */
#next {
  attrs:  "href" url;
  logic: {
    if !url || url.empty?
      _cont
    else
      _stag
      _cont
      _etag
    end
  }
}

Output Script:

<%     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

Presentation Data:

<table>
  <tr id="mark:list">
   <td title="value: item">item</td>
  </tr>
</table>

Presentation Logic:

/* iterate element */
#list {
  logic: {
    for item in list
      _stag
      _cont
      _etag
    end
  }
}

Output Script:

<table>
<%     for item in list %>
  <tr>
   <td><%= item %></td>
  </tr>
<%     end %>
</table>

Supplement

Kwartz directive title="for item in list" lets you to use this pattern without presentation logic file. See reference manual for details.

<table>
  <tr title="for item in list">
    <td title="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

Presentation Data:

<dl id="mark:list">
  <dt title="value: item.text">text</dt>
  <dd title="value: item.desc">description</dd>
</dl>

Presentation Logic:

/* iterate only content */
#list {
  logic: {
    _stag
    for item in items
      _cont
    end
    _etag
  }
}

Output Script:

<dl>
<%     for item in items %>
  <dt><%= item.text %></dt>
  <dd><%= item.desc %></dd>
<%     end %>
</dl>

Supplement

Kwartz directive title="list item in list" lets you to use this pattern without presentation logic file. See reference manual for details.

<dl title="list item in items">
  <dt title="value: item.text">text</dt>
  <dd title="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

Presentation Data:

<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>

Presentation Logic:

/* 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
  }
}

Output Script:

<%     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 'title="if condition"', 'title="elsif condition"', and 'title="else"' let you to use this pattern without presentation logic file.

<div>
  <span style="color:red"   title="if status=='error'">ERROR!</span>
  <span style="color:blue"  title="elsif status=='warning'">Warning:</span>
  <span style="color:black" title="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

Presentation Data:

<html>
  <body>
    <div id="breadcrumbs">
      <a href="/" id="mark:crumb">Home</a>
      <span id="mark:separator">&gt;</span>
      <a href="/aaa/">AAA</a> &lt;
      <a href="/aaa/bbb/">BBB</a> &lgt;
      <a href="/aaa/bbb/ccc">CCC</a> &lgt;
      <strong id="mark:title">title</strong>
    </div>
  </body>
</html>

Presentation Logic:

#breadcrumbs {
  logic: {
    for item in list
      _element(crumb)          # print <a>...</a>
      _content(separator)      # print '&gt;'
    end
    _element(title)            # print <strong>title</strong>
  }
}

#crumb {
  value:  item['name'];
  attrs:  "href" item['path'];
}
#title {
  value: title;
}

Output Script:

<html>
  <body>
<%     for item in list %>
      <a href="<%= item['path'] %>"><%= item['name'] %></a>
&gt;<%     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.

Presentation Data (design.html):

<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&copy; 2004-2005 kuwata-lab. All Rights Reserved.
    </div>
    
  </body>
</html>

Presentation Logic (copyright.plogic):

/* replace the 'whole' element with the element you want to extract */
#whole {
  logic: {
    _element(copyright)
  }
}

Presentation Logic (tablist.plogic):

/* 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;
}

Presentation Logic (menulist.plogic):

/* replace the 'whole' element with the element you want to extract */
#whole {
  logic: {
    _element(menulist)
  }
}

#menus {
  logic: {
    _stag
    foreach (menu in menulist) {
      _element(menu)
      _element(menu_separator)
    }
    _etag
  }
}

#menu {
  value:   menu['name'];
  attrs:   "href" menu['cgipath'],
           "class" klass;
  logic: {
    klass = current_menu == menu['name'] ? 'selected' : ''
    _elem
  }
}

Compile:

### 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

Output Script (copyright.rhtml):

    <div align="center" class="copyright">
      Copyright&copy; 2004-2005 kuwata-lab. All Rights Reserved.
    </div>

Output Script (tablist.rhtml):

    <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>

Output Script (menulist.rhtml):

    <div>
      <span class="menu_title" id="value:menu_title">MenuList</span>
      <div class="menus">
<%     foreach (menu in menulist) { %>
<%     klass = current_menu == menu['name'] ? 'selected' : '' %>
        <a href="<%= menu['cgipath'] %>" class="<%= klass %>"><%= menu['name'] %></a>
        <span><br></span>
<%     } %>
      </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.

Presentation Pattern Catalog

Preface

Table of Contents

Replacement

Replace Element with Value Pattern

Description

Situation

Example Code

Supplement

Replace Content with Value Pattern

Description

Situation

Example Code

Supplement

Default Content Pattern

Description

Situation

Example Code

Suppliement

Replace Element with Element/Content Pattern

Description

Situation

Example Code

Supplement

Replace Content with Element/Content Pattern

Description

Situation

Example Code

Supplement

Deletion

Delete Element Pattern

Description

Situation

Example Code

Supplement

Delete Tag Pattern

Description

Situation

Example Code

Iteration

Iterate Element Pattern

Description

Situation

Example Code

Supplement

Iterate Content Pattern

Description

Situation

Example Code

Supplement

Selection

Select Element/Content Pattern

Description

Situation

Example Code

Supplement

Pick-up Element/Content Pattern

Description

Situation

Example Code

Extract Element/Content Pattern

Description

Situation

Example Code

Supplement