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

Written on 오후 6:38 by 강여사(J.Y.Kang)

이제 페이지에 좀전에 작성한 빈을 연결하도록 하겠습니다.

우선 기본으로 만들어진 index.xhtml 을 엽니다.
바디부분에 다음과 같은 내용을 작성해서 넣습니다.
------------------------------------------------------------------
<h:body>
<h5>Can you Guess It?</h5>
<h:form>
<h:inputText size="2" maxlength="15" >
</h:inputText>
<h:commandButton id="submit" value="submit" >
</h:commandButton>
</h:form>

------------------------------------------------------------------
태그를 동적으로 만들어 놓고 빈과의 연결을 시도합니다.
-------------------------------------------------------------------
<h:body>
<h5>Can you Guess It?</h5>
<h:form>
<h:inputText size="2" maxlength="15" value="#{UserNumberBean.userNumber}">
</h:inputText>
<h:commandButton id="submit" value="submit" >
</h:commandButton>
</h:form>
-------------------------------------------------------------------

-------------------------------------------------------------------
<h:body>
<h5>Can you Guess It?</h5>
<h:form>
<h:inputText size="2" maxlength="15" value="#{UserNumberBean.userNumber}">
</h:inputText>
<h:commandButton id="submit" value="submit" action="response" >
</h:commandButton>
</h:form>
-------------------------------------------------------------------

이제 페이지 네비게이션을 위한 구성파일을 만들도록 하겠습니다.

이전과는 달리 JSF 프레임워크를 선택하였더라도 facelets를 선택했다면 face-config.xml 은 기본 작업되지 않습니다. 따라서 이 파일을 만들어야 합니다.

프로젝트에서 마우스 오른쪽 클릭 - new - other

JavaServer Faces 를 선택하고 JSF Configuration File 을 선택합니다.
다음 클릭

파일 이름으로 faces-config 를 줍니다
마침 클릭

만들어진 구성파일에 네비게이션 룰을 다음과 같이 작성하여 넣습니다.
--------------------------------------------------------------------
<navigation-rule>
<from-view-id>/index.xhtml</from-view-id>

<navigation-case>
<from-outcome>response</from-outcome>
<to-view-id>/response.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
--------------------------------------------------------------------

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

JavaServer Faces 에서 JSF Page 선택
다음 클릭

이름은 response 라고 줍니다.
마침 클릭

그리고 body 부분에 다음과 같이 작성해 넣습니다.
==================================================================
<body>
<div id="mainContainer">
<div id="left" class="subContainer greyBox">
<h4><h:outputText value="#{UserNumberBean.response}"/></h4>

<h:form>
<h:commandButton id="backButton" value="Back" action="index" />
</h:form>
</div>
<div id="right" class="subContainer">
<img src="duke.png" alt="Duke waving" />

</div>
</div>
</body>
===================================================================

이번 예제에서 사용할 stylesheet.css 를 해당 폴더(css)에 넣습니다. - 첨부파일 참조

프로젝트를 실행합니다.
숫자를 입력할 수 있는 칸이 뜹니다.
3으로 입력하고 submit 버튼을 누릅니다.

잘못된 추측이라고 나옵니다.

현재 이 상태에는 약간의 오류가 있는데 첫번째는 <p> 태그가 그냥 나온다는 점이고, 두번째는 back 버튼이 정상 동작하지 않습니다.
따라서 아까의 부분에 다음의 내용을 추가합니다.
-----------------------------------------------------------------------------
<h4><h:outputText escape="false" value="#{UserNumberBean.response}"/></h4>
-----------------------------------------------------------------------------

-----------------------------------------------------------------------------
<h:form prependId="false">
-----------------------------------------------------------------------------

이제 다시 프로젝트를 실행(run)한 후 서버(server.log)창에서 적혀있는 값을 확인하여 그 값을 넣어줍니다.

그럼 다음 그림과 같이 맞다고 나옵니다.

이제 다음에는 여기에 템플릿을 사용해보도록 하겠습니다. 계속...