JSF教程

时间:2020-02-23 14:33:45  来源:igfitidea点击:

欢迎使用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。
从以下链接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应用程序

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

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

package com.theitroad.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页面,该页面与HelloWorldbean进行交互,并通过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,会话超时和在应用程序启动时加载的欢迎文件。

完成这些更改后,我们将运行在浏览器中打印以下输出的应用程序。