JSF(Java Server Face)与在Web UI实现托拽式快速开发的应用

原创 2004年09月21日 13:33:00

技术分析报告:2004-09-17

本期主题:JSF(Java Server Face)与在Web UI实现托拽式快速开发的应用

作者:genstone chye

Java Server Face介绍<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

Java Server Face是快速开发web应用的一个框架和解决方案。他改变了以往基于java web应用的request-response处理机制,采用了事件驱动处理机制。这为在java平台上快速开发web应用提供了可能。JSF框架简化了web form有效性检查、request参数解析,状态管理,多线程支持等任务。开发人员只需实现具体的事件处理器和事务逻辑(在JSF中分别称为Handlers和Components)。

在采用JSF框架进行开发时,不需要继承实现JSF的任何API,应用各组件之间的关系通过一个XML(faces-config.xml)配置文件实现。他的实现方式与以往介绍过的Spring框架有些类似。

Java Server FaceStruts架构比较

与现在较为流行的MVC架构有所不同,JSF在设计结构上并没有将视图和逻辑事务严格的分开,而是依赖于程序设计人员的具体实现。比如Handlers和Components在实际的开发中可以在一个类中实现,这样就会使视图层和逻辑处理层紧密的偶合在一起。建议在进行JSF项目时应严格要求程序设计人员将Handlers和Components分离。

<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" />
以下是Struts和JSF框架在结构设计上的比较

 


从上图可以看出,MVC和JSF的开发结构有很大的区别。MVC主要关注于开发应用各层的松散偶合;JSF则关注于事件处理。从应用上分析,MVC重视结构的划分而JSF致力于为快速开发提供基础解决方案。笔者建议不能简单的比较两种架构的优劣,应结合实际的开发和应用选择。

Java Server Face的技术实现

JSF框架的实现依赖于以下几种技术:Java Tag LibIoC type2setter and getter,xml

JSF的表示层使用Tag lib技术处理webform object

使用IoC type2xmlform object和具体的handlercomponent关联起来

Java Server Face的示例

示例应用需求说明:实现一个用户管理功能,要求将视图层、逻辑层、数据访问层分开,降低各层的偶合度。

<?xml:namespace prefix = w ns = "urn:schemas-microsoft-com:office:word" />
下图是示例的简单类图,其中数据层采用DAO+Hibernate技术

 


UserForm代码:

package jsfdemo.forms;

 

 

/**

 * Created date:2004-8-19

 * @author genstone

 *

 */

public class UserForm

{

    private String username;

    private Long userid;

    private String password;

   

    /**

     * @return Returns the username.

     */

    public String getUsername()

    {

        return username;

    }

    /**

     * @param username The username to set.

     */

    public void setUsername(String username)

    {

        this.username = username;

    }

    /**

     * @return Returns the password.

     */

    public String getPassword()

    {

        return password;

    }

    /**

     * @param password The password to set.

     */

    public void setPassword(String password)

    {

        this.password = password;

    }

    /**

     * @return Returns the userid.

     */

    public Long getUserid()

    {

        return userid;

    }

    /**

     * @param userid The userid to set.

     */

    public void setUserid(Long userid)

    {

        this.userid = userid;

    }

}

 

UserHandler代码:

package jsfdemo.handlers;

 

import jsfdemo.components.BaseComponent;

 

/**

 * Created date:2004-9-20

 * @author genstone

 *

 */

public class UserHandler

{

    private BaseComponent component;

   

    /**

     * @return Returns the component.

     */

    public BaseComponent getComponent()

    {

        return component;

    }

    /**

     * @param component The component to set.

     */

    public void setComponent(BaseComponent component)

    {

        this.component = component;

    }

   

    public void save()

    {

        component.save();

    }

   

    public void delete()

    {

        component.delete();

    }

   

    public void modify()

    {

        component.modify();

    }

}

 

 

UserComponent代码:

package jsfdemo.components;

 

 

import net.sf.hibernate.HibernateException;

 

import jsfdemo.beans.UserInfo;

import jsfdemo.daos.BaseDAO;

import jsfdemo.forms.UserForm;

import jsfdemo.util.ValueObejctUtil;

import util.Logger;

 

/**

 * Created date:2004-9-20

 * @author genstone

 *

 */

public class UserComponent implements BaseComponent

{

    private UserForm userForm =null;

    private BaseDAO dao = null;

   

    /**

     * @return Returns the userForm.

     */

    public UserForm getUserForm()

    {

        return userForm;

    }

    /**

     * @param userForm The userForm to set.

     */

    public void setUserForm(UserForm userForm)

    {

        this.userForm = userForm;

    }

   

    public boolean save()

    {

        UserInfo info = ValueObejctUtil.getPersistObject((UserForm)userForm);

        try

        {

            //insert into database

            info.userid = (Long)dao.save(info);

        }

        catch (HibernateException e)

        {

            // TODO Auto-generated catch block

            Logger.getLogger(this.getClass()).error(e.getMessage());

        }

       

        //return forward page

        return true;

 

    }

   

    public boolean delete()

    {

        UserInfo info = ValueObejctUtil.getPersistObject((UserForm)userForm);

        try

        {

            //insert into database

            dao.delete(info);

        }

        catch (HibernateException e)

        {

            // TODO Auto-generated catch block

            Logger.getLogger(this.getClass()).error(e.getMessage());

        }

       

        //return forward page

        return true;

 

    }

   

    public boolean modify()

    {

        UserInfo info = ValueObejctUtil.getPersistObject((UserForm)userForm);

        try

        {

            //insert into database

            dao.update(info);

        }

        catch (HibernateException e)

        {

            // TODO Auto-generated catch block

            Logger.getLogger(this.getClass()).error(e.getMessage());

        }

       

        //return forward page

        return true;

 

    }

   

    /**

     * @return Returns the dao.

     */

    public BaseDAO getDao()

    {

        return dao;

    }

    /**

     * @param dao The dao to set.

     */

    public void setDao(BaseDAO dao)

    {

        this.dao = dao;

    }

}

 

 

UserDAO代码:

package jsfdemo.daos;

 

import util.Logger;

 

import net.sf.hibernate.HibernateException;

 

 

/**

 * This class has been automatically generated by Hibernate Synchronizer.

 * For more information or documentation, visit The Hibernate Synchronizer page

 * at http://www.binamics.com/hibernatesync or contact Joe Hudson at joe@binamics.com.

 *

 * This is the object class that relates to the tbl_user table.

 * Any customizations belong here.

 */

public class UserInfoDAO extends BaseUserInfoDAO

{

    private String hibernateConfig = null;

 

    public UserInfoDAO()

    {

    }

   

    /**

     * @return Returns the hibernateConfig.

     */

    public String getHibernateConfig()

    {

        return hibernateConfig;

    }

    /**

     * @param hibernateConfig The hibernateConfig to set.

     */

    public void setHibernateConfig(String hibernateConfig)

    {

        this.hibernateConfig = hibernateConfig;

        try

        {

            this.initialize(this.hibernateConfig);

        }

        catch (HibernateException e)

        {

            // TODO 自动生成 catch 块

            Logger.getLogger(this.getClass()).error(e.getMessage());

            e.printStackTrace();

        }

 

    }

 

}

 

 

配置文件:/WEB-INF/faces-config.xml

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

<faces-config>

 

  <managed-bean>

    <managed-bean-name>user</managed-bean-name>

    <managed-bean-class>jsfdemo.forms.UserForm</managed-bean-class>

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

  </managed-bean>

 

  <managed-bean>

    <managed-bean-name>userDAO</managed-bean-name>

    <managed-bean-class>jsfdemo.daos.UserInfoDAO</managed-bean-class>

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

    <managed-property>

      <property-name>hibernateConfig</property-name>

      <value>/hibernate-config.xml</value>

    </managed-property>

  </managed-bean>

 

  <managed-bean>

    <managed-bean-name>userComponent</managed-bean-name>

    <managed-bean-class>jsfdemo.components.UserComponent</managed-bean-class>

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

    <managed-property>

      <property-name>userForm</property-name>

      <value>#{user}</value>

    </managed-property>

    <managed-property>

      <property-name>dao</property-name>

      <value>#{userDAO}</value>

    </managed-property>

  </managed-bean>

 

  <managed-bean>

    <managed-bean-name>userHandler</managed-bean-name>

    <managed-bean-class>jsfdemo.handlers.UserHandler</managed-bean-class>

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

    <managed-property>

      <property-name>component</property-name>

      <value>#{userComponent}</value>

    </managed-property>

  </managed-bean>

 

</faces-config>

 

配置文件:/WEB-INF/web.xml

<?xml version="1.0" encoding="ISO-8859-1"?>

 

<!DOCTYPE web-app

  PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.2//EN"

  "http://java.sun.com/j2ee/dtds/web-app_2_2.dtd">

 

<web-app>

    <display-name>JavaServerFace Example Application</display-name>

 

  <context-param>

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

    <param-value>client</param-value>

  </context-param>

 

  <servlet>

    <servlet-name>facesServlet</servlet-name>

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

  </servlet>

 

  <servlet-mapping>

    <servlet-name>facesServlet</servlet-name>

    <url-pattern>*.jsf</url-pattern>

  </servlet-mapping>

 

</web-app>

 

 

user_add.jsp代码:

<%@page contentType="text/html; charset=gb2312"%>

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

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

 

<HTML>

<HEAD>

<title>JSF Demo</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<STYLE>

.input{height:18px;border:solid 1px #3979BD; background-color:#E7F3FF;color:#000000}

.button {

   font-size: 12px;

    border-width: 1px;

    border-color: #d4d0c8;

    cursor: pointer;

    background-color: #dee0e0;

}

 

</STYLE>

</HEAD>

 

 

<BODY  marginwidth="0" marginheight="0">

<f:view locale="zh">

   <h:form>

<table width="645" border="0" cellPadding=0 cellSpacing=0>

    <tr valign="top">

    <td width="50"></td>

    <td>

        <table border="0">

        <tr>

        <td align="center" colspan="2"><b>

        <font size="4">添加用户</font></b>

        </td>

        </tr>

        <tr>

            <td width="92" valign="top">用户名称</td>

            <td><h:inputText value="#{user.username}" required="true" styleClass="input"/></td>

        </tr>

        <tr>

            <td width="92" valign="top">密码</td>

            <td><h:inputSecret value="#{user.password}" required="true" styleClass="input"/></td>

        </tr>

        <tr>

            <td colspan="2" align="center">

            <h:commandButton value="Save" action="#{userHandler.save}" styleClass="button"/>

            </td>

        </tr>

        </table>

    </td>

    </tr>

</table>

   </h:form>

</f:view>

</BODY>

</HTML>

 

 

注意

在浏览器中调用user_add.jsp文件时,注意应按照web.xml文件中JSF的servlet-mapping的配置调用,即调用时按照如下方式:

http://192.168.1.10:8080/jsfdemo/user_add.jsf

servlet-mapping配置如下

  <servlet-mapping>

    <servlet-name>facesServlet</servlet-name>

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

  </servlet-mapping>

 

在浏览器中调用jsp页面为http://192.168.1.10:8080/jsfdemo/user_add.faces

JSF框架会自动映射到相应的jsp文件

 

以上示例使用Eclipse3.0开发,Tomcat4.1.29+j2sdk1.4.1环境测试运行正常

 

Web UI实现托拽式快速开发

以上讲述了JSF的原理,在实际开发中,根据使用的IDE不同,使用JSF框架快速开发的流程也有所不同。现今,提供JSF开发的工具主要是一些商用的开发工具,如Webshpere5.12Jbuilder等。Eclipse的第三方插件Exadel JSF Studio支持JSF开发。对EclipseExadel JSF开发请参考http://www.exadel.com/downloads/jsf/userguide/index.html

websphereJSF开发请参考以下文章:http://www-106.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html

java web app ui 框架

开发java web app,后台使用hibernate+spring已经没有什么争议了,但是在界面层用什么呢?我的看法就是web app和web site是有区别的,对于以浏览器为界面的应用程...
  • imduker
  • imduker
  • 2005年04月20日 16:57
  • 1123

Web编程学习一: 使用JSF来创建Web应用

好久没有coding了,最近准备重新复习下,现在重新开始,从搭建环境到开发来学习一些比较有用的技术。 第一个例子,是使用Jface来创建一个最简单的Web应用。 我准备的环境是Eclipse Ju...
  • starshus
  • starshus
  • 2014年03月29日 20:19
  • 5532

java 快速开发框架JeeWeb敏捷开发平台

JeeWeb敏捷开发平台 QQ交流群: 570062301官方网站: http://www.jeeweb.cn官方论坛: http://bbs.jeeweb.cn项目演示: http://demo....
  • white__cat
  • white__cat
  • 2017年07月06日 16:17
  • 6504

Web编程学习二: 使用JPA结合JSF来创建Web应用

昨天做了一个使用JSF的一个helloworld的小练习,它并没有和后端数据交互。 今天我来加上JPA来持久化数据对象,前台依然使用JSF来展现,做一个完整的Web应用。 这个应用的功能是用户输入...
  • starshus
  • starshus
  • 2014年03月30日 11:01
  • 5209

创建JSF项目及一个简单的JSF项目

1、创建JSF项目我使用的是myeclipse开发工具①新建一个web项目②在项目上右键——Myeclipse——Add JSF Capabilities 完成后项目结构如下图所示: jsf所需的...
  • zhengyikuangge
  • zhengyikuangge
  • 2017年04月06日 18:15
  • 894

Java web开发快速上手

Java web开发快速上手
  • yqj2065
  • yqj2065
  • 2015年09月27日 17:21
  • 1757

Jsf 完全上手

1. JSF入门 藉由以下的几个主题,可以大致了解JSF的轮廓与特性,我们来看看网页设计人员与应用程序设计人员各负责什么。 1.1简介JSF Web应用程序的开发与传统的单机程序开发...
  • u012889434
  • u012889434
  • 2016年02月04日 17:38
  • 1556

JavaEE之JSF技术研究与应用实例

前言 JavaServer Faces(JSF)是一种用于构建Java Web应用程序的标准框架(是Java Community Process规定的JSR-127标准)。它提供了一种以组件为中心的...
  • magic_wz
  • magic_wz
  • 2013年01月09日 11:21
  • 1652

使用Eclipse/MyEclipse搭建简单JSF项目的流程

JavaServer Faces (JSF) 是一种用于构建Java Web 应用程序的标准框架(是Java Community Process 规定的JSR-127标准)。它提供了一种以组件为中心的...
  • lhing17
  • lhing17
  • 2017年02月17日 13:27
  • 1576

Web快速开发平台

Putdb WebBuilder
  • x_focus
  • x_focus
  • 2014年04月23日 11:40
  • 3695
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JSF(Java Server Face)与在Web UI实现托拽式快速开发的应用
举报原因:
原因补充:

(最多只允许输入30个字)