교재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> 안에도
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
두개가 추가됨
태그 작성 시, 위에서 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>
'course 2021 > JSP' 카테고리의 다른 글
| JSP17 - 14bootstrap (0) | 2021.11.25 |
|---|---|
| JSP15 - 12jstl (0) | 2021.11.22 |
| JSP14 - 11el(3) (0) | 2021.11.21 |
| JSP13 - 11el(2) (0) | 2021.11.20 |
| JSP12 - 11el (0) | 2021.11.19 |
