웹사이트 검색

초보자를 위한 JSF 튜토리얼


초보자를 위한 JSF 자습서에 오신 것을 환영합니다. JSF(Java Server Faces) 기술은 UI 구성 요소를 재사용하여 사용자 인터페이스 구성 요소를 보다 쉽게 생성할 수 있도록 하는 프런트 엔드 프레임워크입니다. JSF는 프레젠테이션, 컨트롤러 및 비즈니스 로직을 분리하는 모델 뷰 컨트롤러 패턴(MVC)을 기반으로 설계되었습니다.

초보자를 위한 JSF 튜토리얼

  • 기본 UI 구성요소 집합을 형성하는 필드, 버튼 등과 같은 표준 기본 입력 요소
  • 클라이언트 사양에 따른 JSF의 렌더링 능력
  • 핵심 라이브러리
  • 사용 가능한 UI 구성 요소를 확장하여 더 많은 구성 요소를 추가하고 클라이언트 요구 사항을 충족하는 데 사용합니다.

초보자를 위한 JSF 자습서 - 환경 설정

여기에서는 첫 번째 JSF 애플리케이션을 만들기 위해 컴퓨터를 설정하는 데 필요한 모든 단계를 진행합니다.

JDK 설치

다음 Oracle 웹 사이트에서 jdk를 다운로드합니다. Windows에 Java를 설치하는 방법

IDE 설치

사용 가능한 인기 있는 IDE로는 Eclipse, NetBeans 및 IntelliJ IDEA가 있습니다. https://netbeans.org/downloads/ 링크에서 Eclipse를 다운로드하고 설치를 완료합니다.

아파치 톰캣 설치

성공적으로 설치된 경우 기본 tomcat 페이지를 표시하는 즐겨찾는 브라우저의 https://localhost:8080 링크에서 tomcat을 다운로드합니다. 기본 설정이 준비되었습니다. 이제 첫 번째 JSF 애플리케이션을 생성해 보겠습니다.

초보자를 위한 JSF 자습서 - Hello World 애플리케이션

이제 간단한 Hello World JSF 웹 애플리케이션을 만들어 보겠습니다. JSF 관련 코드 실행에 필수적인 다음 jar를 다운로드합니다. maven 중앙 저장소 https://search.maven.org/에서 다운로드할 수 있습니다. 종속성을 관리하는 보다 명확한 방법은 maven과 같은 빌드 시스템을 사용하는 것입니다. 모든 예에서 maven을 사용합니다. 종속성에 대해서는 pom.xml을 참조하십시오. jsf-api-1.2.jar jsf-impl-2.2.8-04.jar pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<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>com.journaldev.jsf</groupId>
    <artifactId>JSF_HelloWorld</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <name>JSF_HelloWorld</name>

    <properties>
        <endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
    
    <dependencies>
        <dependency>
            <groupId>javax</groupId>
            <artifactId>javaee-web-api</artifactId>
            <version>7.0</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>com.sun.faces</groupId>
            <artifactId>jsf-api</artifactId>
            <version>2.1.13</version>
        </dependency>
        <dependency>
            <groupId>com.sun.faces</groupId>
            <artifactId>jsf-impl</artifactId>
            <version>2.1.13</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.1</version>
                <configuration>
                    <source>1.7</source>
                    <target>1.7</target>
                    <compilerArguments>
                        <endorseddirs>${endorsed.dir}</endorseddirs>
                    </compilerArguments>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>2.3</version>
                <configuration>
                    <failOnMissingWebXml>false</failOnMissingWebXml>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-dependency-plugin</artifactId>
                <version>2.6</version>
                <executions>
                    <execution>
                        <phase>validate</phase>
                        <goals>
                            <goal>copy</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>${endorsed.dir}</outputDirectory>
                            <silent>true</silent>
                            <artifactItems>
                                <artifactItem>
                                    <groupId>javax</groupId>
                                    <artifactId>javaee-endorsed-api</artifactId>
                                    <version>7.0</version>
                                    <type>jar</type>
                                </artifactItem>
                            </artifactItems>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

초보자를 위한 JSF 자습서 - 관리 빈 만들기

관리 빈은 UI와 비즈니스 로직 간의 상호 작용을 가능하게 하는 JSF에 등록된 자바 클래스입니다. 다음과 같이 @ManagedBean 주석을 사용하여 HelloWorld.java라는 이름의 관리 빈을 만듭니다.

package com.journaldev.jsf.helloworld;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;


@ManagedBean(name="helloWorld")
@SessionScoped
public class HelloWorld implements Serializable{
    
    private static final long serialVersionUID = -6913972022251814607L;
	
    private String s1 = "Hello World!!";

    public String getS1() {
        System.out.println(s1);
        return s1;
    }

    public void setS1(String s1) {
        this.s1 = s1;
    }
  
}

@ManagedBean 주석은 HelloWorld 클래스가 관리 빈임을 나타냅니다. @SessionScoped 빈은 HttpSession이 유효할 때까지 빈이 활성 상태임을 나타냅니다. 여기에서 문자열 s1이 선언되고 "Hello World\로 초기화되며 getter 및 setter 메서드가 문자열 s1의 값을 검색하도록 정의됩니다. @ManagedBean(name=\helloWorld\와 같은 빈 이름도 제공할 수 있습니다. ). 이름이 제공되지 않으면 Java 명명 표준에 따라 파생됩니다. 가장 좋은 방법은 빈 이름을 항상 제공하는 것입니다.

초보자를 위한 JSF 자습서 - 페이지 보기

이제 HelloWorld bean과 상호 작용하고 getter 메서드를 통해 값을 검색하고 응답 페이지에 동일한 값을 인쇄하는 helloWorld.xhtml이라는 JSF 페이지를 만듭니다. helloWorld.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="https://java.sun.com/jsf/html">
<h:head>
<title>Hello World JSF Example</title>
</h:head>
<h:body>
       #{helloWorld.s1}
<br /><br />

</h:body>
</html>

여기서 우리는 "Hello World\ 값을 가져오는 "helloWorld.s1\로 빈에 선언된 문자열 변수와 함께 빈 이름을 호출합니다.

배포 설명자 구성

마지막 부분은 클라이언트 요청을 처리하도록 JSF 컨트롤러 클래스를 구성하는 것입니다. JSF 컨트롤러 서블릿은 FacesServlet이며 최종 web.xml 구성은 아래와 같습니다. <코드>web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" 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-app_3_1.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<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>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
            30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/helloWorld.xhtml</welcome-file>
</welcome-file-list>
</web-app>

JSF Hello World 프로젝트 다운로드