본문 바로가기

Paul Work/HTML

JSTL과 Velocity를 활용한 UI 레이어 구현 방법

==========================================================================================================
자료출처 : http://wiki.javajigi.net/pages/viewpage.action?pageId=210#JSTL%EA%B3%BCVelocity%EB%A5%BC%ED%99%9C%EC%9A%A9%ED%95%9CUI%EB%A0%88%EC%9D%B4%EC%96%B4%EA%B5%AC%ED%98%84%EB%B0%A9%EB%B2%95-%EC%86%8C%EA%B0%9C
자료 스크랩에 대해 문제가 된다면 삭제 토록 하겠습니다.
연락처 : baboty7@paran.com
==========================================================================================================
 
JSTL

소개

  • J2EE 소형 클라이언트 기술인 JSP(JavaServer Pages)가 지난 몇 년 동안 널리 일반화되면서 독립적인 개발자들은 많은 사용자 정의 JSP 태그 라이브러리를 만들었습니다. 이러한 태그 라이브러리는 대부분 서로 다른 목표를 달성하도록 작성되었지만 반복, 조건 등의 일반적인 작업을 위한 유사한 솔루션을 제공하는 경향이 있습니다.
    유사하고 일반적이 문제점을 해결하는 독립적인 태그 라이브러리에 대한 필요성을 줄이기 위해 Java Community Process(JSR 52)의 지원하에 JSTL(JavaServer Pages Standard Tag Library)이 개발되었습니다. JSTL은 이러한 일반 기능을 처리하는 하나의 표준 솔루션을 제공합니다. (말그대로 표준태그라이브러리)
  • JSTL의 주요 강점 중 하나는 서블릿 컨텍스트에 저장된 데이타 같은 애플리케이션 데이타를 액세스 및 조작하는 쉬운 방법을 제공하는 간단한 EL을 사용할 수 있다는 것입니다.

EL 에 대하여

설치 방법

  • http://cvs.apache.org/builds/jakarta-taglibs/nightly/ 에서 다운
    \jakarta-taglibs-20051024\jakarta-taglibs\standard\lib
    에서 jstl 과 standard 파일 을 이 두개의 jar 파일을 우리의 웹애플리케이션의 /WEB-INF/lib 폴더에 넣습니다
    그 다음 tld 폴더의 tld 파일을 /WEB-INF/lib/tld 폴더 아래 넣습니다.
  • web.xml 에
         <!-- jstl 1.2 taglig -->
         <taglib>
           <taglib-uri>jstl-c</taglib-uri>
           <taglib-location>/WEB-INF/tlds/jstl/c.tld</taglib-location>
        </taglib>
        <taglib>
           <taglib-uri>jstl-fmt</taglib-uri>
           <taglib-location>/WEB-INF/tlds/jstl/fmt.tld</taglib-location>
        </taglib>
        <taglib>
          <taglib-uri>jstl-fn</taglib-uri>
          <taglib-location>/WEB-INF/tlds/jstl/fn.tld</taglib-location>
        </taglib>
        

    를 추가한다.

  • jsp 에 추가
         <%@ taglib uri="jstl-c" prefix="c" %>
        <%@ taglib uri="jstl-fmt" prefix="fmt" %>
        <%@ taglib uri="jstl-fn" prefix="fn" %>
         

사용 예(기본 문법)

Area Subfunction Prefix Description
Core Variable support c 변수지원
Core Flow control c 흐름제어
Core URL management c URL 처리
Core Miscellaneous c  
XML Core x XML 코어
XML Flow control x 흐름 제어
XML Transformation x XML 변환
I18n Locale fmt 지역
I18n Message formatting fmt 메시지 형식
I18n Number and date formatting fmt 숫자 및 날짜 형식
Database SQL sql SQL
Functions Collection length fn 콜렉션 처리
Functions String manipulation fn String 처리

http://java.sun.com/products/jsp/jstl/1.1/docs/tlddocs/index.html 참고

  • 변수지원태그
    set: <c:set var="varName" scope="session" value="someValue">
    var속성은 값을 지정할 변수의 이름
    <c:set t a r g e t ="" property="userName" value="someValue">
    target : 빈 프로퍼티나 맵 값을 설정한다.(Object)
    var와 target을 동시에 사용할 수 없다.
    scope속성은 변수가 위치하는 영역(page,request,session,application)
    value :저장하는 값
    remove :<c:remove var="varName" scope="session">
    var :삭제할 변수의 이름
    scope 속성은 삭제할 변수의 영역
    out : <c:out value="">
    value속성은 출력하려는 값
    catch : <c:catch var="">
    </c:catch>
    예외사항이 한번이라도 발생시 </c:catch>로 점프
    var에 정의 된 객체를 페이지 생존범위에 자동으로 묶어 나중에 var에 정의된 변수이름을 사용할 수 있다.
    예외 발생시
    : var 속성 사용시 exception 객체를 설정.
    <c:catch> 문 밖으로 제어가 떨어진다
 
    <c:set var="num1" value="${20}" />
	<c:set var="num2">
		10.5
	</c:set>
	
	<c:set var="today" value="<%= new java.util.Date()%>" /><br>

	변수 num1 = ${num1} <br>
	변수 num2 = ${num2} <br>
	num1 + num2 = ${num1+num2}<br>
	오늘은 ${today}입니다.
	
	<c:remove var="num1" scope="page" />
	
	<p>
	삭제한 후의  num1=${num1} <br>
	삭제한 후의 num1 + num2 = ${num1 + num2}
   
 
       <c:catch var="myException">
     	It's catch
         <% int x = 10/0; %>
         실행안됨.
       </c:catch>
       <c:if test="${myException != null}">
           발생된 예외는 : ${myException.message} <br>
       </c:if>
     
  • URL 관련
    import : <c:import url=""/>
    url속성에 명기한 파일을 현재 컨텐츠에 포함
    param : <c:param name="" value=""/>
    <jsp:param />과 같은 역할
    url : <c:url value="" var=""/>
    value에 들어있는 상대 경로 뒤에 jsessionid를 추가한다.(쿠키를 사용 못하는 경우)
    var : 옵션 속성으로 url을 참조하기 위해쓴다.
    redirect :<c:redirect url="' context=""/>
    context : url경로의 이름
 
    <c:import url="Header.jsp" >
	<c:param name="subTitle" value="This is subTitle"/>
    </c:import>
   
  • 흐름제어 태그
    if : <c:if test="조건"> </c:if>
    test속성의 값에는 "조건"이 오는데 이 조건문의 결과값이 true 면 처리
     
       <c:if test="true">
         무조건 수행<br>
        </c:if>
    
        <c:if test="${param.name == 'bk'}">
          name 파라미터의 값이 ${param.name}입니다 <br>
        </c:if>
    
        <c:if test="${param.name eq 'bk'}">
          name 파라미터의 값이 ${param.name}입니다 <br>
        </c:if>
    
        <c:if test="${18 < param.age}">
    	 당신의 나이는 18세 이상입니다.
        </c:if>   
       

    choose,when,otherwise : <c:choose>
    <c:when test="조건">
    </c:when>
    <c:otherwise>
    </c:otherwise>
    </c:choose>
    choose 태그는 자바의 switch 문과 if-else 의 혼합한 형태, 다수의 조건문을 하나의 블록에서 수행하고자 할때 사용
    -> switch문과의 차이점은 중간에 빠져 나가지 못한다는 것이다.
    -> when 의 어느 하나에도 실행되지 않을때 otherwise 실행
    -> otherswise 태그가 반드시 있어야 하는것은 아니다.

 
     <c:choose>
       <c:when test="${param.name == 'bk' }">
	<li>당신의 이름은 ${param.name}입니다.
     </c:when>
     <c:when test="${param.age > 18 }">
	<li>당신은 18세 이상입니다.
     </c:when>

     <c:otherwise>
	<li> 당신은 'bk'가 아니고 18세 이상이 아닙니다.
     </c:otherwise>
     </c:choose> 
    

forEach : <c:forEach var="변수" items="아이템" begin="시작값" end="끝값" step="증가값">
</c:forEach>
item 속성에 올수 있는 것들로는 Map,배열,Collection 이 있다.
varStatus는 javax.servlet.jsp.jstl.core.LoopTagStatus 객체 인스턴스변수를 만들며 count라는 프로퍼티가 있어 몇번의 회전인지 알 수있다.

 
       <c:forEach var="i" begin="1" end="9">
	<li>4 *${i} = ${4 *i}
       </c:forEach>

       <h4>int 형 배열</h4>

       <c:forEach var="i" items="${intArray}" begin="2" end="4">
	[${i}]
       </c:forEach>

       <h4>Map</h4>
       <c:forEach var="i" items="${map}">
	  ${i.key} = ${i.value}<br>
       </c:forEach>

       <c:forEach var="member" items="${memberList}" varStatus="memberLoopCount">
	  회원 $(memberLoopCount.count} : ${member} <br>
       </c:forEach>
     

forTokens : <c:forTockens var="token" items="문자열" delins="구분자">
</c:forTockens>
forTokens 태그는 StringTokenizer 와 같은 기능을 제공한다.

 
       <c:forTokens var="token" items="빨강색, 주황색, 노란색, 초록색, 파랑색, 남색, 보라색" delims=",">
     	${token}<br>
       </c:forTokens>
     
  • 숫자 및 날짜 지원 형식
    The JSTL formatting actions allow various data elements in a JSP page, such as numbers,dates and times
    to be formatted and parsed in a locale-sensitive or customized manner.

formatNumber : 숫자 형식을 표현

 
 
      number  : <fmt:formatNumber value="9876543.61" type="number"/>
      currency: <fmt:formatNumber value="9876543.61" type="currency"/>
      percent : <fmt:formatNumber type="percent">9876543.61</fmt:formatNumber>

      pattern=".000"    :<fmt:formatNumber value="9876543.61" pattern=".000" />
      pattern="#,#00.0#":<fmt:formatNumber value="9876543.612345" pattern="#,#00.0#"/>
    

parseNumber : 정해진 패턴을 문자열에서 수치를 파싱해내는 태그
formatDate :날짜 형식을 표현

 
  <jsp:useBean id="now" class="java.util.Date"/>
	
    <c:out value="${now}"/>
      date: <fmt:formatDate value="${now}" type="date"/>
      time: <fmt:formatDate value="${now}" type="time"/>
      both: <fmt:formatDate value="${now}" type="both"/>

      default:<fmt:formatDate value="${now}"
                   type="both" dateStyle="default" timeStyle="default"/>
      short  :<fmt:formatDate value="${now}"
                   type="both" dateStyle="short"   timeStyle="short"  />
      medium :<fmt:formatDate value="${now}"
                   type="both" dateStyle="medium"  timeStyle="medium" />
      long   :<fmt:formatDate value="${now}"
                   type="both" dateStyle="long"    timeStyle="long"   />
      full   :<fmt:formatDate value="${now}"
                   type="both" dateStyle="full"    timeStyle="full"   />

      pattern="yyyy년MM월dd일 HH시mm분ss초"
              <fmt:formatDate value="${now}" type="both"
                   pattern="yyyy년MM월dd일 HH시mm분ss초"/>            
              <fmt:formatDate value="${now}" pattern="yyyy/MM/dd" />

parseDate :정해진 패턴의 문자열에서 날짜를 파싱해내는 태그
timeZone : <fmt:timeZone value=""/>
setTimeZone : <fmt:timeZone value="" var="" scope=""/>

  • 국제화
    message <fmt:message
    setLocale <fmt:setLocale
    bundle <fmt:bundle
    setBundle <fmt:setBundle
    param <fmt:param
    requestEncoding <fmt:requestEncoding
  • SQL
    <sql:query sql="sqlQuery" var="varName" [scope="{page|request|session|application}"]
    [dataSource="dataSource"] [maxRows="maxRows"] [startRow="startRow"]>
    <sql:param>
    </sql:query>
         <sql:query var="customers" dataSource="${dataSource}">
          SELECT * FROM customers
          WHERE country ='China'
          ORDER BY lastname
         </sql:query>
         
         <table>
          <c:forEach var="row" items="">
             <tr>
               <td><c:out value="${row.lastName}"/></td>
               <td><c:out value="${row.firstName}"/></td>
               <td><c:out value="${row.address}"/></td>
             </tr>
          </c:forEach>
         </table>   

<sql:update>
<sql:setDataSource>
<sql:param>
<sql:dateParam>

  • XML 코어
    <x:parse>
    <x:out>
    <x:set>
  • 흐름제어
    <x:if>
    <x:choose>
    <x:when>
    <x:otherwise>
    <x:forEach>
  • XML 변환
    <x:transform>
    <x:param>
  • function
    contains
    containsIgnoreCase
    endsWith
    escapeXml
    indexOf
    join
    length
    replace
    split
    startsWith
    substring
    substringAfter
    substringBefore
    toLowerCase
    toUpperCase
    trim
         <c:if test="${fn:contains(name, searchString)}">
         <c:if test="${fn:containsIgnoreCase(name, searchString)}">
         <c:if test="${fn:endsWith(filename, ".txt")}">
         ${fn:escapeXml(param:info)}
         ${fn:indexOf(name, "-")}
         ${fn:join(array, ";")} 
         You have ${fn:length(shoppingCart.products)} in your shopping cart.
         ${fn:replace(text, "-", "•")}
         ${fn:split(customerNames, ";")}
         <c:if test="${fn:startsWith(product.id, "100-")}">
         P.O. Box: ${fn:substring(zip, 6, -1)}
         P.O. Box: ${fn:substringAfter(zip, "-")}
         Zip (without P.O. Box): ${fn:substringBefore(zip, "-")}
         Product name: ${fn.toLowerCase(product.name)}
         Product name: ${fn.UpperCase(product.name)}
         Name: ${fn.trim(name)}
       

Velocity

Velocity

소개

  • 벨로시티란 자바 기반의 템플릿 엔진입니다.
    벨로시티를 활용하면 간단하면서도 강력한 템플릿 언어를 통하여 자바 코드에 정의된 객체를 액세스할 수 있습니다.
    벨로시티를 웹 개발에 사용하면, 웹 디자이너는 자바 프로그래머와 병렬로 작업을 할 수 있으며 MVC(모델-뷰-컨트롤러) 모델에 따라 웹 사이트를 개발할 수 있습니다. 더 자세히 설명하면 웹 페이지 디자이너의 경우 보기 좋은 사이트를 만드는 데만 집중하면 되고, 프로그래머는 잘 동작하는 코드를 만드는 데만 집중하면 된다는 뜻입니다.
    벨로시티는 웹 페이지와 자바 코드를 분리하여, 장기적인 측면에서 볼 때 웹 사이트를 손쉽게 유지보수할 수 있도록 하고, 자바 서버 페이지 (JSP) 또는 PHP를 대체할 수 있는 방안을 제시합니다. 벨로시티의 쓰임새는 웹 사이트에 국한되지 않습니다. 예를 들면, 템플릿으로부터 SQL이나 포스트스크립트, 또는 XML(XML 변환에 대해서는 벨로시티 툴 중 하나인 아나키아(Anakia)를 참조)문서를 생성하는 데 쓰일 수 있습니다. 벨로시티는 스탠드얼론 유틸리티처럼 사용하여 소스 코드나 리포트를 생성할 수도 있고, 다른 시스템의 컴포넌트로 통합할 수도 있습니다. 또한 벨로시티는 터빈 (또다른 자카르타 서브 프로젝트 중 하나) 웹 애플리케이션 프레임웍에 템플릿 서비스를 제공합니다. 벨로시티와 터빈을 조합하면 진정한 MVC 모델에 따라 웹 애플리케이션을 개발할 수 있습니다

설치 방법

  • web.xml 수정
       <servlet>
         <servlet-name>velocity</servlet-name>
            <servlet-class>org.apache.velocity.tools.view.servlet.VelocityViewServlet
         </servlet-class>
         <init-param>
            <param-name>org.apache.velocity.toolbox</param-name>
            <param-value>/WEB-INF/velocity-toolbox.xml</param-value>
         </init-param>
         <init-param>
            <param-name>org.apache.velocity.properties</param-name>
            <param-value>/WEB-INF/velocity.properties</param-value>
           </init-param>
         <load-on-startup>10</load-on-startup>
       </servlet>
       <servlet-mapping>
          <servlet-name>velocity</servlet-name>
          <url-pattern>*.vm</url-pattern>
       </servlet-mapping>
     
  • 파일 생성
    velocity.properties 파일
    velocity-toolbox.xml 을 생성 한 후 web_inf/lib 아래 둡니다.
    velocity-toolbox.xml
    <tool>
       <key>date</key>
       <scope>application</scope>
       <class>org.apache.velocity.tools.generic.DateTool</class>
     </tool>
    
      <tool>
      <key>math</key>
      <scope>application</scope>
      <class>org.apache.velocity.tools.generic.MathTool</class>
    </tool>
     ...
    

사용 예(기본 문법)

Velocity Template Language(VTL) 은 Template 에서 사용되는 Velocity 고유의 언어를 의미합니다.

  • References(참조형)
    Variables(변수) - 다음과 같이 $를 먼저 쓰고 그 뒤에 식별자를 적어주는 방식으로 사용
    ex) $foo
    Property(특성) - $ 다음에 식별자를 쓰고, 마침표(.)후에 다시 식별자의 형태로 사용
    ex) $foo.name
    Method(메소드) - $다음에 식별자를 쓰고 마침표 후에 호출할 메소드의 이름을 적는다
    ex)$foo.getName()
  • Directive(지시형)
    #set - reference 의 값을 설정한다.
    #if/elseif/else - 조건문 제어
    #foreach ---- 제어
    #include - velocity 로 파싱되지 않는 파일의 출력
    #parse -velocity 로 파싱된 파일 출력
    #stop -template 엔진의 정지
    #macro - 반복적으로 사용할 vm정의
  • Comment (주석)
      ## - 한줄짜리 주석
      #* ... *# 여러줄 짜리 주석
      
     ##This is an example velocity template
     #set($this = "Velocity")
       $this is great! But It's so hard.

     #foreach($name in $list)
       $name is great!
     #end

     #set($condition = true)
     #if ($condition)
        The condition is true!
     #else
       The condition is false
     #end
  

http://jakarta.apache.org/velocity/docs/vtl-reference-guide.html

Tool box 에 대해

VelocityTools is a collection of Velocity subprojects with a common goal of creating tools and infrastructure for building both web and non-web applications using the Velocity template engine.

  • Generic Tool (http://jakarta.apache.org/velocity/tools/generic/)
    *DateTool : A tool for manipulating and formatting dates
    *MathTool :A tool for performing floating point math.
    *NumberTool :A tool for formatting numbers
    *IteratorTool :A convenience tool to use with #foreach loops. It wraps a list to let the designer specify a
    condition to terminate the loop, and reuse the same list in different loops.
    *RenderTool:A tool to evaluate and render arbitrary strings of VTL (Velocity Template Language).
          Example uses:
      $date                         -> Oct 19, 2003 9:54:50 PM
      $date.long                    -> October 19, 2003 9:54:50 PM PDT
      $date.medium_time             -> 9:54:50 PM
      $date.full_date               -> Sunday, October 19, 2003
      $date.get('default','short')  -> Oct 19, 2003 9:54 PM
      $date.get('yyyy-M-d H:m:s')   -> 2003-10-19 21:54:50
     
      $myDate                        -> Tue Oct 07 03:14:50 PDT 2003
      $date.format('medium',$myDate) -> Oct 7, 2003 3:14:50 AM 
    
    
        
  • VelocityView (http://jakarta.apache.org/velocity/tools/view/)

JSTL 과 Velocity

같은 로직에 대해 두가지를 사용하여 각각 구현

다양한 View Technology에 대한 실행 속도 비교.

현재 개발중 우리들이 많이 사용하는 View 기술들을 이용하여 실행속도를 비교해 보면 다음 그래프와 같다.

이 그래프는 100명의 동시 접속자에 대한 테스트를 진행한 결과이다. 이 그래프는 Expert One-on-One J2EE Design and Development 책의 Chapter 15의 Web-Tier Performance Issues에서 인용하였다.

위와 같이 테스트를 진행한 결과 JSP는 초당 54페이지, Velocity는 초당 112페이지, XMLC는 초당 128 페이지, XSLT는 6,7페이지를 서비스하였다. 이 부분에서 눈여겨 볼 부분은 Velocity에 대한 결과라할 수 있다. 국내에서는 아직까지 많이 사용되지 않는 기술이지만 위의 실행 결과를 보면 사용할만한 가치가 있다는 것을 확인할 수 있다.

참고문헌

문서에 대하여

최초작성자 : 박재성
최초작성일 : 2005년 10월 15일
버전 : 1.0
문서이력 :

  • 2005년 10월 15일 박재성 문서 최초 생성 : 강좌 문서 템플릿 및 JSP와 Velocity에 대한 속도 비교문서 추가