| Blog信息 |
|
blog名称:
日志总数:1304
评论数量:2242
留言数量:5
访问次数:7597875
建立时间:2006年5月29日 |
| |
|
 [eXtremeComponents]也来介绍一下 extremeTable
软件技术, 电脑与网络
lhwork 发表于 2006/6/28 11:29:40 |
| 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.62、commons-collections 3.03、 commons-lang 2.04、 commons-logging 1.0.45、 standard 1.0.2
PDF 导出要用到的包:1、 avalon-framework 4.02、batik 1.5-fop-0.20-53、 fop 0.20.54、 xalan 2.5.15、 xercesImpl 2.6.16、 xml-apis 2.0.2XLS 导出要用到的包: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，由于只是手板功夫,这里就略过了,相关代码如下:
500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><taglib>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><taglib-uri>/tld/extremecomponents</taglib-uri>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><taglib-location>/WEB-INF/tld/extremecomponents.tld</taglib-location>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"></taglib>
500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><filter>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><filter-name>eXtremeExport</filter-name>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><filter-class>org.extremecomponents.table.filter.ExportFilter</filter-class>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"></filter>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><filter-mapping>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><filter-name>eXtremeExport</filter-name>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><url-pattern>/*</url-pattern>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"></filter-mapping>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top">
配置好所有后，开tomcat，测试浏览http://your_web_app/test.jsp，看到Congratulations!! You have successfully configured eXtremeTable!恭喜你，这表示安装成功！
３、动手学习这个taglib建index.jsp页面,修改代码如下
500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><%@ page contentType="text/html;charset=GBK"%>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><%@ page import="java.util.*"%>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><%@ taglib uri="/tld/extremecomponents" prefix="ec" %>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><!-- 在本页要用到jstl-->500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><!--使用include的方式-->500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><link rel="stylesheet" type="text/css" href="<c:url value="/extremecomponents.css"/>">500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top">500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><%500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> List goodss = new ArrayList();500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> for (int i = 1; i <= 10; i++)500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top">500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> 500)this.width=500'>500){this.resized=true;this.style.width=500;}">{500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> Map goods = new java.util.HashMap();500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> goods.put("code", "A00"+i);500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> goods.put("name", "面包"+i);500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> goods.put("status", "A:valid");500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> goods.put("born", new Date());500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> goodss.add(goods);500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> }500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> request.setAttribute("goodss", goodss);500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top">%>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><ec:table500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> collection="goodss"500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> action="${pageContext.request.contextPath}/test.jsp"500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> imagePath="${pageContext.request.contextPath}/images/*.gif"500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> cellpadding="1"500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> title="my bread">500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><ec:column property="code"/>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><ec:column property="name"/>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><ec:column property="status"/>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><ec:column property="born" cell="date" format="yyyy-MM-dd"/>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"></ec:table>
效果如下:500)this.width=500'>500){this.resized=true;this.style.width=500;}" border="0" width="456">[1] 1.0.1-M1 版支持国际化修改web.xml文件增加
500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><context-param>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <param-name>extremecomponentsResourceBundleLocation</param-name>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <param-value>com.itorgan.tags.extreme.extremetableResourceBundle</param-value>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"></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\u5F55table.statusbar.noResultsFound=\u6CA1\u6709\u8981\u67E5\u8BE2\u7684\u7EAA\u5F55\u3002table.toolbar.showAll=\u6240 \u6709补充:中文 - > Unicode编码 可通过反编译class文件或用native2ascii命令得到 。
然后在table标签中增加locale属性即可切换
500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><ec:table500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> ………………500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> ………………500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> ………………500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> locale="en_US"500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top">>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top">500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><ec:table500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> ………………500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> ………………500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> ………………500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> locale="zh_CN"500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top">>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top">
[2] 保留table的上一次状态 是指,不管跳转到另一个后再返回,extremeTable会将之前的Filter,Sort参数保存到session中，以至返回看到的页面还是之前的状态.实现操作方法:修改extremecomponents.properties文件table.useSessionFilterSortParam=foosaveFilterSort="true" 注意：saveFilterSort="true"不能在properties文件中配置，只能在页面中设
<ec:table500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> ……………………500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> saveFilterSort="true"500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top">/ec:table>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><a href="1.jsp">跳到</a>
新建一页面用于跳转的页面 1.jsp代码为
500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><a href="test.jsp?foo=true">Back</a>
[3] 样式修改基本的HTML结构
500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><div class="eXtremeTable" >500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><table border="0" cellpadding="0" cellspacing="0" width="100%" >500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <tr>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <td class="title" ><span><!--标题--></span></td>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <td align="right" >500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <table border="0" cellpadding="0" cellspacing="1" class="toolbar" >500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <tr>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <form name="pres_toolbar" action="/extremesite/public/demo/presidents.jsp" >500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <!--工具栏，包括上一页，下一页以及导出-->500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> </tr>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <tr> 500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> </form>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> </tr>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> </table>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> </td>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> </tr>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"></table>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top">500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><table id="pres" border="0" cellspacing="2" cellpadding="0" width="100%" class="tableRegion" >500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <tr>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <td colspan="6" >500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <table border="0" cellpadding="0" cellspacing="0" width="100%" >500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <tr>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <td class="statusBar" >43 results found, displaying 1 to 12 </td>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <td class="filterButtons" ></td>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> </tr>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> </table>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> </td>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> </tr> 500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top">500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><form name="pres_filter" action="/extremesite/public/demo/presidents.jsp" >500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <tr class="filter" id="filter" >500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <!--过滤条件的input框-->500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> </tr>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"></form>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <tr>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <!--tableHead-->500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> </tr>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <tbody class="tableBody" >500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <tr>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> <!--column-->500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> </tr>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> </tbody>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"></table>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"></div>500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top">
extremeTable支持样式快速切换.可自定的样式包括column 的td以及table的一些属性，例如cellpadding等，另本人发现，在properties中如下设置tableHeader的样式是不行的．不知道是否一个ＢＵＧtable.headerClass=itoTableHeadertable.headerSortClass=itoTableHeaderSort只能继承一个HeaderCell
500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top">public class HeaderCell extends org.extremecomponents.table.cell.HeaderCell500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top">500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top">500)this.width=500'>500){this.resized=true;this.style.width=500;}">{500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> public final static String TABLE_HEADER = "itoTableHeader";500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"> public final static String TABLE_HEADER_SORT = "itoTableHeaderSort";500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top">｝
新的样式代码：
500)this.width=500'>500){this.resized=true;this.style.width=500;}" align="top"><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.c
|
|
|