JSF(JavaServer Faces)는 사용자 인터페이스를 구축하기 위한 Java 기반의 웹 애플리케이션 프레임워크입니다.
JSF는 컴포넌트 기반 개발 모델을 제공하여 재사용 가능한 UI 컴포넌트를 개발하고 조립할 수 있도록 지원합니다.
1. JSF 주요 개념
- 관리 빈(Managed Bean): UI 컴포넌트와 상호작용하는 자바 클래스입니다.
- 페이지(Page): JSF의 뷰(View)로, Facelets 템플릿 언어를 사용하여 작성합니다.
- 컴포넌트(Component): 사용자 인터페이스를 구성하는 재사용 가능한 요소입니다.
- 내비게이션(Navigation): 페이지 간의 이동을 정의하고 제어합니다.
- 이벤트 처리(Event Handling): 사용자 인터랙션에 따른 이벤트를 처리합니다.
2. JSF 구성 요소
JSF는 다음과 같은 주요 구성 요소로 이루어져 있습니다.
- Facelets: JSF의 기본 뷰 템플릿 언어로, XHTML 기반의 선언적 문법을 사용합니다.
- 표현 언어(Expression Language, EL): 뷰에서 동적으로 값을 표현하고 접근하기 위한 언어입니다.
- 관리 빈(Managed Bean): 백엔드 로직을 담고 있는 자바 클래스로, JSF 컨테이너에 의해 관리됩니다.
- 컨버터(Converter)와 검증기(Validator): 데이터 변환과 유효성 검사를 수행합니다.
- 내비게이션 규칙(Navigation Rule): 페이지 간 이동을 정의합니다.
3. JSF 페이지 작성
JSF 페이지는 Facelets 템플릿 언어를 사용하여 작성합니다. 다음은 간단한 JSF 페이지 예제입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html xmlns=“http://www.w3.org/1999/xhtml”
xmlns:h=“http://xmlns.jcp.org/jsf/html”>
<h:head>
<title>Hello, World!</title>
</h:head>
<h:body>
<h:form>
<h:outputLabel for=“name” value=“Enter your name:” />
<h:inputText id=“name” value=“#{helloBean.name}” />
<h:commandButton value=“Submit” action=“#{helloBean.sayHello}” />
</h:form>
<h:outputText value=“#{helloBean.message}” />
</h:body>
</html>
|
cs |
위 예제에서는 <h:form>, <h:inputText>, <h:commandButton>, <h:outputText> 등의 JSF 컴포넌트를 사용하여 사용자 입력을 받고 결과를 출력하였습니다.
4. 관리 빈 작성
JSF에서 백엔드 로직은 관리 빈에 구현됩니다. 다음은 간단한 관리 빈 예제입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class HelloBean {
private String name;
private String message;
public String sayHello() {
message = “Hello, “ + name + “!”;
return null;
}
// Getters and Setters
}
|
cs |
위 예제에서는 @ManagedBean 어노테이션을 사용하여 HelloBean 클래스를 관리 빈으로 지정하였고, @SessionScoped 어노테이션을 사용하여 세션 범위로 지정하였습니다. sayHello() 메서드는 사용자 이름을 받아 인사말을 생성합니다.
5. 내비게이션 규칙 정의
JSF에서는 내비게이션 규칙을 사용하여 페이지 간 이동을 정의합니다. 내비게이션 규칙은 faces-config.xml 파일에 작성됩니다.
|
1
2
3
4
5
6
7
|
<navigation-rule>
<from-view-id>/hello.xhtml</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/welcome.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
|
cs |
위 예제에서는 /hello.xhtml 페이지에서 success라는 결과가 반환되면 /welcome.xhtml 페이지로 이동하도록 정의하였습니다.
JSF는 컴포넌트 기반의 개발 모델과 풍부한 UI 컴포넌트 라이브러리를 제공하여 웹 애플리케이션 개발을 단순화합니다. JSF를 사용하면 복잡한 사용자 인터페이스를 쉽게 구축하고 유지보수할 수 있습니다.