ITPUB??ì3
ITPUB论坛 » WEB 2.0技术 » Jsp页面列表组件框架设计

新一届的微软MVP评选已经开始,欢迎各位推荐!

标题: Jsp页面列表组件框架设计
离线 chenlunpan
Melancholy


精华贴数 3
个人空间 20
技术积分 4932 (289)
社区积分 10150 (164)
注册日期 2006-5-24
论坛徽章:23
地主长老体育版块博采纪念徽章2008年新春纪念徽章2008年新春纪念徽章2008年新春纪念徽章2008年新春纪念徽章
2008年新春纪念徽章2008年新春纪念徽章    

发表于 2007-9-21 13:41 
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组件的设计原则是数据和显示脱耦分离,显示逻辑由显示的模版控制,与具体的数据没有任何关系,不管数据的来源是数据库,还是文本文件,只要能适配成相关的接口,就能展现在不同风格的页面(即使用不同风格的模版)。


__________________
长期打劫稀有徽章,欢迎接受我的打劫
顶部
离线 okone96
吉日


精华贴数 0
个人空间 0
技术积分 3072 (501)
社区积分 1517 (753)
注册日期 2006-2-16
论坛徽章:25
红宝石会员2007贡献徽章ITPUB新首页上线纪念徽章BLOG每日发帖之星开发板块每日发贴之星生肖徽章:狗
      

发表于 2007-10-2 19:27 
lz发帖能不能整理些,你的代码乱的没法读啊


__________________
顶部
离线 dream_zdf
灌灌帮小虫


精华贴数 0
个人空间 0
技术积分 827 (2350)
社区积分 27545 (41)
注册日期 2006-4-19
论坛徽章:51
      
      

发表于 2007-10-2 23:29 



__________________
我是灌灌帮虫虫
顶部
 
    


CopyRight 1999-2006 itpub.net All Right Reserved.
北京皓辰广域网络信息技术有限公司. 版权所有
E-mail:Webmaster@itpub.net
京ICP证:010037号 联系我们 法律顾问