技术分析报告:2004-09-17
本期主题:JSF(Java Server Face)与在Web UI实现托拽式快速开发的应用
Java Server Face介绍
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 Face与MVC架构比较
与现在较为流行的MVC架构有所不同，JSF在设计结构上并没有将视图和逻辑事务严格的分开，而是依赖于程序设计人员的具体实现。比如Handlers和Components在实际的开发中可以在一个类中实现，这样就会使视图层和逻辑处理层紧密的偶合在一起。建议在进行JSF项目时应严格要求程序设计人员将Handlers和Components分离。
以下是MVC（以Struts为例）和JSF框架在结构设计上的比较
从上图可以看出，MVC和JSF的开发结构有很大的区别。MVC主要关注于开发应用各层的松散偶合；JSF则关注于事件处理。从应用上分析，MVC重视结构的划分而JSF致力于为快速开发提供基础解决方案。笔者建议不能简单的比较两种架构的优劣，应结合实际的开发和应用选择。
Java Server Face的技术实现
JSF框架的实现依赖于以下几种技术：Java Tag Lib，IoC type2（setter and getter）,xml
在JSF的表示层使用Tag lib技术处理web的form object
使用IoC type2和xml将form object和具体的handler和component关联起来
Java Server Face的示例
示例应用需求说明：实现一个用户管理功能，要求将视图层、逻辑层、数据访问层分开，降低各层的偶合度。
下图是示例的简单类图，其中数据层采用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.12，Jbuilder等。Eclipse的第三方插件Exadel JSF Studio支持JSF开发。对Eclipse的Exadel JSF开发请参考http://www.exadel.com/downloads/jsf/userguide/index.html。
对websphere的JSF开发请参考以下文章：http://www-106.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html
