初学者的JSF教程

2 年 ago
科, 雅
5 minutes

欢迎来到面向初学者的JSF教程。Java服务器面向（JSF）技术是一个前端框架，通过重用用户界面组件，使用户界面组件的创建更加简便。JSF基于模型-视图-控制器模式（MVC）设计，将演示、控制器和业务逻辑分离。

JSF初学者教程

在模型视图控制器（MVC）模式中，模型包含完成业务场景所需的业务逻辑，视图代表展示层，如JSP或JSF页面，控制器则代表处理控制权，根据请求操作将其交给模型/视图。JSF提供以下组件来创建用户界面：

  • Standard basic input elements like fields, buttons etc. that forms the set of base UI components.
  • Rendering ability of JSF depending on the the client specifications
  • Core library
  • Extending available ui components to add more components and use them for accomplishing client requirements.

初学者的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。您可以从以下链接https://www.eclipse.org/downloads/下载Eclipse，并运行下载的二进制文件在您的机器上安装Eclipse。对于NetBeans，您可以从https://netbeans.org/downloads/下载NetBeans IDE，并完成安装。

安装Apache Tomcat

从以下链接https://tomcat.apache.org/下载Tomcat。运行下载的二进制文件，并设置CATALINA_HOME变量指向安装路径。现在启动服务器，并在您喜欢的浏览器中访问https://localhost:8080，如果安装成功，将显示默认的Tomcat页面。我们的基本设置准备好了，接下来让我们开始创建我们的第一个JSF应用程序。

JSF初学者教程 – 你好世界应用程序

让我们现在创建一个简单的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.Olivia.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

使用@ManagedBean注解创建名为HelloWorld.java的托管bean，它是一个在JSF中注册的Java类，使得UI和业务逻辑之间的交互成为可能。

package com.Olivia.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，并定义了getter和setter方法来获取字符串s1的值。我们还可以提供bean的名称，如@ManagedBean(name=”helloWorld”)。如果不提供名称，则根据Java命名规范进行推导。最佳做法是始终提供bean名称。

JSF初学者教程-视图页

现在创建一个名为helloWorld.xhtml的JSF页面，它与HelloWorld bean进行交互，并通过getter方法检索该值，并在响应页面上打印出相同的值。

<?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配置。

<?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>

在Eclipse中，最终的JSF Hello world项目结构如下所示。在web.xml中，我们将指定faces配置文件的条目，以及用于faces的映射servlet、会话超时和应用启动时加载的欢迎文件。完成这些更改后，我们将运行应用程序，在浏览器中打印以下输出。这就是JSF初学者教程的全部内容。在接下来的文章中，我们将了解不同的JSF页面组件。与此同时，您可以从以下链接下载项目，并进行操作以进一步学习。

下载JSF Hello World项目

发表回复 0

Your email address will not be published. Required fields are marked *

✖
广告
将在 10 秒后关闭
bannerAds