JSF 초보자를 위한 자습서

튜토리얼
JSF

JSF 입문자를 위한 JSF 튜토리얼에 오신 것을 환영합니다. Java Server Faces (JSF) 기술은 UI 구성 요소의 재사용을 통해 사용자 인터페이스 컴포넌트의 작성을 더 쉽게합니다. JSF는 프레젠테이션, 컨트롤러 및 비즈니스 로직을 분리하는 Model View Controller 패턴 (MVC)에 기반을 두고 설계되었습니다.

JSF 입문자를 위한 튜토리얼

모델 뷰 컨트롤러 패턴에서 모델은 비즈니스 시나리오를 수행하는 데 필요한 비즈니스 로직을 포함하고, 뷰는 JSP 또는 JSF 페이지와 같은 프레젠테이션 레이어를 나타내며, 컨트롤러는 요청된 작업에 따라 모델/뷰에 대한 제어 처리를 나타냅니다. JSF는 다음과 같은 컴포넌트를 제공하여 사용자 인터페이스를 생성합니다:

  • 기본 입력 요소 (필드, 버튼 등)로 구성되는 기본 UI 컴포넌트 세트.
  • 클라이언트 사양에 따라 JSF의 렌더링 능력.
  • 코어 라이브러리
  • 클라이언트 요구 사항을 달성하기 위해 추가 컴포넌트를 추가하고 사용할 수 있는 사용 가능한 UI 컴포넌트의 확장.

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

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

JDK 설치

다음 오라클 웹사이트에서 JDK를 다운로드하세요. https://www.oracle.com/technetwork/java/javase/downloads/index.html 환경 변수 JAVA_HOME을 설치된 JDK의 bin 경로로 지정하십시오. 예를 들어 “C:\Program Files\Java\jdk1.7.0_60”입니다. 또한 JAVA_HOME\bin을 PATH 변수에 추가하여 java 이진 파일을 찾을 수 있도록 합니다. 이제 명령 창에 javac을 입력하여 java가 컴퓨터에 성공적으로 설치되었는지 확인하십시오. 이 명령은 사용 가능한 모든 옵션을 표시하거나 “java -version”을 입력하여 설치된 java 버전을 표시해야 합니다. 자세한 내용은 다음 포스트를 참조하십시오. 윈도우에 Java 설치하는 방법

IDE 설치

사용 가능한 인기있는 IDE 중 일부는 Eclipse, NetBeans, 그리고 IntelliJ IDEA가 있습니다. 다음 링크에서 Eclipse를 다운로드하세요. https://www.eclipse.org/downloads/ 그리고 다운로드한 이진 파일을 실행하여 컴퓨터에 Eclipse를 설치하세요. NetBeans의 경우, NetBeans IDE를 다음 링크에서 다운로드하세요. https://netbeans.org/downloads/ 그리고 설치를 완료하세요.

Apache Tomcat 설치

다음 링크에서 Tomcat을 다운로드하세요. https://tomcat.apache.org/. 다운로드한 이진 파일을 실행하고 CATALINA_HOME 변수를 설치 경로를 가리키도록 설정하세요. 이제 서버를 시작하고 선호하는 브라우저에서 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 튜토리얼 초보자를 위한 – 관리 빈 생성

A managed bean is a java class registered to JSF which makes interaction between the UI and the business logic possible. Create a managed bean named HelloWorld.java using @ManagedBean annotation as

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")와 같이 빈 이름을 지정할 수도 있습니다. 이름을 지정하지 않으면 자바 네이밍 규칙에 따라 유도됩니다. 빈 이름을 항상 제공하는 것이 좋은 관례입니다.

초보자를 위한 JSF 튜토리얼 – 뷰 페이지

이제 helloWorld.xhtml라는 JSF 페이지를 생성하여 HelloWorld 빈과 상호 작용하고 getter 메서드를 통해 값을 가져와 응답 페이지에 출력합니다. 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>

여기에서는 빈 이름 다음에 빈에서 선언된 문자열 변수인 “helloWorld.s1″을 호출하여 값 “Hello World”를 가져옵니다.

배포 서술자 구성

마지막 부분은 JSF 컨트롤러 클래스를 구성하여 클라이언트 요청을 처리하는 것입니다. JSF 컨트롤러 서블릿은 FacesServlet이며, 최종 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 프로젝트 구조는 이제 Eclipse에서 아래와 같이 보일 것입니다.웹.xml에서는 faces 구성 파일 항목과 faces를 위한 서블릿 매핑, 세션 타임아웃 및 응용 프로그램 시작 시로드되는 환영 파일을 지정합니다. 이러한 변경 사항을 마치면 브라우저에서 다음 출력을 인쇄하는 응용 프로그램을 실행할 것입니다.이것으로 JSF 초보자 튜토리얼은 모두입니다. 다음 게시물에서는 다양한 JSF 페이지 구성 요소를 살펴볼 것입니다. 그동안 아래 링크에서 프로젝트를 다운로드하여 더 많이 배울 수 있습니다.

JSF Hello World 프로젝트 다운로드

Source:
https://www.digitalocean.com/community/tutorials/jsf-tutorial-for-beginners