개요

JSTL(JSP Standard Tag Library) 설명한다.

목차

1.           개요

JSTL(JSP Standard Tag Library) 설명한다. 프레임워크에서는 JSTL 구성하는 4개의 태그 라이브러리 중에서 core 태그 라이브러리만을 사용한다.

종류

설명

prefix

uri

core

데이터 출력, 제어문, URL 처리 기본 기능

c

http://java.sun.com/jstl/core (1.3)

http://java.sun.com/jsp/jstl/core (1.4)

format

I18N 데이터 포멧 기능

fmt

http://java.sun.com/jstl/fmt (1.3)

http://java.sun.com/jsp/jstl/fmt (1.4)

xml

XML 문서에 대한 처리

x

http://java.sun.com/jstl/xml (1.3)

http://java.sun.com/jsp/jstl/xml (1.4)

sql

JDBC 작업 수행

sql

http://java.sun.com/jstl/sql (1.3)

http://java.sun.com/jsp/jstl/sql (1.4)

                                                                                                                                                             표 1.         JSTL 태그 라이브러리

2.           설정

JSTL 사용하려면 아래 파일이 어플리케이션 디렉토리에 위치해야 한다.

파일

설명

WEB-INF/lib/jstl.jar

JSTL API 라이브러리

WEB-INF/lib/standard.jar

JSTL 구현 라이브러리

WEB-INF/tld/c.tld

JSTL core TLD 파일

                                                                                                                                                            표 2.         JSTL 설정을 위한 파일

J2EE 1.3에서는 JSTL 1.0 라이브러리를, J2EE 1.4에서는 JSTL 1.1 라이브러리를 사용한다. 라이브러리는 다음(http://jakarta.apache.org/taglibs/doc/standard-doc/intro.html)에서 다운로드한다.

그리고 web.xml 파일에 태그 라이브러리를 설정한다. 아래는 J2EE 1.3 사용하는 경우의 설정이다.

 

web.xml

 

<taglib>

    <taglib-uri>http://java.sun.com/jstl/core</taglib-uri>

    <taglib-location>/WEB-INF/c.tld</taglib-location>

</taglib>

 

그리고 아래는 J2EE 1.4 사용하는 경우의 설정이다.

 

web.xml

 

<jsp-config>

    <taglib>

        <taglib-uri>http://java.sun.com/jsp/jstl/core</taglib-uri>

        <taglib-location>/WEB-INF/c.tld</taglib-location>

    </taglib>

</jsp-config>

 

3.           JSTL 사용

JSTL 사용하는 모든 JSP 파일 상단에 아래 내용을 추가한다.

 

Example.jsp

 

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

 

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

 

그런데 J2EE 1.3 J2EE 1.4 따라서 uri 속성의 값이 다르다. 이에 따른 수정 영향을 최소화하기 위해서 BaseJsp.jsp 파일을 사용한다.

 

Example.jsp

 

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

 

<%@ include file="/BaseJsp.jsp" %>

 

BaseJsp.jsp 내용은 아래와 같다. 프레임워크가 제공하는 태그 라이브러리 설정도 포함한다.

 

BaseJsp.jsp

 

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

<%@ taglib prefix="framework" uri="http://www.naver.com/ctl/framework" %>

<%@ taglib prefix="ui" uri="http://www.naver.com/ctl/ui" %>

 

4.           Expression!! Language

(1)    Expression!! Language 개요

JSTL Expression!! Language(이하 EL) 사용한다. EL 데이터 혹은 객체를 표현하는데 사용하는 스크립트 언어로 ${} 안에서 사용한다.

 

// 동적인 표현 작업 수행

${Some Expression!!}

 

EL 아래의 작업을 수행한다.

           JSP 저장 영역(page, request, session, application) 대한 접근

           java.util.Collection, java.util.Map, 배열 등의 객체 처리

           POJO 유형의 객체 처리

           수치, 비교, 논리 연산자 적용

 

J2EE 1.3에서는 EL JSTL 태그의 속성 값에서만 사용할 있다. 그러나 J2EE 1.4에서는 EL JSP JSTL 모두에서 사용할 있다.

(2)    Expression!! Language 기본 객체

EL에서 사용 가능한 주요 JSP API 대한 Alias 아래와 같다.

종류

기본 객체

예제

JSP

저장 영역

pageScope - PageContext 속성

requestScope - HttpServletRequest 속성

sessionScope - HttpSession 속성

applicationScope - ServletContext 속성

${requestScope.name}

HTTP

요청

파라미터

param - HttpServletRequest 파라미터

paramValues - 동일 파라미터 이름에 값이 2 이상 존재하는 경우

${param.name}

JSP

객체

pageContext - PageContext

cookie - 이름을 키로, Cookie 값으로 하는 java.util.Map

header - 해더 이름을 키로, 해더 값을 값으로 하는 java.util.Map

headerValues - 동일 해더 이름에 값이 2 이상 존재하는 경우

initParam - JSP 초기 변수

${cookie.JSESSIONID.name}

${headerValues['HOST'][0]}"

                                                                                                                                                          표 3.    EL 기본 객체

(3)    객체 사용

기본 데이터 타입(Boolean, Integer, Long, String ) 아래처럼 사용한다.

 

request.setAttribute("name", "성선임");

 

// 성선임을 출력한다.

${requestScope.name}

 

// 성선임을 출력한다. 영역을 지정하지 않으면 page, request, session, application

// 으로 검색한다.

${name}

 

// null 출력하지 않고 아무 것도 출력하지 않는다.

${password}

 

<?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" /><?xml:namespace prefix = st1 /><?xml:namespace prefix = st1 /><?xml:namespace prefix = st1 />POJO 객체의 경우에는 파라미터가 없는 get으로 시작하는 메소드에서 get 제외한 나머지 메소드 이름의 첫번째 단어를 소문자로 해서 사용한다.

 

Book.java

 

public class Book {

 

    private String isbn;

 

    public Book(String isbn) {

        this.isbn = isbn;

   

    public void getIsbn() {

        return this.isbn;

    }

 

    public void setIsbn(String isbn) {

        this.isbn = isbn;

    }

 

    public String toString() {

        return "book-object";

    }

 

}

 

 

Example.jsp

 

Book book = new Book("100");

request.setAttribute("favoriteBook", book);

 

// toString 메소드가 반환하는 값을 출력한다. book-object 출력한다.

${favoriteBook}

 

// . 연산자를 사용해서 getIsbn 메소드가 반환하는 값을 출력한다. 100 출력한다.

${favoriteBook.isbn}

 

// [] 연산자를 사용해도 결과는 동일하다.

${favoriteBook['isbn']}

 

// 값이 없는 경우에 NullPointerException 발생하지 않는다.

${nullBook.isbn}

 

// 해당하는 메소드가 없는 경우에는 예외가 발생한다.

${book.title}

 

배열 객체는 아래처럼 사용한다.

 

Book[] books = new Book[2];

 

books[0] = new Book("100");

books[1] = new Book("200");

 

request.setAttribute("books", books);

 

// 100 출력한다.

${books[0].isbn}

 

// 200 출력한다.

${books[1].isbn}

 

java.util.Map 객체는 아래처럼 사용한다. 키의 유형은 항상 java.lang.String이어야 한다.

 

Map map = new HashMap();

map.put("one", new Integer(1));

map.put("sub.one", new Integer(2));

 

request.setAttribute("numbers", map);

 

// . [] 연산자를 모두 사용할 있다. 1 출력한다.

${number.one}

${number['one']}

 

// 키가 . 등의 문자를 포함하면 [] 연산자를 사용한다. 2 출력한다.

${number['sub.one']}

 

// java.util.Map 키가 존재하지 않아도 예외가 발생하지 않는다.

${number.two}

 

(4)    연산자

EL에서 아래의 수치 연산자를 사용할 있다.

연산자

설명

예제

결과

+

더하기

${10 + 2}

12

-

빼기

${10 - 2}

8

*

곱하기

${10 * 2}

20

/ 또는 div

나누기

${10 / 2} 또는 ${10 div 2}

5

% 또는 mod

나머지

${10 % 3} 또는 ${10 mod 3}

1

                                                                                                                                                       표 4.    EL 수치 연산자

숫자형이 아니면 숫자형으로 자동 전환을 후에 연산을 수행한다.

 

// 101 아닌 11 출력한다.

${"10" + 1}

 

// null 0으로 처리한다. 1 출력한다.

${null + 1}

 

// 숫자가 아니면 예외가 발생한다.

${"" + 10}

 

EL 제공하는 비교 논리 연산자는 아래와 같다. >, < XML 태그와 혼동할 우려가 있는 연산자는 문자열 연산자(gt, lt) 표현하는 것을 권장한다.

연산자

예제

결과

== 또는 eq

${5 == 5} 또는 ${5 eq 5}

true

!= 또는 ne

${5 != 5} 또는 ${5 ne 5}

false

< 또는 lt

${5 < 7} 또는 ${5 lt 7}

true

> 또는 gt

${5 > 7} 또는 ${5 gt 7}

false

<= 또는 le

${5 <= 5} 또는 ${5 le 5}

true

>= 또는 ge

${5 >= 6} 또는 ${5 ge 6}

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

                                                                                                                                          표 5.    EL 비교 논리 연산자

5.           core

(1)        c:out

객체를 화면에 출력한다.

 

// out.println(request.getAttribute("name"));

<c:out value="${name}"/>

 

// 값이 없는 경우에 기본 값을 출력하려면 default 속성을 이용한다.

<c:out value="${age}" default="값이 없습니다."/>

 

// 기본적으로 XML 문자를 escape한다. Escape 하지 않으려면 escapeXml false 한다.

<c:out value="${name}" escapeXml="false"/>

 

(2)        c:set

저장 영역에 객체를 저장한다.

 

// request.setAttribute("name", "<?xml:namespace prefix = st2 ns = "urn:schemas:contacts" /><?xml:namespace prefix = st2 /><?xml:namespace prefix = st2 /><?xml:namespace prefix = st2 />태섭");

// scope 속성으로는 page(기본), request, session, application 사용.

<c:set scope="request" var="name" value="송태섭"/>

 

// Book book = (Book) request.getAttribute("book");

// book.setIsbn("300");

<c:set scope="request" target="book" property="isbn" value="300"/>

 

(3)        c:remove

저장 영역에서 객체를 삭제한다.

 

// request.removeAttribute("name");

<c:remove scope="request" var="name"/>

 

(4)        c:if

조건문을 제어한다.

 

// test 속성의 값이 true c:if 태그의 body 내용을 수행한다.

<c:if test="${not empty flag}">

    flag 존재하면 영역을 수행한다.

</c:if>

 

(5)        c:choose, c:when, c:otherwise

복합 조건문을 제어한다.

 

// c:choose 태그는 1 이상의 c:when 태그와 0 또는 1개의 c:otherwise 태그로 구성

<c:choose>

    <c:when test="${flag == 1}">

        flag 1이면 영역을 수행한다.

    </c:when>

    <c:when test="${flag == 2}">

        flag 2이면 영역을 수행한다.

    </c:when>

    <c:otherwise>

        flag 1 2 아니면 영역을 수행한다.

    </c:otherwise>

</c:choose>

 

(6)        c:forEach

반복문을 수행한다.

 

<%

for (int i = 0; i < 10; i++) {

        out.println(i);

}

%>

 

// 0 1 2 3 4 5 6 7 8 9 출력한다.

<c:forEach begin="0" end="9" var="i">

    <c:out value="${i}"/>

</c:forEach>

 

step 속성으로 간격을 조정한다.

 

<%

    for (int i = 0; i < 10; i += 2) {

        out.println(i);

    }

%>

 

// 0 2 4 6 8 출력한다.

<c:forEach begin="0" end="9" step="2" var="i">

    <c:out value="${i}"/>

</c:forEach>

 

java.util.Collection 객체나 배열에 대해서는 아래처럼 한다.

 

<%

    Collection books = (Collection) request.getAttribute("books");

    for (Iterator all = books.iterator(); all.hasNext();) {

        Book each = (Book) all.next();

        out.println(each.getIsbn());

    }

%>

 

<c:forEach items="${books}" var="book">

    <c:out value="${book.isbn}"/>

</c:forEach>

 

items 속성 값으로 기본 타입의 배열, java.util.Collection, java.util.Map, java.util.Iterator, java.util.Enumeration, java.lang.Object 배열, 콤마로 이루어진 java.lang.String 등의 객체를 사용할 있다.

java.util.Map 객체는 아래처럼 사용한다.

 

<%

    Map books = new HashMap();

    books.put("one", new Book("100"));

    books.put("two", new Book("200"));

    request.setAttribute("books", books);

%>

 

// one 100 two 200 출력한다. (순서는 정확하지 않다.)

<c:forEach items="${books}" var="book">

    <c:out value="${book.key}"/>

<c:out value="${book.value.isbn}"/>

</c:forEach>

 

(7)        c:forTokens

구분자로 반복문을 수행한다.

 

//1 2 3 4 출력한다.

<c:forTokens delims="," items="1,2,3,4" var="i">

    <c:out value="${i}"/>

</c:forTokens>

 

begin, end, step 속성으로 시작 위치, 종료 위치, 간격을 조정한다.

(8)        c:url, c:param

URL 처리한다.

 

// UserForm.jsp 출력한다.

<c:url value="UserForm.jsp"/>

 

// value 속성 값이 / 시작하면 컨텍스트를 포함한다.

// 컨텍스트를 web으로 가정하면 /web/UserForm.jsp 출력한다.

<c:url value="/UserForm.jsp"/>

 

// 다른 컨텍스트를 사용하려면 context 속성을 사용한다.

// 때는 value context 속성의 값이 모두 / 시작해야 한다.

// /other/UserForm.jsp 출력한다.

<c:url value="/UserForm.jsp" context="/other"/>

 

 

scope var 속성을 이용해서 URL 화면에 출력하지 않고 JSP 영역에 저장할 있다.

c:param 태그를 이용해서 Query String URL 추가한다.

 

// 파라미터 값을 escape한다. 따라서

// UserForm.jsp?name=%EC%A0%95%EB%8C%80%EB%A7%8C 출력한다.

<c:url value="UserForm.jsp">

    <c:param name="name" value="성선임"/>

</c:url>

 

c:param 태그는 c:import! c:redirect 태그에서도 동일한 방법으로 사용한다.

(9)        c:import!

특정 JSP 내용을 화면에 포함해서 출력한다.

 

// UserForm.jsp 내용을 화면에 포함하여 출력한다.

<c:import! url="UserForm.jsp"/>

 

데이터 인코딩에 문제가 있으면 charEncoding 속성을 사용한다.

<c:import! url="UserForm.jsp" charEncoding="UTF-8"/>

 

// context 속성을 이용하면 다른 어플리케이션의 JSP 포함할 있다.

<c:import! url="/UserForm.jsp" charEncoding="UTF-8" context="/other"/>

 

var varReader 속성을 이용하면 내용을 화면에 출력하지 않고 변수에 저장할 있다.

(10)    c:redirect

다른 경로로 이동한다.

 

// 앞에 데이터를 브라우저에 전송하는 코드가 없어야 한다.

<c:redirect url="http://www.naver.com"/>

 

(11)    c:catch

예외를 처리한다.

 

// var 속성 값으로 발생한 예외 객체를 page 영역에 저장한다.

<c:catch var="e">

<%

    if (true) throw new RuntimeException();

%>

</c:catch>

 

<c:out value="${e}"/>

 

6.           참고 자료

           The J2EE 1.3 Tutorial
http://java.sun.com/j2ee/1.3/docs/tutorial/doc/index.html

           The J2EE 1.4 Tutorial
http://java.sun.com/j2ee/1.4/docs/tutorial/doc/index.html

           JSTL in Action

           JSTL 1.0 Specification
http://jcp.org/aboutJava/communityprocess/final/jsr052


- JSP 에서JSTL사용을 위해서 

상단의  <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 와 같이

      core, functions, form 등을 추가를 해주어야 되는데 Uri 가 길다. 귀찮다.

그래서 찾은 것이 JSTL 다운받아서 특정 경로에 넣어주고

Web.xml 내의 <taglib> element 추가해서 변하게 불러 사용

이렇게 쓸일이 있겠냐마는 알고 있어서 나쁠 건 없으니깐...



---------- web.xml 에서

<jsp-config>
    <taglib>
         <taglib-uri>jstl-c</taglib-uri>
         <taglib-location>/WEB-INF/tlds/c.tld</taglib-location>
    </taglib>
    <taglib>
         <taglib-uri>jstl-fmt</taglib-uri>
         <taglib-location>/WEB-INF/tlds/fmt-html.tld</taglib-location>
    </taglib>
    <taglib>
         <taglib-uri>jstl-fn</taglib-uri>
         <taglib-location>/WEB-INF/tlds/fn.tld</taglib-location>
    </taglib>
</jsp-config>

  
 
위 항목 추가하고

---------- jsp 에서

<%@ taglib uri="jstl-c" prefix="c" %>

<%@ taglib uri="jstl-fmt" prefix="fmt" %>

<%@ taglib uri="jstl-fn" prefix="fn" %>





'공부 > JSTL' 카테고리의 다른 글

JSTL_[ forEach, forTokens 에서 varStatus 사용법 ]  (0) 2014.04.08
JSTL_[ Function(fn) 기초문법 ]  (0) 2013.03.26
JSTL_ [ Core(c) 기초문법 ]  (0) 2013.03.26

- 학교(서디대) 오픈 API 기초와 활용 수업 중 GooleMap API 사용법 

사이트 들어가도 친절하게 예제로 다 나와있으나 수업한거니 기재하는게 좋을 것 같다고 생각한다.

https://developers.google.com/maps/documentation/javascript/?hl=ko-KR

Google Maps JavaScript API v3


<!DOCTYPE html>
<html DIR="LTR">
<head>
<!--  meta : viewport 지도가 화면전체에 표시하고 사용자가 크기를 조정할수 없도록 지정함. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"  />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<title>Google Maps JavaScript API v3 예제: 간단한 지도</title>
<!-- 센서매개변수 False (데스크탑 사용시 GPS 로케이션 이 없으므로 -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function initialize() {
    // 사용자 위도/경도 지정(google.maps.LatLng)
        var myLatlng = new google.maps.LatLng(37.397, 127.644);
    // 지도 초기화(mpOptions)
        var myOptions = {
      // 줌 정도
        zoom: 4,
      // 위치(위도/경로)
        center: myLatlng,
      // 기본UI 를 사용하지 않도록설정(제거시 기본UI)
        disableDefaultUI: true,
      // 제공되는 컨트롤 추가( 컨트롤 표시 : True | 숨기기 : False )
        panControl: false,
        zoomControl: false,
        scaleControl: true,
      // 지도 타입설정
        mapTypeId: google.maps.MapTypeId.ROADMAP
      /*
        ROADMAP - 일반적인 기본 2D 타입의 Google 지도를 표시
        SATELLITC - 사진타일을 표시
        HYBRID - 사진타일과 도로, 도시 등 주요 지형지물을 담고있는 타일 레이어를 함께 표시
        TERRAIN - 고도 및 수경(산, 강등)을 표시하기 위한 물리적 기복타일을 표시
      */
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }
</script>
</head>
<!--  HTML 페이지가 로딩된 후 onload 이벤트를 받은 후에 Map 객체 생성하여 화면에 보여짐 -->
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

 

 

위에는 기본 GooGoleMap 소스 이고 화면에서 지도 설정인 Control 설정 부분

※ 본문 <body> 는 모두 동일하니 <script></script> 부분만 설명


<script type="text/javascript">
  function initialize() {
    var myOptions = {
        zoom: 4,
      /* 좌표 설정 */
      center: new google.maps.LatLng(-33, 151),
      /* Control 활성화 */
      mapTypeControl: true,
      /* Control 속성 */
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
      /* 확대 축소 활성화 */
      zoomControl: true,
      zoomControlOptions: {
        /* ZoomControl 미니로 설정 */
        style: google.maps.ZoomControlStyle.SMALL
    },
      /* 지도 종류설정 */
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"),
                                  myOptions);                         
  }

Control 설정을 하기위해서 해당 Control 활성화를 준다음 맵으로 설정부분을 입력하다.

 

사용자가 직접 해당 Control 의 위치를 변경 할 수 도 있다.

-    일단 위치설명

 

 

이 사진을 부고 직접 원하는 위치에 놓으면 된다.

-    사용 예


  function initialize() {
    var myOptions = {
      zoom: 12,
      center: new google.maps.LatLng(-28.643387, 153.612224),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      /* Control 사용을 위한 활성화 */
      mapTypeControl: true,
      /* 해당 Control 변경 옵션 설정 */
      mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
          position: google.maps.ControlPosition.BOTTOM_CENTER
      },
      panControl: true,
      panControlOptions: {
          position: google.maps.ControlPosition.TOP_RIGHT
      },
      zoomControl: true,
      zoomControlOptions: {
          style: google.maps.ZoomControlStyle.LARGE,
          position: google.maps.ControlPosition.LEFT_CENTER
      },
      scaleControl: true,
      scaleControlOptions: {
          position: google.maps.ControlPosition.TOP_LEFT
      },
      streetViewControl: true,
      streetViewControlOptions: {
          position: google.maps.ControlPosition.LEFT_TOP
      }
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"),
                                  myOptions);                         
  }

위와 똑같이 무든 Control 부분을 수정하기위해서 우선 해당 Control 활성화를 해준다음 작업을 해야한다.


+ Recent posts