Zenn
🕌

【初心者向け/ITスクール45日】JSPのカスタムタグ

2023/09/13に公開
HTML
Java
tech

はじめに

今日は、ITスクールに通った45日目の日で、今日学んだ知識を記事にシェアしたいと思います。本記事が、ITを勉強を始めた方々にもロードマップになればいいと思います。

45日目は、今まで、JSPのcustom tagについて勉強しました。
今日は、機能を具象することを中心にしたので、CSSは一切気にせずに、機能を具象することに集中しました。

数字当てゲーム(with grid)

gridをちょこちょこ勉強していますので、始めてレイアウトを組み、作成してみました。
asideにローゴと回線数、footerにはmarquee message、mainにはstrike,ball,入力fromを配置しました。

3桁の数字を当てるゲームで、出した3桁数字の中で入っている数の数がball, 桁まで当てばStrikeで3 Strike!でゲーム終了になります。
(0~9は重複ができません！）

例）answer: 123 player:124 2S 0B
player:987 0S 0B
player:319 0S 2B

JSPのカスタムタグ

`<jsp:include page=""></jsp:include>

page遷移にはdata(parameter)を持っていかないredirect、
持っていくforward, includeがありますが、今日はincludeについて勉強しました。

forwardはページを完全に移動することであれば、includeはページをsetAttribute()にページの一部として呼び出すことも可能です。

first.jsp
<h1>First</h1>
<jsp:include page="Second.jsp"></jsp:include>
<h2>Third</h2>
Second.jsp
<h1>Second<h1>

Seconde.jspを呼び出すことができます。

first
First
Second
Third

実習

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<header>게시판</header>
<nav>
<a href=HomeController>홈</a>
<a href=AController>A</a>
<a href=>B</a>
<a href=>C</a>
</nav>
<main>
<jsp:include page="${contentPage}"/> 
</main>
</body>
</html>

リンクごとにa href=Controllerを連携します。

package com.hyon.sep132.main;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/AController")
public class AController extends HttpServlet {
  
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setAttribute("contentPage", "A.jsp");
		request.getRequestDispatcher("index.jsp").forward(request, response);
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

全てのページはcontentsになり、結局indexに戻ります。
indexはつまり、テンプレートです！！

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		if(!request.getParameterNames().hasMoreElements()) {
		request.setAttribute("contentPage", "cal1.jsp");
	    }else {
	    Calculator.Calculate(request);
		request.setAttribute("contentPage", "cal2.jsp");
		}
		request.getRequestDispatcher("index.jsp").forward(request, response);
	}

このように、計算前と計算後をパラメーターの有無に分けて、indexに処理することもできます。

core(JSTLcore)

jspでプログラミングできる特集タグです。こんなことがあるんだみたいな感覚で勉強しました。
これより、重要なのはspringですので！！

プロジェクトのlibフォルダーにjstl libraryを置きます！
ダウウンロードはmavenからできます！

inputページから`<input name="n">に8を入れたという前提で説明したいと思います。今、${param.n}　には8が入っています。


<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

一番、上段で <%@ %>からライブライをimportします。

if

<c:if test="${param.n % 2 ==0}">
짝수
</c:if>

このように、contentsがjavaとすれば、{}内になります。
attributeはtest=""が()みたいな役割ですね。

<c:if test="${param.n % 2 == 1} ">
奇数
</c:if>

<c:if test="${param.n-8==0}">
nは8
</c:if>

その他にも様々なタグがあります。

switch-case

switch-case
<c:choose>
  <c:when test="${param.n> 10}">	
   nは10より大きい	  
	</c:when>	  
  <c:when test="${n.param>5}">	
  nは5~10	
	</c:when>
<c:otherwise>
	nは4以下
</c:otherwise>	
</c:choose>

for

loop
<c:forEach var="v"  start="1"  end="${param.n}" step="2">
	${v}
</c:forEach>

1
3
5
7

varは変数およびattributeになります。stepは増減式です。
forEach という名前ですが、javaとしたらfor文ですね。

jstlのforEachは範囲を決めることも要素を全部回すこともですます。

<c:forEach var="i" items="${ar }" >
	${i}
</c:forEach>

try-catch

<c:catch var="myException">
  계산 결과 : <% int result = 100/ 2; %>
</c:catch >
<c:catch var="myException">
  계산 결과 : <% int result = 100/ 0; %>
</c:catch >
<c:if test="${myException!=null}">	
  에러 발생 : ${myException.message}
	</c:if>
	

계산 결과 : 50
에러 발생 : /by zero

fmt(JSTLformat)

dataをformatするライブラリもあります。

JSTLFDataMaker
ackage com.beaver.sep133.jstlf;

import java.util.Date;

import javax.servlet.http.HttpServletRequest;

public class JSTLFDataMaker {

	public static void make(HttpServletRequest req) {
		int  a = 12345689;
		req.setAttribute("a", a);
		
		double b = 10/24.0;
		req.setAttribute("b", b);		
				
		double c = 123.456789;
		req.setAttribute("c", c);	
		
		Date now = new Date();
		req.setAttribute("d", now);
	}


}
JSTLFController
JSTLFDataMaker.make(request);
request.setAttribute("contentPage", "jstlf/output.jsp");request.getRequestDispatcher("index.jsp").forward(request, response)

<main>
<jsp:include page="${contentPage}" />  
</main>

まずはformat前に変数を作るClassからa,b,c,dを作成し、indexから結果を呼び出す下準備です。

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>   
.
.
<head>
..

fmtというライブライをimportします。coreとfmtを通常一緒に使われるので、事前にimportしましたが、必須ではありません。

int a = 12345689;
double b = 10/24.0;
double c = 123.456789;
Date now = new Date();

 <fmt:formatNumber value="${a }" type="number" /> 
  <fmt:formatNumber value="${a }" type="currency" currencySymbol="$" /> 
  <fmt:formatNumber value="${b }" type="percent" /> 
  <fmt:formatNumber value="${c }" pattern="#.00" /> 

12,345,689
$12,345,689
42%
123.46

Date type(util.java.Date)はこのように処理することができます。

<!-- 
  		Date種類
  		:type = "date/time/both"
  		1.date
  		  dateStyle = "short / long"
  		  
  		2.time
  		  timeStyle = "short / long"
  		  
  		3.both
  		  dateStyle = "short / long"
  		  timeStyle = "short / long"
  		      
   -->
  
  <fmt:formatDate value="${d }" type="both"  dateStyle="short" timeStyle="long"/>
  <br>
  <fmt:formatDate value="${d }" pattern="yyyy-MM-dd E a hh"/> <br>


23. 9. 13 오후 8시 58분 28초 
2023-09-13 수 오후 08

Discussion