extremeTable 介绍

何为 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属性即可切换

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

[3] 样式修改
基本的HTML结构


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

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版本时还要我修改Ｎ个地方，现在为table,column增加attribute方便多了.
为table增加一个height的属性


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

public String getHeight()
{
return height;
}

public void setHeight(String height)
{
this.height = height;
}

public void addExtendedAttributes(Attributes attributes)
{
attributes.addAttribute("height", getHeight());
}

/**//**
* set the new attribuer to null - by ito
*/
public void release()
{
super.release();
height = null;
}
}
然后就可以通过
model.getTableHandler().getTable().getAttribute("height")取得这个值．可以方便扩展．

[7] 解决excel中文问题
继承XlsView.java


private void body(BaseModel model, Column column, boolean isFirstColumn, boolean isLastColumn) {
//原来的代码略
hssfCell.setEncoding(HSSFCell.ENCODING_UTF_16); //解决中文乱码
//原来的代码略

}

private void createHeader(BaseModel model) {
//原来的代码略
hssfCell.setEncoding(HSSFCell.ENCODING_UTF_16); //解决中文乱码
//原来的代码略

}

[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 ec另一亮点就帮我们写好了form ,如上代码:
<ec:form name="mainform" action="goods.do"> </ec:form> 设置form name以及action

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



posted on 2005-08-09 19:56 一凡@ITO 阅读(2800) 评论(18) 编辑 收藏 收藏至365Key


评论
# re: 也来介绍一下 extremeTable 2005-08-25 13:09 江南白衣@ITO
1.0.2 M1又出来啦，cvs里每天都有更新，很勤快的一个项目 回复

# re: 也来介绍一下 extremeTable 2005-08-26 12:41 Water Ye@ITO
<ec:table collection="goodss">
<ec:column property="code"/>
<ec:column property="name"/>
<ec:column property="status"/>
<ec:column property="born" cell="date" format="yyyy-MM-dd"/>
</ec:table>

如果想拿某条记录的用什么属性 回复

# re: 也来介绍一下 extremeTable 2005-08-26 23:17 laozheng126
动态 列怎么做？我的email：[e-mail] 回复

# re: 也来介绍一下 extremeTable 2005-08-27 01:46 江南白衣@ITO
动态要未来版本才支持的功能，在他的RoadMap里面有讲，1.0正式版之前会实现。 回复

# re: 也来介绍一下 extremeTable 2005-08-27 14:34 一天一点@ITO
回复:
[1]使用jsp2.0 EL 语法,例如${presidents.lastName} 可以取得当前列.
它应该是request或sessoin这类的对象.setAttribute()的
Added TableTag var attribute. Used (optionally) as the name of
据了解，最新版本1.0.2-M1已修复这种难以理解的写法：
"Added TableTag var attribute. Used (optionally) as the name of the variable to hold the current bean. "
TableTag var attribute(completed for 1.0.2-M1 release) If you would prefer to not have each bean placed in the pageScope with the collection attribute value, as the table is iterating over the body, then you could use the optional var attribute. Some users said that overloading the collection attribute was not flexible enough.
具体使用请见本人对extremeTable跟进BLOG页
[2]roadmap中有提到动态 列的支持，"Dynamically Hide/Show columns "
另外还增加好多令人兴奋不已的新元素,
期待
http://extremecomponents.org/extremesite/public/roadMap.jsp 回复

# re: 也来介绍一下 extremeTable 2005-08-30 19:33 kiven
请问导出excle文件的中文问题怎么解决阿？
我试着重新编译xlsview.java文件但是总是通不过，哪位大侠有编译好的提供一下好吗？
谢谢了！ 回复

# re: 也来介绍一下 extremeTable 2005-08-31 09:22 David
[1]继承原类 XlsView
public class XlsView extends org.extremecomponents.table.view.XlsView
{
//其它略

private void body(BaseModel model, Column column, boolean isFirstColumn, boolean isLastColumn) {
//解决中文乱码问题
cell.setEncoding(HSSFCell.ENCODING_UTF_16);
}

private void createHeader(BaseModel model) {
//解决中文乱码问题
cell.setEncoding(HSSFCell.ENCODING_UTF_16);
}

//其它略
}


[2]修改extremecomponents.properties
table.view_xls=com.itorgan.tags.extreme.XlsView 回复

# 关注开源项目，简化开发流程[TrackBack] 2005-09-08 23:57 Gavin_Ellen
Ping Back来自：blog.csdn.net
Gavin_Ellen引用了该文章,地址:http://blog.csdn.net/zhujianwu2008/archive/2005/09/08/475358.aspx 回复

# re: 也来介绍一下 extremeTable 2005-10-14 01:06 anthens
解决pdf中文问题
帮POF注册中文字体，再修改export view即可解决
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

能不能给小弟详细解释一下，我试了好多次，都是失败告终！
大侠如能指点一二，不胜感激！

我的邮箱：[e-mail] 回复

# re: 也来介绍一下 extremeTable 2005-10-14 09:13 David
最近忙些东西,关于这方面的介绍可能要等闲了的时候,如果不急的话再注意吧 回复

# 为什么我试了, 不成功 2005-12-02 14:09 Jude
按照上面的方法, 提示如下, 高手帮帮忙

type Exception report

message

description The server encountered an internal error () that prevented it from fulfilling this request.

exception

javax.servlet.ServletException: TableTag Problem: java.lang.NoSuchMethodError: org.apache.commons.lang.StringUtils.isNotBlank(Ljava/lang/String;)Z
at org.extremecomponents.table.tag.TableTagUtils.getPropertiesLocation(TableTagUtils.java:270)
at org.extremecomponents.table.tag.TableTag.doStartTag(TableTag.java:490)
at org.apache.jsp.test_jsp._jspx_meth_ec_table_0(test_jsp.java:430)
at org.apache.jsp.test_jsp._jspService(test_jsp.java:358)

回复

# re: 也来介绍一下 extremeTable 2005-12-02 16:22 xuruchao
common-lang2.0没有加入classpath 回复

# re: 也来介绍一下 extremeTable 2005-12-03 19:21 一天一点@ITO
"javax.servlet.ServletException: TableTag Problem: java.lang.NoSuchMethodError: org.apache.commons.lang.StringUtils.isNotBlank(Ljava/lang/String;)Z "

提示得很清楚:)
回复

# re: 也来介绍一下 extremeTable 2006-04-21 14:18 david.turing
efa，1.0.1M4的tld定义好像跟以前版本不一样
<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>
中，collection好像变成items了 回复

# re: 也来介绍一下 extremeTable 2006-04-21 15:15 davidxu
好久的版本号已经改了， 好象是 1.0.1-M2 吧
http://www.blogjava.net/davidxu/archive/2005/08/27/11316.aspx

"collection attribute 不再赞成使用,可以使用tableId, items, and var 取而代之
" 回复

# re: 也来介绍一下 extremeTable 2006-04-29 10:00 zhuiyun
@David

请问extremecomponents.properties在哪能找到，是要自己定义吗?初接触extremecomponents,还望指教!
回复

# re: 也来介绍一下 extremeTable 2006-04-29 10:31 zhuiyun
@David
extremecomponents.properties 是否需要在web.xml中引用 回复

# re: 也来介绍一下 extremeTable 2006-04-29 15:52 davidxu
@zhuiyun
1 在src目录下应该可以找到
2 是的,配置大概是这样子
<context-param>
<param-name>extremecomponentsPreferencesLocation</param-name>
<param-value>/extremetable.properties</param-value>
</context-param> 回复