extremeTable 中文说明

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、导出ＥＸＣＥＬ以及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文件可到sourceorgextremecomponentstablecore中得到]
　/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.tldtaglib-location>
taglib>

< filter >
< filter-name > eXtremeExport filter-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!
恭喜你，这表示安装成功！

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

@ page contentType="text/html;charset=GBK"
@ page import="java.util.*"
@ taglib uri="/tld/extremecomponents" prefix="ec"
在本页要用到jstl--&gt
@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"
使用include的方式--&gt
<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>

效果如下:



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

< context-param >
< param-name > extremecomponentsResourceBundleLocation param-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属性即可切换

< 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 > 标题--&gtspan>td>
<td align="right" >
<table border="0" cellpadding="0" cellspacing="1" class="toolbar" >
<tr>
<form. name="pres_toolbar" action="/extremesite/public/demo/presidents.jsp" >
工具栏，包括上一页，下一页以及导出--&gt
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" >
--&gt
tr>
form>
<tr>
tableHead--&gt
tr>
<tbody class="tableBody" >
<tr>
column--&gt
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 = " "/style.css"/>" TYPE="text/css">

效果见下:


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

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

0

0

分享到：

上一篇： 面试题

下一篇： 深刻理解 oracle 数据库的启动和关闭

请登录后发表评论 登录

全部评论

<%=items[i].createtime%>

<%=items[i].content%>

<%if(items[i].items.items.length) { %>

<%for(var j=0;j

<%=items[i].items.items[j].createtime%> 回复

<%=items[i].items.items[j].username%>   回复   <%=items[i].items.items[j].tousername%>： <%=items[i].items.items[j].content%>

<%}%> <%if(items[i].items.total > 5) { %>

还有<%=items[i].items.total-5%>条评论 ) data-count=1 data-flag=true>点击查看

<%}%>

<%}%> <%}%>

silver6

注册时间：2007-12-16

• 博文量
  12
• 访问量
  331035

最新文章

• 出口香烟
• FC 4下安装ORACLE 9i 的全过程
• 安装Linux 的硬盘分区
• 一篇关于web.xml配置的详细说明
• 深刻理解 oracle 数据库的启动和关闭
• 面试题
• 面试题
• sql server 函數
• Java编程思想读书笔记（1、2、3章）
• 经典面试问题回答思路

支持我们 作者招募 用户协议 FAQ Contact Us

北京盛拓优讯信息技术有限公司. 版权所有  京ICP备09055130号-4  北京市公安局海淀分局网监中心备案编号：11010802021510

广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员

转载于:http://blog.itpub.net/122100/viewspace-657/