extremeTable，又一个开源taglib

柔光的暖阳◎ 2022-09-18 06:50 164阅读 0赞

**何为 extremeTable，又一个开源taglib**

extremeTable,开源的jsp 自定义标签,以表格的形式显示数据，当前最新版本为　[1.0.1-M1][].  
它是一个类似display tag,valueList 等开源产品.  
homepage: [http://extremecomponents.org/][http_extremecomponents.org]  
download: [http://sourceforge.net/projects/extremecomp/][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，由于只是手板功夫,这里就略过了,相关代码如下:
    
    ![None.gif][] < taglib >   
    ![None.gif][] < taglib-uri > /tld/extremecomponents </ taglib-uri >   
    ![None.gif][] < taglib-location > /WEB-INF/tld/extremecomponents.tld </ taglib-location >   
    ![None.gif][] </ taglib >
    
      
    
    
    ![None.gif][] < filter >   
    ![None.gif][] < filter-name > eXtremeExport </ filter-name >   
    ![None.gif][] < filter-class > org.extremecomponents.table.filter.ExportFilter </ filter-class >   
    ![None.gif][] </ filter >   
    ![None.gif][] < filter-mapping >   
    ![None.gif][] < filter-name > eXtremeExport </ filter-name >   
    ![None.gif][] < url-pattern > /\* </ url-pattern >   
    ![None.gif][] </ filter-mapping >   
    ![None.gif][]
    
      
    配置好所有后，开tomcat，测试浏览[http://your\_web\_app/test.jsp][http_your_web_app_test.jsp]，看到  
      
    Congratulations!! You have successfully configured eXtremeTable!  
    恭喜你，这表示安装成功！
    
      
    **３、动手学习这个taglib**  
    建index.jsp页面,修改代码如下  
    
    
    ![None.gif][] <% @ page contentType = " text/html;charset=GBK " %>   
    ![None.gif][] <% @ page import = " java.util.\* " %>   
    ![None.gif][] <% @ taglib uri = " /tld/extremecomponents "  prefix = " ec "   %>   
    ![None.gif][]    
    ![None.gif][] <% @ taglib prefix = " c "  uri = " http://java.sun.com/jsp/jstl/core "   %>   
    ![None.gif][]    
    ![None.gif][] < link rel = " stylesheet "  type = " text/css "  href = " <c:url value= " / extremecomponents.css " /> " >   
    ![None.gif][]  
    ![None.gif][] <%   
    ![None.gif][]    List goodss  =   new  ArrayList();  
    ![None.gif][]     for  ( int  i  =   1 ; i  <=   10 ; i \++ )  
    ![ExpandedBlockStart.gif][]![ContractedBlock.gif][]     ![dot.gif][] \{  
    ![InBlock.gif][]        Map goods = new java.util.HashMap();  
    ![InBlock.gif][]        goods.put("code", "A00"\+i);  
    ![InBlock.gif][]        goods.put("name", "面包"\+i);  
    ![InBlock.gif][]        goods.put("status", "A:valid");  
    ![InBlock.gif][]        goods.put("born", new Date());  
    ![InBlock.gif][]        goodss.add(goods);  
    ![ExpandedBlockEnd.gif][]    \}   
    ![None.gif][]    request.setAttribute( " goodss " , goodss);  
    ![None.gif][] %>   
    ![None.gif][] < ec:table  
    ![None.gif][] collection = " goodss "   
    ![None.gif][]    action = " $\{pageContext.request.contextPath\}/test.jsp "   
    ![None.gif][]    imagePath = " $\{pageContext.request.contextPath\}/images/\*.gif "   
    ![None.gif][]    cellpadding = " 1 "   
    ![None.gif][]    title = " my bread " >   
    ![None.gif][] < ec:column property = " code " />   
    ![None.gif][] < ec:column property = " name " />   
    ![None.gif][] < ec:column property = " status " />   
    ![None.gif][] < ec:column property = " born "  cell = " date "  format = " yyyy-MM-dd " />   
    ![None.gif][] </ ec:table >
    
      
      
    效果如下:  
    ![ec1.jpg][]  
      
      
    \[1\] 1.0.1-M1 版支持国际化  
    修改web.xml文件增加  
    
    
    ![None.gif][] < context-param >   
    ![None.gif][]    < param-name > extremecomponentsResourceBundleLocation </ param-name >   
    ![None.gif][]    < param-value > com.itorgan.tags.extreme.extremetableResourceBundle </ param-value >   
    ![None.gif][] </ 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属性即可切换 
    
    ![None.gif][] < ec:table  
    ![None.gif][]    ………………  
    ![None.gif][]    ………………  
    ![None.gif][]    ………………  
    ![None.gif][]    locale = " en\_US "   
    ![None.gif][] >   
    ![None.gif][]  
    ![None.gif][] < ec:table  
    ![None.gif][]    ………………  
    ![None.gif][]    ………………  
    ![None.gif][]    ………………  
    ![None.gif][]    locale = " zh\_CN "   
    ![None.gif][] >   
    ![None.gif][]
    
      
    \[2\] 保留table的上一次状态  
          是指,不管跳转到另一个后再返回,extremeTable会将之前的Filter,Sort参数保存到session中，以至返回看到的页面还是之前的状态.实现操作方法:  
    修改extremecomponents.properties文件  
    table.useSessionFilterSortParam=foo  
    saveFilterSort="true" 注意：saveFilterSort="true"不能在properties文件中配置，只能在页面中设  
    
    
    　< ec:table  
    ![None.gif][]    ……………………  
    ![None.gif][]    saveFilterSort = " true "   
    ![None.gif][] / ec:table >   
    ![None.gif][] < a href = " 1.jsp " > 跳到 </ a >
    
    新建一页面用于跳转的页面 1.jsp  
    代码为  
    
    
    ![None.gif][] < a href = " test.jsp?foo=true " > Back </ a >
    
     
    
     
    
    ![None.gif][] < div  class ="eXtremeTable"   >   
    ![None.gif][] < table  border ="0"   cellpadding ="0"   cellspacing ="0"   width ="100%"   >   
    ![None.gif][]     < tr >   
    ![None.gif][]         < td  class ="title"   >< span >  </ span ></ td >   
    ![None.gif][]         < td  align ="right"   >   
    ![None.gif][]         < table  border ="0"   cellpadding ="0"   cellspacing ="1"   class ="toolbar"   >   
    ![None.gif][]             < tr >   
    ![None.gif][]       < form  name ="pres\_toolbar"   action ="/extremesite/public/demo/presidents.jsp"   >   
    ![None.gif][]                
    ![None.gif][]             </ tr >   
    ![None.gif][]             < tr >    
    ![None.gif][]       </ form >   
    ![None.gif][]             </ tr >   
    ![None.gif][]         </ table >   
    ![None.gif][]         </ td >   
    ![None.gif][]     </ tr >   
    ![None.gif][] </ table >   
    ![None.gif][]  
    ![None.gif][] < table  id ="pres"   border ="0"   cellspacing ="2"   cellpadding ="0"   width ="100%"   class ="tableRegion"   >   
    ![None.gif][]     < tr >   
    ![None.gif][]         < td  colspan ="6"   >   
    ![None.gif][]         < table  border ="0"   cellpadding ="0"   cellspacing ="0"   width ="100%"   >   
    ![None.gif][]             < tr >   
    ![None.gif][]                 < td  class ="statusBar"   > 43 results found, displaying 1 to 12  </ td >   
    ![None.gif][]                 < td  class ="filterButtons"  > </ td >   
    ![None.gif][]             </ tr >   
    ![None.gif][]         </ table >   
    ![None.gif][]         </ td >   
    ![None.gif][]     </ tr >           
    ![None.gif][]  
    ![None.gif][] < form  name ="pres\_filter"   action ="/extremesite/public/demo/presidents.jsp"   >   
    ![None.gif][]     < tr  class ="filter"   id ="filter"   >   
    ![None.gif][]            
    ![None.gif][]     </ tr >   
    ![None.gif][] </ form >   
    ![None.gif][]     < tr >   
    ![None.gif][]            
    ![None.gif][]     </ tr >   
    ![None.gif][]     < tbody  class ="tableBody"   >   
    ![None.gif][]     < tr >   
    ![None.gif][]            
    ![None.gif][]     </ tr >   
    ![None.gif][]     </ tbody >   
    ![None.gif][] </ table >   
    ![None.gif][] </ div >   
    ![None.gif][]
    
      
    extremeTable支持样式快速切换.可自定的样式包括column 的td以及table的一些属性，例如cellpadding等，  
    另本人发现，在properties中如下设置tableHeader的样式是不行的．不知道是否一个ＢＵＧ  
    table.headerClass=itoTableHeader  
    table.headerSortClass=itoTableHeaderSort  
      
    只能继承一个HeaderCell
    
    ![None.gif][] public   class  HeaderCell extends org.extremecomponents.table.cell.HeaderCell  
    ![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ![dot.gif][] \{  
    ![InBlock.gif][]    public final static String TABLE\_HEADER = "itoTableHeader";  
    ![InBlock.gif][]    public final static String TABLE\_HEADER\_SORT = "itoTableHeaderSort";  
    ![InBlock.gif][]｝  
    
    
    新的样式代码：
    
    ![None.gif][] < 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>
    
    效果见下:  
    ![ec\[2\].jpg][ec_2_.jpg]  
      
    \[4\] 实现 table width 自动累加  
    原来的extremeTable　宽度要自己set。不会自动能过下面的column累加。  
    本人作了个修改以达到自动累加，省得自己加写上去：  
    查看htmlView.java　两处地方　  
    toolbarPlacement  
    tableStart可见两处地方要修改的  
      
      
    \[5\] custom cell  
    在properties文件中我们可观察到:
    
    ![None.gif][] table.cell\_=display  
    ![None.gif][]table.cell\_currency=org.extremecomponents.table.cell.NumberCell  
    ![None.gif][]table.cell\_number=org.extremecomponents.table.cell.NumberCell  
    ![None.gif][]table.cell\_display=org.extremecomponents.table.cell.DisplayCell  
    ![None.gif][]table.cell\_date=org.extremecomponents.table.cell.DateCell
    
    当 column 默认使用org.extremecomponents.table.cell.DisplayCell  
    
    
    ![ExpandedBlockStart.gif][] ![ContractedBlock.gif][] public   class  DisplayCell extends BaseCell  ![dot.gif][] \{  
    ![InBlock.gif][]  
    ![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]    public String html() ![dot.gif][]\{  
    ![InBlock.gif][]        HtmlBuilder html = new HtmlBuilder();  
    ![InBlock.gif][]  
    ![InBlock.gif][]        html.append(startTD());  
    ![InBlock.gif][]  
    ![InBlock.gif][]        Object value = column.getValue();  
    ![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]        if (value != null && StringUtils.isNotEmpty(value.toString())) ![dot.gif][]\{  
    ![InBlock.gif][]            html.append(value);  
    ![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]        \} else ![dot.gif][]\{  
    ![InBlock.gif][]            html.append("&nbsp;");  
    ![ExpandedSubBlockEnd.gif][]        \}  
    ![InBlock.gif][]  
    ![InBlock.gif][]        html.append(endTD());  
    ![InBlock.gif][]  
    ![InBlock.gif][]        return html.toString();  
    ![ExpandedSubBlockEnd.gif][]    \}  
    ![ExpandedBlockEnd.gif][]\}   
    ![None.gif][]
    
      
    ec已其它cell  
    日期格式化： cell = " date " format = " yyyy-MM-dd "  
    数字格式化： cell="currency" format="\#\#\#,\#\#\#,\#\#0.00"
    
      
    另外，extremeTable支持自定义cell  
    在这里我以一个简单的例子\[以input框的形式出现\] 说明如何实现这一方便的扩展
    
    ![None.gif][] public   class  DemoInput extends BaseCell  
    ![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ![dot.gif][] \{  
    ![InBlock.gif][]      public String html()  
    ![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]    ![dot.gif][]\{  
    ![InBlock.gif][]        Integer rowNum = rowcount;  
    ![InBlock.gif][]        HtmlBuilder html = new HtmlBuilder();  
    ![InBlock.gif][]        html.append(startTD());  
    ![InBlock.gif][]        Object value = column.getValue();  
    ![InBlock.gif][]        HtmlBuilder input = new HtmlBuilder();  
    ![InBlock.gif][]        input.input("text");  
    ![InBlock.gif][]        input.name(column.getProperty() \+ "\_" \+ rowNum);  
    ![InBlock.gif][]        input.value(value.toString());  
    ![InBlock.gif][]        input.close();  
    ![InBlock.gif][]        html.append(input.toString());  
    ![InBlock.gif][]        html.append(endTD());  
    ![InBlock.gif][]        return html.toString();  
    ![ExpandedSubBlockEnd.gif][]    \}  
    ![ExpandedBlockEnd.gif][]\}
    
      
    
    
      
    properties文件增加
    
    ![None.gif][] table.cell\_demoInput  = org.extremecomponents.table.cell.DemoInput 
    
    jsp代码
    
    ![None.gif][] < ec:column property = " code "  title = " 编号 "  width = " 100 "  cell = " demoInput "  styleClass = " GridTd " />
    
    效果显示为  
    当然这只是一个简单的demo以说明如何自定义cell  
    如上面你可以简单的实现同样功能
    
     
    
     
    
    ![None.gif][] < ec:column  property ="code"  title ="编号"  width ="100"  styleClass ="GridTd" >   
    ![None.gif][] < input  type ="text"  value ="$\{goodss.code\}"  name ="code\_$\{ROWCOUNT\}" >   
    ![None.gif][] </ ec:column >
    
      
      
    \[6\]Extended Attributes  
    新版本支持Extended Attributes，方便了用户扩展，记得0.9版本时还要我修改Ｎ个地方，现在为table,column增加attribute方便多了.  
    为table增加一个height的属性  
    
    
    ![None.gif][] public   class  TableTag extends org.extremecomponents.table.tag.TableTag  
    ![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ![dot.gif][] \{  
    ![InBlock.gif][]    //div 的高度  
    ![InBlock.gif][]    private String height;  
    ![InBlock.gif][]  
    ![InBlock.gif][]    public String getHeight()  
    ![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]    ![dot.gif][]\{  
    ![InBlock.gif][]        return height;  
    ![ExpandedSubBlockEnd.gif][]    \}  
    ![InBlock.gif][]  
    ![InBlock.gif][]    public void setHeight(String height)  
    ![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]    ![dot.gif][]\{  
    ![InBlock.gif][]        this.height = height;  
    ![ExpandedSubBlockEnd.gif][]    \}  
    ![InBlock.gif][]  
    ![InBlock.gif][]    public void addExtendedAttributes(Attributes attributes)  
    ![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]    ![dot.gif][]\{  
    ![InBlock.gif][]        attributes.addAttribute("height", getHeight());  
    ![ExpandedSubBlockEnd.gif][]    \}  
    ![InBlock.gif][]  
    ![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]    /\*\*//\*\*  
    ![InBlock.gif][]     \* set the new attribuer to null - by ito  
    ![ExpandedSubBlockEnd.gif][]     \*/  
    ![InBlock.gif][]    public void release()  
    ![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]    ![dot.gif][]\{  
    ![InBlock.gif][]        super.release();  
    ![InBlock.gif][]        height = null;  
    ![ExpandedSubBlockEnd.gif][]    \}  
    ![ExpandedBlockEnd.gif][]\}
    
    然后就可以通过  
    model.getTableHandler().getTable().getAttribute("height")取得这个值．可以方便扩展．  
      
    
    
     
    
    ![ExpandedBlockStart.gif][] ![ContractedBlock.gif][]      private   void  body(BaseModel model, Column column, boolean isFirstColumn, boolean isLastColumn)  ![dot.gif][] \{  
    ![InBlock.gif][]      //原来的代码略  
    ![InBlock.gif][]        hssfCell.setEncoding(HSSFCell.ENCODING\_UTF\_16); //解决中文乱码  
    ![InBlock.gif][]//原来的代码略  
    ![InBlock.gif][]          
    ![ExpandedBlockEnd.gif][]    \}   
    ![None.gif][]  
    ![ExpandedBlockStart.gif][]![ContractedBlock.gif][]     private   void  createHeader(BaseModel model)  ![dot.gif][] \{  
    ![InBlock.gif][]       //原来的代码略  
    ![InBlock.gif][]        hssfCell.setEncoding(HSSFCell.ENCODING\_UTF\_16); //解决中文乱码  
    ![InBlock.gif][]//原来的代码略  
    ![InBlock.gif][]          
    ![ExpandedBlockEnd.gif][]   \}
    
      
    \[8\] 解决pdf中文问题  
    帮POF注册中文字体，再修改export view即可解决  
      
    \[9\] Pagination  
      
    \[10\] 其它亮点  
    **A** sortable 与 exportable 属性 ,分别指可否排序,可否导出. 值为 false/true  
    **B** 可以直接在<ec:column></e:column>中加html代码.  
        并可用\{collectionName.objectName\}类似的语法取得当前object的成员变量值  
    **C**  $\{ROWCOUNT\}可取当前row num,是指以1开始计算   
    **D**
 *   一凡@ITO

[1.0.1-M1]: http://sourceforge.net/project/showfiles.php?group_id=108168&package_id=116800&release_id=346617
[http_extremecomponents.org]: http://extremecomponents.org/
[http_sourceforge.net_projects_extremecomp]: http://sourceforge.net/projects/extremecomp/
[None.gif]: /images/20220828/77c64d6dc81b428498ec4dcc697ddd20.png
[http_your_web_app_test.jsp]: http://your_web_app/test.jsp
[ExpandedBlockStart.gif]: http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif
[ContractedBlock.gif]: http://www.blogjava.net/Images/OutliningIndicators/ContractedBlock.gif
[dot.gif]: /images/20220828/ad154fbae2d34878b69b396f7622cfb5.png
[InBlock.gif]: /images/20220828/ed78a9afd63f40798325457b38edf9bc.png
[ExpandedBlockEnd.gif]: /images/20220828/d4ed6278654f498381ff85684e6f206b.png
[ec1.jpg]: /images/20220828/5c51b11f7008461ba8a44da8c7584ff8.png
[ec_2_.jpg]: http://www.blogjava.net/images/blogjava_net/davidxu/ec[2].jpg
[ExpandedSubBlockStart.gif]: http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockStart.gif
[ContractedSubBlock.gif]: /images/20220828/ffe289b628dd46f59d7d245dc3f0622c.png
[ExpandedSubBlockEnd.gif]: /images/20220828/c166d7c0a93f44268926442800db1661.png