공부/JSF2014. 10. 7. 19:59

JSF 간단 예제 두번째

JSF 입력, 출력 예제

이번에는 이전 예제 보다 조금 더 복잡한 예제를 만들어 보겠습니다.

이번 예제는 이름을 입력하고 입력 받은 이름을 출력하는 예제이며 총 두개의 페이지가 필요합니다.

앞으로 만들게 될 모든 JSF 어플리케이션은 기본적으로 primefaces 구현체를 가지고 작업하게 되며 컴포넌트 태그의 앞에는 primefaces 를 의미하는 네임스페이스인 p: 를 붙여서 사용합니다.

이름 입력 페이지

페이지의 이름은 input.xhtml 로 만들겠습니다.

이 페이지에는 하나의 h:form 과 두개의 p:commandButton, 하나의 p:inputText JSF 컴포넌트를 사용하였습니다.

<!DOCTYPE html>
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<title>Facelets Hello Greeting</title>
</h:head>
<h:body>
	<p:messages id="messages" autoUpdate="true" />
	<h:form>
		<h2>Hello, my name is Hana. What's yours?</h2>
		<p:inputText id="username" title="My name is: "
			value="#{greeting.name}" required="true"
			requiredMessage="오류 : 이름을 입력해주세요." maxlength="25" />
		<p></p>
		<p:commandButton id="submit" value="Submit" action="response">
		</p:commandButton>
		<p:commandButton id="reset" value="Reset" type="reset">
		</p:commandButton>
	</h:form>
</h:body>
</html>

이 페이지에서 가장 복잡한 컴포넌트는 p:inputText 이며 여기에 사용된 속성에 대해 간단히 알아보겠습니다.

maxlength 속성은 입력필드에 최대로 입력 할 수 있는 값을 나타냅니다. required 속성은 입력필드에 빈값을 허용하지 않는다는것을 의미 합니다. requiredMessage 속성은 required 속성의 값이 true 일때 입력필드에 값이 채워지지 않은채 form 제출을 하였을 경우 보여줄 오류 메세지를 입력합니다. title 속성은 시각장애인을 위한 스크린리더를 위해 입력합니다. 마지막으로 value 속성은 표현식을 포함하고 있고 greeting 이라는 이름을 가진 bean 과 상호 작용을 하게 되며 greeting bean 의 구성요소(필드) 의 값을 바인딩 하게됩니다.

이 웹페이지는 Greeting managed bean 의 name 에 해당하는 구성요소(필드) 를 의미하는 #{greeting.nama} 이라는 표현언어(EL)를 통해 Greeting bean 의 name 구성요소(필드)와 연결이 됩니다. 참고로 표현식에서 사용한 greeting 은 Greeting 이라는 managed bean 의 이름 입니다. 이것은 @ManagedBean 어노테이션의 name 속성으로 임의로 다른 이름을 사용할 수도 있습니다. managed bean 의 @ManagedBean 에 name 속성이 지정되지 않을 경우 이 managed bean 은 항상 bean 의 첫번째 단어가 소문자인 이름으로 접근 할 수 있습니다.

Submit commandButton 컴포넌트의 action 속성에 지정된 값에 의해 버튼이 클릭 될때 response.xhtml 페이지를 표시 합니다.

이름 출력 페이지

페이지의 이름은 response.xhtml 로 만들겠습니다.

이 페이지의 결과는 첫 greeting.xhtml 페이지보다 훨씬 더 간단하며 표현식에 의해 Greeting managed bean 으로 부터 읽은 name 을 표시하고 이전 페이지로 돌아갈 수 있는 버튼이 있습니다.

<!DOCTYPE html>
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<title>Facelets Hello Response</title>
</h:head>
<h:body>
	<h:form>
		<h2>Hello, #{greeting.name}!</h2>
		<p></p>
		<p:commandButton id="back" value="Back" action="input" />
	</h:form>
</h:body>
</html>

managed bean

입력 받은 이름을 저장하고 response.xhtml 페이지에서 읽어 오기 위해 사용할 bean 을 하나 만들겠습니다.

이름은 Greeting 이며 이 클래스는 managed bean 클래스라고 부르며 표현식 #{greeting.name} 이 name 구성요소(필드)로 부터 값을 읽고 쓰는것을 지원하기 위해 getter 와 setter 메소드가 포함되어 있습니다. 위에서도 언급한것같이 기본적으로 표현식은 클래스의 첫문자를 소문자로된 이름을 참조 합니다.

package hello;

import javax.faces.bean.ManagedBean;

@ManagedBean
public class Greeting {
	private String name;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

}

실행

웹 서버(Tomcat) 을 실행하고 http://localhost:8080/hello/input.xhtml 에 접속하면 이름을 입력 받는 화면이 나타나며 이름을 입력하고 submit 버튼을 누르면 response.xhtml 페이지가 나타나면서 입력한 이름을 표시 하는것을 볼 수 있습니다.

만약 이름을 입력하지 않고 submit 버튼을 누르게 되면 아래 그림에서 처럼 requiredMessage 에 입력한 내용이 화면에 표시되는 것을 볼 수 있습니다.



출처


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

Managed bean 스코프에 대하여  (0) 2014.10.06
JSF 라이프 사이클 상세  (0) 2014.10.06
JSF 라이프 사이클 개요  (0) 2014.10.05
JSF 어플리케이션 Hello World 예제  (0) 2014.10.04
JavaServer Faces 어플리케이션 개발 준비  (0) 2014.10.04
Posted by #HanaLee

티스토리툴바