Jsp页面列表组件框架设计
作者：李俊杰
概述
为了提高开发效率，减少重复的页面多次开发，提高系统的可配置性和代码的可复用性，也是为了展示struts、hibernate框架，设计原则是降低显示逻辑和数据的耦合，达到显示逻辑和数据完全分离，即相同的数据使用不同的显示逻辑，无须修改显示逻辑，只需置换不同的显示模版即可。
实现机制
其中Sturts Action是具体的需要调用列表的Action类，TempDataMap类是具体的列表数据的封装类，TempData类是具体的表记录类，即TempDataMap来适配TempData，把表记录适配成我们需要的列表显示类。
调用示例：
Action：
//获取数据库数据
listRowCount = query.findPayItemByParam(paramInfo,paramForm.getPageSize(),paramForm.getPageNo());
list = listRowCount.getList();
//调用列表组件
if(list != null && list.size() > 0)
ColDataMgr mgr = new ColDataMgr(getDataMaps(list));
//获取列表的表列信息，数据信息
ArrayList colMetaInfos = mgr.getColMetaInfos();
ArrayList datas = mgr.getData();
// 将列表信息传到List页面
request.setAttribute(CoreConstant.WEB_DISPLAY_COL_METAT_INFOS_KEY, colMetaInfos);
request.setAttribute(CoreConstant.WEB_DISPLAY_DATAS_KEY, datas);
同样道理，给出的数据可以分发给打印组件和导出excel列表组件，根据列表的列信息和数据信息，导出excel和打印。
具体的map类的内容可参照附件ReceiveItemAmountQueryMap.java文件。
获取显示列信息：
/**
*返回的list中每个元素是列元信息类对象，列元信息类对象包括列名称，列显示名称，
*列显示格式，其中列名称是key
* 导出excel和打印是同样的道理
*/
public ArrayList getColMetaInfos()
{
ArrayList list = new ArrayList();
list.add(new ColMetaInfo("transCode", " 单据编号 ", true, "height="20" align="center" nowrap"));
list.add(new ColMetaInfo("transDate", " 单据日期 ", false, "height="20" align="center" nowrap"));
list.add(new ColMetaInfo("transTypeName", " 业务类型 ", false, "height="20" align="left" nowrap"));
list.add(new ColMetaInfo("receiveOrgName", " 收款单位 ", false, "height="20" align="left" nowrap"));
list.add(new ColMetaInfo("receiveAccountNo", " 收款账户号 ", false, "height="20" align="center" nowrap"));
list.add(new ColMetaInfo("receiveBankName", " 收款银行 ", false, "height="20" align="left" nowrap"));
list.add(new ColMetaInfo("extAccountNo", " 付款账户 ", false, "height="20" align="center" nowrap"));
list.add(new ColMetaInfo("extBankName", " 付款银行 ", false, "height="20" align="left" nowrap"));
list.add(new ColMetaInfo("amount", " 金 额 ", false, "height="20" align="right" nowrap"));
list.add(new ColMetaInfo("memo", " 摘 要 ", false, "height="20" align="left" nowrap"));
return list;
}
//适配数据，根据数据的类型如日期型，装换成需要的字符串形式，金额类数据也转换成相//应的字符串格式，保存到HashMap中。
public HashMap getColData()
{
StringBuffer sb = new StringBuffer("receiveItemAmountQueryAction.do?operation=");
sb.append(CoreConstant.WEB_OPERATION_TYPE_TO_UPDATE_KEY);
sb.append("&id=");
sb.append(String.valueOf(form.getTransApplyItem().getTransApplyID().longValue()));
String link = sb.toString();
HashMap hm = new HashMap();
hm.put("transCode"," "+IDataFormat.formatString(form.getTransCode()));
hm.put("transDate", " "+IDateFormat.toDateString(form.getTransDate()));
hm.put("transTypeName", " "+IDataFormat.formatString(form.getTransTypeName()));
hm.put("receiveOrgName", " "+IDataFormat.formatString(form.getReceiveOrgName()));
hm.put("receiveAccountNo", " "+IDataFormat.formatString(form.getReceiveAccountNo()));
hm.put("receiveBankName", " "+IDataFormat.formatString(form.getReceiveBankName()));
hm.put("extAccountNo", " "+IDataFormat.formatString(form.getTransApplyItem().getExtAccountNo()));
hm.put("extBankName", " "+IDataFormat.formatString(form.getTransApplyItem().getExtBankName()));
if (form.getTransApplyItem().getAmount() != null)
{
String sAmount = " "+IDataFormat.formatDisabledAmount(form.getTransApplyItem().getAmount().doubleValue() );
hm.put("amount", sAmount);
}
else
{
hm.put("amount", "0.00");
}
hm.put("memo", " "+IDataFormat.formatString(form.getTransApplyItem().getMemo()));
hm.put("SUPERLINK", link);
return hm;
}
附录：
DataMap接口：
/**
* @author lijj
*
* To change the template for this generated type comment go to
* Window - Preferences - Java - Code Generation - Code and Comments
*/
public interface DataMap {
public ArrayList getColMetaInfos();
public ArrayList getExeclColMetaInfos();
public ArrayList getPrintColMetaInfos();
public ArrayList getColSearchs();
public HashMap getQueryData();
public String getSearchUrl();
public HashMap getColData();
}
抽象实现类DefaultDataMap
import java.util.ArrayList;
import java.util.HashMap;
/**
* @author lijj
*
* To change the template for this generated type comment go to
* Window - Preferences - Java - Code Generation - Code and Comments
*/
public abstract class DefaultDataMap implements DataMap{
public abstract ArrayList getColMetaInfos();
public abstract HashMap getColData();
public ArrayList getExeclColMetaInfos()
{
return new ArrayList();
}
public ArrayList getPrintColMetaInfos()
{
return new ArrayList();
}
public String getSearchUrl()
{
return null;
}
public HashMap getQueryData()
{
return null;
}
public ArrayList getColSearchs()
{
ArrayList retList = new ArrayList();
return retList;
}
}
ColDataMgr管理类：
import java.util.ArrayList;
import java.util.HashMap;
/**
* @author lijj
*
* To change the template for this generated type comment go to Window - Preferences - Java - Code Generation - Code and
* Comments
*/
public class ColDataMgr
{
ArrayList list = null;
DataMap map = null;
public ColDataMgr(ArrayList list)
{
this.list = list;
}
public ColDataMgr(DataMap map)
{
this.map = map;
}
public ArrayList getColMetaInfos()
{
if (list != null)
{
return ((DataMap) list.get(0)).getColMetaInfos();
}
else
{
return this.map.getColMetaInfos();
}
}
public ArrayList getExeclColMetaInfos()
{
if (list != null)
{
return ((DataMap) list.get(0)).getExeclColMetaInfos();
}
else
{
return this.map.getExeclColMetaInfos();
}
}
public ArrayList getPrintColMetaInfos()
{
if (list != null)
{
return ((DataMap) list.get(0)).getPrintColMetaInfos();
}
else
{
return this.map.getPrintColMetaInfos();
}
}
public ArrayList getData()
{
ArrayList retList = new ArrayList();
DataMap dataMap = null;
if (list != null)
{
for (int i = 0; i < list.size(); i++)
{
dataMap = (DataMap) list.get(i);
retList.add(dataMap.getColData());
}
}
return retList;
}
public ArrayList getSearchInfos()
{
return getDataMap().getColSearchs();
}
public String getSearchUrl()
{
return getDataMap().getSearchUrl();
}
public HashMap getQueryData()
{
return getDataMap().getQueryData();
}
private DataMap getDataMap()
{
if (this.map != null)
{
return map;
}
else
{
return ((DataMap) list.get(0));
}
}
}
列元信息类 ColMetaInfo
/**
* @author lijj
*
* To change the template for this generated type comment go to Window - Preferences - Java - Code Generation - Code and
* Comments
*/
public class ColMetaInfo
{
private String name;
private String displayName;
private boolean isLink;
private String property;
public ColMetaInfo(String name, String displayName, boolean isLink, String property)
{
this.name = name;
this.displayName = displayName;
this.isLink = isLink;
this.property = property;
}
public String getDisplayName()
{
return displayName;
}
public void setDisplayName(String displayName)
{
this.displayName = displayName;
}
public boolean isLink()
{
return isLink;
}
public void setLink(boolean isLink)
{
this.isLink = isLink;
}
public String getName()
{
return name;
}
public void setName(String name)
{
this.name = name;
}
public String getProperty()
{
return property;
}
public void setProperty(String property)
{
this.property = property;
}
}
模版文件list.jsp
<%@ page contentType="text/html;charset=gb2312"%>
<%@ page import="java.util.ArrayList"%>
<%@ page import="java.util.HashMap"%>
<%@ page import="com.e_chinalife.ecms.frame.component.colmap.ColMetaInfo"%>
<%
ArrayList colMetaInfos = (ArrayList) request.getAttribute("colMetaInfos");
ArrayList datas = (ArrayList) request.getAttribute("datas");
int colLen = colMetaInfos.size();
int resultCount = datas.size();
%>
<table border="0" width="99%" cellspacing="1" cellpadding="0" align="center" class=ItemList>
<TBODY>
<TR align=center>
<%
ColMetaInfo colMeta = null;
for (int i = 0; i < colLen; i++)
{
colMeta = (ColMetaInfo) colMetaInfos.get(i);
%>
<TD class=ItemTitle height=20 nowrap>
<%=colMeta.getDisplayName()%>
</TD>
<%
}
%>
</TR>
<%
HashMap hm = null;
for (int i = 0; i < resultCount; i++)
{
%>
<TR align=center borderColor=#999999 class=ItemBody>
<%
hm = (HashMap) datas.get(i);
for (int j = 0; j < colLen; j++)
{
colMeta = (ColMetaInfo) colMetaInfos.get(j);
%>
<TD <%=colMeta.getProperty()%> >
<%
if (colMeta.isLink() && hm.get(colMeta.getName()) != null
&& !((String) hm.get(colMeta.getName())).equals(""))
{
%>
<a href="<%=hm.get("SUPERLINK")%>"> <%=hm.get(colMeta.getName())%></a>
<%
}
else
{
%>
<%=hm.get(colMeta.getName())%>
<% }
%>
</TD>
<%
}
%>
</TR>
<%
}
%>
<%
//没有记录显示空白行
if (resultCount == 0)
{
%>
<TR align=center borderColor=#999999 class=ItemBody>
<%
for (int i = 0; i < colLen; i++)
{
colMeta = (ColMetaInfo) colMetaInfos.get(i);
%>
<TD height=20 nowrap class=ItemBody> </TD>
<%
}
}
%>
</TR>
</TBODY>
</table>
Jsp使用列表模版的片断
<table width="80%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0" width="98%" bgcolor="#0099CC" cellspacing="1" cellpadding="0" align="center">
<tr>
<td width="100%" bgcolor="#EFEFEF">
<table border="0" width="100%" cellspacing="1" height="20">
<tr><td width="100%" colspan="3" height="19" class="FormTitle"><b>开户申请</b></td></tr>
</table>
<hr>
<jsp:include page="../common/template/List.jsp" flush="true"/>
<jsp:include page="../common/template/PageNavigator.jsp" flush="true"/>
</td>
</tr>
<tr>
<td colspan="6" bgcolor="#EFEFEF">
<table border="0" width="100%" cellspacing="1" height="20">
<tr>
<td width="82%" height="30" align="right">
<input type="button" value=" 新 增 " name="bt" class=button onClick="JavaScript:to_Add();">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
结束语
Web组件的设计和使用，可能还有不尽人意的地方，我们在以后的开发中，有什么意见和要求，可以重构这些组件，以适应新的需求。Web组件的设计原则是数据和显示脱耦分离，显示逻辑由显示的模版控制，与具体的数据没有任何关系，不管数据的来源是数据库，还是文本文件，只要能适配成相关的接口，就能展现在不同风格的页面（即使用不同风格的模版）。
