﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-　　　　　　　　　　　　　彬 ^_^ -随笔分类-Extremecomponents </title><link>http://www.blogjava.net/libin2722/category/29914.html</link><description>虚其心，可解天下之问；专其心，可治天下之学；静其心，可悟天下之理；恒其心，可成天下之业。</description><language>zh-cn</language><lastBuildDate>Thu, 06 Mar 2008 08:00:52 GMT</lastBuildDate><pubDate>Thu, 06 Mar 2008 08:00:52 GMT</pubDate><ttl>60</ttl><item><title>Extremecomponents </title><link>http://www.blogjava.net/libin2722/archive/2008/03/06/184231.html</link><dc:creator>礼物</dc:creator><author>礼物</author><pubDate>Thu, 06 Mar 2008 04:48:00 GMT</pubDate><guid>http://www.blogjava.net/libin2722/archive/2008/03/06/184231.html</guid><wfw:comment>http://www.blogjava.net/libin2722/comments/184231.html</wfw:comment><comments>http://www.blogjava.net/libin2722/archive/2008/03/06/184231.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/libin2722/comments/commentRss/184231.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/libin2722/services/trackbacks/184231.html</trackback:ping><description><![CDATA[<div class="postText">
<p>0.概述</p>
<p>&nbsp;&nbsp;&nbsp; Home Page:<a href="http://www.extremecomponents.org/">http://www.extremecomponents.org</a></p>
<p>&nbsp;&nbsp;&nbsp; &nbsp;Extreme Table是最功能强大而又容易配置,扩展,自定义的Table 控件。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp; 最紧要的功能包括排序, 分页, 导出Excel, pdf和汇总。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp; springside的best 示例代码在: listBook.jsp和listOrder.jsp.</p>
<p>基础读物:&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp; 1. <a href="http://extremecomponents.org/wiki/index.php/Main_Page" target="_blank">ExtremeTable自带的文档</a> .</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp; 2.<a href="http://extremecomponents.org/wiki/index.php/Simplified_Chinese" target="_blank">Luck翻译的ExtremeTable官方文档中文版</a>&nbsp;&nbsp;&nbsp;</p>
<h2>1. 安装</h2>
<h3>1.1 安装原始版本</h3>
<p>&nbsp;&nbsp;&nbsp;&nbsp; 1. 从<a href="http://www.extremecomponents.org/">http://www.extremecomponents.org</a> 下载最新版</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp; 2.把extremecomponents.jar 放入web-inf/lib</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp; 3.根据minum, 导出excel 或 导出pdf的需要，把/lib下的jar copy到web-inf/lib</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp; 4.把images里的图片放入web的任意目录</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp; 5.把css文件放到web的任意目录</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp; 6.在/source/org/extremecomponents/table/core目录找到extremetable.properties文件,把它复制到WEB-INF/classes里面并进行修改.</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp; 7.修改web.xml (见2)。</p>
<h3>&nbsp;0.2 复制SpringSide的样式</h3>
<p>&nbsp;&nbsp;&nbsp;&nbsp; 1.Copy springside的Table Head的图，查。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp; 2.将springside中的修改版extremecomponents.css文件放入任意目录</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp; 3.把/src/resource/extremetable.properties 复制到对应目录</p>
<h3>0.3 使用Compact View很重要</h3>
<p>&nbsp;&nbsp;&nbsp;&nbsp; 默认的式样不符合大家的审美，幸亏还有Compact View和css设置，让我们可以敬谢不敏它号称非常方便的HtmlView子类扩展。</p>
<p>&nbsp;&nbsp;&nbsp; 1. 在全局设置里</p>
<pre>
table.view.html=org.extremecomponents.table.view.CompactView</pre>
<p>&nbsp;&nbsp;&nbsp; 2.把images里/table/compact/*.gif copy 到 /table</p>
<h2>2.全局属性配置</h2>
<p>&nbsp;&nbsp; ExtremeTable支持在properties文件里方便的统一配置丰富的全局属性</p>
<p>&nbsp; 在/source/org/extremecomponents/table/core目录找到extremetable.properties文件,把它复制到WEB-INF/classes里面.</p>
<p>&nbsp;在web.xml里面增加</p>
<pre>&nbsp;&nbsp; &lt;context-param&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;param-name&gt;extremecomponentsPreferencesLocation&lt;/param-name&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;param-value&gt;/extremetable.properties&lt;/param-value&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;/context-param&gt;</pre>
<p>一般只写需要修改的文件:</p>
<pre>table.filterable=false<br />
table.imagePath=/images/table/*.gif<br />
table.locale=zh_CN<br />
table.view.html=org.extremecomponents.table.view.CompactView<br />
row.highlightRow=true<br />
column.format.date=yyyy-MM-dd<br />
column.format.currency=###,###,###,###,#00.00<br />
</pre>
<h2>3.导出Excel</h2>
<p>&nbsp;&nbsp;&nbsp;&nbsp;注意Excel 导出的Tag已改为，且官方版不支持中文文件名。</p>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&lt;ec:exportXls fileName="BookList.xls" tooltip="导出 Excel"/&gt;</pre>
<p>在web.xml必须加入：</p>
<pre>&nbsp;&nbsp;&nbsp; &lt;filter&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;filter-name&gt;eXtremeExport&lt;/filter-name&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;filter-class&gt;org.extremecomponents.table.filter.ExportFilter&lt;/filter-class&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/filter&gt;<br />
&lt;filter-mapping&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;filter-name&gt;eXtremeExport&lt;/filter-name&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;url-pattern&gt;/*&lt;/url-pattern&gt;<br />
&nbsp;&nbsp;&nbsp; &lt;/filter-mapping&gt;<br />
</pre>
<p>&nbsp;&nbsp;&nbsp; &nbsp;ExtremeTable导出的一项重要特性是可以根据不同的View导出不同的列.</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp; 比如html管理界面可能只列出订单几个最重要的列，而导出excel时则需要导出所有的列。</p>
<pre>&lt;ec:column property="orderdate" title="订单日期"&nbsp; cell="date" format="yyyy-MM-dd"&nbsp; viewsDenied= "html"/&gt;</pre>
<p>又比如有些操作按纽的列只想在html出现,excel里不想出现：</p>
<pre>&lt;ec:column property="orderdate" title="订单日期" viewAllowed= "html"/&gt;</pre>
<p>&nbsp;&nbsp;&nbsp;&nbsp; 以上订单日期列在html view看不到，而excel,pdf view可以见到.</p>
<p>&nbsp;&nbsp;&nbsp; 而"编辑图标"，"选择Checkbox"这些管理界面上的列，也可以设置不export到pdf,excel view</p>
<h2>4.其他要点<br />
</h2>
<h3>4.1. 使用排序功能时,如果property为嵌套属性时,需要设置alias</h3>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;因为javascript的关系.</p>
<pre>&lt;ec:column property="customer.name" title="客户名称" alias="customer"/&gt;</pre>
<h3>4.2. Date Cell与NumberCell 和RowCountCell</h3>
<p>&nbsp;&nbsp;&nbsp;&nbsp; 在全局属性定义:</p>
<p>&nbsp;</p>
<pre> column.format.date= yyyy-MM-dd
column.format.currency= ￥###,###,#00.00</pre>
<pre>&lt;ec:column property="totalprice" title="总金额" cell="currency" width="80" /&gt;<br />
&lt;ec:column property="shipdate" title="发货日期"&nbsp; cell="date" width= "80"/&gt;<br />
&lt;e</pre>
<p>其中RowCountCell用于显示序号。</p>
<h3>4.3. 汇总</h3>
<p>在column中加入两个cac属性，就会自动在table的底端显示汇总</p>
<p>&nbsp;</p>
<pre>&lt;ec:column property="totalprice" title="总金额" cell="number" format="###,###,##0.00" calc="total" calcTitle= "汇总:"/&gt;</pre>
<h3>4.4 i18N</h3>
<p>在Web.xml里面指定i18N的Properties文件</p>
<pre>&lt;context-param&gt;<br />
&nbsp;&nbsp;&lt;param-name&gt;extremecomponentsMessagesLocation&lt;/param-name&gt;<br />
&nbsp;&nbsp;&lt;param-value&gt;messages&lt;/param-value&gt;<br />
&lt;/context-param&gt;</pre>
<pre>&lt;ec:column property="name" title="book.name"/&gt;</pre>
<h3>4.5数据库分页</h3>
<p>&nbsp;EC默认从数据库中查找所有记录然后由它来分页，如果查询结果较大，可以考虑使用数据库端分页的方案。</p>
<p>&nbsp;此时，EC会使用Limit对象向Controller传递PageNo,PageSize,OrderBy等分页信息。而服务端将向EC返回总记录数和当前页的内容，具体请参看 BookController。</p>
<h3>4.6不显示导出excel及分页</h3>
<p>最快的方式是设置table的showStatusBar= false</p>
<pre>&lt;ec:table&nbsp; items= "order.orderItems"var="item"&nbsp;action=""&nbsp;&nbsp; showStatusBar= "false"&gt;</pre>
<h3>&nbsp;&nbsp;&nbsp; 4.7ImagePath</h3>
<p>&nbsp; 旧版EC包括其文档都在每个table tag里定义ImagePath, 新版已经可以自动插入ContextPath,只需在properties文件定义table.imagePath=/images/table/*.gif即可</p>
<h2>5.自定义及扩展</h2>
<p>&nbsp;&nbsp; ExtremeTable比Display Tag的i一个就是良好的自定义和扩展能力，不用千人一面。<br />
&nbsp;&nbsp; 不过，人总是懒的，虽然扩展子类很容易，但能不扩展就还是不可扩展了。幸亏用Compact View再改改CSS一般就能达到要求。</p>
<h3>&nbsp;5.1. 良好的CSS定义</h3>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ExtremeTable 的CSS定义非常严谨, 并且提供很多个层次的修改方式:</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1.直接修改css文件, 可以把table view改成任意样式</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2.修改全局属性, 改变某种元素对应的css class名</p>
<pre>table.styleClass=tableRegion</pre>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 3.在某个页面的row,column tag中定义class</p>
<pre>&nbsp;&lt;ec:row style="" or styleClass=""/&gt;</pre>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; SpringSide采用层次1, 直接修改extremecomponents.css为合适的样式</p>
<h3>5.2方便的&lt;tr&gt;&lt;td&gt;属性扩展</h3>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; row与column已提供了丰富的普通属性与 javascript属性如onClick(), 如果属性仍然未够,可自行扩展&lt;row&gt;与&lt;column&gt;tag ，并通过全局属性指定新的子类名。</p>
<p>&nbsp;&nbsp;&nbsp;为了方便大家在子类扩展属性, extreme Table提供了专门的回调函数与Util函数如</p>
<pre>public void addColumnAttributes(Column column) {
column.addAttribute("customAttributeOne", customAttributeOne);<br />
}
</pre>
<p>详细请看手册,Table, Row,Column都提供相同的扩展:<br />
<a href="http://extremecomponents.org/wiki/index.php/Column#Extended_Attributes">http://extremecomponents.org/wiki/index.php/Column#Extended_Attributes</a></p>
<p>如果不是Extremetable的特别支持, 普通taglib class要扩展属性的话:<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1.定义真正的Java属性,setter,getter<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2. tld文件中声明新的属性 <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 3.重载输出函数将新属性打印出来</p>
<h3>5.3 扩展HTMLView,cell 等显示组件</h3>
<p>&nbsp;&nbsp;&nbsp;&nbsp; Extreme Table在这些类的扩展上放便很多，但这个版本里我还没有进行尝试，就不写了。请自行参考官方文档:<a href="http://extremecomponents.org/wiki/index.php/Html_View_Tutorial">http://extremecomponents.org/wiki/index.php/Html_View_Tutorial</a> .</p>
<p><a href="http://www.springside.org.cn/docs/reference/ExtremeTable.htm">http://www.springside.org.cn/docs/reference/ExtremeTable.htm</a> </p>
</div>
<img src ="http://www.blogjava.net/libin2722/aggbug/184231.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/libin2722/" target="_blank">礼物</a> 2008-03-06 12:48 <a href="http://www.blogjava.net/libin2722/archive/2008/03/06/184231.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>