Posted on 2008-01-07 09:39
诗特林 阅读(2620)
评论(2) 编辑 收藏 所属分类:
JSF
JSF1.2应用示例代码
本文采用JSF1.2作为一个比较初级的JSF入门应用示例。JSF在一定程度有点像AWT、SWT、Swing，因此，本文示例中会使用到GUI一样的组件。本例使用JSF开发一个简单的计算器，使用到了JSF的依赖注入、导航机制、转换器、校验等功能。主要工作包括：
l 配置web.xml，声明Faces Servlet及mapping；
l 配置faces-config.xml；
l 创建Calculator类；
l 在faces-config.xml中声明Calculator bean；
l 创建index.jsp，calculator.jsp页面；
代码下载（已经包含相关的lib）：
http://cid-7b377ace522ff6c7.skydrive.live.com/self.aspx/JSFFirtsApp/JSFApp.rar
或：
http://vzwpuq.bay.livefilestore.com/y1ps2Mjpc3NiLKObur4qLz6dkdIsWYzNYIxiDjy-0y99NyCxo0tkyfNjuTXjIx1BBMqpFBG30iIDscfjt673NVnnViwWtZmMubo/JSFApp.rar?download
开发环境：MyEclipse6.0+Eclipse3.3+JDK5.0+Tomcat6.0+JSF1.2。整个工程的布局如下图所示：
一．配置
首先要地web.xml中声明Faces Servlet，表明使用JSF Servlet来处理客户请求。同时，并且所有使用<f:view>对JSP文件的请求，都应该通过该Servlet，因此需要增加Servlet的mapping。Web.xml文件的代码如下所示：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>calculator2</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<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>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
</web-app>如果在WEB-INF目录下面放置faces-config.xml文件的话，Faces Servlet将会自动的使用该文件。当然，也可以通过web.xml中的初始化参数javax.faces.application.CONFIG_FILES来配置多个文件。因此，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">
<application>
<message-bundle>messages</message-bundle>
</application>
<managed-bean>
<managed-bean-name>calculatorController</managed-bean-name>
<managed-bean-class>
com.sterning.jsfquickstart.controller.CalculatorController
</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<managed-property>
<property-name>calculator</property-name>
<value>#{calculator}</value>
</managed-property>
</managed-bean>
<managed-bean>
<managed-bean-name>calculator</managed-bean-name>
<managed-bean-class>
com.sterning.jsfquickstart.model.Calculator
</managed-bean-class>
<managed-bean-scope>none</managed-bean-scope>
</managed-bean>
<navigation-rule>
<display-name>Calculator View</display-name>
<from-view-id>/pages/calculator.jsp</from-view-id>
<navigation-case>
<from-outcome>results</from-outcome>
<to-view-id>/pages/results.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<navigation-rule>
<display-name>Results Page</display-name>
<from-view-id>/pages/results.jsp</from-view-id>
<navigation-case>
<from-outcome>calculator</from-outcome>
<to-view-id>/pages/calculator.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<navigation-rule>
<navigation-case>
<from-outcome>HOME</from-outcome>
<to-view-id>/home.jsp</to-view-id>
<redirect/>
</navigation-case>
</navigation-rule>
<navigation-rule>
<navigation-case>
<from-outcome>CALCULATOR</from-outcome>
<to-view-id>/pages/calculator.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<navigation-rule>
<navigation-case>
<from-outcome>CALCULATOR_REDIRECT</from-outcome>
<to-view-id>/pages/calculator.jsp</to-view-id>
<redirect/>
</navigation-case>
</navigation-rule>
<navigation-rule>
<from-view-id>/pages/*</from-view-id>
<navigation-case>
<from-outcome>calculatorMain</from-outcome>
<to-view-id>/pages/calculator.jsp</to-view-id>
<redirect/>
</navigation-case>
</navigation-rule>
</faces-config>
二．创建代码
1．创建POJO
首先需用创建名为Calculator的POJO（plain old java object），它通过方法绑定与属性绑定与JSF进行关联。代码如下：
package com.sterning.jsfquickstart.model;
public class Calculator 
{
private int firstNumber = 0;
private int result = 0;
private int secondNumber = 0;
public void add() {
result = firstNumber + secondNumber;
}
public void multiply() {
result = firstNumber * secondNumber;
}
public void divide() {
this.result = this.firstNumber / this.secondNumber;
}
public void clear () {
this.firstNumber = 0;
this.secondNumber = 0;
result = 0;
}
/**//* ---------- 属性 ------------- */
public int getFirstNumber() {
return firstNumber;
}
public void setFirstNumber(int firstNumber) {
this.firstNumber = firstNumber;
}
public int getResult() {
return result;
}
public void setResult(int result) {
this.result = result;
}
public int getSecondNumber() {
return secondNumber;
}
public void setSecondNumber(int secondNumber) {
this.secondNumber = secondNumber;
}
}
2．创建控制器
上面的POJO是不需与JSF发生关系的，而真正需要与JSF发生的关系的类在控制器里。通过控制器实现界面与后面的关系。控制器类CalculatorController的代码如下：
package com.sterning.jsfquickstart.controller;
import javax.faces.application.FacesMessage;
import javax.faces.component.UIInput;
import javax.faces.context.FacesContext;
import com.sterning.jsfquickstart.model.Calculator;
public class CalculatorController {
private Calculator calculator;
private UIInput firstNumberInput;
private UIInput secondNumberInput;
public void setCalculator(Calculator calculator) {
this.calculator = calculator;
}
public Calculator getCalculator() {
return calculator;
}
public String add() {
FacesContext facesContext = FacesContext.getCurrentInstance();
try {
calculator.add();
facesContext.addMessage(null, new FacesMessage(
FacesMessage.SEVERITY_INFO, "加法成功", null));
} catch (Exception ex) {
facesContext.addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_ERROR, ex.getMessage(), null));
}
return "results";
}
public String multiply() {
FacesContext facesContext = FacesContext.getCurrentInstance();
try {
calculator.multiply();
facesContext.addMessage(null, new FacesMessage(
FacesMessage.SEVERITY_INFO, "乘法成功", null));
} catch (Exception ex) {
facesContext.addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_ERROR, ex.getMessage(), null));
}
return "results";
}
public String divide() {
FacesContext facesContext = FacesContext.getCurrentInstance();
try {
calculator.divide();
facesContext.addMessage(null, new FacesMessage(
FacesMessage.SEVERITY_INFO, "除法成功", null));
} catch (Exception ex) {
if (ex instanceof ArithmeticException) {
secondNumberInput.setValue(Integer.valueOf(1));
}
facesContext.addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_ERROR, ex.getMessage(), null));
}
return "results";
}
public String clear() {
FacesContext facesContext = FacesContext.getCurrentInstance();
try {
calculator.clear();
facesContext.addMessage(null, new FacesMessage(
FacesMessage.SEVERITY_INFO, "清空成功", null));
} catch (Exception ex) {
facesContext.addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_ERROR, ex.getMessage(), null));
}
return null;
}
public String getFirstNumberStyleClass() {
if (firstNumberInput.isValid()) {
return "labelClass";
} else {
return "errorClass";
}
}
public String getSecondNumberStyleClass() {
if (secondNumberInput.isValid()) {
return "labelClass";
} else {
return "errorClass";
}
}
public UIInput getFirstNumberInput() {
return firstNumberInput;
}
public void setFirstNumberInput(UIInput firstNumberInput) {
this.firstNumberInput = firstNumberInput;
}
public UIInput getSecondNumberInput() {
return secondNumberInput;
}
public void setSecondNumberInput(UIInput secondNumberInput) {
this.secondNumberInput = secondNumberInput;
}
}
三．页面设置
１．首页index.jsp
<jsp:forward page="home.jsf"/>
2．主页home.jsp
<%@ page contentType="text/html; charset=GBK" %>
<%@ 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 XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calculator Application</title>
<link rel="stylesheet"
type="text/css" href="<%=request.getContextPath()%>/css/main.css" />
</head>
<body>
<f:view>
<h4>计算器首页</h4>
<h:messages infoClass="infoClass" errorClass="errorClass" layout="table" globalOnly="true"/>
<h:form>
<h:panelGrid columns="1">
<h:commandLink action="CALCULATOR" value="计算器"/>
<h:commandLink action="CALCULATOR_REDIRECT" value="计算器 (redirect)"/>
<h:outputLink value="pages/calculator.jsf">
<h:outputText value="计算器(outputlink)"/>
</h:outputLink>
</h:panelGrid>
</h:form>
</f:view>
</body>
</html>
3．计算器页面calculator.jsp
<%@ page contentType="text/html; charset=GBK" %>
<%@ 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 XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calculator Application</title>
<link rel="stylesheet"
type="text/css" href="<%=request.getContextPath()%>/css/main.css" />
</head>
<body>
<f:view>
<h:form id="calcForm">
<h4>计算器示例</h4>
<h:messages infoClass="infoClass" errorClass="errorClass" layout="table" globalOnly="true"/>
<h:panelGrid columns="3" rowClasses="oddRow, evenRow"
styleClass="formGrid">
<%-- 第一个数--%>
<h:outputLabel value="第一个数" for="firstNumber"
styleClass="#{calculatorController.firstNumberStyleClass}"/>
<h:inputText id="firstNumber" label="First Number"
value="#{calculatorController.calculator.firstNumber}" required="true"
binding="#{calculatorController.firstNumberInput}" />
<h:message for="firstNumber" errorClass="errorClass"/>
<%-- 第二个数--%>
<h:outputLabel id="snl" value="第二个数" for="secondNumber"
styleClass="#{calculatorController.secondNumberStyleClass}"/>
<h:inputText id="secondNumber" label="Second Number"
value="#{calculatorController.calculator.secondNumber}" required="true"
binding="#{calculatorController.secondNumberInput}"/>
<h:message for="secondNumber" errorClass="errorClass"/>
</h:panelGrid>
<div>
<h:commandButton action="#{calculatorController.add}" value="加法" />
<h:commandButton action="#{calculatorController.multiply}" value="乘法" />
<h:commandButton action="#{calculatorController.divide}" value="除法" />
<h:commandButton action="#{calculatorController.clear}" value="清空" immediate="true"/>
<h:commandButton action="HOME" value="首页" immediate="true"/>
</div>
</h:form>
</f:view>
</body>
</html>
4．结果显示页面results.jsp
<%@ page contentType="text/html; charset=GBK" %>
<%@ 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 XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calculator Application</title>
<link rel="stylesheet"
type="text/css" href="<%=request.getContextPath()%>/css/main.css" />
</head>
<body>
<f:view>
<h4>计算器示例: 结果</h4>
<h:messages infoClass="infoClass" errorClass="errorClass" layout="table" globalOnly="true"/>
<h4>计算结果</h4>
<h:panelGrid columns="1" rowClasses="oddRow, evenRow"
styleClass="resultGrid">
<h:outputText value="第一个数 #{calculatorController.calculator.firstNumber}"/>
<h:outputText value="第二个数 #{calculatorController.calculator.secondNumber}"/>
<h:outputText value="计算结果 #{calculatorController.calculator.result}"/>
</h:panelGrid>
<h:form>
<h:panelGrid columns="1" rowClasses="oddRow, evenRow">
<h:commandLink action="calculator" value="返回计算器首页"/>
<h:commandLink action="HOME" value="返回首页"/>
<h:commandLink action="calculatorMain" value="返回计算器首页"/>
</h:panelGrid>
</h:form>
</f:view>
</body>
</html>
四．运行效果
1．首页
2．计算页面
3．结果页面
参考:http://www.ibm.com/developerworks/edu/j-dw-java-jsf1-i.html?S_TACT=105AGX02&S_CMP=HP