kuwata-lab.com
Home Kwartz Kwaff Kwalify Kook Erubis Tenjin RubyFlow-ja

Presentation Pattern Catalog

1   Replacement

1-1   Replace Element with Value Pattern

1-1-1   Description

You can replace the element with the value of expression. This is named 'Replace Element with Value Pattern.'

1-1-2   Situation

This pattern is very useful to print out the value of a variable or an expression as text.

1-1-3   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 %>!

1-1-4   Supplement

Kwartz supports the short-notation of this pattern. 

#user {
  elem: username;
}

The output script will be: 

Hello <%= username %>!

1-2   Replace Content with Value Pattern

1-2-1   Description

You can also replace only the content of the element in the same way. This is named 'Replace Content with Value Pattern.'

1-2-2   Situation

This pattern is used frequently because the situation to replace the content with value is very popular.

1-2-3   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>

1-2-4   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>

1-3   Default Content Pattern

1-3-1   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'.

1-3-2   Situation

For example, there may be a placeholder to display username, and string 'Guest' is displayed when username is null or empty.

1-3-3   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 %>
!

1-3-4   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>!

1-4   Replace Element with Element/Content Pattern

1-4-1   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'.

1-4-2   Situation

This pattern is very useful to reuse the element in other place.

1-4-3   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)
  }
}

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

1-5   Replace Content with Element/Content Pattern

1-5-1   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'.

1-5-2   Situation

This pattern is very useful to separate contents data and design layout into separate files.

1-5-3   Example Code

The following example contains four files.

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>

1-5-4   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>
             :
<<Prev  Top  Next>>
kuwata-lab.com