クラウドアプリケーション構築　Slim3でGAE/J（第２回）　3/5ページ

Controllerの作成

＜記事作成＞ページのControllerとJSPの実装

＜記事作成＞ページの画面イメージをおさらいします。


＜記事作成＞画面イメージ

＜記事作成＞ページは入力フォームを表示するだけなので、Controllerの修正は不要でJSPの実装がメインになります。

  • Antタスク gen-controller の実行gen-controller を実行し、プロンプトに /bbs/create と記述しOKボタンを押下します。gen-controllerイメージすると、/bbs/create に対応する
    • simplebbs.controller.bbs.CreateController
    • simplebbs.controller.bbs.CreateControllerTest
    • war/bbs/create.jsp

    が、生成されます。先にブラウザで開いていたトップページ（ http://localhost:8888/bbs/ ）の「新しい記事を投稿する」のリンクをクリックして下さい。

    新しい記事を投稿するをクリックするイメージ

    このリンクは /bbs/create へジャンプするようになっているので、 gen-controller がうまくいっていれば…

    自動生成されたcreate.jspの画面イメージ

    このように自動生成されたページが表示されるはずです。もしここで４０４エラーになる場合は gen-controller で指定したパスと「新しい記事を投稿する」のリンクが共に /bbs/create になっているか確認して下さい。

  • JSPの実装gen-controller で生成された war/bbs/create.jsp を以下のように修正しました。

    create.jsp

    <%@page pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SimpleBBS</title>
<link href="/css/bbs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<h1>SimpleBBS</h1>
<form method="post" action="postEntry">
<table>
<thead><tr><td colspan="2">新しい記事の投稿</td></tr></thead>
<tbody>
<tr><td class="label">タイトル</td><td class="elem"><input type="text" ${f:text("subject")} class="normal ${f:errorClass("subject","err")}"/><span class="err">${errors.subject}</span></td></tr>
<tr><td>お名前</td><td><input type="text" ${f:text("username")} class="normal ${f:errorClass("username","err")}"/><span class="err">${errors.username}</span></td></tr>
<tr><td>本文</td><td><textarea name="text" class="largetext ${f:errorClass("text","err")}">${f:h(text)}</textarea><div class="err">${errors.text}</div></td></tr>
<tr><td>編集用パスワード</td><td><input type="password" ${f:text("password")} class="password ${f:errorClass("password","err")}"/>※未設定の場合は後から編集できません<div class="err">${errors.password}</div></td></tr>
<tr><td colspan=2><input type="submit" value=" 投稿する " class="button" /><input type="reset" value=" リセット " class="button" /></td></tr>
</tbody>
</table>
</form>
<p><a href="index">戻る</a></p>
</div>
</body>
</html>

    ちょっとテーブルタグなどでソースが見辛いので、説明用にform部分を抜き出し、簡素化したものを以下に記します。

     ...
<form method="post" action="postEntry">
新しい記事の投稿<br/>
タイトル<input type="text" ${f:text("subject")} class="${f:errorClass("subject","err")}"/>
<span class="err">${errors.subject}</span><br/>
お名前<input type="text" ${f:text("username")} class="${f:errorClass("username","err")}"/>
<span class="err">${errors.username}</span><br/>
本文<textarea name="text" class="largetext ${f:errorClass("text","err")}">${f:h(text)}</textarea>
<div class="err">${errors.text}</div><br/>
編集用パスワード<input type="password" ${f:text("password")} class="${f:errorClass("password","err")}"/>※未設定の場合は後から編集できません
<div class="err">${errors.password}</div><br/>
<input type="submit" value=" 投稿する "/><input type="reset" value=" リセット "/><br/>
</form>
...

    この入力フォームの中に、いくつかSlim3のJSP Functionsと独自のクラスが使われていますので順に説明します。

    • f:text() について

      まず最初に見つかるのが、inputタグ内の f:text(“subject”) という記述です。

      <input type="text" ${f:text("subject")} … />

      これは以下のように記述したコードと同じ意味です。

      <input type="text" name="subject" value="${f:h(subject)}" … />

      つまり ${f:text(“パラメータ名”)} と記述するだけで、inputタグのvalue属性にリクエストスコープのパラメータの値を出力してくれます。もちろん値はHTMLエスケープされます。

    • f:errorClass() について次に見つかるのが、同じinputタグのclass属性内の f:errorClass(“subject”,”err”) という記述です。 
      <input type="text" ${f:text("subject")} class="${f:errorClass("subject","err")}"/>

      f:errorClass() は後述するSilm3のバリデーションと組み合わせて使います。上記の例では、subject のバリデーションでエラーだった場合、class属性に err と出力されます。

      <input type="text" name="subject" … class="err"/>

      バリデーションでエラーじゃない場合は何も出力されません。

      <input type="text" name="subject" … class=""/>

      つまり f:errorClass() を使うと、バリデーションでエラーとなった入力フォームのデザインを簡単に変えることができます。

    • Errorsオブジェクトについて

      最後に見つかるのが、 errors.subject という記述です。

      <span="err">${errors.subject}</span>

      errors はエラーメッセージが格納されているMapオブジェクトです。後述するSlim3のバリデーションでエラーだった場合に、自動的に errors にエラーメッセージがputされます。上記の例では、subject のバリデーションでエラーだった場合にエラーメッセージが出力されます。

      <span="err">タイトルは必須です。</span>

      バリデーションでエラーじゃない場合は何も出力されません。

      <span="err"></span>

      これも何も入力せずに「投稿する」ボタンを押下すると、未入力の項目の隣にエラーメッセージが表示されるのがわかるはずです。

    JSPの修正が終わったら保存して、先にブラウザで開いていた http://localhost:8888/bbs/create を再読み込みします。すると、先ほどの”Hello bbs Create !!!”ではなく、＜記事作成＞ページが表示されているはずです。


    create.jsp修正後イメージ

    JSPのテスト（パラメータ名のタイプミスやバリデーションエラーの挙動確認など）は実際に動かして確認するしかないので、ひとまずこれでJSPの作成は完了とします。

  • ・テストケースの作成
  • ・必要な処理の実装CreateController は /bbs/create.jsp へforwardするだけなので自動生成されたソースのまま修正は不要です。
  • テストケースの実行念のためテストはグリーンになることを確認しておきましょう。

作成したソースは以下になります。

  • simplebbs.controller.bbs.CreateController.java
  • simplebbs.controller.bbs.CreateControllerTest.java
  • war/bbs/create.jsp