ExtremeComponents源码解析（一）
一、前言
因參與公司框架改造，在負責前端table組件選型時，原本選了jqGrid和Bootstraptable作為備選方案，評審會上，武哥提了EXtremeComponents，讓我也去了解下，看下合不合適，在此機緣下，我便按照網絡上的教程搭建了演示實例，使用起來也挺簡單，功能確實挺強大，當時雖然沒有深入研究，但是看過幾個擴展現有功能的例子，發現它擴展性挺好，但是因其導出xls依賴的jar包太過老舊，現有系統使用高版本的jar包和ExtremeComponents結合使用時，功能不能正常使用，所以放棄了這個方案。當初在整理這個方案時，看到挺多人說其框架設計的不錯，于是便決定通讀其源碼，以窺其精妙，自我提升一番~這篇我僅僅介紹如何安裝ExtremeComponents的及簡單的使用~
二、正文
1. 開發環境介紹
本文使用的開發環境如下：
jdk1.8 eclipse Mars.2 Release (4.5.2)依賴的jar包如下：
因本工程使用maven創建，所以順帶附上pom.xml文件的配置：
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"><modelVersion>4.0.0</modelVersion><groupId>org.extremeComponents.com</groupId><artifactId>ExtremeComponents</artifactId><packaging>war</packaging><version>1.0-SNAPSHOT</version><name>ExtremeComponents Maven Webapp</name><url>http://maven.apache.org</url><dependencies><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>3.8.1</version><scope>test</scope></dependency><dependency><groupId>javax.servlet</groupId><artifactId>servlet-api</artifactId><version>3.0-alpha-1</version><scope>provided</scope></dependency><dependency><groupId>org.extremecomponents</groupId><artifactId>extremecomponents</artifactId><version>1.0.1</version></dependency></dependencies><build><finalName>ExtremeComponents</finalName><plugins><plugin><groupId>org.apache.tomcat.plugin</groupId><artifactId>tomcat7-maven-plugin</artifactId><version>2.2</version><configuration><port>8080</port></configuration></plugin></plugins></build> </project>這邊特別說明下：ExtremeComponents最新版本就是1.0.1，并且是更新于2006年5月30日，如果不使用Maven的童鞋，可以直接到官網上面去下載對應的壓縮包解壓（使用Maven，有些靜態文件還是需要從壓縮包中獲取，所以都要下載），傳送門：https://sourceforge.net/projects/extremecomp/files/eXtremeComponents/，下載的話，下載eXtremeComponents-1.0.1-with-dependencies.zip，安裝使用指南也可以參考這篇博文：http://www.blogjava.net/i369/articles/237808.html
2. extremeComponents安裝
下面也簡要的說下安裝extremeComponents（以Maven為例說明，如果非Maven工程，請自己將extremeComponents所需的jar加入build path），像筆者一樣配置好pom.xml文件，Maven會自動下載如下包：
這是使用Maven下載的jar，但是需要使用extremeComponents的css及某些js函數，這時候就需要從下載的壓縮包：eXtremeComponents-1.0.1-with-dependencies.zip中拷貝到工程里面：
比如我將extremecomponents.css拷貝至webapp/styles，extremecomponents.js拷貝到webapp/js，images文件夾直接復制到webapp下，如下：
3. tld文件的使用
? 到目前為止，extremecomponent基礎使用環境已經搭建完畢（目前的配置還不能支持導出excel和pdf，如何配置才能支持，請往后看）。eXtremeComponents-1.0.1-with-dependencies.zip壓縮包解壓后，在dist目錄下有個extremecomponents.tld文件，我相信有自定義過jstl標簽的人，應該知道這個文件的作用，就是標簽的配置文件（不知道的可以自行百度），extremecomponent是開源標簽庫，那么我們是否有必要將這個拷貝到我們工程目錄的WEB-INF目錄下呢？處理tld文件有兩種方式：
1）你可以把extremecomponents.tld文件放到WEB-INF目錄下的任何地方。 不過，為了便于管理，可以將TLD文件都放到/WEB-INF/tld（自行建立這個目錄）目錄下，然后你需要根據你的extremecomponents.tld 文件的位置來修改/WEB-INF/web.xml文件的標簽映射：
<taglib><taglib-uri>/tld/extremecomponents</taglib-uri><taglib-location>/WEB-INF/tld/extremecomponents.tld</taglib-location> </taglib>? 在使用的時候：
<%@ taglib uri="/tld/extremecomponents" prefix="ec" %>??特別說明：有些人在web.xml中添加<taglib />標簽的時候報錯：
?這是什么原因呢？這就要看你web.xml中根節點是怎么聲明了，如果類似如下形式聲明：
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:web="http://java.sun.com/xml/ns/javaee"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">.................................. </web-app>?那么在聲明<taglib />標簽的時候應該這樣：
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:web="http://java.sun.com/xml/ns/javaee"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">..................................<jsp-config><taglib><taglib-uri>/tld/extremecomponents</taglib-uri><taglib-location>/WEB-INF/tld/extremecomponents.tld</taglib-location></taglib></jsp-config>.................................. </web-app>?如果web.xml是如下形式的：
<!DOCTYPE web-app PUBLIC"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN""http://java.sun.com/dtd/web-app_2_3.dtd" ><web-app>.................... </web-app>?那么taglib應該按如下方式聲明：
<!DOCTYPE web-app PUBLIC"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN""http://java.sun.com/dtd/web-app_2_3.dtd" ><web-app>......................................<taglib><taglib-uri>/tld/extremecomponents</taglib-uri><taglib-location>/WEB-INF/tld/extremecomponents.tld</taglib-location></taglib>...................................... </web-app>? 2）如果你的servlet容器支持JSP 1.2 (或更高版本)，它將能夠自動發現TLD文件，那么你什么也不需要做。 當extremecomponents.jar被容器加載的時候，在它的META-INF目錄下的extremecomponents.tld（jar包本身包含這個tld文件，可以將jar解壓看到）文件將被找到。 這時，你需要向下面一樣在你的JSP里把eXtremeTable包含進來：
<%@ taglib uri="http://www.extremecomponents.org" prefix="ec" %>
?4.?extremecomponent效果展示
說了半天，extremecomponent的使用效果如何，沒有一個直觀的感受，那么我先po上一張圖：
紅色部分就是這個jstl標簽最終的顯示效果。這個頁面的源碼如下：
<%@page contentType="text/html;charset=utf-8" %><!--如何之前有在web.xml配置了tablib標簽，那么這邊uri要和那邊<taglib-uri />配置的一致--> <%@taglib uri="http://www.extremecomponents.org" prefix="ec" %>
<html><head><title>eXtremeTest</title><style type="text/css">.eXtremeTable {margin: 0;padding: 0; }.eXtremeTable select {font-family: Verdana;font-size: 9px;border: solid 1px #EEE;width: 75px; }.eXtremeTable .tableRegion {border: 1px solid silver;padding: 2px;font-family:Verdana;font-size: 10px;margin-top: 7px; }.eXtremeTable .filter {background-color: #efefef; }.eXtremeTable .filter input {font-family: Verdana;font-size: 10px;width: 100%; }.eXtremeTable .filter select {font-family: Verdana;font-size: 9px;border: solid 1px #EEE;width: 100%; }.eXtremeTable .tableHeader {background-color: #308dbb;color: white;font-family:Verdana;font-size: 11px;font-weight: bold;text-align: left;padding-right: 3px;padding-left: 3px;padding-top: 4;padding-bottom: 4;margin: 0;border-right-style: solid;border-right-width: 1px;border-color: white; }.eXtremeTable .tableHeaderSort {background-color: #3a95c2;color: white;font-family:Verdana;font-size: 11px;font-weight: bold;text-align: left;padding-right: 3px;padding-left: 3px;padding-top: 4;padding-bottom: 4;border-right-style: solid;border-right-width: 1px;border-color: white; }.eXtremeTable .odd a, .even a {color: Black;font-size: 10px; }.eXtremeTable .odd td, .eXtremeTable .even td {padding-top: 2px;padding-right: 3px;padding-bottom: 2px;padding-left: 3px;vertical-align: middle;font-family:Verdana;font-size: 10px; }.eXtremeTable .odd {background-color: #FFFFFF; }.eXtremeTable .even {background-color: #dfe4e8; }.eXtremeTable .highlight td {color: black;font-size: 10px;padding-top: 2px;padding-right: 3px;padding-bottom: 2px;padding-left: 3px;vertical-align: middle;background-color: #fdecae; }.eXtremeTable .highlight a, .highlight a {color: black;font-size: 10px; }.eXtremeTable .toolbar {background-color: #F4F4F4;font-family:Verdana;font-size: 9px;margin-right: 1px;border-right: 1px solid silver;border-left: 1px solid silver;border-top: 1px solid silver;border-bottom: 1px solid silver; }.eXtremeTable .toolbar td {color: #444444;padding: 0px 3px 0px 3px;text-align:center; }.eXtremeTable .separator {width: 7px; }.eXtremeTable .statusBar {background-color: #F4F4F4;font-family:Verdana;font-size: 10px; }.eXtremeTable .filterButtons {background-color: #efefef;text-align: right; }.eXtremeTable .title {color: #444444;font-weight: bold;font-family:Verdana;font-size: 15px;vertical-align: middle; }.eXtremeTable .title span {margin-left: 7px; }.eXtremeTable .formButtons {display: block;margin-top: 10px;margin-left: 5px; }.eXtremeTable .formButton {cursor: pointer;font-family:Verdana;font-size:10px;font-weight: bold;background-color: #308dbb;color: white;margin-top: 5px;border: outset 1px #333;vertical-align: middle; }.eXtremeTable .tableTotal {background-color: #FFFFFF;border-top: solid 1px Silver; }.eXtremeTable .tableTotalEmpty {background-color: #FFFFFF; }</style></head><% java.util.List presidents = new java.util.ArrayList(); %><% java.util.Map president = new java.util.HashMap(); %> <% president.put("name", "George Washington"); %> <% president.put("nickname", "Father of His Country"); %> <% president.put("term", "1789-1797"); %> <% presidents.add(president); %><% president = new java.util.HashMap(); %> <% president.put("name", "John Adams"); %> <% president.put("nickname", "Atlas of Independence"); %> <% president.put("term", "1797-1801"); %> <% presidents.add(president); %><% president = new java.util.HashMap(); %> <% president.put("name", "Thomas Jefferson"); %> <% president.put("nickname", "Man of the People, Sage of Monticello"); %> <% president.put("term", "1801-09"); %> <% presidents.add(president); %><% president = new java.util.HashMap(); %> <% president.put("name", "James Madison"); %> <% president.put("nickname", "Father of the Constitution"); %> <% president.put("term", "1809-17"); %> <% presidents.add(president); %><% president = new java.util.HashMap(); %> <% president.put("name", "James Monroe"); %> <% president.put("nickname", "The Last Cocked Hat, Era-of-Good-Feelings President"); %> <% president.put("term", "1817-25"); %> <% presidents.add(president); %><% president = new java.util.HashMap(); %> <% president.put("name", "John Adams"); %> <% president.put("nickname", "Old Man Eloquent"); %> <% president.put("term", "1825-29"); %> <% presidents.add(president); %><% request.setAttribute("pres", presidents); %><body style="margin:25px;"><p style="font-family: Verdana;font-size:14px;">Congratulations!! You have successfully configured eXtremeTable!</p><br><ec:table items="pres"action="${pageContext.request.contextPath}/test.jsp"imagePath="${pageContext.request.contextPath}/images/table/*.gif"title="Presidents"width="60%" rowsDisplayed="5"><ec:row><ec:column property="name"/><ec:column property="nickname"/><ec:column property="term"/></ec:row></ec:table><br><p style="font-family:Verdana;font-size:12px">Below is the code that generates the above display. </p><pre class="bodyText" style="background-color:#eee;padding:2px;width:60%;font-family: Verdana;font-size:11px;"><ec:table items="pres"action="${pageContext.request.contextPath}/test.jsp"imagePath="${pageContext.request.contextPath}/images/table/*.gif"title="Presidents"width="60%"rowsDisplayed="5"><ec:row><ec:column property="name"/><ec:column property="nickname"/><ec:column property="term"/></ec:row></ec:table> </pre> <br><p style="font-family:Verdana;font-size:11px;width:500px">Note: if you are not seeing any images then be sure to include the images included with the distribution. This example assumes that the images are in an /images/table/ directory. You can see this by looking at theimagePath attribute on the eXtremeTable example. If your images are somewhere else then just adjust the imagePath.</p></body> </html>
?5. 文件導出配置
之前有提過，如果要支持excel導出，以及pdf導出，要如何配置呢？這邊以支持excel導出為例進行說明，首先需要在web.xml中配置導出過濾器：
<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>然后在頁面中增加紅色部分：
頁面呈現效果：
特別說明：在配置<ec:table />標簽的時候，有個items屬性，eXtremeTable在給定的servlet范圍（scope）內取得Beans或Maps的集合用于JSP頁面顯示。 servlet范圍的搜索順序是：page, request, session和application。
三、參考鏈接
? ? ? ? http://www.blogjava.net/i369/articles/237808.html
? ? ? ??https://sourceforge.net/projects/extremecomp/（官網）
四、聯系本人
為方便沒有博客園賬號的讀者交流，特意建立一個企鵝群（純公益，非利益相關），讀者如果有對博文不明之處，歡迎加群交流：261746360，小杜比亞-博客園
轉載于:https://www.cnblogs.com/xdouby/p/7827289.html
總結
以上是生活随笔為你收集整理的ExtremeComponents源码解析（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle导出要工具,Oracle导出
- 下一篇： SQL触发器实例