Cubby HTML をテンプレートとしてビューを作成したい場合、Java テンプレートエンジンであるMayaaと連携することができます。
以下、Mayaaとの連携方法を示します。
動作は Cubby 0.9.0、Mayaa-1.1.15で確認しています。Mayaaのバージョンが1.1.14以下の場合動作しません。
また、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> <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>] <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>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>Odd & Null</h2> <table border="1"> <tr> <th>ID</th> <th>LABEL</th> </tr> <tr id="loop"> <td><span id="item-value"></span></td> <td><span id="item-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> </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"> <!-- form --> <t:form m:id="form" method="post" action="${contextPath}/mayaa/components" value="${form}" /> <!-- text --> <t:input m:id="userName" type="text" name="userName" id="userName" /> <!-- 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" /> <!-- forEach and odd,even --> <m:forEach m:id="loop" var="item" index="s" items="${colors}" replace="false"> <m:attribute name="class" value="${s % 2 ? 'odd' : 'even'}" /> </m:forEach> <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>