넷빈(Netbeans)6.8에서 JSF 2.0 사용하기-소개-03

Written on 오후 10:08 by 강여사(J.Y.Kang)

이제 JSF 템플릿을 사용해보도록 하겠습니다.
우선 템플릿이 될 파일을 만듭니다.
프로젝트에서 마우스 오른쪽 클릭 - new - other

JavaServer Faces 에서 Facelet Templates 을 선택합니다.
다음 클릭

템플릿 이름은 template 으로 주고
아래 css 레이아웃에 아래쪽 3번째를 선택했습니다.
마침 클릭

기본 작업되어 있는 내용이 제시됩니다.
이번 예제에서는 계속 쓰던 css 를 이 템플릿을 이용하여 사용할 것이기 때문에 만들어진 내용을 다 지우고
아래 소스로 바꿔넣습니다.
=========================================================================
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">

<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<title><ui:insert name="title">Facelets Template</ui:insert></title>
</h:head>
<h:body>
<div id="mainContainer">
<div id="left" class="subContainer greyBox">
<ui:insert name="box">Box Content Here</ui:insert>
</div>
<div id="right" class="subContainer">
<img src="duke.png" alt="Duke waving" />
</div>
</div>
</h:body>
</html>
=========================================================================

그리고 이 파일을 실행해보면 (프로젝트를 다시 실행하고 주소 표시줄에 해당 파일 이름을 입력하면 됩니다)
다음 그림과 같이 css 가 잘 작업되어 나옵니다.

이제 템플릿의 클라이언트 파일을 만들도록 하겠습니다.
프로젝트에서 마우스 오른쪽 클릭 - new - other

JavaServer Faces 에서 Facelets Template Client 를 선택
다음 클릭

파일 이름은 greeting 이라고 주고
아래쪽의 template 파일에서 browse... 버튼을 눌러 좀전에 작성한 template.xhtml 파일을 선택합니다(select file) 클릭.

그런 다음 만들어진 greeting.xhtml 에서 <ui:define> 안의 내용을 title -> Greeting 으로 바꿉니다.

그리고 body 부분에다가 다음 소스로 바꿔 넣습니다.
============================================================================
<ui:composition template="./template.xhtml">
<ui:define name="title">
Greeting
</ui:define>
<ui:define name="box">
<h4>Hi, my name is Duke!</h4>
<h5>I'm thinking of a number
<br/>
between
<span class="highlight">0</span> and
<span class="highlight">10</span>.</h5>
<h5>Can you guess it?</h5>
<h:form>
<h:inputText size="2" maxlength="2" value="#{UserNumberBean.userNumber}" />
<h:commandButton id="submit" value="submit" action="response" />
</h:form>
</ui:define>
</ui:composition>
============================================================================

이제 response.xhtml 에서도 템플릿을 적용하도록 하겠습니다.
다음 내용으로 바디 부분을 변경합니다.
-----------------------------------------------------------------------------
<ui:composition template="./template.xhtml">
<ui:define name="title">
Response
</ui:define>
<ui:define name="box">
<h4><h:outputText escape="false" value="#{UserNumberBean.response}"/></h4>
<h:form prependId="false">
<h:commandButton id="backButton" value="Back" action="greeting" />
</h:form>
</ui:define>
</ui:composition>
-----------------------------------------------------------------------------

이제 첫 화면을 greeting이 뜨도록 하기 위해 web.xml 에서 다음과 같이 수정합니다.
web.xml 을 열어 Pages 탭을 누르면 welcome files 이 index.xhtml 로 되어 있습니다. 이를 greeting.xhtml 으로 바꿉니다.

그런 다음 프로젝트를 실행 (run) 합니다.(css 까지 잘 적용된 그림)

8을 주고 submit 버튼을 눌렀을 때 입니다. Yay~ 가 잘 나오는군요..

back 버튼도 잘 작동하는 지 확인해봅시다~

수고하셨습니다. *^^*