最近工作比较闲，开始学习JSF开发，在JSF项目中，首先客户端触发相关的事件，发送请求到服务端的执行JSF的控制器类FacesServlet中，通过这个类执行服务类相关的方法的，服务类相关的方法调用相关的模型信息，将结果给客户端。下面简介开发一个简单的JSF 实例过程如下：
1.创建一个Web项目：
导入JSF相关的类库如下：
项目结构如下：
2.在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">
<!--
国际化配置
在<local-config>一定有一个<default-locale>，而<supported-locale>可以有好几个，这告诉JSF您的应用程式支援哪些语系。
-->
<!--
<f:view>可以设定locale属性，直接指定所要使用的语系
加载国家化的方法
JSF会根据<f:loadBundle>的basename属性加上<f:view>的locale属性来决定要使用哪一个讯息资源档
-->
<application>
<locale-config>
<default-locale>en_US</default-locale>
<supported-locale>zh_CN</supported-locale>
</locale-config>
<message-bundle>
messages
</message-bundle>
</application>
<!-- JSF 校验器的配置 -->
<validator>
<validator-id>com.easyway.jsf.email</validator-id>
<validator-class>com.easyway.jsf.commons.EmailValidator</validator-class>
</validator>
<!-- 容器管理bean的配置 -->
<managed-bean>
<managed-bean-name>mathService</managed-bean-name>
<managed-bean-class>com.easyway.jsf.service.MathService</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<!-- 容器导航的规则 -->
<navigation-rule>
<from-view-id>/index.jsp</from-view-id>
<navigation-case>
<from-outcome>result</from-outcome>
<to-view-id>./result.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
3.服务类中各种信息如下：
package com.easyway.jsf.service;
/***
* JSF后台的服务的
* @author longgangbai
*
*/
public class MathService {
private int num0;
private int num1;
private int result;
private String email;
private String password;
public int getNum0() {
return num0;
}
public void setNum0(int num0) {
this.num0 = num0;
}
public int getNum1() {
return num1;
}
public void setNum1(int num1) {
this.num1 = num1;
}
public int getResult() {
return num0+num1;
}
public void setResult(int result) {
this.result = result;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public int sum(){
return num0+num1;
}
/**
* 直面执行的方法
*
* @return
*/
public String resultSum(){
result =sum();
return "result";
}
}
4.在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">
<context-param>
<param-name>javax.faces.CONFIG_FILES</param-name>
<param-value>/WEB-INF/faces-config.xml</param-value>
</context-param>
<servlet>
<servlet-name>FacesServlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>0</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>FacesServlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
页面如下：
index.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" %>
<%@ taglib uri="/WEB-INF/taglib.tld" prefix="co" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSF 'MyJsp.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<f:view locale="en_US">
<f:loadBundle basename="messages" var="msgs"/>
<h:form>
<h:panelGrid columns="3">
<h:outputLabel value="#{msgs.math_num0}"></h:outputLabel>
<h:inputText id="num0" value="#{mathService.num0}" ></h:inputText>
<h:message for="num0" ></h:message>
<h:outputLabel value="#{msgs.math_num1}"></h:outputLabel>
<h:inputText id="num1" value="#{mathService.num1}" ></h:inputText>
<h:message for="num1" ></h:message>
<!-- 校验器的使用 -->
<h:outputLabel value="电子邮件："></h:outputLabel>
<h:inputSecret id="email" value="#{mathService.email}" required="true">
<f:validator validatorId="com.easyway.jsf.email" />
<f:attribute name="mymsg" value="电子邮件长度必须大于5个字符"/>
<f:attribute name="emailpattern" value="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" />
</h:inputSecret>
<h:message for="email" ></h:message>
<!-- 自定义标签的校验器的使用 -->
<h:outputLabel value="用户账号"></h:outputLabel>
<h:inputSecret id="password" value="#{mathService.password}" required="true">
<co:EmailValidator pattern=".+[0-9]+"/>
</h:inputSecret>
<h:message for="password" ></h:message>
<h:commandButton value="#{msgs.math_result}" action="#{mathService.resultSum}"></h:commandButton>
</h:panelGrid>
</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" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSF 'result.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<f:view>
<h:outputText value="#{mathService.num0}"/>
和
<h:outputText value="#{mathService.num1}"/>
结算结果：
<h:outputText value="#{mathService.result}"/>
</f:view>
</body>
</html>
运行：
