타임리프 문법 및 표현방법 정리


th:text


th:text는 태그 안에 들어가는 텍스트 값이다.


1
<span th:text="${eventFvrDtl.winRnkg}"></span>
cs



th:if, th:unless, th:value 


th:if는 if, th:unless는 else 표현이다.

th:value는 태그 안의 value이다.


1
2
3
4
5
6
<th:block th:if="${eventPtcpPsbOrdData != null && #lists.size(eventPtcpPsbOrdData.eventPtcpOrdInfoList) > 0}">
    <input type="hidden" id="ibx_TotalPurAplAmt" th:value="${totalPurAplAmt}"/>
</th:block>
<th:block th:unless="${eventPtcpPsbOrdData != null && #lists.size(eventPtcpPsbOrdData.eventPtcpOrdInfoList) > 0}">
    <input type="hidden" id="ibx_TotalPurAplAmt" value="0"/>
</th:block>  
cs


th:utext (unescaped text)


th:utext는 <div></div>같은 태그형식의 코드를 삽입하고 싶을때 사용한다.

태그형식의 텍스트 들어올시 태그로 인식함.


1
2
<!-- HTML 컨텐츠 영역 -->
<th:block th:utext="${#campaignUtils.unescapeHtml(eventDispTempleteInfo.htmlContents)}"></th:block>
cs




th:with


th:with는 변수형태의 값을 재정의한 것이다.

stnmZipNo의 변수를 값이 있다면 정의하고 없다면 공백으로 정의한다.


1
2
<th:block th:with="stnmZipNo=${#strings.defaultString(ecCustInfo.stnmZipNo, '')}">
</th:block>
cs


th:switch , th:case


switch case 문과 같다.

fvrDvsCd값이 이럴때 case1, case2 빠지고 

그 외에 것은 th:case=* 로 빠지게 된다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div th:switch="${eventFvrDtl.fvrDvsCd}" class="coupon_gift">
    <p th:case="${#foConstants.FVR_DVS_CD_DISCOUNT}" class="cp cptype02">
        <th:block th:switch="${fvrKnd2Cd}">
            <span th:case="${#foConstants.FVR_KND2_CD_FREE_DLV_CPN}" th:text="${fvrKnd2CdNm}" class="tx"></span>
            <span th:case="*" class="tx">
                <th:block th:text="${fvrKnd2CdNm}"></th:block>
            </span>
        </th:block>
    </p>
    <p th:case="${#foConstants.FVR_DVS_CD_ACCUMULATION}" class="cp cptype02">
        <span class="ty" th:text="${fvrKnd2CdNm}"></span>
        <span class="tx" th:text="${#numbers.formatInteger(eventFvrDtl.fvrDtlCnts, 3, 'COMMA')}"></span>
    </p>
    <p th:case="*" class="cp cptype02">
        <span class="tx" th:text="${eventFvrDtl.fvrDtlCnts}"></span>
    </p>
</div>
cs


th:fagment


include와 비슷하다. 

특정 영역을 가져와서 나타낼 수 있다.


예를 들어 페이지마다 각각의 게시판을 가지고 싶은 경우


포함하는 곳.
ex) eventPage1.html

1
2
3
4
<th:block th:if="${#lists.size(eventDispTemplateCornerList)} > 0" th:each="eventDispTemplateCorner : ${eventDispTemplateCornerList}">
    <!-- 이벤트 템플릿 코너 -->
    <th:block th:include="${eventDispTemplateCorner.cmpnTmplFileUrl} :: corner (${eventDispTemplateCorner.cmpnNo}, ${eventData.eventBaseInfo.eventPtcpPsbYn})"></th:block>
</th:block>
cs

받는 곳.

ex) board.html


1
2
3
4
5
<th:block th:fragment="corner (cmpnNo, eventPtcpPsbYn)">
    <div class="content_title noline">
        <p class="title">게시판</p>
    </div>
</th:block>
cs


controller를 거쳐 화면으로 가져온 데이터를 스크립트로 제어할때


1
2
3
4
// controller
ModelAndView mv;
mv.addObject("eventData", eventData);
return mv
cs


1
2
3
// controller를 거쳐 화면으로 가져온 데이터를 스크립트로 제어할때
var data1 = [[${eventData}]];
var eventPtcpPsbYn = [[${#strings.defaultString(eventData.eventBaseInfo.eventPtcpPsbYn, 'Y')}]];
cs



태그 안의 attribute를 타임리프로 정의할때 

1
2
3
4
5
6
7
// 태그 안의 attribute를 타임리프로 정의할때
<div id="myDiv1" th:attr="usemap=|#E_${eventData.eventBaseInfo.cmpnNo}|">
</div>
 
// 정의된 결과
<div id="myDiv1" usemap="#E_21082">
</div>
cs


'전체 > Thymeleaf, JSTL' 카테고리의 다른 글

JSTL 기초  (0) 2017.05.30

1. JSTL 이란


1. JSP 표준라이브러리(JSP Standard Tag Library) 이다.


2. JSP에서 사주 사용하는 기능(반복과 조건, 데이타 관리 포맷, XML 조작, 데이타베이스 액세스)을 구현하는 커스텀 태그 라이브러리 모음이다.


3. 시간, 날짜, 숫자의 포맷이나 문자열 가공등의 처리에서 비즈니스로직과 프리젠테이션 로직을 분리할 수 있게 해준다.


4. JSTL은 EL(Expression Language)를 사용하여 표현한다.



2. JSTL 라이브러리


 라이브러리

기능 

 접두어

 코어

 일반 프로그램 언어에서 제공하는 변수선언, 조건/제어/반복문등의 기능을 제공한다.

 c

 포맷팅 

 숫자,날짜,시간을 포맷팅 하는 기능과 국제화, 다국어 지원 기능을 제공한다.

 fmt

 함수

 문자열을 처리하는 함수를 제공한다. 

 fn

 데이터베이스

 데이터베이스의 데이터를 입력/수정/삭제/조회하는 기능을 제공한다.

 sql

 XML처리

 XML 문서를 처리할 때 필요한 기능을 제공한다.

 x




3. JSTL 문법


1. Core


 명령어

내용 

 예제 

c:url

url 호출 

  
1
2
<c:url value="test.jsp"/>
<c:url value="/test.jsp" context="/other"/>
cs

c:out

객체를 화면에 출력 

  
1
2
<c:out value="${data}"/>
<c:out value="${data}" default="값없음"/>
cs

c:set 

저장영역에 객체를 저장 

  
1
2
<!-- scope : page, request, session, application -->
<c:set scope="request" var="data" value="my_testValue" />
cs

c:forEach 

반복문 제어 

  
1
2
3
4
5
6
7
8
9
10
11
12
13
<c:forEach var="NOTICE" items="${NOTICE_LIS}" varStatus="status">
<c:out value="${NOTICE.COLUMN}"/>
</c:forEach>
 
<!-- 0123456 -->
<c:forEach var="S" begin="0" end="6">
<c:out value="${S}"/>
</c:forEach>
 
<!-- 036 -->
<c:forEach var="S" begin="0" end="6" step="3">
<c:out value="${S}"/>
</c:forEach>
cs

c:remove 

저장영역에서 객체를 삭제 

  
1
<c:remove scope="request" var="data" />
cs

c:if 

조건문 제어 

  
1
2
3
<c:if test="${empty data}">
data 값이 비어있으면 실행
</c:if>
cs

c:choose

c:when

c:otherwise 

복합조건문 제어 

  
1
2
3
4
5
6
<c:choose>
<c:when test="${data == 'A'}">data 값이 A이면 실행</c:when>
<c:when test="${data == 'B'}">data 값이 B이면 실행</c:when>
<c:when test="${data == 'C'}">data 값이 C이면 실행</c:when>
<c:otherwise>data 값이 A, B, C값이 아닐 경우 실행</c:otherwise>
</c:choose>
cs

c:import! 

다른 jsp화면을 현재 화면에 출력 

  
1
<c:import! url="test.jsp"/>
cs

c:redirect 

경로 이동 

  
1
<c:redirect url="주소"/>
cs



2. 연산자


연산자

예제 

결과내용 

==

eq 

${1 == 1}

${1 eq 1}

true 

!=

ne 

${1 != 1}

${1 ne 1} 

false 

<

lt

${1 < 10}

${1 lt 10} 

true 

>

gt

${1 > 10}

${1 gt 10} 

false 

<=

le

${1 <= 1}

${1 le 1} 

true 

>=

ge

${1>=0}

${1 ge 0} 

false 

&&

and

${true && false}

${true and false}

false

||

or 

${true || false}

${true or false} 

true 

!

not

${!true}

${not true} 

false 

empty

${empty name} 

name이 null이거나 빈 문자열이면 true 

not empty 

${not empty name} 

name이 null도 아니고 빈 문자열도 아니면 true 



4. status 상태 속성 제어



1
2
3
4
5
6
7
8
9
10
11
12
13
< c:foreach items=”${RESULT}” var=”RESULT” varStatus=”status”>
 
    ${status.current}<br/> <!– 현재 아이템 –>
    ${status.index}<br/>        <!– 0부터의 순서 –>
    ${status.count}<br/>        <!– 1부터의 순서 –>
    ${status.first}<br/>           <!– 현재 루프가 처음인지 반환 –>
    ${status.last}<br/>           <!– 현재 루프가 마지막인지 반환 –>
    ${status.begin}<br/>        <!– 시작값 –>
    ${status.end}<br/>         <!– 끝값 –>
    ${status.step}<br/>         <!– 증가값 –>
 
< /c:forEach>
 
cs


5. JSTL for문


1. 인덱스로 접근



1
2
3
4
5
6
<c:forEach var="i" begin="1" end="5" step="1" varStatus="status">
    번호 : ${status.count}
    이름 : ${item[i].name}
    직업 : ${item[i].job}
    급여 : ${item[i].salary}
</c:forEach>
cs


2. begin과 end로 접근


 

1
2
3
4
5
6
<c:forEach var="item" items="${list}" begin=0 end=5 step=1 varStatus="status">
    번호 : ${status.count}
    이름 : ${item.name}
    직업 : ${item.job}
    급여 : ${item.salary}
</c:forEach>
cs


3. 일반적인 접근



1
2
3
4
5
6
<c:forEach var="item" items="${list}" varStatus="status">
    번호 : ${status.count}
    이름 : ${item.name}
    직업 : ${item.job}
    급여 : ${item.salary}
</c:forEach>
cs


4. JSTL break문 구현



1
2
3
4
5
6
7
8
9
10
11
12
<c:set var="doneLoop" value="false" /> 
<c:forEach var="entity" items="${_STORE}" varStatus="status">
    <c:if test="${status.count % 6 eq 1}">
        <c:set var="doneLoop" value="false" />
    </c:if>
    <c:if test="${not doneLoop}"> 
        <span><input type="checkbox" id="store_id" name="store_id" value="<c:out value="${entity.STORE_ID}"/>" <c:out value="${entity.USE_YN}"/>><c:out value="${entity.STORE_NM}"/></span>
        <c:if test="${status.count % 6 eq 0}"> 
            <c:set var="doneLoop" value="true"/> 
        </c:if>
    </c:if>
</c:forEach>
cs


'전체 > Thymeleaf, JSTL' 카테고리의 다른 글

Thymeleaf 문법 정리  (3) 2018.10.08

+ Recent posts

티스토리툴바