欢迎来到初学者JSF教程。Java Server Faces（JSF）技术是一种前端框架，通过重用UI组件，使用户界面组件的创建变得更容易。JSF基于Model View Controller（MVC）模式设计，该模式将表示层、控制器和业务逻辑分隔开。
初学者JSF教程
在Model View Controller模式中，模型包含完成业务场景所需的业务逻辑，视图表示呈现层，如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 web 应用程序。下载以下对执行与 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 初学者教程 – 创建托管 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控制器类以处理客户端请求。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