JSF简单应用

        有一段时间没有用JSF了,现在都有些生疏了,以前看过一些,现在终于有时间仔细研究下了,记下学习笔记,以备日后温故知新。

      【1】新建一个web工程名为guessNumber,配置JSF应用环境在Web应用配置文件web.xml中映射一个javax.faces.webapp.FacesServlet实例。
        web.xml文件配置:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.5" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <!-- 该参数配置使用指定JSF配置文件所在的位置 -->
  <context-param>
    <param-name>javax.faces.CONFIG_FILES</param-name>
    <param-value>/WEB-INF/faces-config.xml</param-value>
  </context-param>
  <!-- 该servlet用来配置JSF的前端控制器-->
  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>0</load-on-startup>
  </servlet>
  <servlet>
    <servlet-name>Faces Servlet_tmp</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>0</load-on-startup>
  </servlet>
  <!-- 该servlet-mapping用来配置对哪些请求需要交由上面所配置的servlet -->
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.faces</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>
     【2】创建一个后台Bean(backing bean)UserNumberBean.java源文件在com.jsf.userNumber包下。
package com.jsf.userNumber;

import java.util.Random;

public class UserNumberBean {

private Integer userNumber=null;//该属性用来保存用户所输入数字
private Integer randomNumber=null;//该属性用来保存随机生成的数字
private String response=null;//该属性用来保存响应信息
private long maximum=10;//该属性用来指定猜数字的上限
private long minimum=0;//该属性用来指定猜数字的下限
public UserNumberBean(){
Random random=new Random();
randomNumber=random.nextInt(10);
}
public String check(){
if(userNumber!=null&&userNumber.compareTo (randomNumber)==0){
this.response="恭喜你,你猜对了";
}else{
if(userNumber>randomNumber){
this.response="你猜大了,请猜小一些";
}else{
this.response="你猜小了,请猜大一些";
}
}
return "result";
}
public Integer getUserNumber() {
return userNumber;
}
public void setUserNumber(Integer userNumber) {
this.userNumber = userNumber;
}
public String getResponse() {
return response;
}
public void setResponse(String response) {
this.response = response;
}
public long getMaximum() {
return maximum;
}
public void setMaximum(long maximum) {
this.maximum = maximum;
}
public long getMinimum() {
return minimum;
}
public void setMinimum(long minimum) {
this.minimum = minimum;
}
}
          【3】为了便于管理在WebRoot目录下新建一个文件userNumber用于存放猜数游戏的JSP页面,在该文件夹下新建两个JSP页面greeting.jsp,result.jsp
          【4】在JSF的配置文件中添加一个托管Bean(managed bean)声明,该配置文件默认在WebRoot/Web-INF文件下为faces-config.xml

        faces-config.xml:
        
          <?xml version='1.0' encoding='UTF-8'?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
version="1.2">
         <!--猜字游戏  -->
<navigation-rule>
<!-- 指定猜数游戏的起点导航页面 -->
<from-view-id>/userNumber/greeting.jsp</from-view-id>
<navigation-case>

                   <!--以上页面表单提交时根据触发托管Bean中方法返回的参数进行页面导航设置-->
<from-outcome>result</from-outcome>
<to-view-id>/userNumber/result.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<navigation-rule>
                <!--返回页面导航  -->
<from-view-id>/userNumber/result.jsp</from-view-id>
<navigation-case>
                  <!--result.jsp页面返回参数为back时导航到greeting.jsp页面-->
<from-outcome>back</from-outcome>
<to-view-id>/userNumber/greeting.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<managed-bean>
          <!--托管Bean设置别名为UserNumberBean-->
<managed-bean-name>UserNumberBean</managed-bean-name>
           <!--托管Bean所在的类-->
<managed-bean-class>com.jsf.userNumber.UserNumberBean</managed-bean-class>
         <!--托管Bean的生命周期-->
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
</faces-config>
        
                   【5】编辑步骤【3】中新建的两个JSP页面 greeting.jsp,result.jsp
          greeting.jsp页面:
            <%@ page language="java" pageEncoding="UTF-8"%>
          <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
          <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
           <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<title>猜数字游戏</title>
</HEAD>

<BODY>
<f:view>
<h:form id="guessForm">
  <h2>
请猜一个从
                        <!--页面输出组件值绑定到托管Bean的minimum属性 -->
            <h:outputText value="#{UserNumberBean.minimum}" />

                        <!--页面输出组件值绑定到托管Bean的maximum属性 -->
<h:outputText value="#{UserNumberBean.maximum}" />
的数字
</h2>
                    <!--页面输入组件值绑定到托管Bean的userNumber属性 -->
<h:inputText id="userNo" label="User Number"
value="#{UserNumberBean.userNumber}">
                   <!--JSF验证器,验证输入的数值是否为整数,如要提示中文错误信息需要在资源文件中设置-->
<f:validateLongRange minimum="#{UserNumberBean.minimum}"
maximum="#{UserNumberBean.maximum}" />
</h:inputText>
                   <!--表单提交时触发托管Bean的check方法,该方法返回一个字符串,根据faces-config.xml文件中导航到相应的页面-->
<h:commandButton id="submit" action="#{UserNumberBean.check}" value="提交" />
  <br />
             </h:form>
</f:view>
</BODY>
</HTML>

           result.jsp页面:

         <%@ page language="java" pageEncoding="UTF-8"%>
        <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
        <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<HTML>
<HEAD>
<title>显示结果</title>
</HEAD>

<body bgcolor="white">
<f:view>
<h:form id="resultForm">
<h2>
                 <!--页面输出托管Bean的response属性值  -->
<h:outputText id="result" value="#{UserNumberBean.response}" />
</h2>
               <!--点击后退直接返回一个字符串back-->   
<h:commandButton id="back" value="后退" action="back" immediate="true" />
<p>
</h:form>
</f:view>
</body>
</HTML>

          【6】运行首先把工程发布到Tomcat服务器,启动服务。开启浏览器在地址栏中输入URL路径:  http://127.0.0.1:8080/guessNumber/userNumber/greeting.faces在按回车键即可看到运行效果。

你可能感兴趣的:(jsf猜数游戏)