テンプレート:
<ul> #foreach(item in list) <li>${item}</li> #end </ul> |
出力結果:
<ul> <li>foo</li> <li>bar</li> <li>baz</li> </ul> |
例:Velocityテンプレート
<table> #foreach(item in list) <tr> <td>${item}</td> </tr> #end </table> |
例:HTML::Templateテンプレート
<table> <TMPL_LOOP NAME=list> <tr> <td><TMPL_VAR NAME=name></td> </tr> </TMPL_LOOP> </table> |
例:XMLCテンプレート
<table> <tr id="list"> <td id="item">foo</td> </tr> </table> |
例:XMLCメインプログラム(概要)
1. テンプレートを読んでDOMツリーを作成 2. id属性をつけた要素を操作 2-1. id="item"の要素にテキストを設定 2-2. id="list"の要素をコピー 2-3. コピーした要素からid属性を削除 2-4. リスト中のデータごとに繰り返す 3. DOMツリーをHTMLファイルに変換して出力 |
データ | ロジック | |
---|---|---|
ビジネス層 | ビジネスデータ | ビジネスロジック |
プレゼンテーション層 | プレゼンテーションデータ | プレゼンテーションロジック |
モジュール | 担当者 | |
---|---|---|
ビジネス層 | メインプログラム | プログラマー |
プレゼンテーション層 | テンプレート | デザイナー |
プログラマーの都合をデザイナーに押し付けるべきではない
*
プレゼンテーションデータ(ex1.html)
<table> <tr id="mark:list"> <td id="mark:item">foo</td> </tr> </table>
|
プレゼンテーションロジック(ex1.plogic)
#list { logic: { for user in @users _stag # start-tag _cont # content _etag # end-tag end } } #item { value: user; }
|
コンパイル
$ kwartz -l eruby -p ex1.plogic ex1.html > ex1.rhtml出力用スクリプト(ex1.rhtml) <table> <% for user in @users %> <tr> <td><%= user %></td> </tr> <% end %> </table> |
要素全体を繰り返す
#list { logic: { for user in @users _stag _cont _etag end } } |
内容だけを繰り返す
#list { logic: { _stag for user in @users _cont end _etag } } |
ある条件のときだけ要素を表示
#list { logic: { if condition _stag _cont _etag end } } |
ある条件のときはタグを外す
#list { logic: { if condition _cont else _stag _cont _etag end } } |
|
![]() |
#id { value: username; // 要素の内容('cont:'と同じ) attrs: 'class' klass, // 属性値の変更 'bgcolor' color; logic: { ... } // 要素を操作するロジック remove: 'id'; // 属性の削除 append: cond ? ' checked="checked"':''; // 属性の追加 stag: start_form_tag :action=>'update'; // 開始タグ cont: render :partial=>'form'; // 要素の内容 etag: "</form>"; // 終了タグ elem: link_to 'List' :action=>'list'; // 要素全体 }
プレゼンテーションデータ
<p id="mark:p1">foo</p> <p id="mark:p2">bar</p> <p id="mark:p3">baz</p>プレゼンテーションロジック #p1 { value: text; } #p2 { Value: text; } #p3 { VALUE: text; } |
コンパイル結果(-eオプションなし)
<p><%= text %></p> <p><%=h text %></p> <p><%= text %></p>コンパイル結果(-eオプションあり) <p><%=h text %></p> <p><%=h text %></p> <p><%= text %></p> |
プレゼンテーションロジック
#name { logic: { _stag; if (user != null) { print(user); } else { _cont; } _etag; } } |
プレゼンテーションデータ
Hello <span id="name">guest</span>!Java実装でJSPへコンパイル Hello <span id="name"> <c:choose><c:when test="${user ne null}"> <c:out value="${user}"/> </c:when><c:otherwise> guest</c:otherwise></c:choose> </span>! |
プレゼンテーションデータ
<span id="mark:m1"> <foo> & <bar> </span>プレゼンテーションロジック #m1 { logic: { for i in 0..3 do _cont end } } |
コンパイル
<% for i in 1..3 do %> <foo> & <bar> <% end %>実行結果 <foo> & <bar> <foo> & <bar> <foo> & <bar> |
プレゼンテーションロジック
#form { stag: start_form_tag :action=>'create'; } #user_name { elem: text_field 'user', 'name'; } #submit { elem: submit_tag 'Create'; } |
プレゼンテーションデータ
<form id="mark:form"> Name: <input type="text" id="user_name"> <input type="submit" id="submit"> </form>コンパイル結果 <%= start_form_tag :action=>'create' %> Name: <%= text_field 'user', 'name' %> <%= submit_tag 'Create' %> </form> |
プレゼンテーションデータ
<table id="table"> <tr id="mark:list"> <td kw:d="mark list">foo</td> </tr> </table>コンパイル結果 <table id="table"> <tr> <td>foo</td> </tr> </table> |
プレゼンテーションデータ
Hello <span kw:d="value name">world</span>! <a href="mailto:@!{user.email}@">@{user.name}@</a>コンパイル結果 Hello <span><%= name %></span>! <a href="mailto:<%= user.email %>"><%=h user.name %></a> |
プレゼンテーションデータ
<form kw:d="stag start_form_tag :action=>'create'"> <a href="#" kw:d="elem link_to 'List' :action=>'list'">List</a> </form>コンパイル結果 <%= start_form_tag :action=>'create' %> <%= link_to 'List' :action=>'list' %> </form> |
プレゼンテーションデータ
Hello <span kw:d="default user">guest</span>コンパイル結果(実際には1行) Hello <% if (user) && !(user).to_s.empty? then %> <%= user %><% else %>guest<% end %> |
プレゼンテーションデータ
<ul kw:d="for item in list"> <li>@{item}@</li> </ul>コンパイル結果 <% for item in list do %> <ul> <li><%=h item %></li> </ul> <% end %> |
プレゼンテーションデータ
<ul kw:d="list item in list"> <li>@{item}@</li> </ul>コンパイル結果 <ul> <% for item in list do %> <li><%=h item %></li> <% end %> </ul> |
プレゼンテーションデータ
<ul kw:d="For item in list"> <li>@{item}@</li> </ul>コンパイル結果 <% item_ctr = 0 %> <% for item in list do %> <% item_ctr += 1 %> <ul> <li><%=h item %></li> </ul> <% end %> |
プレゼンテーションデータ
<ul kw:d="List item in list"> <li>@{item}@</li> </ul>コンパイル結果 <ul> <% item_ctr = 0 %> <% for item in list do %> <% item_ctr += 1 %> <li><%=h item %></li> <% end %> </ul> |
プレゼンテーションデータ
<tr class="@!{item_tgl}@" kw:d="FOR item in list"> <td>@{item}@</td> </tr>コンパイル結果 <% item_ctr = 0 %> <% for item in list do %> <% item_ctr += 1 %> <% item_tgl = item_ctr%2==0 ? 'even' : 'odd' %> <tr class="<%= item_tgl %>"> <td><%=h item %></td> </tr> <% end %> |
プレゼンテーションデータ
<ul kw:d="while r = h.fetch()"> <li>@{r['name']}@</li> </ul>コンパイル結果 <% while r = h.fetch() do %> <ul> <li><%=h r['name'] %></li> </ul> <% end %> |
プレゼンテーションデータ
<ul kw:d="loop r = h.fetch()"> <li>@{r['name']}@</li> </ul>コンパイル結果 <ul> <% while r = h.fetch() do %> <li><%=h r['name'] %></li> <% end %> </ul> |
プレゼンテーションデータ
<p kw:d="if val > 0"> val is positive. </p> <p kw:d="elsif val < 0"> val is negative. </p> <p kw:d="else "> val is zero. </p> |
コンパイル結果
<% if val > 0 %> <p> val is positive. </p> <% elsif val < 0 %> <p> val is negative. </p> <% else %> <p> val is zero. </p> <% end %> |
プレゼンテーションデータ
<table kw:d="set i=0"> <tbody kw:d="list item in items"> <tr kw:d="set i+=1"> <td>@!{i}@</td> <td>@{item}@</td> </tr> </tbody> </table> |
コンパイル結果
<% i=0 %> <table> <tbody> <% for item in items do %> <% i+=1 %> <tr> <td><%= i %></td> <td><%=h item %></td> </tr> <% end %> </tbody> </table> |
プレゼンテーションデータ
<table> <tr bgcolor="#FCC"> <td>foo</td> </tr> <tr bgcolor="#CCF" id="dummy:d1"> <td>bar</td> </tr> <tr bgcolor="#FCC" kw:d="dummy "> <td>baz</td> </tr> </table> |
コンパイル結果
<table> <tr bgcolor="#FCC"> <td>foo</td> </tr> </table> |
プレゼンテーションデータ
<p bgcolor="#FCC" kw:d="attr 'bgcolor' color; attr 'class' klass"> Hello world </p>コンパイル結果 <p bgcolor="<%= color %>" class="<%= klass %>"> Hello world </p> |
プレゼンテーションデータ
<input type="checkbox" kw:d="append cond ? ' checked' : ''">コンパイル結果 <input type="checkbox"<%= cond ? ' checked' : '' %>> |
プレゼンテーションデータ
<div id="nav"> <a href="/">Top</a> < Documents </div> ... <div id="replace_content_with_content:nav"> Top < Documents </div> |
コンパイル結果
<div id="nav"> <a href="/">Top</a> < Documents </div> ... <div> <a href="/">Top</a> < Documents </div> |
プレゼンテーションデータ(レイアウト)
<html lang="en"> <body onload="init()"> <div id="placeholder">...</div> </body> </html>プレゼンテーションデータ(コンテンツ) <html><body> <div id="mark:pagecontent"> Hello Kwartz! </div> </body></html> |
プレゼンテーションロジック
#placeholder { logic: { _element(pagecontent) } }コンパイル結果 <html lang="en"> <body onload="init()"> <div> Hello Kwartz! </div> </body> </html> |
プレゼンテーションデータ
<div id="mark:message"> <p style="color:red" id="mark:error">ERROR!</p> <p style="color:blue" id="mark:warning">Warning:</p> <p id="mark:good">No error.</p> </div>コンパイル結果 <% if status == 'error' %> <p style="color:red">ERROR!</p> <% else if status == 'warning' %> <p style="color:blue">Warning:</p> <% else %> <p>No error.</p> <% end %> |
プレゼンテーションロジック
#message { logic: { if status == 'error' _element(error) else if status == 'warning' _element(warning) else _element(good) end } } |
プレゼンテーションデータ
<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> > <a href="/aaa/bbb/ccc">CCC</a> > <strong id="mark:title">title</strong> </div>コンパイル結果 <% for item in list %> <a href="<%=e.path%>"><%=e.name%></a> ><% end %> <strong><%= doctitle %></strong> |
プレゼンテーションロジック
#breadcrumbs { logic: { for e in items _element(crumb) _content(separator) end _element(title) } } #crumb { value: e.name; attrs: 'href' e.path; } #title { value: doctitle; } |
プレゼンテーションデータ
<html id="mark:document"> <body> <div class="tabs" id="mark:tabs"> <a href="/" id="mark:tab">Home</a> <a href="/download/">Download</a> <a href="/support/">Support</a> </div> </body></html>コンパイル結果 <div class="tabs"> <% for tab in tablist %> <a href="/">Home</a> <% end %> </div> |
プレゼンテーションロジック
#document { logic: { _element(tabs) } } #tabs { logic: { _stag for tab in tablist _element(tab) end _etag } } |
Get Kwartz at
http://www.kuwata-lab.com/kwartz
Thank You