##### Cubby 2.0

- ホーム

##### スタートアップガイド

- 2分間チュートリアル
- 5分間チュートリアル

##### リファレンス

- セットアップ
- アクション
- バリデーション
- メッセージリソース
- JSP
- Mayaa
  - Mayaa
  - Mayaa と連携するための設定
  - Cubby と Mayaa の使い分け
- カスタマイズ
- JavaDoc
- TLDDoc
- Tips集
- 移行ガイド

##### プロジェクト文書

- プロジェクト情報
- プロジェクトレポート

##### モジュール

- Cubby
- Cubby Unit
- Cubby S2Container Plugin
- Cubby Guice Plugin
- Cubby Spring Plugin
- Cubby Gson Plugin
- Cubby OVal Plugin
- Cubby S2Container Integration Archetype
- Cubby Guice Integration Archetype
- Cubby Spring Integration Archetype
- Cubby Admin
- Cubby Distribution

## 目次

- Mayaa
- Mayaa と連携するための設定
- Cubby と Mayaa の使い分け

## Mayaa

HTML をテンプレートとしてビューを作成したい場合、HTML テンプレートエンジンである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>