KEIS BLOGは株式会社ケイズ・ソフトウェアが運営しています。

KEIS BLOG

Google App Engine 第九回

LINEで送る
[`evernote` not found]
Pocket

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 が開かれます。

misawa01

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/

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

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

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

Development Consoleでの確認

misawa05
最後に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」をご紹介します。

【関連記事】
Google App Engine 第一回
Google App Engine 第二回
Javaのライブラリを手軽にテストしたい!! Groovy入門 第1回
Google App Engine 第三回
Google App Engine 第四回
Google App Engine 第五回
Google App Engine 第六回
Google App Engine 第七回
Google App Engine 第八回

LINEで送る
[`evernote` not found]
Pocket