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;">
    &lt;ec:table
        items="pres"
        action="${pageContext.request.contextPath}/test.jsp"
        imagePath="${pageContext.request.contextPath}/images/table/*.gif"
        title="Presidents"
        width="60%"
        rowsDisplayed="5"
        &gt;
        &lt;ec:row&gt;
            &lt;ec:column property="name"/&gt;
            &lt;ec:column property="nickname"/&gt;
            &lt;ec:column property="term"/&gt;
        &lt;/ec:row&gt;
    &lt;/ec:table&gt;
</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 the
        imagePath 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，小杜比亚-博客园