JSTL 정리 (2/2)

여기서부터는 다국어 내용을 처리하는 부분이다.

core 선언 이외에 별도의 선언이 필요하다.

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

fmt을 선언한뒤 URL을 가져온다.

1. 코딩

<h1>JSTL &lt;fmt:reqeustEncoding&gt; 태그</h1>

<form method="post">
    <input type="text" name="userName" placeholder="이름 입력" />
    <input type="submit" value="제출" />
</form>

<hr/>
<h2>submit 결과 표시</h2>
<%-- request.setCharacterEncoding("UTF-8"); --%>
<fmt:requestEncoding value="UTF-8" />
이름: ${param.userName}<br/>

1. 결과

간단한 출력코드이나

fmt:requestEncoding 을 이용하여 인코딩을 해주었다.

2. 코딩

<h1>JSTL &lt;fmt:formatNumber&gt; 태그</h1>
<fmt:formatNumber value="123456789.123456789">
</fmt:formatNumber>
<br/>

<%-- 
groupingUsed 속성: 1000자리 구분자(,)를 표시할지 말지를 설정
    기본값은 true
--%>
<fmt:formatNumber value="123456789.123456789"
    groupingUsed="false">
</fmt:formatNumber>
<br/>

<%-- 
maxFractionDigits 속성: 소숫점 몇째 자리까지 표시할 지를 설정
    기본값은 3. 반올림된 값이 표시됨.
--%>
<fmt:formatNumber value="123456789.123456789"
    maxFractionDigits="5">
</fmt:formatNumber>
<br/>

<fmt:formatNumber value="0.51" type="percent">
</fmt:formatNumber>
<br/>

<fmt:formatNumber value="1234" type="currency"
    currencySymbol="$" />
<br/>

2. 결과 

통화나 숫자, 백분률을 표현할 때 필요한 코드이다.

3. 코딩

<h1>JSTL &lt;fmt:formatDate&gt; 태그</h1>
<%-- 현재 시간 정보를 저장하는 변수를 선언 --%>
<c:set var="now" value="<%=new Date() %>"></c:set>
${now}<br/>

<%-- 
type 속성: 시간 정보(Date 객체)를 어떤 타입으로 표시할 것인지 설정
    1) date: 날짜만 표시(기본값)
    2) time: 시간만 표시
    3) both: 날짜와 시간을 표시
--%>
<fmt:formatDate value="${now}" type="both"/>
<br/>

<%-- 
dateStyle 속성: 날짜를 어떤 표시 형식으로 보여줄지를 설정
    1) long: 년, 월, 일, 요일 표시(요일은 간략하게)
    2) short: 년, 월, 일 표시(년도는 2자리)
    3) full: 년, 월, 일, 요일 표시(요일을 전체 이름으로)
timeStyle 속성: 시간을 어떤 표시 형식으로 보여줄지를 설정
    1) long: 시, 분, 초
    2) short: 시, 분
    3) full: 시, 분, 초, 지역표준시간대(KST)
--%>
<fmt:formatDate value="${now}" type="both"
    dateStyle="full" timeStyle="full" />
<br/>

<%-- 
pattern 속성: 날짜/시간 정보를 원하는 패턴으로 설정
--%>
<fmt:formatDate value="${now}"
    pattern="yyyy/MM/dd HH:mm:ss"/>
<br/>

3. 결과

시간을 표시하는 메소드이다.

pattern을 통해 형식도 설정 해주는 것이 가능하다.

형식은 자바의 date 함수와 같은 것으로 보인다.

4. 코딩

<h1>JSTL &lt;fmt:setLocale&gt; 태그</h1>

<fmt:setLocale value="ja_JP"/>
<%-- 
로케일(Locale): 숫자, 통화, 시간 등의 문자열을 어떻게 표시할 지를 설정
로케일 설정 방식: 언어코드_국가코드
    ko_KR: 한국어_대한민국
    en_US: 영어_미국
    en_UK: 영어_영국
    zh_CN: 중국어_중국(간체, simplified Chinese)
    zh_TW: 중국어_대만(번체, traditional Chinese)
    ja_JP: 일본어_일본
    de_DE: 독일어_독일
    fr_FR: 프랑스어_프랑스
--%>

<c:set var="now" value="<%=new Date() %>"></c:set>

<fmt:formatDate value="${now}" type="both"
    dateStyle="full" timeStyle="full" />
<br/>

<fmt:formatNumber value="1000.50" type="currency" />
<br/>

<fmt:formatNumber value="1000.50" />

4. 결과

setLocale을 통해 국가 설정을 해준 모습니다.

테스트는 프랑스로 설정하였으며

주석에 기록한 나른 나라들로 바꿔준다면 출력값이 그 나라에 맞추어 바뀐다.

5. 코딩

<h1>JSTL &lt;fmt:bundle&gt; 태그</h1>

<fmt:setLocale value="ko_KR"/>
<fmt:bundle basename="edu.web.i18n.login">
<form>
    <fmt:message key="login.label.id" />:
    <input type="text" name="userId" />
    <br/>
    <fmt:message key="login.label.pw" />:
    <input type="password" name="userPwd" />
    <br/>
    <fmt:message key="login.btn.login" var="btn_login" />
    <input type="submit" value="${btn_login}" /> 
</form>
</fmt:bundle>

</body>

5. 결과

여기서 보이는 아이디, 비밀번호는 속성값이다.

본문에서 i18n 패키지에서 가져오는 속성값을 볼 수 있을 것이다.

US와 login.properties의 내용은 아래와 같다.

login.label.id=User ID
login.label.pw=Password
login.btn.login=Log In

KR의 내용은 다음과 같다.

login.label.id=\uC544\uC774\uB514
login.label.pw=\uBE44\uBC00\uBC88\uD638
login.btn.login=\uB85C\uADF8\uC778

이클립스의 경우 id에 아,이,디 라고 적을 때마다 자동 변환되어 기록되지만

intellij idea의 경우 변환되지 않는다.

변환방법을 찾아볼 필요가 있을 것 같다.

각 나라 속성이 있으면 각 나라의 프로퍼티를 따라가지만

찾는 나라의 프로퍼티가 없을 경우

login.properties를 찾아간다.

디폴트 값이다.

6. 코딩

<c:choose>
    <c:when test="${param.lang eq 'ko'}">
        <c:set var="lang" value="ko_KR" />
    </c:when>
    <c:when test="${param.lang eq 'en'}">
        <c:set var="lang" value="en_US" />
    </c:when>
    <c:otherwise>
        <c:set var="lang" value="ko_KR" />
    </c:otherwise>
</c:choose>

<fmt:setLocale value="${lang}" />
<fmt:setBundle basename="edu.web.i18n.login" />

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
</head>
<body>

<h1>로그인 양식</h1>
<ul>
    <li><a href="14_bundle2.jsp?lang=ko">한국어</a></li>
    <li><a href="14_bundle2.jsp?lang=en">영어</a></li>
</ul>

<form>
    <fmt:message key="login.label.id" />:
    <input type="text" name="userId" />
    <br/>
    <fmt:message key="login.label.pw" />:
    <input type="password" name="userPwd" />
    <br/>
    <fmt:message key="login.btn.login" var="btn_login" />
    <input type="submit" value="${btn_login}" />
</form>

6. 결과

choose 코드에서 언어를 무엇으로 할 것인지 처리하는 과정을 거친다.

최초의 페이지는 otherwise로 한국어로 뜨게 된다.

다음으로 국가 설정을 바꿔주는 href 코드를 이용해 스스로를 다시 띄우면서

설정을 바꿔주도록 한다.

끗