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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/starshus/article/details/5886793

我准备将自己平时做的小例子整理一下然后放在博客上,供大家学习参考。名字就叫 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的例子。

 

展开阅读全文

没有更多推荐了,返回首页