クラウドアプリケーション構築 Slim3でGAE/J(第2回) 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の画面イメージ

    このように自動生成されたページが表示されるはずです。もしここで404エラーになる場合は 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