JSF 入门教程

欢迎来到初学者JSF教程。 Java Server Faces(JSF)技术是一种前端框架,通过重新使用UI组件来简化用户界面组件的创建。

JSF初学者教程

In the Model View Controller pattern, model contains the business logic required to accomplish the business scenario, view represents the presentation layer like the JSP or JSF pages and controller represents the process of handling the control to the model/view depending on the requested operation. JSF provides the following components to create an user interface:

标准的基本输入元素,如字段,按钮等,构成基础UI组件的集合
根据客户端规格
核心库
扩展可用的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 安装

一些受欢迎的 IDEs 可用包括 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 JSF Web 应用程序。下载下列切片,这些切片是执行 JSF 相关代码所必需的。这些可以从 maven 中央存储库下载 https://search.maven.org/。更清晰的方式来管理依赖是使用像 maven 这样的构建系统。对于我们的所有示例,我们会使用 maven。请参阅 pom.xml 对依赖。 jsf-api-1.2.jar jsf-impl-2.8-04.jar pom.xml

 1<?xml version="1.0" encoding="UTF-8"?>
 2<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">
 3    <modelVersion>4.0.0</modelVersion>
 4
 5    <groupId>com.journaldev.jsf</groupId>
 6    <artifactId>JSF_HelloWorld</artifactId>
 7    <version>1.0-SNAPSHOT</version>
 8    <packaging>war</packaging>
 9
10    <name>JSF_HelloWorld</name>
11
12    <properties>
13        <endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
14        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
15    </properties>
16
17    <dependencies>
18        <dependency>
19            <groupId>javax</groupId>
20            <artifactId>javaee-web-api</artifactId>
21            <version>7.0</version>
22            <scope>provided</scope>
23        </dependency>
24        <dependency>
25            <groupId>com.sun.faces</groupId>
26            <artifactId>jsf-api</artifactId>
27            <version>2.1.13</version>
28        </dependency>
29        <dependency>
30            <groupId>com.sun.faces</groupId>
31            <artifactId>jsf-impl</artifactId>
32            <version>2.1.13</version>
33        </dependency>
34    </dependencies>
35
36    <build>
37        <plugins>
38            <plugin>
39                <groupId>org.apache.maven.plugins</groupId>
40                <artifactId>maven-compiler-plugin</artifactId>
41                <version>3.1</version>
42                <configuration>
43                    <source>1.7</source>
44                    <target>1.7</target>
45                    <compilerArguments>
46                        <endorseddirs>${endorsed.dir}</endorseddirs>
47                    </compilerArguments>
48                </configuration>
49            </plugin>
50            <plugin>
51                <groupId>org.apache.maven.plugins</groupId>
52                <artifactId>maven-war-plugin</artifactId>
53                <version>2.3</version>
54                <configuration>
55                    <failOnMissingWebXml>false</failOnMissingWebXml>
56                </configuration>
57            </plugin>
58            <plugin>
59                <groupId>org.apache.maven.plugins</groupId>
60                <artifactId>maven-dependency-plugin</artifactId>
61                <version>2.6</version>
62                <executions>
63                    <execution>
64                        <phase>validate</phase>
65                        <goals>
66                            <goal>copy</goal>
67                        </goals>
68                        <configuration>
69                            <outputDirectory>${endorsed.dir}</outputDirectory>
70                            <silent>true</silent>
71                            <artifactItems>
72                                <artifactItem>
73                                    <groupId>javax</groupId>
74                                    <artifactId>javaee-endorsed-api</artifactId>
75                                    <version>7.0</version>
76                                    <type>jar</type>
77                                </artifactItem>
78                            </artifactItems>
79                        </configuration>
80                    </execution>
81                </executions>
82            </plugin>
83        </plugins>
84    </build>
85
86</project>

初学者JSF教程 - 创建一个管理的棒

Managed bean 是 JSF 注册的 java 类,使用户界面和业务逻辑之间的互动成为可能。

 1package com.journaldev.jsf.helloworld;
 2
 3import java.io.Serializable;
 4import javax.faces.bean.ManagedBean;
 5import javax.faces.bean.SessionScoped;
 6
 7@ManagedBean(name="helloWorld")
 8@SessionScoped
 9public class HelloWorld implements Serializable{
10
11    private static final long serialVersionUID = -6913972022251814607L;
12    
13    private String s1 = "Hello World!!";
14
15    public String getS1() {
16        System.out.println(s1);
17        return s1;
18    }
19
20    public void setS1(String s1) {
21        this.s1 = s1;
22    }
23
24}

@ManagedBean标注表示 HelloWorld 类是管理的豆类。 @SessionScoped 豆类表示豆类活着直到HttpSession有效. 在这里,一个字符串 s1 被声明并以Hello World 初始化,并定义了 getter 和 setter 方法来检索字符串 s1 的值。

JSF初学者教程 - 查看页面

现在创建一个名为helloWorld.xhtml的JSF页面,该页面与HelloWorld标本互动,通过getter方法获取值,并在响应页面中打印相同的值。

 1<?xml version='1.0' encoding='UTF-8' ?>
 2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3<html xmlns="https://www.w3.org/1999/xhtml"
 4      xmlns:h="https://java.sun.com/jsf/html">
 5<h:head>
 6<title>Hello World JSF Example</title>
 7</h:head>
 8<h:body>
 9       #{helloWorld.s1}
10<br /><br />
11
12</h:body>
13</html>

在这里,我们将豆类名称命名,然后在豆类中声明的字符串变量称为helloWorld.s1,从而获取值Hello World。

部署描述器配置

最后一部分是配置 JSF 控制器类来处理客户端请求。JSF 控制器服务器是FacesServlet,下面的 web.xml 最终配置是web.xml。

 1<?xml version="1.0" encoding="UTF-8"?>
 2<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">
 3<context-param>
 4<param-name>javax.faces.PROJECT_STAGE</param-name>
 5<param-value>Development</param-value>
 6</context-param>
 7<servlet>
 8<servlet-name>Faces Servlet</servlet-name>
 9<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
10<load-on-startup>1</load-on-startup>
11</servlet>
12<servlet-mapping>
13<servlet-name>Faces Servlet</servlet-name>
14<url-pattern>/faces/*</url-pattern>
15</servlet-mapping>
16<servlet-mapping>
17<servlet-name>Faces Servlet</servlet-name>
18<url-pattern>*.jsf</url-pattern>
19</servlet-mapping>
20<session-config>
21<session-timeout>
22            30
23</session-timeout>
24</session-config>
25<welcome-file-list>
26<welcome-file>faces/helloWorld.xhtml</welcome-file>
27</welcome-file-list>
28</web-app>

Final JSF Hello world project structure will now look like below in Eclipse. In the web.xml, we specify the faces config file entry along with mapping servlet for faces, session timeout and the welcome file which gets loaded upon the start of the application. Once we are done with these changes, we shall run the application which prints the following output in the browser. That's all for JSF tutorial for beginners. We will look into different JSF page components in the coming posts. In the mean time, you can download the project from below link and play around with it to learn more.

下载JSF Hello World项目