Kwartz Examples
This document shows you examples of Kwartz, especially in Ruby.
- Bordered Table 1
- Bordered Table 2
- Bordered Table 3
- HTML Form
- Breadcrumbs
- Calendar
- Thumbnail
- Page Layout
- Rails
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 <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 <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">></span> <a href="/aaa/">AAA</a> < <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 '>' } @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> > <% end %> <%= title %> </div> </body> </html>
<html> <body> <div id="breadcrumbs"> <a href="/">HOME</a> > <a href="/kwartz/">Kwartz</a> > <a href="/kwartz/examples/">Examples</a> > <a href="/kwartz/examples/breadcrumbs/">Breadcrumbs</a> > 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> <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"> </span></td> <td id="dummy:d1"> </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> </td><td> </td> </tr> </tbody> </table> <!-- /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 = ' '; 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 = ' '; 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}@"><<</a> <span class="title"> Calendar <span id="value:year">2004</span> </span> <a href="@{next_link}@">>></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> <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 = " " %> <% 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 = " " %> <% 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> <!-- /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 %>"><<</a> <span class="title"> Calendar <%= year %> </span> <a href="<%= next_link %>">>></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"><<</a> <span class="title"> Calendar 2005 </span> <a href="calendar.rbx?year=2006">>></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> <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"> </span></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </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> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table> <!-- /calendar-month --> </td> <td valign="top"> <!-- calendar-month --> <table cellpadding="2" summary="calendar of February, 2005"> <caption> <em>February</em> <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"> </span></td> <td> </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> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table> <!-- /calendar-month --> </td> <td valign="top"> <!-- calendar-month --> <table cellpadding="2" summary="calendar of March, 2005"> <caption> <em>March</em> <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"> </span></td> <td> </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> </td> </tr> </tbody> </table> <!-- /calendar-month --> </td> <td valign="top"> <!-- calendar-month --> <table cellpadding="2" summary="calendar of April, 2005"> <caption> <em>April</em> <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"> </span></td> <td> </td> <td> </td> <td> </td> <td> </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> <!-- /calendar-month --> </td> </tr> <tr> <td valign="top"> <!-- calendar-month --> <table cellpadding="2" summary="calendar of May, 2005"> <caption> <em>May</em> <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> </td> <td> </td> <td> </td> </tr> </tbody> </table> <!-- /calendar-month --> </td> <td valign="top"> <!-- calendar-month --> <table cellpadding="2" summary="calendar of June, 2005"> <caption> <em>June</em> <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"> </span></td> <td> </td> <td> </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> </td> </tr> </tbody> </table> <!-- /calendar-month --> </td> <td valign="top"> <!-- calendar-month --> <table cellpadding="2" summary="calendar of July, 2005"> <caption> <em>July</em> <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"> </span></td> <td> </td> <td> </td> <td> </td> <td> </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"> </span></td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table> <!-- /calendar-month --> </td> <td valign="top"> <!-- calendar-month --> <table cellpadding="2" summary="calendar of August, 2005"> <caption> <em>August</em> <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"> </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> </td> <td> </td> </tr> </tbody> </table> <!-- /calendar-month --> </td> </tr> <tr> <td valign="top"> <!-- calendar-month --> <table cellpadding="2" summary="calendar of September, 2005"> <caption> <em>September</em> <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"> </span></td> <td> </td> <td> </td> <td> </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> <!-- /calendar-month --> </td> <td valign="top"> <!-- calendar-month --> <table cellpadding="2" summary="calendar of October, 2005"> <caption> <em>October</em> <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"> </span></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </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> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table> <!-- /calendar-month --> </td> <td valign="top"> <!-- calendar-month --> <table cellpadding="2" summary="calendar of November, 2005"> <caption> <em>November</em> <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"> </span></td> <td> </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> </td> <td> </td> </tr> </tbody> </table> <!-- /calendar-month --> </td> <td valign="top"> <!-- calendar-month --> <table cellpadding="2" summary="calendar of December, 2005"> <caption> <em>December</em> <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"> </span></td> <td> </td> <td> </td> <td> </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> <!-- /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="...">|<< First</a> <a id="mark:navi_prev" href="...">< Prev</a> <a id="mark:navi_index" href="...">Index</a> <a id="mark:navi_next" href="..."><strong>Next ></strong></a> <a id="mark:navi_last" href="...">Last >>|</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"> |<< Fist < Pref List <strong>Next</strong> > Last >>| </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 %>">|<< First</a> <% else %> |<< First<% end %> <% if prev_url && !prev_url.empty? then %> <a href="<%= prev_url %>">< Prev</a> <% else %> < Prev<% end %> <% if index_url && !index_url.empty? then %> <a href="<%= index_url %>">Index</a> <% else %> Index<% end %> <% if next_url && !next_url.empty? then %> <a href="<%= next_url %>"><strong>Next ></strong></a> <% else %> <strong>Next ></strong><% end %> <% if last_url && !last_url.empty? then %> <a href="<%= last_url %>">Last >>|</a> <% else %> Last >>|<% 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 %>">|<< First</a> <% else %> |<< First<% end %> <% if prev_url && !prev_url.empty? then %> <a href="<%= prev_url %>">< Prev</a> <% else %> < Prev<% end %> <% if index_url && !index_url.empty? then %> <a href="<%= index_url %>">Index</a> <% else %> Index<% end %> <% if next_url && !next_url.empty? then %> <a href="<%= next_url %>"><strong>Next ></strong></a> <% else %> <strong>Next ></strong><% end %> <% if last_url && !last_url.empty? then %> <a href="<%= last_url %>">Last >>|</a> <% else %> Last >>|<% 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© 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© 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© 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© 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© 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>