クラウドアプリケーション構築 Slim3でGAE/J(第2回) 3/5ページ
Controllerの作成
<記事作成>ページのControllerとJSPの実装
<記事作成>ページの画面イメージをおさらいします。
<記事作成>ページは入力フォームを表示するだけなので、Controllerの修正は不要でJSPの実装がメインになります。
- Antタスク gen-controller の実行gen-controller を実行し、プロンプトに /bbs/create と記述しOKボタンを押下します。
すると、/bbs/create に対応する
- simplebbs.controller.bbs.CreateController
- simplebbs.controller.bbs.CreateControllerTest
- war/bbs/create.jsp
が、生成されます。先にブラウザで開いていたトップページ( http://localhost:8888/bbs/ )の「新しい記事を投稿する」のリンクをクリックして下さい。
このリンクは /bbs/create へジャンプするようになっているので、 gen-controller がうまくいっていれば…
このように自動生成されたページが表示されるはずです。もしここで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 !!!”ではなく、<記事作成>ページが表示されているはずです。
JSPのテスト(パラメータ名のタイプミスやバリデーションエラーの挙動確認など)は実際に動かして確認するしかないので、ひとまずこれでJSPの作成は完了とします。
-
- ・テストケースの作成
- ・必要な処理の実装CreateController は /bbs/create.jsp へforwardするだけなので自動生成されたソースのまま修正は不要です。
- テストケースの実行念のためテストはグリーンになることを確認しておきましょう。
作成したソースは以下になります。
- simplebbs.controller.bbs.CreateController.java
- simplebbs.controller.bbs.CreateControllerTest.java
- war/bbs/create.jsp