JSF PrimeFaces 자습서
JSF Primefaces 자습서에 오신 것을 환영합니다. JavaServer Faces는 요즘 Java 웹 애플리케이션 사용자 인터페이스를 구현하는 데 사용되는 주요 프레임워크 중 하나입니다. JSF는 웹 애플리케이션, 특히 인터페이스와 관련된 부분을 구성 요소화했습니다. 즉, JSF의 모든 단일 보기는 브라우저로 렌더링될 때 HTML로 디코딩되는 구성 요소의 서버 측 트리를 사용하여 구축되었습니다.
JSF Primefaces 자습서
JSF 2의 새로운 기능
우리가 알고 있듯이 JavaServer Faces는 풍부한 사용자 인터페이스 웹 페이지를 개발하기 위한 프레임워크입니다. JSF는 2013년 5월에 출시된 JSF 2.2의 최종 릴리스인 여러 Java Community Request JSR에 도입되었습니다. JSF 1.x와 달리 JSF 2.x는 JSF 관리 선언을 위한 주석 사용과 같은 많은 기능과 함께 제공되었습니다. Bean, Converters, Validators, Scopes 등이 전부가 아닙니다. JSF 2는 View Scope, Custom Scope, Flow Scope, Conversation Scope 등과 같은 새로운 범위를 제공했습니다. 또한 JSF 2에 추가된 가장 놀라운 기능인 Ajax 개념을 잊을 수 없습니다. JSF 2에서 Ajax는 본질적으로 JSF 프레임워크에 내장되어 있습니다. 따라서 모든 JSF 구성 요소는 단순히 Ajax 항목을 추가하여 ajax화할 수 있습니다. 탐색 규칙도 변경되었으며 훨씬 쉬워졌습니다. 다음 튜토리얼에서는 JSF 2에 추가된 기능에 대해 자세히 다룰 예정이며, 이 튜토리얼에서는 간단한 JSF 애플리케이션과 Primefaces 태그를 사용하여 특정 비즈니스 시나리오를 구현하는 방법에 대한 기본 샘플을 만들 것입니다.
자습서를 완료하기 위해 사용한 도구
이 자습서를 시작하려면 다음 개발 도구를 사용해야 합니다.
- 톰캣 7
- 이클립스 IDE
- 메이븐 3
- JSF 2/Primefaces 5
이클립스 프로젝트 생성
Eclipse IDE는 Dynamic Project 우산 아래에서 웹 프로젝트 개발을 지원합니다. 동적 프로젝트를 만들려면 다음 단계를 따르십시오.
- Eclipse IDE 열기
- 프로젝트 탐색기 공간을 마우스 오른쪽 버튼으로 클릭하고 새로 만들기 - 동적 웹 프로젝트를 선택합니다.
- 프로젝트 이름, 대상 런타임, 소스 폴더, 컨텍스트 루트, 콘텐츠 디렉터리 및 web.xml을 설정하여 프로젝트 생성 프로세스를 완료합니다.
JSF 설치 및 구성
앞서 언급했듯이 우리의 목표는 primefaces 사용자 인터페이스 구성 요소를 사용하는 웹 애플리케이션을 개발하기 위해 JSF/Primefaces를 사용하는 것이지만 현재로서는 jsf 구성을 위해 더 많은 단계가 필요한 간단한 동적 애플리케이션만 있으면 됩니다. 프로젝트에 jsf를 추가하려면 jsf 패싯을 추가해야 하며 jsf 구현을 추가하면 Mojarra를 사용하는 jsf 애플리케이션을 빌드하는 데 도움이 됩니다. 해당 패싯을 추가하려면 다음 단계를 따라야 합니다.
- 생성된 프로젝트의 속성 창 열기
- Project Facet 창에서 JavaServer Faces를 선택하고 구성을 완료하려면 추가 구성을 따르십시오.
- 추가 구성 필요를 클릭하면 JSF 기능 창이 표시되어야 합니다.
- 라이브러리 다운로드를 클릭하여 jsf 구현 라이브러리 추가< 및 여는 창에서 선택 JSF 2.2(Mojarra 2.2.0)
Primefaces 5 설치
지금은 애플리케이션이 JavaServer Faces 사용자 인터페이스를 사용할 준비가 되었지만 Primefaces는 사용할 수 없습니다. 프라임페이스를 사용하려면 다음 단계를 따라야 합니다.
- primefaces 공식 사이트 또는 Maven 중앙에서 필요한 primefaces 라이브러리를 다운로드합니다.
- 다운로드한 Primefaces JAR을 WEB-INF 폴더 아래에 있는 lib 폴더에 포함합니다.
Primefaces 애플리케이션 개발
이제 보시다시피 프로젝트가 JSF/Primefaces 애플리케이션을 개발할 준비가 되었습니다. 우리는 Primefaces DataTable이 백킹 빈에서 직원 목록을 사용하는 간단한 애플리케이션을 만들 것입니다. 직원 목록은 @PostConstruct 특수 메서드로 채워집니다. 전체 JSF/Primefaces 애플리케이션을 개발하려면 아래 단계를 따르십시오.
- ViewEmployeesManagedBean이라는 관리 빈 만들기
- EmployeeName 및 EmployeeId를 포함하는 Employee라는 이름의 Pojo를 만듭니다.
- 정의된 관리 빈에서 직원 목록을 사용하기 위해 Primefaces 뷰를 생성합니다.
package com.journaldev.data;
public class Employee {
private String employeeId;
private String employeeName;
public String getEmployeeId() {
return employeeId;
}
public void setEmployeeId(String employeeId) {
this.employeeId = employeeId;
}
public String getEmployeeName() {
return employeeName;
}
public void setEmployeeName(String employeeName) {
this.employeeName = employeeName;
}
}
package com.journaldev.jsfBeans;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import com.journaldev.data.Employee;
@ManagedBean
@SessionScoped
public class ViewEmployeesManagedBean {
private List<Employee> employees = new ArrayList<Employee>();
public ViewEmployeesManagedBean(){
}
@PostConstruct
public void populateEmployeeList(){
for(int i = 1 ; i <= 10 ; i++){
Employee emp = new Employee();
emp.setEmployeeId(String.valueOf(i));
emp.setEmployeeName("Employee#"+i);
this.employees.add(emp);
}
}
public List<Employee> getEmployees() {
return employees;
}
public void setEmployees(List<Employee> employees) {
this.employees = employees;
}
}
직원 목록을 채우기 위해 JSF 주석과 PostConstruct 주석을 사용하는 것에 주목하십시오.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<p:outputLabel value="JournalDev - JSF2/Primefaces Tutorial"></p:outputLabel>
<p:dataTable value="#{viewEmployeesManagedBean.employees}" var="employee">
<p:column>
<f:facet name="header">
<h:outputText value="Employee ID"></h:outputText>
</f:facet>
<h:outputText value="#{employee.employeeId}"></h:outputText>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Employee Name"></h:outputText>
</f:facet>
<h:outputText value="#{employee.employeeName}"></h:outputText>
</p:column>
</p:dataTable>
</html>
관리 빈 속성에서 테이블을 생성하기 위해 dataTable 요소의 사용에 주목하십시오. PrimeFaces 및 JSF는 렌더링을 위해 보기 페이지로 전달하는 작업을 처리합니다. 서블릿 배경에서라면 단계 수가 줄어드는 것을 쉽게 볼 수 있습니다. 서블릿 환경에서는 먼저 서블릿에서 요청을 처리하고 모델 데이터를 생성하고 요청/세션에서 속성으로 설정한 다음 이를 서버로 전달합니다. 응답을 렌더링하는 JSP 페이지.
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
xmlns="https://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="https://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<display-name>JournalDev-PrimefacesWebApplication</display-name>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
</web-app>
javax.faces.webapp.FacesServlet은 컨트롤러 클래스이며 여기서 JSF를 웹 애플리케이션에 플러그인합니다.
<?xml version="1.0" encoding="UTF-8"?>
<faces-config
xmlns="https://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee https://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
version="2.2">
</faces-config>
메이븐으로 변환
Maven은 Java 프로젝트 빌드 및 종속성을 관리하는 가장 선호되는 방법이므로 여기서 Maven으로 변환하는 방법을 살펴보겠습니다. Eclipse IDE는 Dynamic Web Project를 Maven으로 변환하는 옵션을 제공합니다. Maven은 필요한 종속성을 제어하고 관리하는 데 도움이 됩니다. 생성된 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 구성 메뉴에서 Maven 프로젝트로 변환을 선택합니다. 프로젝트를 Maven으로 변경한 후에는 Maven 자체에서 프로젝트를 컴파일할 수 있도록 하는 데 필요한 종속성을 추가해야 합니다. 애플리케이션을 Maven 프로젝트로 변환하고 JSF 2, Primefaces 및 기타에 필요한 라이브러리를 추가한 후 얻을 수 있는 것으로 추정되는 Maven XML은 다음과 같습니다.
<project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>JournalDev-PrimefacesWebApplication</groupId>
<artifactId>JournalDev-PrimefacesWebApplication</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<build>
<sourceDirectory>src</sourceDirectory>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>1.6</source>
<target>1.6</target>
</configuration>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>2.3</version>
<configuration>
<warSourceDirectory>webapp</warSourceDirectory>
<failOnMissingWebXml>false</failOnMissingWebXml>
</configuration>
</plugin>
</plugins>
<finalName>${project.artifactId}</finalName>
</build>
<repositories>
<repository>
<id>prime-repo</id>
<name>PrimeFaces Maven Repository</name>
<url>https://repository.primefaces.org</url>
<layout>default</layout>
</repository>
</repositories>
<dependencies>
<!-- Servlet -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<!-- Faces Implementation -->
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.2.4</version>
</dependency>
<!-- Faces Library -->
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.2.4</version>
</dependency>
<!-- Primefaces Version 5 -->
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>5.0</version>
</dependency>
<!-- JSP Library -->
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>javax.servlet.jsp-api</artifactId>
<version>2.3.1</version>
</dependency>
<!-- JSTL Library -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.1.2</version>
</dependency>
</dependencies>
</project>
그리고 프로젝트에 대해 mvn clean 패키지를 실행하면 모든 Java EE 컨테이너에 대해 배포할 준비가 된 WAR 파일을 얻을 수 있습니다. 배치하고 검사하기만 하면 됩니다.
요약
이 튜토리얼에서는 웹 애플리케이션 사용자 인터페이스를 구현하기 위해 JSF 2/Primefaces를 사용하는 방법을 소개했습니다. 여기에서 Eclipse IDE를 사용하여 동적 프로젝트를 생성한 다음 JSF 2 구현에 필수적인 라이브러리 또는 Primefaces 구성 요소를 사용하는 데 필요한 라이브러리를 모두 추가했습니다. 다음 튜토리얼부터는 Maven을 사용하여 예제용 프로젝트를 생성합니다.
PrimeFaces Hello World 프로젝트 다운로드
위의 링크에서 샘플 프로젝트를 다운로드하고 가지고 놀면서 자세히 알아보세요. 참조: Primefaces 공식 웹사이트