JSF学习应用简单实例
?????? 最近工作比较闲，开始学习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>?运行：
http://localhost:8080/JSFDemo/index.faces