Kwartz Examples

last update: $Date: 2005-07-18 00:07:51 +0900 (Mon, 18 Jul 2005) $

This document shows you examples of Kwartz, especially in Ruby.

Bordered Table 1

border1.html (presentation data):
<html>
  <body>

    <table>
      <thead>
        <th>Name</th><th>E-Mail</th>
      </thead>
      <tbody>
        <tr bgcolor="#FFCCCC" id="user_list">
          <td id="name">Foo</td>
          <td><a href="mailto:foo@email.com" id="email">foo@email.com</a></td>
        </tr>
        <tr bgcolor="#CCCCFF" id="dummy">
          <td>Foo</td>
          <td><a href="mailto:bar@emai.net">bar@email.net</a></td>
        </tr>
      </tbody>
    </table>
    
  </body>
</html>
border1.plogic (presentation logic):
#user_list {
        attrs:   "bgcolor" color;   // set bgcolor attribute value
        remove:  "id";              // remove id attribute
        plogic:  {
            i = 0;
            foreach (user in user_list) {
                i += 1;
                color = i%2==0 ? '#CCCCFF' : '#FFCCCC';
                @stag;              // start tag
                @cont;              // content
                @etag;              // end tag
            }
        }
}

#name {
        value:   user['name'];      // replace content by expression value
        remove:  "id";              // remove id attribute
}

#email {
        value:   user['email'];     // replace content by expression value
        remove:  "id";              // remove id attribute
        attrs:   "href" 'mailto:' .+ user['email'];    // set href attribute value
}

#dummy {
        plogic: { }                 // remove an element
}
border1.rb (main program):
#!/usr/bin/ruby

## set user list
user_list = [
  { "name" => "sumire", "email" => "voilet@mail.com" },
  { "name" => "nana",   "email" => "seven@mail.com" },
  { "name" => "momoko", "email" => "peach@mail.com" },
  { "name" => "kasumi", "email" => "mist@mail.com" },
]

## display view
require 'erb'
filename = 'border1.view'
str = File.open(filename) { |f| f.read }  ## or File.read(filename)
trim_mode = 1
erb = ERB.new(str, $SAFE, trim_mode)
print erb.result(binding())
Compile and execution:
### compile
% kwartz -l eruby -p border1.plogic border1.html > border1.view

### execution
% ruby border1.rb > result.html
border1.view (output script for Ruby):
<html>
  <body>

    <table>
      <thead>
        <th>Name</th><th>E-Mail</th>
      </thead>
      <tbody>
<% i = 0 %>
<% for user in user_list do %>
<%   i += 1 %>
<%   color = i % 2 == 0 ? "#CCCCFF" : "#FFCCCC" %>
        <tr bgcolor="<%= color %>">
          <td><%= user["name"] %></td>
          <td><a href="mailto:<%= user["email"] %>"><%= user["email"] %></a></td>
        </tr>
<% end %>
      </tbody>
    </table>
    
  </body>
</html>
<html>
  <body>

    <table>
      <thead>
        <th>Name</th><th>E-Mail</th>
      </thead>
      <tbody>
        <tr bgcolor="#FFCCCC">
          <td>sumire</td>
          <td><a href="mailto:voilet@mail.com">voilet@mail.com</a></td>
        </tr>
        <tr bgcolor="#CCCCFF">
          <td>nana</td>
          <td><a href="mailto:seven@mail.com">seven@mail.com</a></td>
        </tr>
        <tr bgcolor="#FFCCCC">
          <td>momoko</td>
          <td><a href="mailto:peach@mail.com">peach@mail.com</a></td>
        </tr>
        <tr bgcolor="#CCCCFF">
          <td>kasumi</td>
          <td><a href="mailto:mist@mail.com">mist@mail.com</a></td>
        </tr>
      </tbody>
    </table>
    
  </body>
</html>

Bordered Table 2

border2.html (presentation data):
<html>
  <body>

    <table>
      <thead>
        <th>Name</th><th>E-Mail</th>
      </thead>
      <tbody>
        <tr bgcolor="#FFCCCC" id="mark:user_list">
          <td id="value:name">Foo</td>
          <td><a href="mailto:@{email}@" id="value:email">foo@mail.com</a></td>
        </tr>
        <tr bgcolor="#CCCCFF" id="dummy:d1">
          <td>Bar</td>
          <td><a href="bar@mail.net">bar@mail.net</a></td>
        </tr>
      </tbody>
    </table>
    
  </body>
</html>
border2.plogic (presentation logic):
#user_list {                        // id attribute is removed automatically
        attrs:   "bgcolor" color;   // set bgcolor attribute value
        plogic:  {
            i = 0;
            foreach (user in user_list) {
                i += 1;
                color = i%2==0 ? '#CCCCFF' : '#FFCCCC';
                name  = user['name'];
                email = user['email'];
                @stag;              // start tag
                @cont;              // content
                @etag;              // end tag
            }
        }
}
border2.rb (main program):
#!/usr/bin/ruby

## set user list
user_list = [
  { "name" => "sumire", "email" => "voilet@mail.com" },
  { "name" => "nana",   "email" => "seven@mail.com" },
  { "name" => "momoko", "email" => "peach@mail.com" },
  { "name" => "kasumi", "email" => "mist@mail.com" },
]

## display view
require 'erb'
filename = 'border2.view'
str = File.open(filename) { |f| f.read }  ## or File.read(filename)
trim_mode = 1
erb = ERB.new(str, $SAFE, trim_mode)
print erb.result(binding())
Compile and execution:
### compile
% kwartz -l eruby -p border2.plogic border2.html > border2.view

### execution
% ruby border2.rb > result.html
border2.view (output script for Ruby):
<html>
  <body>

    <table>
      <thead>
        <th>Name</th><th>E-Mail</th>
      </thead>
      <tbody>
<% i = 0 %>
<% for user in user_list do %>
<%   i += 1 %>
<%   color = i % 2 == 0 ? "#CCCCFF" : "#FFCCCC" %>
<%   name = user["name"] %>
<%   email = user["email"] %>
        <tr bgcolor="<%= color %>">
          <td><%= name %></td>
          <td><a href="mailto:<%= email %>"><%= email %></a></td>
        </tr>
<% end %>
      </tbody>
    </table>
    
  </body>
</html>
<html>
  <body>

    <table>
      <thead>
        <th>Name</th><th>E-Mail</th>
      </thead>
      <tbody>
        <tr bgcolor="#FFCCCC">
          <td>sumire</td>
          <td><a href="mailto:voilet@mail.com">voilet@mail.com</a></td>
        </tr>
        <tr bgcolor="#CCCCFF">
          <td>nana</td>
          <td><a href="mailto:seven@mail.com">seven@mail.com</a></td>
        </tr>
        <tr bgcolor="#FFCCCC">
          <td>momoko</td>
          <td><a href="mailto:peach@mail.com">peach@mail.com</a></td>
        </tr>
        <tr bgcolor="#CCCCFF">
          <td>kasumi</td>
          <td><a href="mailto:mist@mail.com">mist@mail.com</a></td>
        </tr>
      </tbody>
    </table>
    
  </body>
</html>

Bordered Table 3

border3.html (presentation data):
<html>
  <body>

    <table>
      <thead>
        <th>Name</th><th>E-Mail</th>
      </thead>
      <tbody id="mark:user_list">
        <tr bgcolor="#FFCCCC" id="mark:odd">
          <td id="value:name">Foo</td>
          <td><a href="mailto:@{email}@" id="value:email">foo@mail.com</a></td>
        </tr>
        <tr bgcolor="#CCCCFF" id="mark:even">
          <td id="value:name">Bar</td>
          <td><a href="mailto:@{email}@" id="value:email">bar@mail.net</a></td>
        </tr>
      </tbody>
    </table>
    
  </body>
</html>
border3.plogic (presentation logic):
#user_list {
        plogic:   {
            @stag;                  // start tag
            i = 0;
            foreach (user in user_list) {
                i += 1;
                name  = user['name'];
                email = user['email'];
                if (i % 2 == 0) {
                    @element(even); // element marked as id="mark:even"
                } else {
                    @element(odd);  // element marked as id="mark:odd"
                }
            }
            @etag;                  // end tag
        }
}
border3.rb (main program):
#!/usr/bin/ruby

## set user list
user_list = [
  { "name" => "sumire", "email" => "voilet@mail.com" },
  { "name" => "nana",   "email" => "seven@mail.com" },
  { "name" => "momoko", "email" => "peach@mail.com" },
  { "name" => "kasumi", "email" => "mist@mail.com" },
]

## display view
require 'erb'
filename = 'border3.view'
str = File.open(filename) { |f| f.read }  ## or File.read(filename)
trim_mode = 1
erb = ERB.new(str, $SAFE, trim_mode)
print erb.result(binding())
Compile and execution:
### compile
% kwartz -l eruby -p border3.plogic border3.html > border3.view

### execution
% ruby border3.rb > result.html
border3.view (output script for Ruby):
<html>
  <body>

    <table>
      <thead>
        <th>Name</th><th>E-Mail</th>
      </thead>
      <tbody>
<% i = 0 %>
<% for user in user_list do %>
<%   i += 1 %>
<%   name = user["name"] %>
<%   email = user["email"] %>
<%   if i % 2 == 0 then %>
        <tr bgcolor="#CCCCFF">
          <td><%= name %></td>
          <td><a href="mailto:<%= email %>"><%= email %></a></td>
        </tr>
<%   else %>
        <tr bgcolor="#FFCCCC">
          <td><%= name %></td>
          <td><a href="mailto:<%= email %>"><%= email %></a></td>
        </tr>
<%   end %>
<% end %>
      </tbody>
    </table>
    
  </body>
</html>
<html>
  <body>

    <table>
      <thead>
        <th>Name</th><th>E-Mail</th>
      </thead>
      <tbody>
        <tr bgcolor="#FFCCCC">
          <td>sumire</td>
          <td><a href="mailto:voilet@mail.com">voilet@mail.com</a></td>
        </tr>
        <tr bgcolor="#CCCCFF">
          <td>nana</td>
          <td><a href="mailto:seven@mail.com">seven@mail.com</a></td>
        </tr>
        <tr bgcolor="#FFCCCC">
          <td>momoko</td>
          <td><a href="mailto:peach@mail.com">peach@mail.com</a></td>
        </tr>
        <tr bgcolor="#CCCCFF">
          <td>kasumi</td>
          <td><a href="mailto:mist@mail.com">mist@mail.com</a></td>
        </tr>
      </tbody>
    </table>
    
  </body>
</html>

HTML Form

register.html (presentation data):
<html>
 <head>
  <style type="text/css">
   <!--
     .label {
        /* font-weight:bold; */
        background-color:#CCFFCC;
        text-align:right;
     }
    -->
  </style>
 </head>
 <body>
  <form action="register.rbx" method="POST">

   <span id="if:error_list!=null">
    <font color="#FF0000" id="foreach:error=error_list">
     <span id="value:error">Name is empty.</span><br>
    </font>
   </span>
   <span id="else:">
    Enter your personal information:
   </span>

   <table border="0" cellspacing="1" cellpadding="5">

    <tr>
     <td class="label">Name:</td>
     <td>
      <input type="text" name="name" size="20" id="name" />
     </td>
    </tr>

    <tr>
     <td class="label">Gender:</td>
     <td>
      <input type="radio" name="gender" value="M" id="mark:gender_m" />Man
      &nbsp;
      <input type="radio" name="gender" value="W" id="mark:gender_w" />Woman
     </td>
    </tr>

    <tr>
     <td colspan="2" align="center">
      <input type="submit" value=" Register ">
      <input type="reset"  value="reset">
     </td>
    </tr>

   </table>
  </form>
 </body>
</html>
register.plogic (presentation logic):
#name {
    attrs: "value" name;
}

#gender_m {
    //append: gender == 'M' ? ' checked="checked"' : '';
    append: C(gender=='M');
}

#gender_w {
    //append: gender == 'W' ? ' checked="checked"' : '';
    append: C(gender=='W');
}
finish.html (presentation data):
<html>
 <body>
  Registration has finished with the following data:<br>
  <br>
  Name:
   <span id="value:name">Foo</span><br>
  Gender:
   <span id="if:gender=='M'">Man</span>
   <span id="else:">Woman</span>
 </body>
</html>
register.rbx (main program):
#!/usr/bin/ruby

## get parameters
require 'cgi'
cgi = CGI.new
name   = cgi.params['name'].first
gender = cgi.params['gender'].first

## check parameters
view_name = 'register.view'
error_list = nil
if cgi.params.length > 0
    ## check input data
    error_list = []
    unless name && !name.empty?
        error_list << 'Name is empty.'
    end
    unless gender == 'M' || gender == 'W'
        error_list << 'Gender is not selected.'
    end

    ## if input parameter is valid then print the finished page.
    ## else print the registration page.
    if error_list.empty?
        error_list = nil
        view_name = 'finish.view'
    end
end

## print web page
require 'erb'
str = File.open(view_name) { |f| f.read }
str.untaint()
trim_mode = 1
print cgi.header
print ERB.new(str, $SAFE, trim_mode).result(binding())
Compile and execution:
### compile
% kwartz -l eruby -e -p register.plogic register.html > register.view
% kwartz -l eruby -e                    finish.html   > finish.view

### execution
% ruby form1.rb > result.html
register.view (output script for Ruby):
<html>
 <head>
  <style type="text/css">
   <!--
     .label {
        /* font-weight:bold; */
        background-color:#CCFFCC;
        text-align:right;
     }
    -->
  </style>
 </head>
 <body>
  <form action="register.rbx" method="POST">

<% if error_list != nil then %>
<%   for error in error_list do %>
    <font color="#FF0000">
     <%= CGI::escapeHTML((error).to_s) %><br>
    </font>
<%   end %>
<% else %>
    Enter your personal information:
<% end %>

   <table border="0" cellspacing="1" cellpadding="5">

    <tr>
     <td class="label">Name:</td>
     <td>
      <input type="text" name="name" size="20" id="name" value="<%= CGI::escapeHTML((name).to_s) %>" />
     </td>
    </tr>

    <tr>
     <td class="label">Gender:</td>
     <td>
      <input type="radio" name="gender" value="M"<%= gender == "M" ? " checked=\"checked\"" : "" %> />Man
      &nbsp;
      <input type="radio" name="gender" value="W"<%= gender == "W" ? " checked=\"checked\"" : "" %> />Woman
     </td>
    </tr>

    <tr>
     <td colspan="2" align="center">
      <input type="submit" value=" Register ">
      <input type="reset"  value="reset">
     </td>
    </tr>

   </table>
  </form>
 </body>
</html>
finish.view (output script for Ruby):
<html>
 <body>
  Registration has finished with the following data:<br>
  <br>
  Name:
   <%= CGI::escapeHTML((name).to_s) %><br>
  Gender:
<% if gender == "M" then %>
   Man
<% else %>
   Woman
<% end %>
 </body>
</html>

Breadcrumbs

breadcrumbs.html (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;
      <span id="mark:title">Page Titlte</span>
    </div>

  </body>
</html>
breadcrumbs.plogic (presentation logic):
#breadcrumbs {
        plogic: {
            @stag;
            foreach (crumb in breadcrumbs) {
                @element(crumb);          // print <a>...</a>
                @element(separator);      // print '&gt;'
            }
            @element(title);
            @etag;
        }
}

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

#title {
        value: title;
}
breadcrumbs.rb (main program):
#!/usr/bin/ruby

## set breadcrumbs
breadcrumbs = [
   { :name => "HOME",        :path => "/", },
   { :name => "Kwartz",      :path => "/kwartz/", },
   { :name => "Examples",    :path => "/kwartz/examples/", },
   { :name => "Breadcrumbs", :path => "/kwartz/examples/breadcrumbs/", },
]

## set title
title = 'Result';

## display view
require 'erb'
filename = 'breadcrumbs.view'
str = File.open(filename) { |f| f.read }  ## or File.read(filename)
trim_mode = 2
ERB.new(str, $SAFE, trim_mode).run(binding())
Compile and execution:
### compile
% kwartz -l eruby -p breadcrumbs.plogic breadcrumbs.html > breadcrumbs.view

### execution
% ruby breadcrumbs.rb > result.html
breadcrumbs.view (output script for Ruby):
<html>
  <body>

    <div id="breadcrumbs">
<% for crumb in breadcrumbs do %>
      <a href="<%= crumb[:path] %>"><%= crumb[:name] %></a>
      &gt;
<% end %>
      <%= title %>
    </div>

  </body>
</html>
<html>
  <body>

    <div id="breadcrumbs">
      <a href="/">HOME</a>
      &gt;
      <a href="/kwartz/">Kwartz</a>
      &gt;
      <a href="/kwartz/examples/">Examples</a>
      &gt;
      <a href="/kwartz/examples/breadcrumbs/">Breadcrumbs</a>
      &gt;
      Result
    </div>

  </body>
</html>

Calendar

calendar-month.html (presentation data):
<html id="mark:document">
  <head>
    <title>Calendar Month Template</title>
    <style type="text/css">
      <!--
        .holiday   {color:#FF0000;}
        td         {text-align:center;}
        -->
    </style>
  </head>
  <body>
    <span id="mark:calendar_month">
            <!-- calendar-month -->
            <table cellpadding="2" summary="calendar of @{month}@, @{year}@">
              <caption>
                <em id="value:month">Jan</em>&nbsp;<em id="value:year">20XX</em>
              </caption>
              <thead>
                <tr bgcolor="#CCCCCC">
                  <th><span class="holiday">S</span></th>
                  <th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th>
                </tr>
              </thead>
              <tbody>
                <tr id="mark:week">
                  <td><span id="mark:day" class="holiday">&nbsp;</span></td>
                  <td id="dummy:d1">&nbsp;</td>
                  <td id="dummy:d2">1</td>
                  <td id="dummy:d3">2</td>
                  <td id="dummy:d4">3</td>
                  <td id="dummy:d5">4</td>
                  <td id="dummy:d6">5</td>
                </tr>
                <tr id="dummy:d7">
                  <td><span class="holiday">6</span></td>
                  <td>7</td><td>8</td><td>9</td>
                  <td>10</td><td>11</td><td>12</td>
                </tr>
                <tr id="dummy:d8">
                  <td><span class="holiday">13</span></td>
                  <td>14</td><td>15</td><td>16</td>
                  <td>17</td><td>18</td><td>19</td>
                </tr>
                <tr id="dummy:d9">
                  <td><span class="holiday">20</span></td>
                  <td>21</td><td>22</td><td>23</td>
                  <td>24</td><td>25</td><td>26</td>
                </tr>
                <tr id="dummy:d10">
                  <td><span class="holiday">27</span></td>
                  <td>28</td><td>29</td><td>30</td>
                  <td>31</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
              </tbody>
            </table>
            &nbsp;
            <!-- /calendar-month -->
    </span>
  </body>
</html>
calendar-month.plogic (presentation logic):
#document {
        // replace document element by calendar_month element
        plogic:   {
            @element(calendar_month);
        }
}

#calendar_month {
        plogic:   {
            @cont;              // remove start tag and end tag
        }
}

#week {
        plogic:   {
            day = '&nbsp';
            wday = 1;
            while (wday < first_weekday) {
                if (wday == 1)  @stag;
                @cont;
                wday += 1;
            }
            
            day = 0;
            wday -= 1;
            while (day < num_days) {
                day += 1;
                wday = wday % 7 + 1;
                if (wday == 1)  @stag;
                @cont;
                if (wday == 7)  @etag;
            }

            if (wday != 7) {
                day = '&nbsp;';
                while (wday != 6) {
                    @cont;
                    wday += 1;
                }
                @etag;
            }
        }
}

#day {
        value:    day;
        plogic:   {
            if (wday == 1) {
                @stag;
                @cont;
                @etag;
            } else {
                @cont;
            }
        }
}
calendar-page.html (presentation data):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Calendar&nbs; <span id="value:year">2004</span></title>
    <style type="text/css">
      <!--
        .title     {font-size:x-large; font-weight:bold;}
        .holiday   {color:#FF0000;}
        td         {text-align:center;}
        -->
    </style>
  </head>
  <body>

    <div id="mark:navi" align="center">
      <a href="@{prev_link}@">&lt;&lt;</a>
      &nbsp;
      <span class="title">
        Calendar&nbsp; <span id="value:year">2004</span>
      </span>
      &nbsp;
      <a href="@{next_link}@">&gt;&gt;</a>
    </div>
    <br>

    <div align="center">
      <table border="0" summary="">
        <tr id="mark:calendar_list">
          <td id="mark:calendar" valign="top">
            .... calendar here ...
          </td>
        </tr>
      </table>
    </div>
    
  </body>
</html>
calendar-page.plogic (presentation logic):
#calendar_list {
        plogic: {
            calendar_ctr = 0;
            foreach (calendar in calendar_list) {
                calendar_ctr += 1;
                if (calendar_ctr % column == 1) {
                    @stag;
                }
                @cont;
                if (calendar_ctr % column == 0) {
                    @etag;
                }
            }
            if (calendar_ctr % column != 0) {
                calendar = '';
                while (calendar_ctr % column != 0) {
                    @cont;
                    calendar_ctr += 1;
                }
                @etag;
            }
        }
}

#calendar {
        value:  calendar;
}
calendar.rbx (main program):
#!/usr/bin/ruby

require 'cgi'
require 'erb'

## set year
cgi = nil
if ENV['REQUEST_METHOD']
   cgi = CGI.new
   year = cgi.params['year'].first
   if year && !year.empty?
      year = year.to_i
   else
      year = Time.new.year
   end
else
   year = Time.new.year
end

## create erb
trim_mode = 1
str = File.open('calendar-month.view') { |f| f.read() }
str.untaint
erb_cal_month = ERB.new(str, $SAFE, trim_mode)
str = File.open('calendar-page.view') { |f| f.read() }
str.untaint
erb_cal_page  = ERB.new(str, $SAFE, trim_mode)

## set calendar_list
calendar_list = []
(1..12).each do |i|
    t = Time.local(year, i, 1)
    month = t.strftime("%B")
    next_month = i == 12 ? Time.local(year+1, 1, 1) : Time.local(year, i+1, 1)
    last_day = next_month - 60*60*24
    num_days = last_day.day
    first_weekday = t.strftime("%w").to_i + 1
    #puts "year=#{year}, month=#{month}, num_days=#{num_days}, first_weekday=#{first_weekday}"
    calendar_list << erb_cal_month.result(binding())
end
#calendar_list.each do |s| print s end

## include main page, with $calendar_list[]
prev_link = "calendar.rbx?year=#{year-1}"
next_link = "calendar.rbx?year=#{year+1}"
column = 4
print cgi.header if cgi
print erb_cal_page.result(binding())
Compile and execution:
### compile
% kwartz -l eruby -p calendar-month.plogic calendar-month.html > calendar-month.view
% kwartz -l eruby -p calendar-page.plogic  calendar-page.html  > calendar-page.view

### execution
% ruby calendar.rbx > result.html
calendar-month.view (output script for Ruby):
            <!-- calendar-month -->
            <table cellpadding="2" summary="calendar of <%= month %>, <%= year %>">
              <caption>
                <em><%= month %></em>&nbsp;<em><%= year %></em>
              </caption>
              <thead>
                <tr bgcolor="#CCCCCC">
                  <th><span class="holiday">S</span></th>
                  <th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th>
                </tr>
              </thead>
              <tbody>
<% day = "&nbsp" %>
<% wday = 1 %>
<% while wday < first_weekday do %>
<%   if wday == 1 then %>
                <tr>
<%   end %>
                  <td><% if wday == 1 then %>
<span class="holiday"><%= day %></span><% else %>
<%= day %><% end %>
</td>
<%   wday += 1 %>
<% end %>
<% day = 0 %>
<% wday -= 1 %>
<% while day < num_days do %>
<%   day += 1 %>
<%   wday = wday % 7 + 1 %>
<%   if wday == 1 then %>
                <tr>
<%   end %>
                  <td><% if wday == 1 then %>
<span class="holiday"><%= day %></span><% else %>
<%= day %><% end %>
</td>
<%   if wday == 7 then %>
                </tr>
<%   end %>
<% end %>
<% if wday != 7 then %>
<%   day = "&nbsp;" %>
<%   while wday != 6 do %>
                  <td><% if wday == 1 then %>
<span class="holiday"><%= day %></span><% else %>
<%= day %><% end %>
</td>
<%     wday += 1 %>
<%   end %>
                </tr>
<% end %>
              </tbody>
            </table>
            &nbsp;
            <!-- /calendar-month -->
calendar-page.view (output script for Ruby):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Calendar&nbs; <%= year %></title>
    <style type="text/css">
      <!--
        .title     {font-size:x-large; font-weight:bold;}
        .holiday   {color:#FF0000;}
        td         {text-align:center;}
        -->
    </style>
  </head>
  <body>

    <div align="center">
      <a href="<%= prev_link %>">&lt;&lt;</a>
      &nbsp;
      <span class="title">
        Calendar&nbsp; <%= year %>
      </span>
      &nbsp;
      <a href="<%= next_link %>">&gt;&gt;</a>
    </div>
    <br>

    <div align="center">
      <table border="0" summary="">
<% calendar_ctr = 0 %>
<% for calendar in calendar_list do %>
<%   calendar_ctr += 1 %>
<%   if calendar_ctr % column == 1 then %>
        <tr>
<%   end %>
          <td valign="top">
<%= calendar %>          </td>
<%   if calendar_ctr % column == 0 then %>
        </tr>
<%   end %>
<% end %>
<% if calendar_ctr % column != 0 then %>
<%   calendar = "" %>
<%   while calendar_ctr % column != 0 do %>
          <td valign="top">
<%= calendar %>          </td>
<%     calendar_ctr += 1 %>
<%   end %>
        </tr>
<% end %>
      </table>
    </div>
    
  </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Calendar&nbs; 2005</title>
    <style type="text/css">
      <!--
        .title     {font-size:x-large; font-weight:bold;}
        .holiday   {color:#FF0000;}
        td         {text-align:center;}
        -->
    </style>
  </head>
  <body>

    <div align="center">
      <a href="calendar.rbx?year=2004">&lt;&lt;</a>
      &nbsp;
      <span class="title">
        Calendar&nbsp; 2005      </span>
      &nbsp;
      <a href="calendar.rbx?year=2006">&gt;&gt;</a>
    </div>
    <br>

    <div align="center">
      <table border="0" summary="">
        <tr>
          <td valign="top">
            <!-- calendar-month -->
            <table cellpadding="2" summary="calendar of January, 2005">
              <caption>
                <em>January</em>&nbsp;<em>2005</em>
              </caption>
              <thead>
                <tr bgcolor="#CCCCCC">
                  <th><span class="holiday">S</span></th>
                  <th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><span class="holiday">&nbsp</span></td>
                  <td>&nbsp</td>
                  <td>&nbsp</td>
                  <td>&nbsp</td>
                  <td>&nbsp</td>
                  <td>&nbsp</td>
                  <td>1</td>
                </tr>
                <tr>
                  <td><span class="holiday">2</span></td>
                  <td>3</td>
                  <td>4</td>
                  <td>5</td>
                  <td>6</td>
                  <td>7</td>
                  <td>8</td>
                </tr>
                <tr>
                  <td><span class="holiday">9</span></td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                </tr>
                <tr>
                  <td><span class="holiday">16</span></td>
                  <td>17</td>
                  <td>18</td>
                  <td>19</td>
                  <td>20</td>
                  <td>21</td>
                  <td>22</td>
                </tr>
                <tr>
                  <td><span class="holiday">23</span></td>
                  <td>24</td>
                  <td>25</td>
                  <td>26</td>
                  <td>27</td>
                  <td>28</td>
                  <td>29</td>
                </tr>
                <tr>
                  <td><span class="holiday">30</span></td>
                  <td>31</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
              </tbody>
            </table>
            &nbsp;
            <!-- /calendar-month -->
          </td>
          <td valign="top">
            <!-- calendar-month -->
            <table cellpadding="2" summary="calendar of February, 2005">
              <caption>
                <em>February</em>&nbsp;<em>2005</em>
              </caption>
              <thead>
                <tr bgcolor="#CCCCCC">
                  <th><span class="holiday">S</span></th>
                  <th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><span class="holiday">&nbsp</span></td>
                  <td>&nbsp</td>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                  <td>5</td>
                </tr>
                <tr>
                  <td><span class="holiday">6</span></td>
                  <td>7</td>
                  <td>8</td>
                  <td>9</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                </tr>
                <tr>
                  <td><span class="holiday">13</span></td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>18</td>
                  <td>19</td>
                </tr>
                <tr>
                  <td><span class="holiday">20</span></td>
                  <td>21</td>
                  <td>22</td>
                  <td>23</td>
                  <td>24</td>
                  <td>25</td>
                  <td>26</td>
                </tr>
                <tr>
                  <td><span class="holiday">27</span></td>
                  <td>28</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
              </tbody>
            </table>
            &nbsp;
            <!-- /calendar-month -->
          </td>
          <td valign="top">
            <!-- calendar-month -->
            <table cellpadding="2" summary="calendar of March, 2005">
              <caption>
                <em>March</em>&nbsp;<em>2005</em>
              </caption>
              <thead>
                <tr bgcolor="#CCCCCC">
                  <th><span class="holiday">S</span></th>
                  <th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><span class="holiday">&nbsp</span></td>
                  <td>&nbsp</td>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                  <td>5</td>
                </tr>
                <tr>
                  <td><span class="holiday">6</span></td>
                  <td>7</td>
                  <td>8</td>
                  <td>9</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                </tr>
                <tr>
                  <td><span class="holiday">13</span></td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>18</td>
                  <td>19</td>
                </tr>
                <tr>
                  <td><span class="holiday">20</span></td>
                  <td>21</td>
                  <td>22</td>
                  <td>23</td>
                  <td>24</td>
                  <td>25</td>
                  <td>26</td>
                </tr>
                <tr>
                  <td><span class="holiday">27</span></td>
                  <td>28</td>
                  <td>29</td>
                  <td>30</td>
                  <td>31</td>
                  <td>&nbsp;</td>
                </tr>
              </tbody>
            </table>
            &nbsp;
            <!-- /calendar-month -->
          </td>
          <td valign="top">
            <!-- calendar-month -->
            <table cellpadding="2" summary="calendar of April, 2005">
              <caption>
                <em>April</em>&nbsp;<em>2005</em>
              </caption>
              <thead>
                <tr bgcolor="#CCCCCC">
                  <th><span class="holiday">S</span></th>
                  <th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><span class="holiday">&nbsp</span></td>
                  <td>&nbsp</td>
                  <td>&nbsp</td>
                  <td>&nbsp</td>
                  <td>&nbsp</td>
                  <td>1</td>
                  <td>2</td>
                </tr>
                <tr>
                  <td><span class="holiday">3</span></td>
                  <td>4</td>
                  <td>5</td>
                  <td>6</td>
                  <td>7</td>
                  <td>8</td>
                  <td>9</td>
                </tr>
                <tr>
                  <td><span class="holiday">10</span></td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                </tr>
                <tr>
                  <td><span class="holiday">17</span></td>
                  <td>18</td>
                  <td>19</td>
                  <td>20</td>
                  <td>21</td>
                  <td>22</td>
                  <td>23</td>
                </tr>
                <tr>
                  <td><span class="holiday">24</span></td>
                  <td>25</td>
                  <td>26</td>
                  <td>27</td>
                  <td>28</td>
                  <td>29</td>
                  <td>30</td>
                </tr>
              </tbody>
            </table>
            &nbsp;
            <!-- /calendar-month -->
          </td>
        </tr>
        <tr>
          <td valign="top">
            <!-- calendar-month -->
            <table cellpadding="2" summary="calendar of May, 2005">
              <caption>
                <em>May</em>&nbsp;<em>2005</em>
              </caption>
              <thead>
                <tr bgcolor="#CCCCCC">
                  <th><span class="holiday">S</span></th>
                  <th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><span class="holiday">1</span></td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                  <td>5</td>
                  <td>6</td>
                  <td>7</td>
                </tr>
                <tr>
                  <td><span class="holiday">8</span></td>
                  <td>9</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                </tr>
                <tr>
                  <td><span class="holiday">15</span></td>
                  <td>16</td>
                  <td>17</td>
                  <td>18</td>
                  <td>19</td>
                  <td>20</td>
                  <td>21</td>
                </tr>
                <tr>
                  <td><span class="holiday">22</span></td>
                  <td>23</td>
                  <td>24</td>
                  <td>25</td>
                  <td>26</td>
                  <td>27</td>
                  <td>28</td>
                </tr>
                <tr>
                  <td><span class="holiday">29</span></td>
                  <td>30</td>
                  <td>31</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
              </tbody>
            </table>
            &nbsp;
            <!-- /calendar-month -->
          </td>
          <td valign="top">
            <!-- calendar-month -->
            <table cellpadding="2" summary="calendar of June, 2005">
              <caption>
                <em>June</em>&nbsp;<em>2005</em>
              </caption>
              <thead>
                <tr bgcolor="#CCCCCC">
                  <th><span class="holiday">S</span></th>
                  <th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><span class="holiday">&nbsp</span></td>
                  <td>&nbsp</td>
                  <td>&nbsp</td>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                </tr>
                <tr>
                  <td><span class="holiday">5</span></td>
                  <td>6</td>
                  <td>7</td>
                  <td>8</td>
                  <td>9</td>
                  <td>10</td>
                  <td>11</td>
                </tr>
                <tr>
                  <td><span class="holiday">12</span></td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>18</td>
                </tr>
                <tr>
                  <td><span class="holiday">19</span></td>
                  <td>20</td>
                  <td>21</td>
                  <td>22</td>
                  <td>23</td>
                  <td>24</td>
                  <td>25</td>
                </tr>
                <tr>
                  <td><span class="holiday">26</span></td>
                  <td>27</td>
                  <td>28</td>
                  <td>29</td>
                  <td>30</td>
                  <td>&nbsp;</td>
                </tr>
              </tbody>
            </table>
            &nbsp;
            <!-- /calendar-month -->
          </td>
          <td valign="top">
            <!-- calendar-month -->
            <table cellpadding="2" summary="calendar of July, 2005">
              <caption>
                <em>July</em>&nbsp;<em>2005</em>
              </caption>
              <thead>
                <tr bgcolor="#CCCCCC">
                  <th><span class="holiday">S</span></th>
                  <th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><span class="holiday">&nbsp</span></td>
                  <td>&nbsp</td>
                  <td>&nbsp</td>
                  <td>&nbsp</td>
                  <td>&nbsp</td>
                  <td>1</td>
                  <td>2</td>
                </tr>
                <tr>
                  <td><span class="holiday">3</span></td>
                  <td>4</td>
                  <td>5</td>
                  <td>6</td>
                  <td>7</td>
                  <td>8</td>
                  <td>9</td>
                </tr>
                <tr>
                  <td><span class="holiday">10</span></td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                </tr>
                <tr>
                  <td><span class="holiday">17</span></td>
                  <td>18</td>
                  <td>19</td>
                  <td>20</td>
                  <td>21</td>
                  <td>22</td>
                  <td>23</td>
                </tr>
                <tr>
                  <td><span class="holiday">24</span></td>
                  <td>25</td>
                  <td>26</td>
                  <td>27</td>
                  <td>28</td>
                  <td>29</td>
                  <td>30</td>
                </tr>
                <tr>
                  <td><span class="holiday">31</span></td>
                  <td><span class="holiday">&nbsp;</span></td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
              </tbody>
            </table>
            &nbsp;
            <!-- /calendar-month -->
          </td>
          <td valign="top">
            <!-- calendar-month -->
            <table cellpadding="2" summary="calendar of August, 2005">
              <caption>
                <em>August</em>&nbsp;<em>2005</em>
              </caption>
              <thead>
                <tr bgcolor="#CCCCCC">
                  <th><span class="holiday">S</span></th>
                  <th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><span class="holiday">&nbsp</span></td>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                  <td>5</td>
                  <td>6</td>
                </tr>
                <tr>
                  <td><span class="holiday">7</span></td>
                  <td>8</td>
                  <td>9</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                </tr>
                <tr>
                  <td><span class="holiday">14</span></td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>18</td>
                  <td>19</td>
                  <td>20</td>
                </tr>
                <tr>
                  <td><span class="holiday">21</span></td>
                  <td>22</td>
                  <td>23</td>
                  <td>24</td>
                  <td>25</td>
                  <td>26</td>
                  <td>27</td>
                </tr>
                <tr>
                  <td><span class="holiday">28</span></td>
                  <td>29</td>
                  <td>30</td>
                  <td>31</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
              </tbody>
            </table>
            &nbsp;
            <!-- /calendar-month -->
          </td>
        </tr>
        <tr>
          <td valign="top">
            <!-- calendar-month -->
            <table cellpadding="2" summary="calendar of September, 2005">
              <caption>
                <em>September</em>&nbsp;<em>2005</em>
              </caption>
              <thead>
                <tr bgcolor="#CCCCCC">
                  <th><span class="holiday">S</span></th>
                  <th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><span class="holiday">&nbsp</span></td>
                  <td>&nbsp</td>
                  <td>&nbsp</td>
                  <td>&nbsp</td>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                </tr>
                <tr>
                  <td><span class="holiday">4</span></td>
                  <td>5</td>
                  <td>6</td>
                  <td>7</td>
                  <td>8</td>
                  <td>9</td>
                  <td>10</td>
                </tr>
                <tr>
                  <td><span class="holiday">11</span></td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                </tr>
                <tr>
                  <td><span class="holiday">18</span></td>
                  <td>19</td>
                  <td>20</td>
                  <td>21</td>
                  <td>22</td>
                  <td>23</td>
                  <td>24</td>
                </tr>
                <tr>
                  <td><span class="holiday">25</span></td>
                  <td>26</td>
                  <td>27</td>
                  <td>28</td>
                  <td>29</td>
                  <td>30</td>
                </tr>
              </tbody>
            </table>
            &nbsp;
            <!-- /calendar-month -->
          </td>
          <td valign="top">
            <!-- calendar-month -->
            <table cellpadding="2" summary="calendar of October, 2005">
              <caption>
                <em>October</em>&nbsp;<em>2005</em>
              </caption>
              <thead>
                <tr bgcolor="#CCCCCC">
                  <th><span class="holiday">S</span></th>
                  <th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><span class="holiday">&nbsp</span></td>
                  <td>&nbsp</td>
                  <td>&nbsp</td>
                  <td>&nbsp</td>
                  <td>&nbsp</td>
                  <td>&nbsp</td>
                  <td>1</td>
                </tr>
                <tr>
                  <td><span class="holiday">2</span></td>
                  <td>3</td>
                  <td>4</td>
                  <td>5</td>
                  <td>6</td>
                  <td>7</td>
                  <td>8</td>
                </tr>
                <tr>
                  <td><span class="holiday">9</span></td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                </tr>
                <tr>
                  <td><span class="holiday">16</span></td>
                  <td>17</td>
                  <td>18</td>
                  <td>19</td>
                  <td>20</td>
                  <td>21</td>
                  <td>22</td>
                </tr>
                <tr>
                  <td><span class="holiday">23</span></td>
                  <td>24</td>
                  <td>25</td>
                  <td>26</td>
                  <td>27</td>
                  <td>28</td>
                  <td>29</td>
                </tr>
                <tr>
                  <td><span class="holiday">30</span></td>
                  <td>31</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
              </tbody>
            </table>
            &nbsp;
            <!-- /calendar-month -->
          </td>
          <td valign="top">
            <!-- calendar-month -->
            <table cellpadding="2" summary="calendar of November, 2005">
              <caption>
                <em>November</em>&nbsp;<em>2005</em>
              </caption>
              <thead>
                <tr bgcolor="#CCCCCC">
                  <th><span class="holiday">S</span></th>
                  <th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><span class="holiday">&nbsp</span></td>
                  <td>&nbsp</td>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                  <td>5</td>
                </tr>
                <tr>
                  <td><span class="holiday">6</span></td>
                  <td>7</td>
                  <td>8</td>
                  <td>9</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                </tr>
                <tr>
                  <td><span class="holiday">13</span></td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>18</td>
                  <td>19</td>
                </tr>
                <tr>
                  <td><span class="holiday">20</span></td>
                  <td>21</td>
                  <td>22</td>
                  <td>23</td>
                  <td>24</td>
                  <td>25</td>
                  <td>26</td>
                </tr>
                <tr>
                  <td><span class="holiday">27</span></td>
                  <td>28</td>
                  <td>29</td>
                  <td>30</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
              </tbody>
            </table>
            &nbsp;
            <!-- /calendar-month -->
          </td>
          <td valign="top">
            <!-- calendar-month -->
            <table cellpadding="2" summary="calendar of December, 2005">
              <caption>
                <em>December</em>&nbsp;<em>2005</em>
              </caption>
              <thead>
                <tr bgcolor="#CCCCCC">
                  <th><span class="holiday">S</span></th>
                  <th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><span class="holiday">&nbsp</span></td>
                  <td>&nbsp</td>
                  <td>&nbsp</td>
                  <td>&nbsp</td>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                </tr>
                <tr>
                  <td><span class="holiday">4</span></td>
                  <td>5</td>
                  <td>6</td>
                  <td>7</td>
                  <td>8</td>
                  <td>9</td>
                  <td>10</td>
                </tr>
                <tr>
                  <td><span class="holiday">11</span></td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                </tr>
                <tr>
                  <td><span class="holiday">18</span></td>
                  <td>19</td>
                  <td>20</td>
                  <td>21</td>
                  <td>22</td>
                  <td>23</td>
                  <td>24</td>
                </tr>
                <tr>
                  <td><span class="holiday">25</span></td>
                  <td>26</td>
                  <td>27</td>
                  <td>28</td>
                  <td>29</td>
                  <td>30</td>
                  <td>31</td>
                </tr>
              </tbody>
            </table>
            &nbsp;
            <!-- /calendar-month -->
          </td>
        </tr>
      </table>
    </div>
    
  </body>
</html>

Thumbnail

thumbnail.html (presentation data):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO8859-1">
    <title>Kwartz - a template system for Ruby, PHP and Java (brief overview)</title>
  </head>

  <body style="background-color:#FFFFFF">

    <div align="center" id="mark:navi">
      <a id="mark:navi_first" href="...">|&lt;&lt; First</a>
      &nbsp;
      <a id="mark:navi_prev"  href="...">&lt; Prev</a>
      &nbsp;
      <a id="mark:navi_index"  href="...">Index</a>
      &nbsp;
      <a id="mark:navi_next"  href="..."><strong>Next &gt;</strong></a>
      &nbsp;
      <a id="mark:navi_last"  href="...">Last &gt;&gt;|</a>
    </div>

    <div id="mark:index">
      <a id="mark:thumbnail_link" href="..."><!--
    --><img width="200" height="150" src="dummy1.png" id="mark:thumbnail_image" ></a>
      <a href="dummy2.png"><!--
    --><img width="200" height="150" src="dummy2.png"></a>
      <a href="dummy3.png"><!--
    --><img width="200" height="150" src="dummy3.png"></a>
      <br id="mark:br">
    </div>

    <div id="main_image" align="center">
      <br>
      <table border="1">
        <tr>
          <td>
            <img src="dummy0.png" alt="presentaion image" id="mark:page_image" >
          </td>
        </tr>
      </table>
      <br>
    </div>

    <div id="mark:navi2">
      |&lt;&lt; Fist &nbsp; &lt; Pref &nbsp; List &nbsp;
      <strong>Next</strong> &gt; &nbsp; Last &gt;&gt;|
    </div>

  </body>
</html>
thumbnail.plogic (presentation logic):
#navi {
    plogic: {
        if (page > 0) {      // remove element when page is 0
            @stag;
            @cont;
            @etag;
        }
    }
}


#navi_first {
    attrs:  "href" first_url;
    plogic: {
        if (first_url != empty) {
            @stag;
            @cont;
            @etag;
        } else {
            @cont;           // remove start tag and end tag
        }
    }
}


#navi_last {
    attr:  "href" last_url;
    plogic: {
        if (last_url != empty) {
            @stag;
            @cont;
            @etag;
        } else {
            @cont;           // remove start tag and end tag
        }
    }
}


#navi_prev {
    attr:  "href" prev_url;
    plogic: {
        if (prev_url != empty) {
            @stag;
            @cont;
            @etag;
        } else {
            @cont;           // remove start tag and end tag
        }
    }
}


#navi_next {
    attr:  "href" next_url;
    plogic: {
        if (next_url != empty) {
            @stag;
            @cont;
            @etag;
        } else {
            @cont;           // remove start tag and end tag
        }
    }
}


#navi_index {
    attr:  "href" index_url;
    plogic: {
        if (index_url != empty) {
            @stag;
            @cont;
            @etag;
        } else {
            @cont;           // remove start tag and end tag
        }
    }
}


#index {
    plogic: {
        @stag;
        if (page == 0) {
            i = 0;
            foreach (thumb in thumb_list) {
                i += 1;
                link_url  = thumb[:link_url];
                image_url = thumb[:image_url];
                @element(thumbnail_link);
                if (i % 3 == 0) {
                    @element(br);
                }
            }
        }
        @etag;
    }
}


#thumbnail_link {
    attr: "href" link_url;
}

#thumbnail_image {
    attr: "src" image_url;
}


#main_image {
    plogic: {
        if (page != 0) {     // remove element when page is 0
            @stag;
            @cont;
            @etag;
        }
    }
}

#page_image {
    attr: "src" image_url;
}


#navi2 {
    plogic: {
        @element(navi);
    }
}
thumbnail.rbx (main program):
#!/usr/bin/ruby

## set url format of images
base_url  = "http://www.kuwata-lab.com/kwartz/overview/img";
image_url_format = "#{base_url}/overview_%02d.png";

## get parameters
params = {}
cgi = nil
if ENV['REQUEST_METHOD']
   require 'cgi'
   cgi = CGI.new
   cgi.params.each do |key, value|
      params[key] = value.first
   end
end

## get parameters
first = 1
last  = 22
page = params['page']
if (!page || page.empty?)
   page = 0
else
   page = page.to_i
   page = 0 unless first <= page && page <= last
end

## set URLs of previous, next, first, last, and index page
script = cgi ? cgi.script_name : File::basename(__FILE__)
prev_url  = page > first ? "#{script}?page=#{page-1}" : nil
next_url  = page < last  ? "#{script}?page=#{page+1}" : nil
first_url = page > first ? "#{script}?page=#{first}"  : nil
last_url  = page < last  ? "#{script}?page=#{last}"   : nil
index_url = page != 0    ? "#{script}?page=0"         : nil

##
if page > 0
   image_url = image_url_format % page
elsif page == 0
   thumb_list = []
   (first..last).each do |i|
      image_url = image_url_format % i
      link_url  = "#{script}?page=#{i}"
      thumb_list << { :image_url => image_url, :link_url => link_url }
   end
else
   # internal error
end

## load view
require 'erb'
str = File.open('thumbnail.view') { |f| f.read() }
str.untaint
trim_mode = 2
print cgi.header if cgi
ERB.new(str, $SAFE, trim_mode).run(binding())
Compile and execution:
### compile
% kwartz -l eruby -p thumbnail.plogic thumbnail.html > thumbnail.view

### execution
% ruby thumbnail.rb > result.html
thumbnail.view (output script for Ruby):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO8859-1">
    <title>Kwartz - a template system for Ruby, PHP and Java (brief overview)</title>
  </head>

  <body style="background-color:#FFFFFF">

<% if page > 0 then %>
    <div align="center">
<%   if first_url && !first_url.empty? then %>
      <a href="<%= first_url %>">|&lt;&lt; First</a>
<%   else %>
|&lt;&lt; First<% end %>
      &nbsp;
<%   if prev_url && !prev_url.empty? then %>
      <a href="<%= prev_url %>">&lt; Prev</a>
<%   else %>
&lt; Prev<% end %>
      &nbsp;
<%   if index_url && !index_url.empty? then %>
      <a href="<%= index_url %>">Index</a>
<%   else %>
Index<% end %>
      &nbsp;
<%   if next_url && !next_url.empty? then %>
      <a href="<%= next_url %>"><strong>Next &gt;</strong></a>
<%   else %>
<strong>Next &gt;</strong><% end %>
      &nbsp;
<%   if last_url && !last_url.empty? then %>
      <a href="<%= last_url %>">Last &gt;&gt;|</a>
<%   else %>
Last &gt;&gt;|<% end %>
    </div>
<% end %>

    <div>
<% if page == 0 then %>
<%   i = 0 %>
<%   for thumb in thumb_list do %>
<%     i += 1 %>
<%     link_url = thumb[:link_url] %>
<%     image_url = thumb[:image_url] %>
      <a href="<%= link_url %>"><!--
    --><img width="200" height="150" src="<%= image_url %>"></a>
<%     if i % 3 == 0 then %>
      <br>
<%     end %>
<%   end %>
<% end %>
    </div>

<% if page != 0 then %>
    <div id="main_image" align="center">
      <br>
      <table border="1">
        <tr>
          <td>
            <img src="<%= image_url %>" alt="presentaion image">
          </td>
        </tr>
      </table>
      <br>
    </div>
<% end %>

<% if page > 0 then %>
    <div align="center">
<%   if first_url && !first_url.empty? then %>
      <a href="<%= first_url %>">|&lt;&lt; First</a>
<%   else %>
|&lt;&lt; First<% end %>
      &nbsp;
<%   if prev_url && !prev_url.empty? then %>
      <a href="<%= prev_url %>">&lt; Prev</a>
<%   else %>
&lt; Prev<% end %>
      &nbsp;
<%   if index_url && !index_url.empty? then %>
      <a href="<%= index_url %>">Index</a>
<%   else %>
Index<% end %>
      &nbsp;
<%   if next_url && !next_url.empty? then %>
      <a href="<%= next_url %>"><strong>Next &gt;</strong></a>
<%   else %>
<strong>Next &gt;</strong><% end %>
      &nbsp;
<%   if last_url && !last_url.empty? then %>
      <a href="<%= last_url %>">Last &gt;&gt;|</a>
<%   else %>
Last &gt;&gt;|<% end %>
    </div>
<% end %>

  </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO8859-1">
    <title>Kwartz - a template system for Ruby, PHP and Java (brief overview)</title>
  </head>

  <body style="background-color:#FFFFFF">


    <div>
      <a href="thumbnail.rbx?page=1"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_01.png"></a>
      <a href="thumbnail.rbx?page=2"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_02.png"></a>
      <a href="thumbnail.rbx?page=3"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_03.png"></a>
      <br>
      <a href="thumbnail.rbx?page=4"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_04.png"></a>
      <a href="thumbnail.rbx?page=5"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_05.png"></a>
      <a href="thumbnail.rbx?page=6"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_06.png"></a>
      <br>
      <a href="thumbnail.rbx?page=7"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_07.png"></a>
      <a href="thumbnail.rbx?page=8"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_08.png"></a>
      <a href="thumbnail.rbx?page=9"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_09.png"></a>
      <br>
      <a href="thumbnail.rbx?page=10"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_10.png"></a>
      <a href="thumbnail.rbx?page=11"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_11.png"></a>
      <a href="thumbnail.rbx?page=12"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_12.png"></a>
      <br>
      <a href="thumbnail.rbx?page=13"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_13.png"></a>
      <a href="thumbnail.rbx?page=14"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_14.png"></a>
      <a href="thumbnail.rbx?page=15"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_15.png"></a>
      <br>
      <a href="thumbnail.rbx?page=16"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_16.png"></a>
      <a href="thumbnail.rbx?page=17"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_17.png"></a>
      <a href="thumbnail.rbx?page=18"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_18.png"></a>
      <br>
      <a href="thumbnail.rbx?page=19"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_19.png"></a>
      <a href="thumbnail.rbx?page=20"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_20.png"></a>
      <a href="thumbnail.rbx?page=21"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_21.png"></a>
      <br>
      <a href="thumbnail.rbx?page=22"><!--
    --><img width="200" height="150" src="http://www.kuwata-lab.com/kwartz/overview/img/overview_22.png"></a>
    </div>



  </body>
</html>

Page Layout

layout.html (presentation data):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
  <head>
    <title id="placeholder:pagetitle:content">pagetitle</span></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" summary="">
      <tr>

        <!-- menu part -->
        <td width="100" valign="top" class="menu_part">
          <b>Menu:</b>
          <div id="placeholder:menulist" class="menulist">
            * menu1 <br>
            * menu2 <br>
            * menu3 <br>
            * menu4 <br>
          </div>
        </td>

        <!-- content part -->
        <td width="400" valign="top" class="contents_part">
          <h3 id="placeholder:pagetitle:content">...title...</h3>
          <div id="placeholder:contents:content" class="contents">
            content<br>
            content<br>
            content<br>
            content<br>
          </div>
        </td>

      </tr>

      <!-- footer part -->
      <tr>
        <td colspan="2" class="copyright">
          copyright&copy; 2004-2005 kuwata-lab.com All Rights Reserverd
        </td>
      </tr>
    </table>

  </body>
</html>
menu.html (presentation data):
<html>
  <body>
    
    <h1>Menu</h1>
    
    <ul id="mark:menulist">
      <li><a href="..." id="mark:menu">menu0</a></li>
      <li id="dummy:m1"><a href="...">menu1</a></li>
      <li id="dummy:m2"><a href="...">menu2</a></li>
    </ul>
    
  </body>
</html>
menu.plogic (presentation logic):
#menulist {
        plogic:  {
            foreach (menu in menulist) {
                @stag;
                @cont;
                @etag;
            }
        }
}

#menu {
        value:  menu[:label];
        attrs:  "href" menu[:url];
}
page1.html (presentation data):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <body>

    <h1 id="mark:pagetitle">Stock Quoting</h1>

    <div id="mark:contents">
      <table>
        <thead>
          <tr>
            <th>Symbol</th><th>Company</th><th>Price</th><th>Change</th>
          </tr>
        </thead>
        <tbody>
          <tr id="mark:stocks">
            <td id="mark:stock_symbol">AAAA</td>
            <td id="mark:stock_company">AAAA Corp.</td>
            <td id="mark:stock_price" align="right">11.11</td>
            <td id="mark:stock_rate" align="right">1.11%</td>
          </tr>
          <tr id="dummy:s1">
            <td>BBBB</td>
            <td>BBBB Corp.</td>
            <td align="right">22.22</td>
            <td align="right">2.22%</td>
          </tr>
          <tr id="dummy:s2">
            <td>CCCC</td>
            <td>CCCC Corp.</td>
            <td align="right">33.33</td>
            <td align="right" style="color:red">3.33%</td>
          </tr>
        </tbody>
      </table>
    </div>

  </body>
</html>
page2.html (presentation data):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <body>

    <h1 id="mark:pagetitle">Quoting Detail</h1>
    
    <div id="mark:contents">
      <table id="mark:stock">
        <tbody>
          <tr>
            <th>Symbol:</th><td id="mark:stock_symbol">AAAA</td>
          </tr>
          <tr>
            <th>Company:</th><td id="mark:stock_company">AAAA Corp.</td>
          </tr>
          <tr>
            <th>Price:</th><td id="mark:stock_price">11.11</td>
          </tr>
          <tr>
            <th>Change:</th>
            <td id="mark:stock_rate">1.11%</td>
          </tr>
        </tbody>
      </table>
    </div>

  </body>
</html>
page.plogic (presentation logic):
#stocks {
        plogic:  {
            foreach (stock in stocks) {
                @stag;
                @cont;
                @etag;
            }
        }
}

#stock_symbol {
        value:  stock[:symbol];
}

#stock_company {
        value:  stock[:company];
}

#stock_price {
        value:  stock[:price];
}

#stock_rate {
        append: style;
        plogic: {
            rate = stock[:rate];
            style = '';
            if (rate < 0) {
                rate = - rate;
                style = ' style="color:red"';
            }
            @stag;
            print(rate, "%");
            @etag;
        }
}
main.rb (main program):
#!/usr/bin/env ruby

## menu
menulist = [
  { :label => 'Mail',     :url => '/cgi-bin/mail.cgi' },
  { :label => 'Calnedar', :url => '/cgi-bin/calendar.cgi' },
  { :label => 'Todo',     :url => '/cgi-bin/todo.cgi' },
  { :label => 'Stock',    :url => '/cgi-bin/stock.cgi' },
]

## contents data
stocks = [
  { :symbol => "AAPL", :price => 36.49, :rate => -0.32,
    :company => "Apple Computer, Inc."},
  { :symbol => "MSFT", :price => 26.53, :rate => 1.44,
    :company => "Microsoft Corp."},
  { :symbol => "ORCL", :price => 12.59, :rate => -2.02,
    :company => "Oracle Corporation"},
  { :symbol => "SUNW", :price =>  3.62, :rate => 0.28,
    :company => "Sun Microsystems, Inc." },
  { :symbol => "INTC", :price => 19.51, :rate => 2.90,
    :company => "Interl Corporation" },
]

## page filename
cgi = nil
symbol = nil
if ENV['SCRIPT_NAME']
  require 'cgi'
  cgi = CGI.new
  symbol = cgi.params['symbol'].first
elsif ARGV[0]
  symbol = ARGV[0]
end
if symbol
  stock = stocks.find { |hash| hash[:symbol] == symbol }
  filename = 'page2.view'
else
  filename = 'page1.view'
end

## output
require 'erb'
str = File.open(filename) { |f| f.read() }
trim_mode = 1
erb = ERB.new(str, $SAFE, trim_mode)
print cgi.header if cgi
print erb.result(binding())
Compile and execution:
### compile
% kwartz -p menu.plogic,page.plogic -i menu.html,page1.html layout.html > page1.view
% kwartz -p menu.plogic,page.plogic -i menu.html,page2.html layout.html > page2.view

### execution
% ruby main.rb > result1.html
% ruby main.rb AAPL > result2.html
page1.view (output script for Ruby):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
  <head>
    <title>Stock Quoting</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" summary="">
      <tr>

        <!-- menu part -->
        <td width="100" valign="top" class="menu_part">
          <b>Menu:</b>
          <div class="menulist">
<% for menu in menulist do %>
    <ul>
      <li><a href="<%= menu[:url] %>"><%= menu[:label] %></a></li>
    </ul>
<% end %>
          </div>
        </td>

        <!-- content part -->
        <td width="400" valign="top" class="contents_part">
          <h3>Stock Quoting</h3>
          <div class="contents">
      <table>
        <thead>
          <tr>
            <th>Symbol</th><th>Company</th><th>Price</th><th>Change</th>
          </tr>
        </thead>
        <tbody>
<% for stock in stocks do %>
          <tr>
            <td><%= stock[:symbol] %></td>
            <td><%= stock[:company] %></td>
            <td align="right"><%= stock[:price] %></td>
<%   rate = stock[:rate] %>
<%   style = "" %>
<%   if rate < 0 then %>
<%     rate = -rate %>
<%     style = " style=\"color:red\"" %>
<%   end %>
            <td align="right"<%= style %>><%= rate %>%</td>
          </tr>
<% end %>
        </tbody>
      </table>
          </div>
        </td>

      </tr>

      <!-- footer part -->
      <tr>
        <td colspan="2" class="copyright">
          copyright&copy; 2004-2005 kuwata-lab.com All Rights Reserverd
        </td>
      </tr>
    </table>

  </body>
</html>
page2.view (output script for Ruby):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
  <head>
    <title>Quoting Detail</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" summary="">
      <tr>

        <!-- menu part -->
        <td width="100" valign="top" class="menu_part">
          <b>Menu:</b>
          <div class="menulist">
<% for menu in menulist do %>
    <ul>
      <li><a href="<%= menu[:url] %>"><%= menu[:label] %></a></li>
    </ul>
<% end %>
          </div>
        </td>

        <!-- content part -->
        <td width="400" valign="top" class="contents_part">
          <h3>Quoting Detail</h3>
          <div class="contents">
      <table>
        <tbody>
          <tr>
            <th>Symbol:</th><td><%= stock[:symbol] %></td>
          </tr>
          <tr>
            <th>Company:</th><td><%= stock[:company] %></td>
          </tr>
          <tr>
            <th>Price:</th><td><%= stock[:price] %></td>
          </tr>
          <tr>
            <th>Change:</th>
<% rate = stock[:rate] %>
<% style = "" %>
<% if rate < 0 then %>
<%   rate = -rate %>
<%   style = " style=\"color:red\"" %>
<% end %>
            <td<%= style %>><%= rate %>%</td>
          </tr>
        </tbody>
      </table>
          </div>
        </td>

      </tr>

      <!-- footer part -->
      <tr>
        <td colspan="2" class="copyright">
          copyright&copy; 2004-2005 kuwata-lab.com All Rights Reserverd
        </td>
      </tr>
    </table>

  </body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
  <head>
    <title>Stock Quoting</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" summary="">
      <tr>

        <!-- menu part -->
        <td width="100" valign="top" class="menu_part">
          <b>Menu:</b>
          <div class="menulist">
    <ul>
      <li><a href="/cgi-bin/mail.cgi">Mail</a></li>
    </ul>
    <ul>
      <li><a href="/cgi-bin/calendar.cgi">Calnedar</a></li>
    </ul>
    <ul>
      <li><a href="/cgi-bin/todo.cgi">Todo</a></li>
    </ul>
    <ul>
      <li><a href="/cgi-bin/stock.cgi">Stock</a></li>
    </ul>
          </div>
        </td>

        <!-- content part -->
        <td width="400" valign="top" class="contents_part">
          <h3>Stock Quoting</h3>
          <div class="contents">
      <table>
        <thead>
          <tr>
            <th>Symbol</th><th>Company</th><th>Price</th><th>Change</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>AAPL</td>
            <td>Apple Computer, Inc.</td>
            <td align="right">36.49</td>
            <td align="right" style="color:red">0.32%</td>
          </tr>
          <tr>
            <td>MSFT</td>
            <td>Microsoft Corp.</td>
            <td align="right">26.53</td>
            <td align="right">1.44%</td>
          </tr>
          <tr>
            <td>ORCL</td>
            <td>Oracle Corporation</td>
            <td align="right">12.59</td>
            <td align="right" style="color:red">2.02%</td>
          </tr>
          <tr>
            <td>SUNW</td>
            <td>Sun Microsystems, Inc.</td>
            <td align="right">3.62</td>
            <td align="right">0.28%</td>
          </tr>
          <tr>
            <td>INTC</td>
            <td>Interl Corporation</td>
            <td align="right">19.51</td>
            <td align="right">2.9%</td>
          </tr>
        </tbody>
      </table>
          </div>
        </td>

      </tr>

      <!-- footer part -->
      <tr>
        <td colspan="2" class="copyright">
          copyright&copy; 2004-2005 kuwata-lab.com All Rights Reserverd
        </td>
      </tr>
    </table>

  </body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
  <head>
    <title>Quoting Detail</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" summary="">
      <tr>

        <!-- menu part -->
        <td width="100" valign="top" class="menu_part">
          <b>Menu:</b>
          <div class="menulist">
    <ul>
      <li><a href="/cgi-bin/mail.cgi">Mail</a></li>
    </ul>
    <ul>
      <li><a href="/cgi-bin/calendar.cgi">Calnedar</a></li>
    </ul>
    <ul>
      <li><a href="/cgi-bin/todo.cgi">Todo</a></li>
    </ul>
    <ul>
      <li><a href="/cgi-bin/stock.cgi">Stock</a></li>
    </ul>
          </div>
        </td>

        <!-- content part -->
        <td width="400" valign="top" class="contents_part">
          <h3>Quoting Detail</h3>
          <div class="contents">
      <table>
        <tbody>
          <tr>
            <th>Symbol:</th><td>AAPL</td>
          </tr>
          <tr>
            <th>Company:</th><td>Apple Computer, Inc.</td>
          </tr>
          <tr>
            <th>Price:</th><td>36.49</td>
          </tr>
          <tr>
            <th>Change:</th>
            <td style="color:red">0.32%</td>
          </tr>
        </tbody>
      </table>
          </div>
        </td>

      </tr>

      <!-- footer part -->
      <tr>
        <td colspan="2" class="copyright">
          copyright&copy; 2004-2005 kuwata-lab.com All Rights Reserverd
        </td>
      </tr>
    </table>

  </body>
</html>

Rails

recipes.html (presentation data):
<html>
  <head>
    <title>Recipes: <span id="mark:action_name">action</span></title>
    <link id="mark:stylesheet_link" type="text/css" rel="stylesheet" href="scaffold.css" />
  </head>
  <body id="mark:content">

      ... contents ...

  </body>
</html>
recipes.plogic (presentation logic):
#stylesheet_link {
        // replace element with print statement
        plogic: {
            print(X(<%= stylesheet_link_tag 'scaffold' %>), "\n");
        }
}

#action_name {
        value:  controller.action_name;
}

#content {
        value:  X(content_for_layout);
}
list.html (presentation data):
<html>
  <body>
    <div id="mark:content">

      <h1>Online Cookbook - All Recipes</h1>

      <table border="1">
        <thead>
          <tr>
            <th width="40%">Recipe</th>
            <th width="20%">Category</th>
            <th width="20%">Date</th>
          </tr>
        </thead>
        <tbody>
          <tr bgcolor="#FFCCCC" id="mark:recipes">
            <td><a href="..." id="mark:recipe_title">Hot Chips</a></td>
            <td id="mark:recipe_category">Snacks</td>
            <td id="mark:recipe_date">2004-11-11</td>
          </tr>
          <tr bgcolor="#CCCCFF" id="dummy:d1">
            <td><a href="...">Ice Water</a></td>
            <td>Beverages</td>
            <td>2004-11-11</td>
          </tr>
        </tbody>
      </table>

      <p>
        <a href="..." id="mark:new_recipe">Create new recipe</a>
      </p>

    </div>
  </body>
</html>
list.plogic (presentation logic):
#recipes {
        attrs:  "bgcolor"  X(color);
        plogic: {
            i = 0;
            foreach (recipe in recipes) {
                i += 1;
                color = i % 2 == 0 ? '#CCCCFF' : '#FFCCCC';
                @stag;   // start tag
                @cont;   // content
                @etag;   // end tag
            }
        }
}

#recipe_title {
        value:  recipe.title;
        attrs:  "href" X(<%= url_for(:action=>'show', :id=>recipe.id) %>);
}

#recipe_category {
        value:  recipe.category.name;
}

#recipe_date {
        value:  recipe.date;
}

#new_recipe {
        attrs:  "href" X(<%= url_for(:action=>'new') %>);
}
show.html (presentation data):
<html>
  <body>
    <div id="mark:content">

      <h1>Show Recipe</h1>
      
      <table>
        <tr>
          <th>Title:</th>
          <td id="value:recipe.title">Hot Chips</td>
        </tr>
        <tr>
          <th>Description:</th>
          <td id="value:recipe.description">Only for the brave!</td>
        </tr>
        <tr>
          <th>Category:</th>
          <td id="value:recipe.category.name">Snacks</td>
        </tr>
        <tr>
          <th>Date:</th>
          <td id="value:recipe.date">2004-11-11</td>
        </tr>
        <tr>
          <th>Instructions:</th>
          <td id="mark:recipe_instructions">Sprinkle hot-pepper sauce on corn chips.</td>
        </tr>
      </table>

      <p>
        <a href="..." id="mark:edit_recipe">Edit</a>
        |
        <a href="..." id="mark:list_recipes">Back</a>
      </p>
      
    </div>
  </body>
</html>
show.plogic (presentation logic):
#recipe_instructions {
        value:  X(str_linebreak(escape_xml(recipe.instructions)));
}

#edit_recipe {
        attrs:  "href"  X(<%= url_for(:action=>'edit', :id=>@recipe.id) %>);
}

// #recipe_title {
//   value:  recipe.title;
// }
// 
// #recipe_description {
//   value:  recipe.description;
// }
// 
// #recipe_category {
//   value:  recipe.category.name;
// }
// 
// #recipe_date {
//   value:  recipe.date;
// }
new.html (presentation data):
<html>
  <body>
    <div id="mark:content">

      <h1>New Recipe</h1>

      <form id="new_form" action="..." method="post">
        
        <table>
          <tr>
            <th>Title:</th>
            <td>
              <input id="recipe_title" name="recipe[title]" type="text" value="" />
            </td>
          </tr>
          <tr>
            <th>Description:</th>
            <td>
              <input id="recipe_description" name="recipe[description]" type="text" value=""/>
            </td>
          </tr>
          <tr>
            <th>Category:</th>
            <td>
              <select name="recipe[category_id]">
                <option value="1" id="mark:recipe_category">Snacks</option>
                <option value="2" id="dummy:o1">Drinks</option>
              </select>
            </td>
          </tr>
          <tr>
            <th>Instructions:</th>
            <td>
              <textarea id="recipe_instructions" name="recipe[instructions]"
                cols="40" rows="20" wrap="virtual"></textarea>
            </td>
          </tr>
        </table>
        
        <input type="submit" value="Submit" />
        
      </form>
      
      <p>
        <a href="..." id="mark:list_recipes">Back</a>
      </p>

    </div>
  </body>
</html>
new.plogic (presentation logic):
#new_form {
        attrs:  "action"  X(<%= url_for(:action=>'create') %>);
}

#recipe_category {
        value:  category.name;
        attrs:  "value" category.id;
        plogic: {
            foreach (category in categories) {
                @stag;
                @cont;
                @etag;
            }
        }
}

edit.html (presentation data):
<html>
  <body>
    <div id="mark:content">

      <h1>Edit Recipe</h1>

      <form id="mark:edit_form" action="..." method="post">
        <input id="recipe_id" name="recipe[id]" type="hidden" value="1" />

        <table>
          <tr>
            <th>Title:</th>
            <td>
              <input id="recipe_title" name="recipe[title]"
                     size="30" type="text" value="Hot Chips" />
            </td>
          </tr>
          <tr>
            <th>Description:</th>
            <td>
              <input id="recipe_description" name="recipe[description]"
                     size="30" type="text" value="Only for the brave!" />
            </td>
          </tr>
          <tr>
            <th>Category:</th>
            <td>
              <select name="recipe[category_id]">
                <option value="1" id="mark:category_name">Snacks</option>
                <option value="2" id="dummy:o1">Drinks</option>
              </select>
            </td>
          </tr>
          <tr>
            <th>Instructions:</th>
            <td>
              <textarea id="recipe_instructions" name="recipe[instructions]" wrap="virtual"
                cols="40" rows="20">Sprinkle hot-pepper sauce on corn chips.</textarea>
            </td>
          </tr>
        </table>

        <input type="submit" value="Update" />

      </form>

      <p>
        <a href="..." id="mark:show_recipe">Show</a>
        |
        <a href="..." id="mark:list_recipes">Back</a>
      </p>

    </div>
  </body>
</html>
edit.plogic (presentation logic):
#edit_form {
        attrs:  "action" X(<%= url_for(:action=>'update') %>);
}

#recipe_id {
        attrs:  "value" recipe.id;
}

#recipe_title {
        attrs:  "value" recipe.title;
}

#recipe_description {
        attrs:  "value" recipe.description;
}

#category_name {
        value:  category.name;
        attrs:  "value" category.id;
        append: S(category.id==recipe.category.id);
        plogic: {
            foreach (category in categories) {
                @stag;
                @cont;
                @etag;
            }
        }
}

#recipe_instructions {
        value:  recipe.instructions;
}

#show_recipe {
        attrs:  "href" X(<%= url_for(:action=>'show', :id=>@recipe.id) %>);
}
Compile:
### compile
% kwartz -Rails -e -p recipes.plogic recipes.html > recipes.rhtml
% kwartz -Rails -e -p list.plogic --extract=content list.html > list.rhtml
% kwartz -Rails -e -p show.plogic --extract=content show.html > show.rhtml
% kwartz -Rails -e -p new.plogic  --extract=content new.html  > new.rhtml
% kwartz -Rails -e -p edit.plogic --extract=content edit.html > edit.rhtml
recipes.rhtml (output script for Ruby):
<html>
  <head>
    <title>Recipes: <%=h(@controller.action_name)%></title>
<%= stylesheet_link_tag 'scaffold' %>
  </head>
  <body>
<%= @content_for_layout %>  </body>
</html>
list.rhtml (output script for Ruby):
    <div>

      <h1>Online Cookbook - All Recipes</h1>

      <table border="1">
        <thead>
          <tr>
            <th width="40%">Recipe</th>
            <th width="20%">Category</th>
            <th width="20%">Date</th>
          </tr>
        </thead>
        <tbody>
<% i = 0 %>
<% for recipe in @recipes do %>
<%   i += 1 %>
<%   color = i % 2 == 0 ? "#CCCCFF" : "#FFCCCC" %>
          <tr bgcolor="<%= color %>">
            <td><a href="<%= url_for(:action=>'show', :id=>recipe.id) %>"><%=h(recipe.title)%></a></td>
            <td><%=h(recipe.category.name)%></td>
            <td><%=h(recipe.date)%></td>
          </tr>
<% end %>
        </tbody>
      </table>

      <p>
        <a href="<%= url_for(:action=>'new') %>">Create new recipe</a>
      </p>

    </div>
show.rhtml (output script for Ruby):
    <div>

      <h1>Show Recipe</h1>
      
      <table>
        <tr>
          <th>Title:</th>
          <td><%=h(@recipe.title)%></td>
        </tr>
        <tr>
          <th>Description:</th>
          <td><%=h(@recipe.description)%></td>
        </tr>
        <tr>
          <th>Category:</th>
          <td><%=h(@recipe.category.name)%></td>
        </tr>
        <tr>
          <th>Date:</th>
          <td><%=h(@recipe.date)%></td>
        </tr>
        <tr>
          <th>Instructions:</th>
          <td><%= html_escape(@recipe.instructions).gsub(/\r?\n/,'<br />\&') %></td>
        </tr>
      </table>

      <p>
        <a href="<%= url_for(:action=>'edit', :id=>@recipe.id) %>">Edit</a>
        |
        <a href="...">Back</a>
      </p>
      
    </div>
new.rhtml (output script for Ruby):
    <div>

      <h1>New Recipe</h1>

      <form id="new_form" action="<%= url_for(:action=>'create') %>" method="post">
        
        <table>
          <tr>
            <th>Title:</th>
            <td>
              <input id="recipe_title" name="recipe[title]" type="text" value="" />
            </td>
          </tr>
          <tr>
            <th>Description:</th>
            <td>
              <input id="recipe_description" name="recipe[description]" type="text" value="" />
            </td>
          </tr>
          <tr>
            <th>Category:</th>
            <td>
              <select name="recipe[category_id]">
<% for category in @categories do %>
                <option value="<%=h(category.id)%>"><%=h(category.name)%></option>
<% end %>
              </select>
            </td>
          </tr>
          <tr>
            <th>Instructions:</th>
            <td>
              <textarea id="recipe_instructions" name="recipe[instructions]" cols="40" rows="20" wrap="virtual"></textarea>
            </td>
          </tr>
        </table>
        
        <input type="submit" value="Submit" />
        
      </form>
      
      <p>
        <a href="...">Back</a>
      </p>

    </div>
edit.rhtml (output script for Ruby):
    <div>

      <h1>Edit Recipe</h1>

      <form action="<%= url_for(:action=>'update') %>" method="post">
        <input id="recipe_id" name="recipe[id]" type="hidden" value="<%=h(@recipe.id)%>" />

        <table>
          <tr>
            <th>Title:</th>
            <td>
              <input id="recipe_title" name="recipe[title]" size="30" type="text" value="<%=h(@recipe.title)%>" />
            </td>
          </tr>
          <tr>
            <th>Description:</th>
            <td>
              <input id="recipe_description" name="recipe[description]" size="30" type="text" value="<%=h(@recipe.description)%>" />
            </td>
          </tr>
          <tr>
            <th>Category:</th>
            <td>
              <select name="recipe[category_id]">
<% for category in @categories do %>
                <option value="<%=h(category.id)%>"<%= category.id == @recipe.category.id ? " selected=\"selected\"" : "" %>><%=h(category.name)%></option>
<% end %>
              </select>
            </td>
          </tr>
          <tr>
            <th>Instructions:</th>
            <td>
              <textarea id="recipe_instructions" name="recipe[instructions]" wrap="virtual" cols="40" rows="20"><%=h(@recipe.instructions)%></textarea>
            </td>
          </tr>
        </table>

        <input type="submit" value="Update" />

      </form>

      <p>
        <a href="<%= url_for(:action=>'show', :id=>@recipe.id) %>">Show</a>
        |
        <a href="...">Back</a>
      </p>

    </div>