介绍一下 extremeTable

1、何为 extremeTable，又一个开源taglib
      extremeTable,开源的jsp 自定义标签,以表格的形式显示数据，当前最新版本为　1.0.1-M1.
它是一个类似display tag,valueList 等开源产品.
homepage: http://extremecomponents.org/
download: http://sourceforge.net/projects/extremecomp/

开源产品作者:
Jeff Johnston ，现居住美国，圣路易斯.
                六年web应用软件开发经验，eXtremeComponents最初的创建者. 负责设计及大部分的编码。

其它还包括Paul Horn ,eXtremeTree的技术设计, 以及大部分的编码;
Dave Goodin，Brad Parks等.

主要特色
1、导出ＥＸＣＥＬ以及pdf无需再另写jsp（这个基本与valuelist作比较，因为以前用valueList的时候每写一个table都要再写一个excel.jsp）
2、扩展性比较强，基本上想怎样改就怎样改，对jar影响比较少。
3、另外据官方声称有以下四点

Fast ( 本人曾小测一次，三千纪录情况下，效率基本与valuelist持平) Efficient Easy ( 得确很容易使用与理解加扩展) Reliable

安装要求
1、Servlet 2.3 或更高
2、 JDK 1.3.1 或更高

最小的Jars需求
1、commons-beanutils 1.6
2、commons-collections 3.0
3、 commons-lang 2.0
4、 commons-logging 1.0.4
5、 standard 1.0.2

PDF 导出要用到的包:
1、 avalon-framework 4.0
2、batik 1.5-fop-0.20-5
3、 fop 0.20.5
4、 xalan 2.5.1
5、 xercesImpl 2.6.1
6、 xml-apis 2.0.2
XLS 导出要用到的包:
1、 poi-2.5.1.jar


２、安装与测试

下载解压到的主要文件包括

[1]src源文件
[2]extremecomponents.jar以及其它所依赖的包

[3]tld文件
extremecomponents.tld

[4]一组默认样式及图片
extremecomponents.css

[5]用以校验安装的测试页面
test.jsp

[6]doc文档，比较详细

快速配置安装
web app目录结构
/ROOT
   　　/WEB-INF/web.xml
       　/tld/extremecomponents.tld
           /lib
           /classes/extremecomponents.properties
                   [extremecomponents.properties文件可到source\org\extremecomponents\table\core\中得到]
     　/images/*.jpg [一组默认样式及图片]
     　/css/extremecomponents.css
     　/test.jsp
     　/index.jsp [用于学习以及扩展测试用代码请见下]
    

web.xml　配置
包括taglib uri 定义以及导出文件filter，由于只是手板功夫,这里就略过了,相关代码如下:

< taglib >
< taglib-uri > /tld/extremecomponents </ taglib-uri >
< taglib-location > /WEB-INF/tld/extremecomponents.tld </ taglib-location >
</ taglib >

< filter >
< filter-name > eXtremeExport </ filter-name >
< filter-class > org.extremecomponents.table.filter.ExportFilter </ filter-class >
</ filter >
< filter-mapping >
< filter-name > eXtremeExport </ filter-name >
< url-pattern > /* </ url-pattern >
</ filter-mapping >

配置好所有后，开tomcat，测试浏览http://your_web_app/test.jsp，看到

Congratulations!! You have successfully configured eXtremeTable!
恭喜你，这表示安装成功！

３、动手学习这个taglib
建index.jsp页面,修改代码如下

<% @ page contentType = " text/html;charset=GBK " %>
<% @ page import = " java.util.* " %>
<% @ taglib uri = " /tld/extremecomponents "  prefix = " ec "   %>
<!--  在本页要用到jstl -->
<% @ taglib prefix = " c "  uri = " http://java.sun.com/jsp/jstl/core "   %>
<!-- 使用include的方式 -->
< link rel = " stylesheet "  type = " text/css "  href = " <c:url value= " / extremecomponents.css " /> " >

<%
    List goodss  =   new  ArrayList();
     for  ( int  i  =   1 ; i  <=   10 ; i ++ )
     {
        Map goods = new java.util.HashMap();
        goods.put("code", "A00"+i);
        goods.put("name", "面包"+i);
        goods.put("status", "A:valid");
        goods.put("born", new Date());
        goodss.add(goods);
    }
    request.setAttribute( " goodss " , goodss);
%>
< ec:table
 collection = " goodss "
    action = " ${pageContext.request.contextPath}/test.jsp "
    imagePath = " ${pageContext.request.contextPath}/images/*.gif "
    cellpadding = " 1 "
    title = " my bread " >
< ec:column property = " code " />
< ec:column property = " name " />
< ec:column property = " status " />
< ec:column property = " born "  cell = " date "  format = " yyyy-MM-dd " />
</ ec:table >

效果如下:



[1] 1.0.1-M1 版支持国际化
修改web.xml文件增加

< context-param >
    < param-name > extremecomponentsResourceBundleLocation </ param-name >
    < param-value > com.itorgan.tags.extreme.extremetableResourceBundle </ param-value >
</ context-param >

意指到 com.itorgan.tags.extreme 下找 extremetableResourceBundle_[language]_[country].properties 文件

extremetableResourceBundle_en_US.properties代码如下
table.statusbar.resultsFound={0} results found, displaying {1} to {2}
table.statusbar.noResultsFound=There were no results found.
table.toolbar.showAll=Show All

extremetableResourceBundle_zh_CN.properties如下.
table.statusbar.resultsFound={0} \u6761\u7EAA\u5F55\u7B26\u5408\u6761\u4EF6, \u73B0\u5728\u662F\u7B2C {1} \u81F3 {2} \u6761\u7EAA\u5F55
table.statusbar.noResultsFound=\u6CA1\u6709\u8981\u67E5\u8BE2\u7684\u7EAA\u5F55\u3002
table.toolbar.showAll=\u6240 \u6709

补充:中文 - > Unicode编码　可通过反编译class文件或用native2ascii命令得到 。

然后在table标签中增加locale属性即可切换
[3] 样式修改
基本的HTML结构[7] 解决excel中文问题
继承XlsView.java ec另一亮点就帮我们写好了form ,如上代码:
      <ec:form name="mainform" action="goods.do"> </ec:form> 设置form name以及action

参考文档
http://extremecomponents.org/extremesite/public/documentation.jsp

< ec:table
    ………………
    ………………
    ………………
    locale = " en_US "
>

< ec:table
    ………………
    ………………
    ………………
    locale = " zh_CN "
>

[2] 保留table的上一次状态
      是指,不管跳转到另一个后再返回,extremeTable会将之前的Filter,Sort参数保存到session中，以至返回看到的页面还是之前的状态.
实现操作方法:
修改extremecomponents.properties文件
table.useSessionFilterSortParam=foo
saveFilterSort="true" 注意：saveFilterSort="true"不能在properties文件中配置，只能在页面中设

　< ec:table
    ……………………
    saveFilterSort = " true "
/ ec:table >
< a href = " 1.jsp " > 跳到 </ a >

新建一页面用于跳转的页面 1.jsp
代码为

< a href = " test.jsp?foo=true " > Back </ a >

 

 

< div  class ="eXtremeTable"   >
< table  border ="0"   cellpadding ="0"   cellspacing ="0"   width ="100%"   >
     < tr >
         < td  class ="title"   >< span > <!-- 标题 --> </ span ></ td >
         < td  align ="right"   >
         < table  border ="0"   cellpadding ="0"   cellspacing ="1"   class ="toolbar"   >
             < tr >
       < form  name ="pres_toolbar"   action ="/extremesite/public/demo/presidents.jsp"   >
             <!-- 工具栏，包括上一页，下一页以及导出 -->
             </ tr >
             < tr >  
       </ form >
             </ tr >
         </ table >
         </ td >
     </ tr >
</ table >

< table  id ="pres"   border ="0"   cellspacing ="2"   cellpadding ="0"   width ="100%"   class ="tableRegion"   >
     < tr >
         < td  colspan ="6"   >
         < table  border ="0"   cellpadding ="0"   cellspacing ="0"   width ="100%"   >
             < tr >
                 < td  class ="statusBar"   > 43 results found, displaying 1 to 12  </ td >
                 < td  class ="filterButtons"  > </ td >
             </ tr >
         </ table >
         </ td >
     </ tr >         

< form  name ="pres_filter"   action ="/extremesite/public/demo/presidents.jsp"   >
     < tr  class ="filter"   id ="filter"   >
         <!--过滤条件的input框 -->
     </ tr >
</ form >
     < tr >
         <!-- tableHead -->
     </ tr >
     < tbody  class ="tableBody"   >
     < tr >
         <!-- column -->
     </ tr >
     </ tbody >
</ table >
</ div >

extremeTable支持样式快速切换.可自定的样式包括column 的td以及table的一些属性，例如cellpadding等，
另本人发现，在properties中如下设置tableHeader的样式是不行的．不知道是否一个ＢＵＧ
table.headerClass=itoTableHeader
table.headerSortClass=itoTableHeaderSort

只能继承一个HeaderCell

public   class  HeaderCell extends org.extremecomponents.table.cell.HeaderCell
{
    public final static String TABLE_HEADER = "itoTableHeader";
    public final static String TABLE_HEADER_SORT = "itoTableHeaderSort";
｝

新的样式代码：

< LINK REL = " stylesheet "  HREF = " <c:url value= " / style.css " /> "  TYPE = " text/css " >
 <ec:table
 collection="goodss"
    action="${pageContext.request.contextPath}/test.jsp"
    imagePath="${pageContext.request.contextPath}/images/*.gif"
    cellpadding="1"
    title="my bread"
    saveFilterSort="true"
    locale="zh_CN"
>
<ec:column property="code" title="编号" width="100" styleClass="GridTd"/>
<ec:column property="name" title="名称" width="200" styleClass="GridTd"/>
<ec:column property="status" title="状态" width="80" styleClass="GridTd"/>
<ec:column property="born" title="生产日期" width="100" cell="date" format="yyyy-MM-dd" styleClass="GridTd"/>
</ec:table>

效果见下:


[4] 实现 table width 自动累加
原来的extremeTable　宽度要自己set。不会自动能过下面的column累加。
本人作了个修改以达到自动累加，省得自己加写上去：
查看htmlView.java　两处地方　
toolbarPlacement
tableStart可见两处地方要修改的


[5] custom cell
在properties文件中我们可观察到:

table.cell_=display
table.cell_currency=org.extremecomponents.table.cell.NumberCell
table.cell_number=org.extremecomponents.table.cell.NumberCell
table.cell_display=org.extremecomponents.table.cell.DisplayCell
table.cell_date=org.extremecomponents.table.cell.DateCell

当 column 默认使用org.extremecomponents.table.cell.DisplayCell

public   class  DisplayCell extends BaseCell  {

    public String html() {
        HtmlBuilder html = new HtmlBuilder();

        html.append(startTD());

        Object value = column.getValue();
        if (value != null && StringUtils.isNotEmpty(value.toString())) {
            html.append(value);
        } else {
            html.append("&nbsp;");
        }

        html.append(endTD());

        return html.toString();
    }
}

ec已其它cell
日期格式化： cell = " date " format = " yyyy-MM-dd "
数字格式化： cell="currency" format="###,###,##0.00"

另外，extremeTable支持自定义cell
在这里我以一个简单的例子[以input框的形式出现] 说明如何实现这一方便的扩展

public   class  DemoInput extends BaseCell
{
      public String html()
    {
        Integer rowNum = rowcount;
        HtmlBuilder html = new HtmlBuilder();
        html.append(startTD());
        Object value = column.getValue();
        HtmlBuilder input = new HtmlBuilder();
        input.input("text");
        input.name(column.getProperty() + "_" + rowNum);
        input.value(value.toString());
        input.close();
        html.append(input.toString());
        html.append(endTD());
        return html.toString();
    }
}

properties文件增加

table.cell_demoInput  = org.extremecomponents.table.cell.DemoInput 

jsp代码

< ec:column property = " code "  title = " 编号 "  width = " 100 "  cell = " demoInput "  styleClass = " GridTd " />

效果显示为
当然这只是一个简单的demo以说明如何自定义cell
如上面你可以简单的实现同样功能

 

 

< ec:column  property ="code"  title ="编号"  width ="100"  styleClass ="GridTd" >
< input  type ="text"  value ="${goodss.code}"  name ="code_${ROWCOUNT}" >