トップ 差分 一覧 ソース 検索 ヘルプ PDF RSS ログイン

JSPの実際：タグライブラリ

タグライブラリ

 カスタムタグとタグライブラリ

  • JSPでは標準的なタグ以外によく利用する機能を実装したカスタムタグを応用することが可能である。カスタムタグの作成方法はこの授業の範囲を超えるため解説はしない。しかしながら、一般的にはカスタムタグ機能を利用して、第三者が作成したカスタムタグがタグライブラリという形で使われることが多い。そこで、ここではよく使われるタグライブラリとして、JSTL(JSP Standard Tag Library)を取り上げ、その簡単な使い方について解説を行う


 JSTL

インストール


  • maven
<!-- https://mvnrepository.com/artifact/jstl/jstl -->
<dependency>
   <groupId>jstl</groupId>
   <artifactId>jstl</artifactId>
    <version>1.2</version>
</dependency>

JSTLを使うための設定

  1. JARファイル(jstl-1.2.jar)をウェブアプリケーションのクラスパス(WEB-INF/lib)に入れる
  2. JSPページにtaglibディレクティブでJSTLタグライブラリの利用を以下のような形で宣言する
    • prefixはタグを使う場合の接頭辞であり、どのような文字列を使ってもよいが、一般的にJSTLの基本(core)ライブラリを使う場合には"c"とする
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

JSTLの種類と設定方法

対象 説明 uri prefix
core 基本的なタグ http://java.sun.com/jsp/jstl/core c
XML processing XML文書の操作を行うタグ http://java.sun.com/jsp/jstl/xml x
I18N capable formatting 日付や数値など国際化へ対応したフォーマットを行うタグ http://java.sun.com/jsp/jstl/fmt fmt
relational db access(SQL) データベースアクセスを提供するタグ http://java.sun.com/jsp/jstl/sql sql
Functions 文字列操作などの関数を提供するタグ http://java.sun.com/jsp/jstl/functions fn

 JSTLのcoreタグの使い方

c:setタグ

  • 変数に値を代入するのに用いるタグ
  • 書式
<c:set var="［変数名］">［変数に代入する値］</c:set>

  • c:setタグの例：jstl_set.jsp
1
2
3
4
5
6
7
8
 
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<body>
    <c:set var="str">セットされた文字列</c:set>
    変数strの値は「<b>${str}</b>」です。
</body>
</html>

c:ifタグ

  • 条件分岐を記述するのに用いるタグ
  • 書式
<c:if test="[条件式：EL式でtrueかfalseを返すもの]">
	条件式がtrueだった場合に実行される処理
</c:if>
  • c:ifタグの例：jstl_if.jsp
    • 年齢を尋ねて大人か未成年かを判定するJSP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<body>
    <form action="${pageContext.request.requestURI}">
        あなたの年齢は？<input type="text" name="age" value="${param.age}">
    </form>
    <c:if test="${param.age < 20}">
        あなたは未成年ですね。
    </c:if>
    <c:if test="${param.age >= 20}">
        あなたは立派な大人ですね。
    </c:if>
</body>
</html>

c:chooseタグ、c:redirectタグ

  • c:chooseタグはc:ifタグと異なり複数の条件を扱う場合に用いる
  • c:chooseタグの書式
<c:choose>
	<c:when test="[条件式１]">
		条件式１が成り立った場合に行う処理
	</c:when>
	<c:when test="[条件式２]">
		条件式２が成り立った場合に行う処理
	</c:when>
</c:choose>
  • c:redirectタグはページを遷移させたい場合に用いる
  • c:redirectタグの書式
<c:redirect url="[遷移させたいURL]" >
	パラメータを設定したい場合には・・・
</c:redirect>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<body>
    宛先を決めてください。
    <form action="${pageContext.request.requestURI}">
        <input type="radio" name="redirect" value="1" />Google
        <input type="radio" name="redirect" value="2" />Yahoo!
        <input type="submit" value="行先へ飛ぶ" />
    </form>
    <c:choose>
        <c:when test="${param.redirect eq 1}">
            <c:redirect url="http://www.google.com/" />
        </c:when>
        <c:when test="${param.redirect eq 2}">
            <c:redirect url="http://www.yahoo.co.jp/" />
        </c:when>
    </c:choose>
</body>
</html>

c:forEachタグ

  • 繰り返し処理を記述するのに用いるタグ
  • 書式１：繰り返し
<c:forEach begin="[開始値]" end="[終了値]" var="[繰り返し数が格納される変数名]">
	繰り返される処理
</c:forEach>
  • c:forEachタグの例１：jstl_forEach1.jsp
    • 文字の大きさを変化させながら表示するサンプル
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<%@ page pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<body>
    <!-- JSTLで書いた例 -->
    <c:forEach begin="1" end="7" var="i">
        <font size="${i}">
            font-size:${i}<br />
        </font>
    </c:forEach>
    <!-- スクリプレットで書いた例 -->
    <%    for(int i=1; i<=7; i++) {%>
        <font size=<%=i%>>
            font-size:<%=i%><br />
        </font>
    <%    }    %>
</body>
</html>
  • 書式２：コレクション（集合）に基づく繰り返し（参照）
	<c:forEach items="[コレクション]" var="[参照するときの変数名]">
		繰り返し処理
	</c:forEach>
  • c:forEachタグの例２：jstl_forEach2.jsp
    • 配列を一つずつ参照しながら表示するサンプル
1
2
3
4
5
6
7
8
9
10
11
 
<%@ page pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<body>
    <c:set var="firstFoods"
        value="マクドナルド,モスバーガー,ロッテリア,サブウェイ,ウェンディーズ,Beckers,フレッシュネスバーガー,小僧寿し？" />
    <c:forEach items="${firstFoods}" var="firstFood">
        ${firstFood}<br />
    </c:forEach>
</body>
</html>

coreタグの応用：曜日を調べるJSP

  • 曜日を調べるJSP：jstl_calendar1.jsp
    • selectタグで年月日を入力させるのにforeachタグを用いている
      • selectタグ中のoptionで入力された文字列と同じ場合には三項演算子によって選択された状態を設定している
    • 年月日が入力されているかをifタグを用いて分岐している
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page import="java.util.Calendar"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Locale"%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>曜日を調べるページ1</title>
</head>
<body>
    <form action="${pageContext.request.requestURI}">
        <select name="year">
            <c:forEach begin="1970" end="2012" var="year">
                <option value="${year}" ${(param.year eq year)?'selected':''}>${year}</option>
            </c:forEach>
        </select>
        年
        <select name="month">
            <c:forEach begin="1" end="12" var="month">
                <option value="${month}" ${(param.month eq month)?'selected':''}>${month}</option>
            </c:forEach>
        </select>
        月
        <select name="date">
            <c:forEach begin="1" end="31" var="date">
                <option value="${date}" ${(param.date eq date)?'selected':''}>${date}</option>
            </c:forEach>
        </select>
        日
        <input type="submit" value="曜日を調べる">
    </form>
    <c:if test="${!empty param.year}">
        <%
            Calendar calendar = Calendar.getInstance();
            pageContext.setAttribute("calendar",calendar);
            calendar.set(Integer.parseInt(request.getParameter("year")),Integer.parseInt(request.getParameter("month"))-1,Integer.parseInt(request.getParameter("date")));
            SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy年MM月dd日はEEE曜日です",Locale.JAPANESE);
            pageContext.setAttribute("answer",dateFormat.format(calendar.getTime()));
        %>
        ${answer}
    </c:if>
</body>
</html>
  • 曜日を調べるJSP：jstl_calendar2.jsp
    • 上記の例をさらにfmtタグを使ってスクリレットを用いずに書いた例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>曜日を調べるページ</title>
</head>
<body>
    <form action="${pageContext.request.requestURI}">
        <select name="year">
            <c:forEach begin="1970" end="2012" var="year">
                <option value="${year}" ${(param.year eq year)?'selected':''}>${year}</option>
            </c:forEach>
        </select>
        年
        <select name="month">
            <c:forEach begin="1" end="12" var="month">
                <option value="${month}" ${(param.month eq month)?'selected':''}>${month}</option>
            </c:forEach>
        </select>
        月
        <select name="date">
            <c:forEach begin="1" end="31" var="date">
                <option value="${date}" ${(param.date eq date)?'selected':''}>${date}</option>
            </c:forEach>
        </select>
        日
        <input type="submit" value="曜日を調べる">
    </form>
    <c:if test="${!empty param.year}">
        <!-- Date型に変換：パラメータを受け取ってDate型に変換（パース）する -->
        <fmt:parseDate var="date" value="${param.year}/${param.month}/${param.date}" />
        <!-- ロケールの設定：ここでは日本に設定する -->
        <fmt:setLocale value="ja_JP"/>
        <!-- フォーマット出力：出力したい形式にフォーマットして出力 -->
        <fmt:formatDate value="${date}" pattern="yyyy年MM月dd日はEEE曜日です" />
    </c:if>
</body>
</html>

 課題

  1. 上記のjstl_if.jspを参考にし、年齢を尋ね、中学生未満か中学生か中学生よりも年上かを答えるプログラムを作成しなさい(08-01if.jsp)。
  2. 上記のjstl_chooseAndRedirect.jspを改造し、gooも選択肢に入れるような修正を行いなさい(08-02choose.jsp)。
  3. 上記のjstl_calendar.jspを改造し、土曜日であれば青色、日曜日であれば、赤色で表示されるように修正しなさい(/kadai/08-03calendar.jsp)。
jstl-1.2.jar

最終更新時間：2018年11月29日 09時28分05秒

メニュー


授業


後期


サイト内検索

キーワード


インターネット検索

Google

最近の更新

2022/9/3

2020/5/15

2020/4/15

2019/12/3

2019/11/5

2019/10/29

2019/6/5

2019/1/17

2018/11/29

2018/11/27


管理用


Copyright (C) 2002 あがた
Powered by FreeStyleWiki3.6.5 with Perl5.034000