我的第一个JSF简单例子 - hwoarangzk的博客

作者在 2008-01-21 10:43:40 发布以下内容

        刚开始学JSF，想编个简单的例子，就拿计算器开练。就是在页面输入两个数，点击相应的运算符号出结果。本以为很简单，结果一直报错，原因一直没找到，今天来再弄，居然试出来了！开心中，贴出来再说。
        环境：jdk 1.5, Tomcat 5.5, Eclipse 3.2, jsf-impl.jar, jsf-api.jar, jstl.jar, standard.jar, commons-digester.jar, commons-beanutils.jar, commons-collections.jar.
        第一个页面calculator.jsp:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1"%>

<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Calculate Page</title>

</head>

<body>

<h1>JSF Calculator Example</h1><br/>

<f:view>

<h:form>

<table>

<tr>

<td><b>First Number:</b></td>

</h:inputText>

</td>

</tr>

<tr>

<td><b>Second Number:</b></td>

</tr>

</table>

<h:commandButton value="+" action="#{cal.add}" />

<h:commandButton value="-" action="#{cal.minus}" />

<h:commandButton value="*" action="#{cal.multiply}" />

<h:commandButton value="/" action="#{cal.divide}" />

</h:form>

<h:outputLink value="index.faces" ><h:outputText value="abc" /></h:outputLink>

</f:view>

</body>

</html>
然后是出结果的页面result.jsp:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1"%>

<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Calculate Result Page</title>

</head>

<body>

<h1>Calculator Result Page</h1><br/>

<f:view>

First Number:<h:outputText value="#{cal.firstNum }" /><br/>

Second Number:<h:outputText value="#{cal.secondNum }" /><br/>

Result:<h:outputText value="#{cal.result }" />

</f:view>

</body>

</html>
运算类Calculator.java:

package src;

public class Calculator {

public double add (double a, double b) {

return a + b;

}

public double minus (double a, double b) {

return a - b;

}

public double multiply (double a, double b) {

return a * b;

}

public double divide(double a, double b) {

if(b != 0) {

return a / b;

} else {

return Double.MAX_VALUE;

}

}
运算器类CalculatorController.java:

package src;

public class CalculatorController {

private double firstNum;

private double secondNum;

private double result;

private Calculator calculator = new Calculator();

public String add() {

result = calculator.add(firstNum, secondNum);

return "complete";

}

public String minus() {

result = calculator.minus(firstNum, secondNum);

return "complete";

}

public String multiply() {

result = calculator.multiply(firstNum, secondNum);

return "complete";

}

public String divide() {

result = calculator.divide(firstNum, secondNum);

return "complete";

}

public Calculator getCalculator() {

return calculator;

}

public void setCalculator(Calculator calculator) {

this.calculator = calculator;

}

public double getFirstNum() {

return firstNum;

}

public void setFirstNum(double firstNum) {

this.firstNum = firstNum;

}

public double getResult() {

return result;

}

public void setResult(double result) {

this.result = result;

}

public double getSecondNum() {

return secondNum;

}

public void setSecondNum(double secondNum) {

this.secondNum = secondNum;

}

}
然后是配置文件web.xml:

<?xml version="1.0" encoding="UTF-8"?>

<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<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>

<display-name>

MyJSF</display-name>

<welcome-file-list>

<welcome-file>index.faces</welcome-file>

<welcome-file>index.jsp</welcome-file>

</welcome-file-list>

</web-app>
以及JSF的配置文件faces-config.xml:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN" "http://java.sun.com/dtd/web-facesconfig_1_0.dtd">

<faces-config>

<navigation-rule>

<navigation-case>

<from-outcome>complete</from-outcome>

<to-view-id>/result.jsp</to-view-id>

</navigation-case>

</navigation-rule>

<managed-bean>

<managed-bean-name>cal</managed-bean-name>

<managed-bean-class>src.CalculatorController</managed-bean-class>

<managed-bean-scope>session</managed-bean-scope>

</managed-bean>

</faces-config>
        其实本来可以写得更简单一点，但是这里为了体现一下JSF的MVC结构，所以写了两个类，一个是C，一个是M。JSF在做V的方面是比较强的，提供了一些易用的组件，只要直接通过标签使用即可。
        在calculator.faces页面输入数字就能看到结果了。注意啊！在这个页面中，4个运算符号那里，比如在#{cal.add}这里，add和}之间是不能有空格的！我就是加了一个空格就一直报找不到方法的异常，弄了我好久啊！
        初学JSF就遇到这么个问题，看来要更加仔细才行，继续努力中。