スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Spring MVC ページング機能を実装する(JSP編)

3回に渡ったページング機能の実装も、今回が最後となる。JSPを中心に説明していきたいと思う。

また、ボリュームが多いため、記事を3回に分けて掲載している。
 ①DBアクセス編
  ⇒Spring MVC ページング機能を実装する(DBアクセス編)
 ②コントローラ編
  ⇒Spring MVC ページング機能を実装する(コントローラ編)
 ③JSP編
  ⇒本記事

◎動作検証にあたっての各バージョンは以下の通り
  • SpringFramework 3.2.8.RELEASE
  • Java 1.7
  • Tomcat 7.0

1.views.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Cnfiguration 2.1//EN"
"http://tiles.apache.org/dtds/tiles-config_2_1.dtd">

<tiles-definitions>
<definition extends="default" name="editBook">
<put-attribute name="body" value="/WEB-INF/view/editBook.jsp"/>
</definition>

<definition extends="default" name="pageList">
<put-attribute name="body" value="/WEB-INF/view/pageList.jsp"/>
</definition>
</tiles-definitions>

今まで、list.jspを使用していたが、pageList.jspを使うよう変更している。

■Tilesに関する過去の記事
Spring MVC Tilesを使って画面をレイアウトする


2.pageList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ 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.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec"%>
<link href="<c:url value="/css/bootstrap.min.css" />" rel="stylesheet">
<link href="<c:url value="/css/bootstrap-theme.min.css" />" rel="stylesheet">
<script src="<c:url value="/js/bootstrap.min.js" />"></script>
<title>pageList</title>
</head>
<body>
<spring:url value="/book/list/page" var="varBookListUrl"/>
<spring:url value="/book/edit/cover" var="varBookCoverUrl"/>
<spring:url value="/book/edit/new" var="varBookAddUrl"/>
<spring:url value="/book/edit" var="varBookEditUrl"/>
<spring:message code="bookId" var="varBookId"/>
<spring:message code="bookName" var="varBookName"/>
<spring:message code="price" var="varPrice"/>
<spring:message code="cover" var="varCover"/>
<spring:message code="button.search" var="varButtonSearch"/>
<spring:message code="link.add" var="varLinkAdd"/>
<spring:message code="link.edit" var="varLinkEdit"/>

<div class="container-fluid">
<form:form
action="${pageContext.request.contextPath}/book/list/search"
method="get" modelAttribute="bookSearchForm">
<div class="row">
<form:label path="bookName" class="col-sm-3 text-right">${varBookName}</form:label>
<form:input path="bookName" class="col-sm-6"/>
<div class="col-sm-3">
<input type="submit" value="${varButtonSearch}" class="btn btn-info btn-sm"/>
</div>
</div>
<form:errors path="*" cssStyle="color:red"/>
</form:form>
<hr/>
<div class="row">
<div class="col-sm-9"></div>
<div class="col-sm-3 text-right">
<sec:authorize ifAllGranted="ROLE_ADMIN,ROLE_USER">
<a href="${varBookAddUrl}">${varLinkAdd}</a>
</sec:authorize>
</div>
</div>
<table class="table table-striped table-bordered">
<tr>
<th>${varBookId}</th>
<th>${varCover}</th>
<th>${varBookName}</th>
<th>${varPrice}</th>
<th></th>
</tr>
<c:forEach items="${bookPage.books}" var="book">
<tr>
<td>${book.bookId}</td>
<c:set value="${fn:length(book.cover)}" var="varCoverLen"/>
<c:if test="${varCoverLen > 0}">
<td><img src="${varBookCoverUrl}/${book.bookId}"></td>
</c:if>
<c:if test="${varCoverLen == 0}">
<td><img src="<c:url value="/img/blank.jpg" />"/></td>
</c:if>
<td>${book.bookName}</td>
<td>${book.price}</td>
<td>
<sec:authorize ifAllGranted="ROLE_ADMIN,ROLE_USER">
<a href="${varBookEditUrl}/${book.bookId}">${varLinkEdit}</a>
</sec:authorize>
</td>
</tr>
</c:forEach>
</table>
<div class="row">
<div class="col-sm-3">
<c:choose>
<c:when test="${not empty bookPage}">
<c:set value="Page ${bookPage.currentPage} of ${bookPage.totalPages}" var="varPage"/>
</c:when>
<c:otherwise>
<c:set value="Page 0 of 0" var="varPage"/>
</c:otherwise>
</c:choose>
</div>
<div class="col-sm-6" align="center">
<c:choose>
<c:when test="${bookPage.hasPreviousPage && not bookPage.hasNextPage}">
<a href="${varBookListUrl}/1"><img src="<c:url value="/img/first.gif" />"/></a> |
<a href="${varBookListUrl}/${bookPage.currentPage -1}"><img src="<c:url value="/img/prev.gif" />"/></a> |
${varPage} |
<img src="<c:url value="/img/off-next.gif" />"/> |
<img src="<c:url value="/img/off-last.gif" />"/>
</c:when>
<c:when test="${not bookPage.hasPreviousPage && bookPage.hasNextPage}">
<img src="<c:url value="/img/off-first.gif" />"/> |
<img src="<c:url value="/img/off-prev.gif" />"/> |
${varPage} |
<a href="${varBookListUrl}/${bookPage.currentPage +1}"><img src="<c:url value="/img/next.gif" />"/></a> |
<a href="${varBookListUrl}/${bookPage.totalPages}"><img src="<c:url value="/img/last.gif" />"/></a>
</c:when>
<c:when test="${bookPage.hasPreviousPage && bookPage.hasNextPage}">
<a href="${varBookListUrl}/1"><img src="<c:url value="/img/first.gif" />"/></a> |
<a href="${varBookListUrl}/${bookPage.currentPage -1}"><img src="<c:url value="/img/prev.gif" />"/></a> |
${varPage} |
<a href="${varBookListUrl}/${bookPage.currentPage +1}"><img src="<c:url value="/img/next.gif" />"/></a> |
<a href="${varBookListUrl}/${bookPage.totalPages}"><img src="<c:url value="/img/last.gif" />"/></a>
</c:when>
<c:otherwise>
<img src="<c:url value="/img/off-first.gif" />"/> |
<img src="<c:url value="/img/off-prev.gif" />"/> |
${varPage} |
<img src="<c:url value="/img/off-next.gif" />"/> |
<img src="<c:url value="/img/off-last.gif" />"/>
</c:otherwise>
</c:choose>
</div>
<div class="col-sm-3 text-right">
<c:choose>
<c:when test="${not empty bookPage}">
View ${bookPage.startRecords} - ${bookPage.endRecords} of ${bookPage.totalRecords}
</c:when>
<c:otherwise>
View 0 - 0 of 0
</c:otherwise>
</c:choose>
</div>
</div>
</div>
</body>
</html>

ページング機能に関連する箇所を中心に説明していく。

17行目は「spring:url」タグを使って、URLを変数「varBookListUrl」に代入している。「varBookListUrl」は93行目以降で使用している。

■「spring:url」タグに関する過去の記事
Spring MVC ファイルアップロードを実装する[DB参照編]

■「spring:message」タグに関する過去の記事
下線文Spring MVC メッセージの国際化に対応する

40行目の「form:errors path="*" cssStyle="color:red"」は、30~41行目まで「form:form」タグで囲まれているbookSearchFormオブジェクトのスコープとなり、path="*"でそのオブジェクト内で発生したエラーメッセージをすべて表示してくれる。また、エラーメッセージを赤字にする場合、今まで「<font color="red"><form:errors path="bookId" />」と、fontタグで囲っていたが、「cssStyle="color:red"」とすればよいことが分かったので、こちらを採用している。

■「form:errors」タグに関する過去の記事
Spring MVC バリデーションの実装

46行目と72行目の「sec:authorize」タグは、ログインユーザーの権限によって、「新規登録」「編集」リンクの表示・非表示を切り替えている。

■「sec:authorize」タグに関する過去の記事
Spring MVC ログインユーザー権限によって表示を切り替える

81行目以降がページング機能の表示となる。

81~88行目までは、「c:choose」タグを使って、正常/エラーの条件分岐を行い、それぞれ「c:set」タグを使って、ページ情報を変数に代入している。

91~120行目までは、「c:choose」タグを使って、ページ移動する画像リンクのオン/オフを設定している。
92行目は「前ページが存在して、次ページが存在しない場合」(最終ページ)となる。
99行目は「前ページが存在しなくて、次ページが存在する場合」(先頭ページ)となる。
106行目は「前ページも次ページも存在する場合」となる。
113行目は「前ページも次ページも存在しない場合」(表示レコード数が1ページ以内)となる。
また、81~88行目でページ情報を代入した変数をこちらで表示させている。

123~130行目がレコード数に関する情報となる。「c:choose」タグを使い、エラーの場合はレコード数0を表示させている。


3.動作確認
①先頭ページ
ページング_1

先頭ページ、前ページへのリンクが無効になっていることが確認できる。

②2ページ目
ページング_2

先頭ページ、前ページ、次ページ、最終ページへのリンクが有効になっていることが確認できる。

③最終ページ
ページング_3

次ページ、最終ページへのリンクが無効になっていることが確認できる。

④検索
ページング_4

2件ヒットしたことが「View 1-2 of 2」で確認することができる。
また、1ページあたりの表示レコード数が2件のため、先頭ページ、前ページ、次ページ、最終ページへのリンクが無効になっていることも確認できる。

⑤検索 → 編集画面で更新 → 一覧へ戻る
ページング_5
編集画面から検索一覧画面に戻っても、編集画面を呼び出す前の条件が保持されていることが確認できる。


今回ページング機能の実装を通して、いろいろと新しいことを学ぶことができた。


■過去のSpring関連記事
Spring関連記事 Index

スポンサーサイト

コメントの投稿

非公開コメント

プロフィール

bookmount8

Author:bookmount8
システムエンジニア。サーバーサイドでjavaを扱うことが多い。最近は、ミドルやフロント周りも関心あり。

最新記事
カテゴリ
検索フォーム
最新コメント
月別アーカイブ
これまでの訪問者数
ブロとも申請フォーム

この人とブロともになる

RSSリンクの表示
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。