HTML をテンプレートとしてビューを作成したい場合、HTML テンプレートエンジンであるMayaaと連携することができます。
以下、Mayaaとの連携方法を示します。
動作は Cubby 1.1.0、Mayaa-1.1.18で確認しています。
Cubby のバージョンとそれに対応する Mayaa の必須バージョンは以下の表で確認してください。
| Cubby | Mayaa |
|---|---|
| 1.1.x 系 | >= 1.1.18 |
| 1.0.x 系 | >= 1.1.15 |
また、Cubby のサンプル war に「Mayaa との連携のサンプル」がありますのでそちらも参照ください。
Mayaa が依存する jar ファイルを全て追加します。Maven2 を使用している場合は dependencies ディレクティブに Mayaa を追加するだけでOKです。
web.xml に MayaaServlet を定義し、*.html を処理するように設定します。
<webapp>
...
<servlet>
<servlet-name>MayaaServlet</servlet-name>
<servlet-class>org.seasar.mayaa.impl.MayaaServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
...
<servlet-mapping>
<servlet-name>MayaaServlet</servlet-name>
<url-pattern>*.html</url-pattern>
</servlet-mapping>
...
</webapp>
アクションクラスはJSPの時と作り方は変わりません。
アクションメソッドのフォワード先を「*.html」にして、ビューが Mayaa で実行されるようにします。
public class MayaaComponentsAction extends Action {
...
@Override
public void prerender() {
super.prerender();
hobbies = getHobbies();
colors = getColors();
}
@Form("form")
public ActionResult components() {
return new Forward("components.html");
}
...
}
HTML テンプレートと Mayaa ファイルを作成します。
これは Mayaa のルールで作成します。Cubby のカスタムタグを Mayaa ファイルに記述することで、Cubby の機能を Mayaa から利用できます。
Cubby と Mayaa は機能が一部重複しています。
レイアウト共有やコンポーネント(HTML 部品)、JavaScript(Rhino)による強力なスクリプト機能は Mayaa のほうが優れているので、そのまま使用することをおすすめします。 例えば下記の例では、テーブルの行毎の色づけ（odd/even）を Mayaa の forEach プロセッサと JavaScript で実現しています。 Cubby のカスタムタグは主に入力フォームの生成に使用してください。
mayaa/components.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>components.html</title>
<link href="./../css/default.css" rel="stylesheet" type="text/css" media="screen,projection" charset="utf-8" />
</head>
<body>
[<a href="./../">戻る</a>]
<div id="errors" class="errors">
<ul id="error">
<li><span id="errorMessage">Dummy Error Messages.</span></li>
</ul>
</div>
<form id="form" method="post" action="./components">
<h1>コンポーネント一覧</h1>
<h2>Input Text</h2>
<label for="userName">Name:</label><input id="userName" type="text" name="userName"/>
<h2>Input Text(date)</h2>
<label for="date">Date:</label><input id="date" type="text" name="date"/>
<h2>Input Text(int)</h2>
<label for="intValue">Int(1-10):</label><input id="intValue" type="text" name="intValue"/>
<h2>Select</h2>
<label for="color">Color:</label>
<select id="color" name="color" size="3">
<option value="red">赤</option>
<option value="blue">青</option>
<option value="yellow" selected="selected">黄色</option>
</select>
<h2>TextArea</h2>
<label for="memo">memo:</label><br/>
<textarea id="memo" name="memo" rows="5" cols="50"></textarea>
<h2>Checkbox</h2>
<label for="check1">Check1:</label><br/>
<input id="check1" type="checkbox" name="check1" value="true"/>
<h2>Checkbox(Array)</h2>
<label for="check2">Check2:</label><br/>
<input id="check2-1" type="checkbox" name="check2" value="1"/>
<input id="check2-2" type="checkbox" name="check2" value="2"/>
<input id="check2-3" type="checkbox" name="check2" value="3"/>
<h2>Radio</h2>
<label for="radio">Radio:</label><br/>
<input id="radio1-1" type="radio" name="radio1" value="1"/>1
<input id="radio1-2" type="radio" name="radio1" value="2"/>2
<input id="radio1-3" type="radio" name="radio1" value="3"/>3
<h2>Odd & Null</h2>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>LABEL</th>
</tr>
</thead>
<tbody id="tbody">
<tr id="row">
<td><span id="item-value">dummy0</span></td>
<td><span id="item-name">dummy0 name</span></td>
</tr>
<tr id="dummy">
<td>dummy1</td>
<td>dummy1 name</td>
</tr>
<tr id="dummy">
<td>dummy2</td>
<td>dummy2 name</td>
</tr>
</tbody>
</table>
<br/>
<input type="submit" value="登録"/>
</form>
</body>
</html>
mayaa/components.mayaa
<?xml version="1.0" encoding="UTF-8"?>
<m:mayaa xmlns:m="http://mayaa.seasar.org"
xmlns:t="http://www.seasar.org/cubby/tags"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<!-- errros -->
<m:if m:id="errors" test="${!errors.empty}" replace="false" />
<m:echo m:id="error">
<m:forEach var="error" items="${errors.all}">
<m:doBody />
</m:forEach>
</m:echo>
<m:write m:id="errorMessage" value="${error}" />
<!-- form -->
<t:form m:id="form" method="post" action="./components" value="${formDto}">
<m:doBody/>
</t:form>
<!-- text -->
<t:input m:id="userName" type="text" name="userName" id="userName" />
<!-- text -->
<t:input m:id="date" type="text" name="date" id="date" />
<!-- text -->
<t:input m:id="intValue" type="text" name="intValue" id="intValue" />
<!-- select -->
<t:select m:id="color" name="color" size="3"
items="${colors}" labelProperty="name" valueProperty="value" />
<!-- textarea -->
<t:textarea m:id="memo" name="memo" rows="5" cols="50" />
<!-- checkbox(multi) -->
<t:input m:id="check1" type="checkbox" name="check1" value="true" />
<!-- checkbox(single) -->
<t:input m:id="check2-1" type="checkbox" name="check2" value="1" />
<t:input m:id="check2-2" type="checkbox" name="check2" value="2" />
<t:input m:id="check2-3" type="checkbox" name="check2" value="3" />
<!-- radio -->
<t:input m:id="radio1-1" type="radio" name="radio1" value="1"/>
<t:input m:id="radio1-2" type="radio" name="radio1" value="2"/>
<t:input m:id="radio1-3" type="radio" name="radio1" value="3"/>
<!-- forEach and odd,even -->
<m:echo id="tbody">
<m:forEach var="item" index="s" items="${colors}" replace="false">
<m:doBody />
</m:forEach>
</m:echo>
<m:echo m:id="row">
<m:attribute name="class" value="${s % 2 ? 'even' : 'odd'}" />
</m:echo>
<m:write m:id="item-value" value="${item.value}" />
<m:write m:id="item-name" value="${item.name}" />
<!-- remove dummy -->
<m:null m:id="dummy" />
</m:mayaa>