##### Cubby 2.0

- ホーム

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

- 2分間チュートリアル
  - Hello アプリケーションの概要
  - アクションクラスの作成
  - JSP の作成
  - ブラウザで確認する
- 5分間チュートリアル

##### リファレンス

- セットアップ
- アクション
- バリデーション
- メッセージリソース
- JSP
- 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

## 目次

- Hello アプリケーションの概要
- アプリケーションの雛形作成
- アクションクラスの作成
- JSP の作成
- ブラウザで確認する

## Hello アプリケーションの概要

入力画面で入力値を受け取り、結果画面で値を表示するアプリケーションです。 このチュートリアルは Cubby Showcase の「Hello World」に、ほぼ同じ内容を収録しています。

入力画面

結果画面

## アプリケーションの雛形作成

雛形作成の詳細はMaven2 によるプロジェクトの雛形作成をご覧ください。
Maven2 のインストール後、以下のようにプロジェクトの雛形を作成します。 Eclipseのワークスペースディレクトリにターミナル（コマンドプロンプト）で移動して、以下のコマンドを入力してください。

    mvn archetype:generate -DarchetypeCatalog=http://cubby.seasar.org

コマンド入力後、いくつかの質問に回答していきます。

    Choose archetype:
    1: remote -> cubby-s2-archetype (Cubby 2.0.1 S2Container Integration)
    2: remote -> cubby-guice-archetype (Cubby 2.0.1 Guice Integration)
    3: remote -> cubby-guice-archetype (Cubby 2.0.1 Spring Integration)
    4: remote -> cubby-archetype (Cubby 1.1.7)
    Choose a number:  (1/2/3/4):

1を入力して、cubby-s2-archetype (Cubby 2.0.1 S2Container Integration) を選んでください。

以下、groupId,artifactId,version,packageを入力します。

    Define value for groupId: : org.seasar.cubby.hello
    Define value for artifactId: : cubby-hello
    Define value for version: : 1.0-SNAPSHOT
    Define value for package: : org.seasar.cubby.hello

    Confirm properties configuration:
    groupId: org.seasar.cubby.hello
    artifactId: cubby-hello
    version: 1.0-SNAPSHOT
    package: org.seasar.cubby.hello
     Y: :

いままで入力した内容の確認を求められます。問題がなければ Y を入力してください。
プロジェクトの雛形として「cubby-hello」ディレクトリが作成されます。

### Eclipseへの取り込み

Eclipse を使った開発に従って、「cubby-hello」プロジェクトのEclipseへの取り込みとWTPの設定を行います。 設定が終わったらWTPからTomcatを起動します。
ブラウザで http://localhost:8080/cubby-hello/ にアクセスして、トップページが表示されることを確認してください。

## アクションクラスの作成

アクションクラスは「org.seasar.cubby.action.Action」クラスを継承して作成します。 ここでは 「org.seasar.cubby.hello.HelloAction」 クラスを作成します。 (既に雛形で同名のクラスが作成されているので、いったん削除します)
このクラスには２つのアクションメソッド(index, message)があります。 index は入力画面「input.jsp」の表示用、message は入力画面から名前を受け取り結果画面「result.jsp」を表示するためのアクションメソッドです。 １アクションメソッドは１リクエスト(URL)に対応します。 URL は特に指定がない場合「アクションクラス名から Action を取って小文字にしたもの + メソッド名」となります。

メソッド | URL | 説明
--- | --- | ---
HelloAction#index | /hello | "/" + "hello" + "/" + "" メソッド名indexだけは特別な意味で「URLなし」という意味になります。
HelloAction#message | /hello/message | "/" + "hello" + "/" + "message"
アクションメソッドと URL の対応

アクションメソッドの戻り値は「ActionResult」です。
ここでは、フォワードしてJSPを表示するために、new Forward("input.jsp")となります。
これにより、「/hello/input.jsp」にフォワードします。

リクエストパラメータはアクションクラスのプロパティに設定されます。
この場合、リクエストパラメータ「name」が HelloAction のプロパティ「name」にバインディングされます。
リクエストパラメータをバインドするオブジェクトは、@Formアノテーションを指定することで変更できます。

HelloAction.java

    package org.seasar.cubby.hello.action;

    import org.seasar.cubby.action.Action;
    import org.seasar.cubby.action.ActionResult;
    import org.seasar.cubby.action.Forward;
    import org.seasar.cubby.action.RequestParameter;

    public class HelloAction extends Action {

            @RequestParameter
            public String name;

            public ActionResult index() {
                    return new Forward("input.jsp");
            }

            public ActionResult message() {
                    return new Forward("result.jsp");
            }
    }

## JSP の作成

入力画面用の「input.jsp」とメッセージ出力画面用の「result.jsp」を作成します。
input.jsp では、Cubby のカスタムタグを使って、フォームを作成します。
「<form ... value="${action}">」では、フォームにバインディングするオブジェクトを指定しています。 ${action}はフォワード時に使用したアクションそのものを意味します。アクション自体がフォームのバインディング対象の場合はvalue属性は省略可能です。 (つまり、この例では value 属性を書く必要はありません。)

入力フィールドはカスタムタグを使用して出力します。 （<t:input type="text" name="name"/>）

src/main/webapp/hello/input.jsp

    <!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>Hello World - 入力画面</title>
    </head>
    <body>
    <h1>Hello World - 入力画面</h1>
    <t:form action="message" value="${action}">
            あなたの名前:
            <t:input type="text" name="name"/>
            <input type="submit" value="送信"/>
    </t:form>
    </body>
    </html>

src/main/webapp/hello/result.jsp

    <!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>Hello World - 出力画面</title>
    </head>
    <body>
    <h1>Hello World - 出力画面</h1>
    こんにちは、${action.name}さん。
    </body>
    </html>

また、JSP 共通ヘッダーを使用することによって、JSP 先頭の taglib ディレクティブを省略しています。

## ブラウザで確認する

ブラウザで http://localhost:8080/cubby-hello/hello/ にアクセスします。