码迷，mamicode.com
首页 > 其他好文 > 详细

ExtremeComponents源码解析（一）

时间：2017-11-14 14:24:11      阅读：129      评论：0      收藏：0      [点我收藏+]

标签：final   联系   people   jstl   generate   page   工程   声明   根据   

一、前言

　　因参与公司框架改造，在负责前端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，小杜比亚-博客园

ExtremeComponents源码解析（一）

标签：final   联系   people   jstl   generate   page   工程   声明   根据   

原文地址：http://www.cnblogs.com/xdouby/p/7827289.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！