ITPub博客

extremeTable 中文说明

原创 Linux操作系统 作者:silver6 时间:2007-12-16 04:26:16 0 删除 编辑

extremeTable 中文说明

silver6 | 30 八月, 2005 18:43

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、导出EXCEL以及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

    2、安装与测试

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

    [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文件可到sourceorgextremecomponentstablecore中得到]
     /images/*.jpg [一组默认样式及图片]
     /css/extremecomponents.css
     /test.jsp
     /index.jsp [用于学习以及扩展测试用代码请见下]

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

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

    <filter>
    <filter-name>eXtremeExportfilter-name>
    <filter-class>org.extremecomponents.table.filter.ExportFilterfilter-class>
    filter>
    <filter-mapping>
    <filter-name>eXtremeExportfilter-name>
    <url-pattern>/*url-pattern>
    filter-mapping>


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

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


    3、动手学习这个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=""/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>



    效果如下:
    ec1.jpg


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

    <context-param>
    <param-name>extremecomponentsResourceBundleLocationparam-name>
    <param-value>com.itorgan.tags.extreme.extremetableResourceBundleparam-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} u6761u7EAAu5F55u7B26u5408u6761u4EF6, u73B0u5728u662Fu7B2C {1} u81F3 {2} u6761u7EAAu5F55
    table.statusbar.noResultsFound=u6CA1u6709u8981u67E5u8BE2u7684u7EAAu5F55u3002
    table.toolbar.showAll=u6240 u6709

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

    然后在table标签中增加locale属性即可切换


    [3] 样式修改
    基本的HTML结构
    [7] 解决excel中文问题
    继承XlsView.java
    ec另一亮点就帮我们写好了form. ,如上代码:
    设置form. name以及action

    <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">Backa>

    <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" >
    -->
    tr>
    form>
    <tr>
    tableHead-->
    tr>
    <tbody class="tableBody" >
    <tr>
    column-->
    tr>
    tbody>
    table>
    div>


    extremeTable支持样式快速切换.可自定的样式包括column 的td以及table的一些属性,例如cellpadding等,
    另本人发现,在properties中如下设置tableHeader的样式是不行的.不知道是否一个BUG
    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=""/style.css"/>" TYPE="text/css">
    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[2].jpg

    [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(
    " ");
    }


    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}">
    ec:column>



    [6]Extended Attributes
    新版本支持Extended Attributes,方便了用户扩展,记得0.9版本时还要我修改N个地方,现在为table,column增加attribute方便多了.
    为table增加一个height的属性

    public class TableTag extends org.extremecomponents.table.tag.TableTag
    {
    //div 的高度
    private String height;

    来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/122100/viewspace-657/,如需转载,请注明出处,否则将追究法律责任。

    上一篇: 面试题
    请登录后发表评论 登录
    全部评论

    注册时间:2007-12-16

    • 博文量
      12
    • 访问量
      330781