ExtremeComponents学习总结

ExtremeComponents学习总结

http://wiki.springside.org.cn/display/springside/ExtremeComponents
1. 安装
  
  （1）、将extremecomponents.tld复制到WEB-INF/目录下
   (2)、将extremecomponents-1.0.1.jar复制到WEB-INF/LIB目录下
    (3)、将extremecomponents.css和extremecomponents.JS复制到相应的目录中
   （4）、编辑属性文件extremecomponents.properties如下：
table.filterable = true
table.imagePath=/images/table/*.gif
table.locale=zh_CN
table.view.html=org.extremecomponents.table.view.CompactView
row.highlightRow=true
column.format.date=yyyy-MM-dd
column.format.currency=###,###,###,###,#00.00
    (5)、在web.xml作如下配置：
<context-param>
<param-name>extremecomponentsPreferencesLocation</param-name>
<param-value>/extremecomponents.properties</param-value>
</context-param>
<filter>
<filter-name>eXtremeExport</filter-name>
<filter-class>
org.extremecomponents.table.filter.ExportFilter
</filter-class>
<init-param>
<param-name>responseHeadersSetBeforeDoFilter</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>eXtremeExport</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

ExtremeComponents 安装文件在/components/web/extremetable/ 下，包括jar文件，images图片和css文件以及properties文件。以及web.xml,sample.jsp 示例。

<script type="text/JavaScript" src="<%=path%>/script/prototype.js"></script>
    <script type="text/JavaScript" src="<%=path%>/script/fogjavascript.js"></script>
    <script type="text/JavaScript" src="<%=path%>/script/move.js"></script>
   
    <script type="text/javascript">
       function loadData(){
         
          var divObj = $('initUserBeanData');
showLoading(divObj);

//load prop data
var url = '<%=path %>/listUserBean.action';
var paras = "";
        var myAjax = new Ajax.Updater(
                    {success: 'initUserBeanData'},
                    url,
                    {method: 'get',parameters: paras,asynchronous: true});
       }
   
    function showLoading(divObj){
divObj.innerHTML="<table width=\"100%\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\"><tr><td><img src='<%=path%>/images/indicator.gif'>正在处理数据&nbsp;</td></tr></table>";
}

连环指定：
images文件，css文件，properties文件可随意摆放
properties文件中指定images文件的位置，web.xml中指定properties文件的位置，实际jsp中指定css的位置。
用springside的构件安装命令能自动完成默认的安装(双击项目的的build.bat,  选择add-component, 再选web/extremetable)
2.Tips
2.1.Compat View
默认的式样不符合大家的审美，幸亏还有Compact View和css设置，让我们可以敬谢不敏它号称非常方便的HtmlView子类扩展。在全局设置里设置
table.view.html=org.extremecomponents.table.view.CompactView
2.2.导出Excel
    Excel 导出的Tag：（官方版不支持中文文件名）。  <ec:exportXls fileName="BookList.xls" tooltip="导出 Excel"/>
    ExtremeTable导出的一项重要特性是可以根据不同的View导出不同的列.
     比如html管理界面可能只列出订单几个最重要的列，而导出excel时则需要导出所有的列。<ec:column property="orderdate" title="订单日期"  cell="date" format="yyyy-MM-dd"  viewsDenied= "html"/>
     又比如有些操作按纽如修改按钮只在html管理界面出现,excel里不想出现：<ec:column property="null" title="修改" viewsAllowed="html">
使用排序功能时,如果property为嵌套属性时,需要设置alias
      因为javascript的关系.<ec:column property="customer.name" title="客户名称" alias="customer"/>
2.3. Date Cell与NumberCell 和RowCountCell
     在全局属性定义:
column.format.date= yyyy-MM-dd
column.format.currency= ￥###,###,#00.00
//jsp代码<ec:column property="totalprice" title="总金额" cell="currency" width="80" />
<ec:column property="shipdate" title="发货日期"  cell="date" width= "80"/>
<ec:column property="rowcount" cell="rowCount" sortable="false" title="序号" width="60"/>
2.4 汇总
在column中加入两个cac属性，就会自动在table的底端显示汇总
<ec:column property="totalprice" title="总金额" cell="number" format="###,###,##0.00" calc="total" calcTitle= "汇总:"/>
2.5. i18N
在Web.xml里面指定i18N的Properties文件：
<context-param>
<param-name>extremecomponentsMessagesLocation</param-name>
  <param-value>messages</param-value>
</context-param>
<ec:column property="name" title="book.name"/>
EC的算法是先去i18n文件中寻找book.name，如果找不到该key,则显示book.name。所以如果不想i18n, title处可以直接填中文。
2.6. 数据库分页
EC默认从数据库中查找所有记录然后由它来分页，如果查询结果较大，可以考虑使用数据库端分页的方案。
此时，EC会使用Limit对象向Controller传递PageNo,PageSize,OrderBy等分页信息。而服务端将向EC返回总记录数和当前页的内容。
2.7.不显示导出excel及分页
最快的方式是设置table的showStatusBar= false
<ec:table  items= "order.orderItems"var="item" action=""   showStatusBar= "false">
3. 自定义样式与扩展Cell
ExtremeTable比Display Tag的i一个就是良好的自定义和扩展能力，不用千人一面。
3.1 良好的CSS定义
         ExtremeTable 的CSS定义非常严谨, 并且提供很多个层次的修改方式:
         1.直接修改css文件, 可以把table view改成任意样式
         2.修改全局属性, 改变某种元素对应的css class名table.styleClass=tableRegion
         3.在某个页面的row,column tag中定义class <ec:row style="" or styleClass=""/>
         一般都是采用方法1直接修改。
3.2 方便的<tr><td>属性扩展
        row与column已提供了丰富的普通属性与 javascript属性如onClick(), 如果属性仍然未够,可自行扩展<row>与<column>tag ，并通过全局属性指定新的子类名。
   为了方便大家在子类扩展属性, extreme Table提供了专门的回调函数与Util函数如
public void addColumnAttributes(Column column){
column.addAttribute("customAttributeOne", customAttributeOne);
}
详细请看手册,Table, Row,Column都提供相同的扩展:
http://extremecomponents.org/wiki/index.php/Column#Extended_Attributes
如果不是Extremetable的特别支持, 普通taglib class要扩展属性的话:
        1.定义真正的Java属性,setter,getter
        2. tld文件中声明新的属性
        3.重载输出函数将新属性打印出来
3.3 扩展HTMLView,cell 等显示组件
     Extreme Table在这些类的扩展上放便很多，但这个版本里我还没有进行尝试，就不写了。请自行参考官方文档:http://extremecomponents.org/wiki/index.php/Html_View_Tutorial  .