J2EE实践第一部分-创建一个简单的JSF Web程序（简单网页计算器）

baiguomeng

浏览: 952427 次

最近访客更多访客>>

u012363178

wangyy

canofy

深诺7号

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1544)

社区版块

存档分类

我准备将自己平时做的小例子整理一下然后放在博客上，供大家学习参考。名字就叫 J2EE实践吧，这是第一部分，这个小例子是 JSF实现。

准备：
搭建开发环境：
JDK: 1.6.0
eclipse: 最新的 Helios WTP版本
Web服务器 : Tomcat 6.0
另外，由于需要用到 JSF，所以还需另外下载 JSF的包 : jsf-api.jar和 jsf-impl.jar，这里使用的 2.0版本。下载地址是 https://javaserverfaces.dev.java.net/

场景：
这个例子是开发一个简单的网页计算器，它有两个页面，第一个页面用户输入两个数字，然后选择一个运算符号，提交后，得到结果页面，显示运算后的结果。

1. 创建一个 Web Project
首先打开亲爱的 eclipse，然后创建一个 Web Dynamic Project，项目名称可以输入 Calculator，完成。

2. 导入 JSF包，修改 web.xml配置文件
(1) 将 jsf的 jar包导入到 lib文件夹。

(2) 由于使用 JSF，所以需要修改 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"

version = "2.5" >

< servlet >

< servlet-name > Faces Servlet </ servlet-name >

< servlet-class > javax.faces.webapp.FacesServlet </ servlet-class >

</ servlet >

< servlet-mapping >

< servlet-name > Faces Servlet </ servlet-name >

< url-pattern > /faces/* </ url-pattern >

</ servlet-mapping >

< welcome-file-list >

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

</ welcome-file-list >

< context-param >

< param-name > javax.faces.PROJECT_STAGE </ param-name >

< param-value > Development </ param-value >

</ context-param >

</ web-app >

3. 开发 JavaBean以及业务逻辑代码

首先创建一个 JavaBean，它主要用于保存用户的输入以及结果。非常简单，代码如下：

package com.sap.demo.jsf.calculator;

import java.util.ArrayList;

import javax.faces.bean.ManagedBean;

import javax.faces.bean.SessionScoped;

@ManagedBean(name = "input")

@SessionScoped

public class InputBean {

private float f1;

private float f2;

private float result;

private String operation;

private ArrayList<String> operList;

public ArrayList<String> getOperList() {

if (operList == null) {

operList = new ArrayList<String>();

operList.add("+");

operList.add("-");

operList.add("*");

operList.add("/");

}

return operList;

}

public float getF1() {

return f1;

}

public void setF1(float f1) {

this.f1 = f1;

}

public float getF2() {

return f2;

}

public void setF2(float f2) {

this.f2 = f2;

}

public float getResult() {

return result;

}

public void setResult(float result) {

this.result = result;

}

public String getOperation() {

return operation;

}

public void setOperation(String operation) {

this.operation = operation;

}

public String calculate() {

float result = Calculator.getInstance().calculate(f1, f2, operation);

this.setResult(result);

return "result";

}

然后创建一个 Calculator 类，这个类主要负责了计算逻辑，代码如下：

package com.sap.demo.jsf.calculator;

public class Calculator {

private static Calculator instance ;

public static Calculator getInstance() {

if ( instance == null )

instance = new Calculator();

return instance ;

}

public float add( float f1, float f2) {

return f1 + f2;

}

public float subtract( float f1, float f2) {

return f1 - f2;

}

public float multiply( float f1, float f2) {

return f1 * f2;

}

public float divide( float f1, float f2) {

return f1 / f2;

}

public float calculate( float f1, float f2, String operation) {

if (operation.equals( "+" ))

return add(f1, f2);

else if (operation.equals( "-" ))

return subtract(f1, f2);

else if (operation.equals( "*" ))

return multiply(f1, f2);

else

return divide(f1, f2);

}

4. 创建 Web页面

这个程序很简单，只是包含了两个页面，第一个页面是用户输入，然后 JSF框架会自动将输入的值保存到 javabean对象中，然后调用它的 calculator方法，计算结果后自动转到结果页面。

(1)用户输入页面 index.xhtml：

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

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

xmlns:h = "http://java.sun.com/jsf/html"

xmlns:f = "http://java.sun.com/jsf/core" >

< h:head >

< title > Welcome </ title >

</ h:head >

< h:body >

< h:form >

< h3 > Please enter two numbers and choose a operation. </ h3 >

< table >

< tr >

< td > Parameter 1: </ td >

< td >< h:inputText value = "#{input.f1}" /></ td >

</ tr >

< tr >

< td > Parameter 2: </ td >

< td >< h:inputText value = "#{input.f2}" /></ td >

</ tr >

< tr >

< td > Operation: </ td >

< td >< h:selectOneMenu value = "#{input.operation}" >< f:selectItems value = "#{input.operList}" /></ h:selectOneMenu ></ td >

</ tr >

</ table >

< p >< h:commandButton value = "Submit" action = "#{input.calculate}" /></ p >

</ h:form >

</ h:body >

</ html >

(2)返回结果页面 result.xhtml:

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

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

xmlns:h = "http://java.sun.com/jsf/html" >

< h:head >

< title > Welcome </ title >

</ h:head >

< h:body >

< h3 > The result is : #{input.result} </ h3 >

</ h:body >

</ html >

5. 部署并运行计算器程序

首先输入两个数字并选择一个运算符：

返回结果页面：

6. 小结

这个例子很简单，但是非常好的体现了 JSF这个 MVC框架的诸多优点。首先，不需要编写 Servlet，这样网页代码不用通过 java代码来 write了，当然这是必须的。其次， Java代码负责处理业务逻辑， JSF标签负责展现，分工非常明确。最后，它的标签非常优雅、直观，在这个例子里的网页代码就非常明显。

值得注意的几点：

(1) JSF的标签库主要分为 core和 html,一个是核心的 api，一个是网页的标签。如果用到相应的标签，需要在网页开头加上声明：

Core http://java.sun.com/jsf/core
HTML http://java.sun.com/jsf/html

由于第一个网页用到了两种，所以都声明了。

(2) 在我们的 JavaBean的代码里，是通过 Java注释来声明它是一个 bean，范围是在 Session里，这样 JSF就可以对它来进行管理。非常简单，也可以通过 xml的方式来声明。

@ManagedBean(name = "input")

@SessionScoped

(3) 提交按钮的代码调用了 javabean的 calculater方法，它返回一个字符串是” result”。

<h:commandButton value="Submit" action="#{input.calculate}"/>

这里得复习一下 JSF查找网页的规则：如果没有文件扩展名，则自动按照当前 view的文件名做扩展。如果路径没有用 /开始，则自动按照当前 view的路径。所以自动转到了 result.xhtml页面。

(4) 用户的输入是通过 POST请求提交到服务器的，这是由于使用了 h:commandButton标签。 h:commandButton, h:commandLink都会生成 post请求，而 h:button, h:link则会生成 request请求。在这个例子里面，用 request也完全可以。

下一部分，我想做一个 EJB的例子。

分享到：