歡迎來到JSF初學者教程。 Java Server Faces（JSF）技術是一個前端框架，通過重用UI組件使用戶界面組件的創建更加容易。JSF基於模型-視圖-控制器模式（MVC）設計，該模式將演示，控制器和業務邏輯隔離開來。
JSF初學者教程
在模型-視圖-控制器模式中，模型包含完成業務場景所需的業務邏輯，視圖表示演示層，如JSP或JSF頁面，控制器表示根據請求的操作將控制傳遞給模型/視圖的過程。JSF提供以下組件來創建用戶界面：
- 標準基本輸入元素，如字段，按鈕等，形成基本UI組件集。
- 根據客戶端規格渲染JSF的能力
- 核心庫
- 擴展可用的UI組件以添加更多組件並使用它們來完成客戶需求。
JSF 初學者教程 – 環境設置
這裡我們將逐步介紹設置您的電腦以創建第一個 JSF 應用程序的所有必要步驟。
JDK 安裝
從以下 Oracle 網站下載 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 版本。欲了解更多詳情，請參閱以下文章：如何在 Windows 上安裝 Java
IDE安裝
一些流行的IDE包括Eclipse、NetBeans和IntelliJ IDEA。從以下鏈接下載Eclipse：https://www.eclipse.org/downloads/，運行下載的二進制文件並在您的計算機上安裝Eclipse。對於NetBeans，請從https://netbeans.org/downloads/下載NetBeans IDE並完成安裝。
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新手教程 – 創建Managed Bean
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類別是一個受管理的bean。 @SessionScoped bean表示該bean存活到HttpSession有效為止。在這裡聲明了一個名為s1的字串並初始化為“Hello World”，並定義了getter和setter方法以檢索字串s1的值。我們還可以提供bean的名稱，例如@ManagedBean(name="helloWorld")。如果沒有提供名稱，則根據Java命名標準派生名稱。最佳做法是始終提供bean的名稱。
JSF初學者教程 – 查看頁面
現在創建一個名為helloWorld.xhtml的JSF頁面，該頁面與HelloWorld bean 進行交互，通過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>
在這裡我們使用bean名稱，後跟在bean中聲明的字符串變量“helloWorld.s1”，這樣可以獲取到“Hello World”的值。
部署描述符配置
最後一部分是配置JSF Controller類別來處理客戶端請求。JSF控制器Servlet是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項目結構現在在Eclipse中看起來如下。
在web.xml中，我們指定faces配置文件項目，以及對faces的映射Servlet、會話超時和應用程序啟動時加載的歡迎文件。完成這些更改後，我們將運行應用程序，在瀏覽器中打印以下輸出。 
這就是JSF初學者教程的全部內容。我們將在接下來的文章中探討不同的JSF頁面組件。在此期間，您可以從下面的鏈接下載該項目並進行更多操作來學習更多。
Source:
https://www.digitalocean.com/community/tutorials/jsf-tutorial-for-beginners