JSP16 - 13customTag

course 2021/JSP

JSP16 - 13customTag

코딩하는토끼 2021. 11. 24. 04:54

교재469 16chapter

커스텀태그 만들기

> 태그파일이 들어가는 위치는 정해져 있음

1. c:\apache-tomcat-8. O.21\,webapps\chap16 폴더를 생성

2. chap16 폴더에 WEB-INF 하위 폴더를 생성

3. WEB-INF 폴더에 lib 폴더를 생성하고 jstl-1. 2.jar 파일을 복사

4. WEB-INF 폴더에 tags 하위 폴더를 생성

webapp > WEB-INF > lib, (tags > 13tag) 폴더생성

13tag 우클릭 new - other - tag 검색 - JSP Tag 선택하여 파일명.tag 로 파일 생성하기

t01tag.tag, 01tag.jsp

(t01tag.tag 는 tag 폴더 안에, 01tag.jsp 는 13customTag 폴더 안에)

t01tag.tag

<%@ tag language="java" pageEncoding="UTF-8"%>


<h1>new tag</h1>

<%@ tag language="java" pageEncoding="UTF-8"%> 는 파일 생성할 때 기본으로 작성됨

language 는 앞으로도 java 를 쓰게 될 것, pageEncoding 은 그때그때 맞추어 설정

이 태그파일의 내용은 <h1>new tag</h1>

01tag.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="my" tagdir="/WEB-INF/tags/13tag" %>
<% request.setCharacterEncoding("utf-8"); %>


<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="<%= request.getContextPath() %>/resource/css/icon/css/all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>

<body>
<h1>jsp contents.....</h1>

<my:t01tag></my:t01tag>
<my:t01tag></my:t01tag>
<my:t01tag />

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</body>

<%@ taglib prefix="my" tagdir="/WEB-INF/tags/13tag" %>

jsp 파일에서 사용할 때 이런식으로 작성해주어야 함

tagdir = ctrl+space 로 힌트얻기

** 지금까지 위에 써둔거 정리
1. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> : jstl 사용하기 위해

2. <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> : function 사용하기 위해

3. <%@ taglib prefix="my" tagdir="/WEB-INF/tags/13tag" %> : tag 사용하기 위해

<head> 안에도

두개가 추가됨

태그 작성 시, 위에서 my 라고 정했으니, <my:파일이름> (my 까지가 경로였음)

content 없으면 빈요소로 사용가능 <my:t01tag />

실행한 결과 페이지↓

t02tag.tag, 02tag.jsp

jsp

<%@ taglib prefix="ct" tagdir="/WEB-INF/tags/13tag" %>

<h1>02 contentss......</h1>

<ct:t02tag />

<ct:t02tag></ct:t02tag>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

이번에는 ct

tag

<%@ tag language="java" pageEncoding="UTF-8"%>

<h1>hello</h1>

03tag-body.jsp, t03.tag

jsp

<%@ taglib prefix="my" tagdir="/WEB-INF/tags/13tag" %>

<h1>jsp contents.....</h1>

<my:t03>
	<h3>hello</h3>
</my:t03>

<my:t03>
	<p>world</p>
</my:t03>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

tag

<jsp:doBody />

<jsp:doBody />

그러니까, <my:t03> </my:t03> 에서 t03.tag 로 가서 <jsp:doBody> 를 두 번 실행하기 때문에

<my:t03> 태그 안의 hello 가 두번 출력되는 것임

아래 world 도 마찬가지

04body-ex.jsp, t04dangerButton.tag

jsp

<my:t04dangerButton>
	<i class="fas fa-trash-alt"></i>
</my:t04dangerButton>

<my:t04dangerButton>
	<i class="fas fa-minus-circle"></i>
</my:t04dangerButton>

tag

<button class="btn btn-danger">
	<jsp:doBody></jsp:doBody>
</button>

tag 를 만나서

<button class="btn btn-danger">
	<i class="fas fa-trash-alt"></i>
</button>

이렇게 됨

i 는 css- icon 적용

05taglib.jsp, t05loopFive.tag

jsp

<my:t05loopFive>
	<p>lorem</p>
</my:t05loopFive>

tag

<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
 
<c:forEach begin="1" end="5">
	<jsp:doBody></jsp:doBody>
</c:forEach>

tag 파일에 taglib 두개 추가됨 (c, fn)

<c:forEach begin="1" end="5">
	<p>lorem</p>
</c:forEach>

06taglib-ex.jsp, t06loopFive.tag

jsp

<my:t06loopFive>
	lorem
</my:t06loopFive>

tag

<c:forEach begin="1" end="5" var="i">
	<p>${i } : <jsp:doBody/></p>
</c:forEach>

07attribute.jsp, t07.tag

jsp

<my:t07 attr1="hello"></my:t07>

tag

<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ attribute name="attr1" %>

${attr1 }

tag 에 하나 더 추가됨

<%@ attribute name="attr1" %>

attribute 쓸 때는 써줘야 함

jsp 에서 tag 로 이동, 그래서 tag 에서 el ${attr1 } 으로 출력, attr1 = hello 이니까 hello 출력

08attribute-ex.jsp, t08color.tag

jsp

<my:t08color color="red">
	<h1>Lorem.</h1>
</my:t08color>

<my:t08color color="blue">
	<p>Lorem ipsum.</p>
</my:t08color>

tag

<%@ attribute name="color" %>

<div style="color: ${color };">
	<jsp:doBody />
</div>

color 넘겨서 style 로 받음

09attribute-ex.jsp, t09colorAlign.tag

jsp

<my:t09colorAlign color="red" align="center">
	<h1>Lorem.</h1>
</my:t09colorAlign>

<my:t09colorAlign color="blue" align="right">
	<p>Lorem ipsum.</p>
</my:t09colorAlign>

tag

<%@ attribute name="color" %>
<%@ attribute name="align" %>

<div style="color: ${color}; text-align: ${align};">
	<jsp:doBody></jsp:doBody>
</div>

음 attribute 넘긴건데.. 이해하기 헷갈려서 이름을 좀 바꿔봄

jsp

<my:t09colorAlign a="red" b="center">
	<h1>Lorem.</h1>
</my:t09colorAlign>

<my:t09colorAlign a="blue" b="right">
	<p>Lorem ipsum.</p>
</my:t09colorAlign>

tag

<%@ attribute name="a" %>
<%@ attribute name="b" %>

<div style="color: ${a}; text-align: ${b};">
	<jsp:doBody></jsp:doBody>
</div>

10attribute-type.jsp, t10.tag

jsp

<%
pageContext.setAttribute("pageAttr1", "world");
pageContext.setAttribute("pageAttr2", 300);
%>


<my:t10 attr1="hello"></my:t10>

<my:t10 attr2="${pageAttr1 }"></my:t10>

<my:t10 attr3="${pageAttr2 }"></my:t10>

<my:t10 attr4="400"></my:t10>

tag

<%@ attribute name="attr1" type="java.lang.String" %>
<%@ attribute name="attr2" type="java.lang.String" %>
<%@ attribute name="attr3" type="java.lang.Integer" %>
<%@ attribute name="attr4" type="java.lang.Integer" %>

<div>
attr1 : ${attr1 }
</div>
<div>
attr2 : ${attr2 }
</div>
<div>
attr3 : ${attr3 }
</div>
<div>
attr4 : ${attr4 }
</div>

pageAttr1 에 world 저장, pageAttr2 에 300 저장

태그 걸었고, 각각 attribute 도 작성함

직접 쓰지 않고 아까 저장한 이름으로 씀

이번에는 tag 파일에서 type 을 명시

type="java.lang.String"

type="java.lang.Integer"

string, integer 명시함! ㅇㅇ

기본값이 string 이라서 문자열은 그냥 받을 수 있음

int, long, char 등은 불가하며

map, list, integer 등은 명시해줘야 함

Object 도 가능하긴 함

그리고 el 로 출력

11attribute-type.jsp, t11gugudan.tag

jsp

<my:t11gugudan dan="3"></my:t11gugudan>


<c:catch var="e">
	<my:t11gugudan dan="three"></my:t11gugudan> 
</c:catch>

<c:if test="${not empty e }">
	<div>
		${e.message }
	</div>
</c:if>

tag

<%@ attribute name="dan" type="java.lang.Integer" %>


<div>
	<c:forEach begin="1" end="9" var="i">
		${dan } X ${i } = ${dan * i } <br>
	</c:forEach>
</div>

dan=3 을 넘겨줌

구구단 3단 출력

<c:catch> 는?

발생된 exception 을 el 변수에 저장할 때 사용되는 태그, 다음과 같이 작성

<c:catch var="e">
	exception 이 발생될 수 있는 코드
</c:catch>

dan=three 로 넘겨주기 때문에, exception 발생함

애초에 tag 에서 dan 의 datatype 을 integer 라고 명시해뒀음

그리고 이에 대하여 ${not empty e } 일 경우 ${e.message } 를 출력함

그래서 For input string: "three" 가 출력되었음

12type-array.jsp, t12.tag

jsp

<%
pageContext.setAttribute("attr1", new String[] {"java", "css", "html"});
pageContext.setAttribute("attr2", new int[] {100, 200, 300});
%>

<my:t12 a="${attr1 }" b="${attr2 }"></my:t12>

tag

<%@ attribute name="a" type="java.lang.String[]" %>
<%@ attribute name="b" type="int[]" %>

<c:forEach items="${a }" var="item">
	${item } <br>
</c:forEach>

<hr>

<c:forEach items="${b }" var="item">
	${item } <br>
</c:forEach>

jsp 에서 attr1 에 문자열 배열을, attr2 에 숫자 배열을 저장,

태그에서 attribute 로 넘겨줌

태그를 만나서 태그 실행

a 를 String[] 배열로, b 를 int[] 배열로 받는다고 명시

item 에 ${a } 저장하여 출력 (forEach)

item 에 ${b } 저장하여 출력 (forEach)

배열의 원소가 하나씩 출력됨

13type-object.jsp, t13.tag

jsp

<%@ page import="sample03javabean.*" %>

<%
pageContext.setAttribute("obj", new Bean06("java", "kim", 3000));
%>

<my:t13 a="${obj }"></my:t13>

tag

<%@ attribute name="a" type="sample03javabean.Bean06" %>

<p>${a.title }</p>
<p>${a.writer }</p>
<p>${a.price }</p>

Bean06 의 메소드

public Bean06(String title, String writer, int price) {
	super();
	this.title = title;
	this.writer = writer;
	this.price = price;
}

obj 에 ... Bean06 객체 저장 (그래서 위에 import 해줌)

title 에 java, writer 에 kim, price 에 3000 저장

태그에 ${obj } 를 attribute a 의 값으로 전달

type 으로 import 해줄 때 쓴 "sample03javabean.Bean06" 을 씀 ("패키지명.클래스명")

값을 각각 하나씩 출력

14type-object.jsp, t14.tag

jsp

<%
pageContext.setAttribute("bean1", new Bean06("spring", "lee", 5000));
%>

${bean1.title } <br>
${bean1.writer } <br>
${bean1.price } <br>

<hr>

<my:t14 a="${bean1 }" />

tag

<%@ attribute name="a" type="java.lang.Object" %>

${a.title } <br>
${a.writer } <br>
${a.price } <br>

이번에는 Bean06에 spring, lee, 5000 넣은 걸, bean1 이름으로 저장

하나씩 출력한 뒤 태그

태그 안에 attribute a 의 값으로 ${bean1 } 전달

태그에서 Object 라고 type 명시

하나씩 출력

15type-ex.jsp, t15.tag

jsp

<%
List<String> list = new ArrayList<>();
list.add("loco");
list.add("stayc");
list.add("itzy");
pageContext.setAttribute("list", list);
%>


<my:t15 datas="${list }" />

tag

<%@ attribute name="datas" type="java.lang.Object" %>

<ul>
	<c:forEach items="${datas }" var="item">
		<li>${item }</li>
	</c:forEach>
</ul>

list 를 생성하고 값들을 추가, list 이름으로 저장까지 완료

태그에 attribute datas 값으로 ${list } 전달

태그에서 datas 를 Object type 으로 받음

type=""java.util.List" 로 작성해도 됨

리스트로 값들을 출력

16type-ex.jsp, t16.tag

jsp

<%
Map<String, String> map = new HashMap<>();
map.put("lang", "python");
map.put("framework", "django");
map.put("pattern", "mvc");

pageContext.setAttribute("map", map);
%>

<my:t16 datas="${map }" />

tag

<%@ attribute name="datas" type="java.lang.Object" %>

<table class="table">
	<c:forEach items="${datas }" var="entry">
		<tr>
			<td>${entry.key }</td>
			<td>${entry.value }</td>
		</tr>		
	</c:forEach>
</table>

이번에는 map 으로, 값들 저장해서 map 이름으로 저장하고 태그에서 datas 이름으로 전달

태그에서 역시나 Object type 으로 받았으며 테이블로 출력 (key, value 따로)

type="java.util.Map" 으로 작성해도 됨

17dynamic-attribute.jsp, t17.tag

jsp

<my:t17 attr1="hello" attr2="world" />

tag

<%@ attribute name="attr1" %>
<%@ tag dynamic-attributes="others" %>

${attr1 } <br>
${others.attr2 } <br>

바로 태그

attr1 으로 hello 넘기고, attr2 로 world 넘김

태그에서 attr1 받고,

<%@ tag dynamic-attributes="others" %>

근데 attr2 안받아줬는데 아래에서 others.attr2 쓰는 것 보니, others 로 받아준 것 같다

18dynamic-attributes-ex.jsp, t18.tag

jsp

<my:t18 song="butter" singer="bts" />
<hr>
<my:t18 food="apple" drink="water" />

tag

<%@ tag dynamic-attributes="attrs" %>

<ul>
	<c:forEach items="${attrs }" var="entry">
		<li>${entry.key} : ${entry.value }</li>
	</c:forEach>
</ul>

태그 song=butter, singer=bts 를 attribute 로 넘김

태그 food=apple, drink=water 를 attribute 로 넘김

태그에서 tag dynamic-attributes-"attrs" 로 받음

리스트로 출력하는데, attrs 를 items으로, entry 이름으로 저장

key 와 value 로 출력

한번에 attribute 들을 받았고, 이 song, singer, food, drink 들이 각각 map 형식의 key, value 값으로 저장됨

19request.jsp, t19.tag

jsp

<%
pageContext.setAttribute("attr1", "page val1");
request.setAttribute("attr2", "req val2");
%>

<c:set var="attr3" value="req val3" scope="request" />

<my:t19 />

tag

<h1>tag contents</h1>


${attr1 } <br>

${attr2 } <br>

${attr3 } <br>

page val1 을 attr1 에 저장, req val2 를 attr2 에 저장

<c:set> 에서 req val3 를 request 영역에서 attr3 으로 저장

그리고 태그로 넘김.

태그에서 모두 출력.

request 로 해서 다 넘어가는구나

page 영역에서 저장했던 1 은 출력되지 못했음

t20table.tag

<table class="table table-hover">
	<thead>
		<tr>
			<th></th>
			<th>#</th>
			<th>제목</th>
			<th>저자</th>
			<th>가격</th>
			<th>출판사</th>
			<th>재고</th>
		</tr>
	</thead>

	<tbody>
		<c:forEach items="${books }" var="book" varStatus="status">
			<tr>
				<c:url value="25delete.jsp" var="deleteUrl">
					<c:param name="index" value="${status.index }" />
				</c:url>
				<c:url value="25modify.jsp" var="modifyUrl">
					<c:param name="index" value="${status.index }" />
				</c:url>
				<td>
					<%-- <a class="btn btn-danger" href="${deleteUrl }"><i class="fas fa-trash-alt"></i></a> --%>
					<button type="button" class="btn btn-danger delete-modal-button" data-href="${deleteUrl }" data-toggle="modal" data-target="#exampleModal">
						<i class="fas fa-trash-alt"></i>
					</button>

					<a href="${modifyUrl }" class="btn btn-secondary">
						<i class="fas fa-edit"></i>
					</a>
				</td>
				<td>${status.count }</td>
				<td>
					<c:out value="${book.title }" />
				</td>
				<td>
					<c:out value="${book.writer }" />
				</td>
				<td>
					<c:out value="${book.price }" />
				</td>
				<td>
					<c:out value="${book.publisher }" />
				</td>
				<td>
					<c:out value="${book.stock }" />
				</td>
			</tr>
		</c:forEach>
	</tbody>
</table>