Google App Engine 第九回

2015年12月07日
CATEGORY- 1. 技術力｛技術情報｝

Slim3とは

Slim3とはGoogle App Engine/Javaに最適化されたフルスタックMVCフレームワークです。

Slim3を使ったページの作成方法3

コントローラとビューの作成

1. build.xmlのAnt Taskからgen-controllerを右クリック > Run As > 1. Ant Build を選択

2. Ant Input Request [Input a controller path] popup window が開かれます。

3. モデルのパスを入力します。
今回は[memo/index]と入力し、下記の3ファイルを自動生成してください。
controller/memo/IndexController.java
controller/memo/IndexContorllerTest.java
memo/index.jsp

同じく[memo/edit]と入力して、下記の3ファイルを自動生成してください。
controller/memo/EditController.java
controller/memo/EditContorllerTest.java
memo/edit.jsp

4. 必要なメソッドをコントローラに追加します。
今回は以下の2つのファイルを修正します。

IndexController#run();

package biz.e_zero.slim3_test.controller.memo;

import java.util.Date;
import java.util.List;

import org.slim3.controller.Controller;
import org.slim3.controller.Navigation;

import biz.e_zero.slim3_test.model.Memo;
import biz.e_zero.slim3_test.service.MemoService;

// Controllerを継承してIndexContorollerを作成する。
public class IndexController extends Controller {

    @Override
    public Navigation run() throws Exception {
        // 前回作成したMemoServiceのオブジェクトを作成
        MemoService service = new MemoService();

        // HTTPリクエストがPOSTかの判断を行い、POSTの場合は登録処理を行う
        if( isPost() ) {
            // Memoオブジェクトを作成
            Memo memo = new Memo();
            // Memoオブジェクトに登録用データを設定
            memo.setTitle(request.getParameter("title"));
            memo.setMemo(request.getParameter("memo"));
            memo.setUpdateDate(new Date());
            // MemoServiceにMemoオブジェクトを追加（Upsert）
            // 今回は新規作成の処理しかないいのでInsertの処理しか実行されません。
            service.upsert(memo);
        }

        // Memoオブジェクトのリストを取得
        List<Memo> list = service.list();

        // listオブジェクトのスコープを設定
        requestScope("memoList", list);
        // index.jspへリダイレクト
        return forward("index.jsp");
    }
}

EditController#run();

package biz.e_zero.slim3_test.controller.memo;

import org.slim3.controller.Controller;
import org.slim3.controller.Navigation;

public class EditController extends Controller {
    @Override
    public Navigation run() throws Exception {
        // edit.jspへフォワード
        return forward("edit.jsp");
    }
}

5. ビューの変更（デザインと描画処理）
今回はリスト表示画面(index.jsp)と編集画面(edit.jsp)を実装します。

index.jsp

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>Memo List</title>
</head>
<body>
	<h1>Memo</h1>
	<div class="container-fluid">
		<div class="main">
			<div class="table-responsive">
				<table class="table table-striped">
					<thead>
						<tr>
							<th>Title</th>
							<th>Memo</th>
							<th>Update</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach var="e" items="${memoList}">
							<tr>
								<td>${f:h(e.title)}</td>
								<td>${f:h(e.memo)}</td>
								<td>${f:h(e.updateDate)}</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
			<a href="edit" class="btn btn-lg btn-default">追加</a>
		</div>
	</div>
</body>
</html>

edit.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" />
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>memo Edit</title>
</head>
<body>
	<div class="container">
		<form method="post" action="/memo/index">
			<h2>Memo Edit</h2>
			<input type="text" name="title" class="form-control"
				placeholder="Title"> <input type="text" name="memo"
				class="form-control" placeholder="Memo"> <input
				type="submit" class="btn btn-lg btn-default" />
		</form>
	</div>
</body>
</html>

アプリケーションの動作確認

1. プロジェクトトップを右クリック > Debug As > x. Web Applicationを選択
Consoleにアプリケーション起動状況が表示されます。

2. ブラウザからURLを入力して動作確認を行います。
URL: http://localhost:8888/memo/

3. リスト表示画面が表示されます。
初回起動時はデータが登録されていないので、リストには何も表示されません。
[追加]ボタンを押し情報登録画面に遷移します。

4. 情報登録画面が表示されます。
情報登録画面では下記の項目が入力できます。
Title – Memoオブジェクトのタイトル
Memo – Memoオブジェクトの本文
[送信]ボタンを押すことでDatastoreにオブジェクトが登録されます。

リスト表示画面に登録されたMemoオブジェクトの一覧が表示されます。
画面では”Title01″と”Title02″が登録されています。

Development Consoleでの確認

最後にDevelopment Console(local)から登録されたMemoオブジェクトの内容を確認します。
URL: http://localhost:8888/_ah/admin/datastore
Entity Kind [Memo]を選択して[List Entities]を押します。

表示される項目について：
Key – 管理用の内部キー
Write Ops – 書き込みを行う際のDatastore操作数
ID/Name – 自動採番またはユーザが登録したキー
slim3.schemaVersion – スキーマバージョン
version – Datastoreの更新回数（バージョン）
title – 登録情報（タイトル）
memo – 登録情報（メモ）
updateDate – 更新日付

次回は「Slim3を使ったページの作成方法4」をご紹介します。

2015年12月07日
CATEGORY- 1. 技術力｛技術情報｝