~~
~~ Copyright 2004-2010 the Seasar Foundation and the Others.
~~
~~ Licensed under the Apache License, Version 2.0 (the "License");
~~ you may not use this file except in compliance with the License.
~~ You may obtain a copy of the License at
~~
~~     http://www.apache.org/licenses/LICENSE-2.0
~~
~~ Unless required by applicable law or agreed to in writing, software
~~ distributed under the License is distributed on an "AS IS" BASIS,
~~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
~~ either express or implied. See the License for the specific language
~~ governing permissions and limitations under the License.
~~

  --------
  Mayaa
  --------
  agata
  baba
  --------
  2009-07-20
  --------

{目次}

 *{{{#Mayaa}Mayaa}}

 *{{{#Mayaa_と連携するための設定}Mayaa と連携するための設定}}

 *{{{#Cubby_と_Mayaa_の使い分け}Cubby と Mayaa の使い分け}}

{Mayaa}

 HTML をテンプレートとしてビューを作成したい場合、HTML テンプレートエンジンである{{{http://mayaa.seasar.org}Mayaa}}と連携することができます。

 以下に Mayaa との連携方法を示します。また、Cubby のサンプル war に「Mayaa との連携のサンプル」がありますのでそちらも参照ください。

{Mayaa と連携するための設定}

 [[1]]Mayaa の依存 jar ファイルを追加する

      Mayaa が依存する jar ファイルを全て追加します。Maven2 を使用している場合は dependencies ディレクティブに Mayaa を追加するだけでOKです。

 [[2]]web.xml へ MayaaServlet を追加する

      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>
+------------------------------------------------------+

 [[3]]アクションメソッドのフォワード先を「*.html」にする

      アクションクラスは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");
  }
...
}
+------------------------------------------------------+

 [[4]]HTML テンプレートと Mayaa ファイルを作成する

 HTML テンプレートと Mayaa ファイルを作成します。\
 これは Mayaa のルールで作成します。Cubby のカスタムタグを 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 &amp; 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>
+------------------------------------------------------+
 