Chapter 1. 后记

开发者版

开发快照版

extremecomponents-1.0.1-M5-A8（下载） 是正式版发行前的最后开发快照版。这个build版所使用的代码将被下一个release版沿用。

1.0.1-M5-A8

我决定发布一个新的里程碑(milestone)版是因为我对视图(view)的代码做了一些调整，现在eXtremeTable将能够支持AJAX(而不是局部build)。 在确认release候选版前，这些增加的大的特性能够完美地工作。

下面列出的是eXtremeTable下一个里程碑（milestone）版特性和改进，我希望从上一个里程碑版升级到现在这版没有任何问 题（breakage）。 然而，在完成M4版视图实现后，我决定我必须做最后的更改...将静态builders变为具体的类。这将是唯一可能出现问题(breakage)并且 将只影响到定制视图(定制cells也一样，但是更多的是较平和的deprecated)。尽管那样，这些更改将很容易实现。

Html Builder类具体化

所有的视图builder类具体化，需要被实例化，这些只对开发者需要创建定制试图或cells有影响。 这是因为需要使得视图代码能够像他们需要的那样具有弹性。builder classes是静态的能够很好地工作，但是 将来没有机会来做一些有意义的事，并且创建定制试图更加麻烦。然而，现在这些方法和原来的一样，而仅仅是需要对它进行实例化。

为了使这种转变更容易CellBuilder仍然是静态的，但是现在为deprecated。新的(非静态)builder称为ColumnBuilder，通过这个名称我们能更确切地知道什么被构建了。

    public String getHtmlDisplay(TableModel model, Column column) {
        ColumnBuilder columnBuilder = new ColumnBuilder(column);
        columnBuilder.tdStart();
        columnBuilder.tdBody(getCellValue(model, column));
        columnBuilder.tdEnd();
        return columnBuilder.toString();
    }

另一个例子，使用ColumnBuilder定制cells如下：

 public String getHtmlDisplay(TableModel model, Column column) {
        InputBuilder inputBuilder = new InputBuilder(column);
        inputBuilder.tdStart();

        try {
            Object bean = model.getCurrentRowBean();
            Integer id = new Integer(BeanUtils.getProperty(bean, "id"));
            inputBuilder.tdBody(id);

        } catch (Exception e) {}

        inputBuilder.tdEnd();

        return inputBuilder.toString();
    }

    private static class InputBuilder extends ColumnBuilder {
        public InputBuilder(Column column) {
            super(column);
        }

        public void tdBody(Integer id) {
            getHtmlBuilder().input("radio").name("location.id").id("location.id").value(id.toString()).onclick("populateLocationFields(this.value)");
            getHtmlBuilder().xclose();
        }
    }
 } 

这样更简洁，只需要扩展你关心的builder，并构建你定制的实现。

另外toolbar被完全重构，但是这个实现被隐藏在ToolbarBuilder类的背后，所以不会有影响。

最后，我探索性地增加了toolbar特性，这样可以在preferences配置表关联到不同的toolbars。 这个特性能够用来动态构造toolbar。这将使开发者很简单地通过preferences来定义一个定制的toolbar。 例如，一个toolbar当使用Limit定制不包含最后一页按钮，或者另一个toolbar不包含rows displayed... 如果你要定制的就是这些东西而不需要别的新的特性，你最好等待一两个星期直到我实现完成。

新的表的showTitle属性

TableTag新的showTitle属性用来确认是否现实title，这是一个boolean值默认为true。

Limit现在能使用State特性

Limit特性为了使用State特性，你需要使用TableLimitFactory的带有state的构造函数，当使用state 特性时，你应该提供唯一的tableId（本例为presidents），带有state的构造函数同时也需要这个tableId。

    Context context = new HttpServletRequestContext(request);
    LimitFactory limitFactory = new TableLimitFactory(context, presidents, TableConstants.STATE_PERSIST, null);
    Limit limit = new TableLimit(limitFactory);

新的列的filterOptions属性/FilterOption接口

TableTag新的filterOptions属性，能够接受一个filter options的集合，这个集合中的每个bean都实现FilterOption的 接口。被用来和filterCell=droplist结合，当使用Limit时使用定制droplist时非常有用。

导出EXCLE文件时的本地语言的支持

默认的XlsView使用UTF-16编码，这样能够支持对于双字节语言导出。如果要使用unicode，你可以设置 ExportTag的新的encoding属性，这个属性接受的值为：UTF和UNICODE。

删除Compact视图的title的style

当使用compact视图是我硬编码了表的title，这是一个bug。只需要通过CSS的titleRow属性style（或移走）title。

TableModel现在变为接口

TableModel现在变为接口，这只对TableAssembler产生影响。然而，正如下面提到的，使用Java代码来组装一个表将更容易。

TableAssembler整合到TableModel

当使用Java代码来组装一个表将更容易：

    TableModel model = new TableModelImpl(context);

    Table table = new Table(model);
    table.setItems(presidents);
    table.setAction("assembler.run");
    table.setTitle("Presidents");
    table.setShowTooltips(Boolean.FALSE);
    model.addTable(table);

    Row row = new Row(model);
    row.setHighlightRow(Boolean.FALSE);
    model.addRow(row);

    Column columnName = new Column(model);
    columnName.setProperty("fullName");
    columnName.setIntercept((AssemblerIntercept.class).getName());
    model.addColumn(columnName);

    Column columnNickName = new Column(model);
    columnNickName.setProperty("nickName");
    model.addColumn(columnNickName);

    Object view = model.assemble();

重命名FilterSet.getValue()方法

FilterSet.getValue()方法被Deprecated，重命名为FilterSet.getFilterValue()。

删除TableTag的onsubmit

onsubmit被删除，因为javascript被表的所有actions使用。

总计导出

PDF和XLS现在包含总计导出，你只需要和平常一样设置Calc特性。

导出错误-Response头修改

过滤器的response头应该能更好地适应不同环境，在response头后添加：

 response.setHeader("Cache-Control", "must-revalidate, post-check=0, pre-check=0");

列标签autoGenerateColumns的Preferences

autoGenerateColumns属性现在可以在Preferences文件中配置，可以使用别名来避免全路径引用。

自动转换参数

Registry能够接受null、String、List或者Array作为参数，Registry将把这些转换成String[]。

表的bufferView属性

表的bufferView属性，默认为true将使用视图的默认buffer。如果不需要使用buffer可以设置为false。

eXtremeTable的AJAX特性

当使用eXtremeTable API来通过JAVA代码来创建表时，现在可以结合AJAX技术来生成视图。这意味着 当navigate（比如：翻页）时不需要刷新web页，这令人非常兴奋，关于这个特性的更多的文档将会出来。开发 者能够更好地测试并使用这个特性，这个特性的真正hook是表的onInvokeAction属性，它使得javascript方法 能够被invoked。AJAX整合一个最强大的地方是它不需要整合。下一步是使eXtremeTable有一个清晰并且易于使用的API， 这意味着你可以使用你感兴趣的AJAX技术因为eXtremeTable没有整合一个特定的技术。现在你可以通过CVS得到eXtremeSite代码， 它展示了一个使用AJAX的实例，它现在使用HSQL所以只需要下载并直接运行。请暂时不要向我询问更多的文档，我现在正在整理 并将尽可能快的发布出来。

表的items可以使用Map

表的Items可以使用Map(values)，因此可以使用不使用Collection而使用一些key来快速构造。 这个特性正是一个eXtremeComponents使用者需要的。我想这将是一个有趣的特性所以决定在下一个release中发布!

可以定义超过一个显示的行数（rows displayed））

现在可以定义超过一个显示的行数（rows displayed）。这使得在eXtremeTable顶部和底部定义相同的工具条成为可能。

Parameter参数的更多变化

Parameter特性能更好地支持Arrays、Lists、String和其他一些具有toString()的java对象，具有toString（）函数能够转换成一个String数组（array），例如：Number。

修正Export viewResolver属性没有被参照

修正Export viewResolver属性没有被真正使用的bug。这使得定制导出时不需要设置view和viewResolver为相同的命名，而可以给出ViewResolver的全路径或者在配置中配置它的别名。

修正在同一个form中使用两个eXtremeTables时导出的问题

修正在同一个form中使用两个eXtremeTables时导出的问题，现在他们能够互不干扰分别导出。我只是重新组织表实例 （instance）参数(现在命名ec_eti为导出表的id)，这个参数需要被同一个form中的不同表共享，每次request时候被重新设置 （reset）。

如果form还包含其他的按钮（buttons）被条用，导出完毕后你需要调用resetExportParameters(form, action)，它包含在extremecomponents.js文件中。第一个参数是当前的form，第二个参数是form的action。这个是因 为导出使用javaScript进行调用,没有别的办法重新自动reset它。 resetExportParameters做的就是将导出表的id置为空(null),并且将form action设置为原来的值。这很不幸，但是我想不出别的处理方法。

Note: 这个修正也关系到State特性。当使用State设置为persist时，导出也会出现问题。

table.imagePath配置(preference)添加上下文路径（contextPath ）

如果table.imagePath的上下文路径(context path)没有在配置文件(Preferences)中指定，那么将给它自动指定一个。然而，如果路径以表示绝对路径“/”开始，将只给它提供一个上下文 (context)而上下文(contextPath)并没有插入。

使用javascript设置form的method属性

当翻页、过滤、排序时将使用javascript来设置form的method属性。以前只是设置了form的action属性，为了完整性现在也设置了form的method属性。

Bullet Proof Limit feature

如果传入不正确的数据到LimitCallback时，Limit只记录（log）并显示一个警告（warning）。

Intercept被重命名为Interceptor

intercept特性被重命名为interceptor。因此我们现在的interceptors有：TableInterceptor、 RowInterceptor、ExportInterceptor和ColumnInterceptor。他们现在在interceptor包中。遍更 的原因是intercept不如interceptor能给大家提供一种表明他们作用更好的直觉。我不向提供一种我不喜欢的命名。然而，这些方法名都一样 所以能够将他们集中到一个正确的包中。

Using AJAX with the eXtremeTable is a very simple and natural extension to the existing functionality. Probably the best thing about the AJAX integration is there is no integration at all. You are free to use whatever AJAX toolkit you want. All you need to do is tell the eXtremeTable what javascript to use when a table action is invoked. The table actions meaning the filtering, sorting, paging, rows displayed and exporting.

For my example I will be using the ultra cool DWR toolkit. As will be demonstrated, the glue code required by DWR is very minimal, which leaves us to just worry about constructing the table. You can see the working example in action on the site!

Assembler Example

For this example you will need to setup the DWR toolkit, create the POJO to build the table, and make up the JSP that contains the eXtremeTable.

Setup DWR

The first thing to do is download the DWR toolkit. You should read the instructions on the site, but the following is what I needed to do to get things working:

• Place the dwr-1.1.jar into the WEB-INF/lib directory
• Create a dwr.xml file and place it in the WEB-INF directory

<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
    "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr>
  <allow>
    <create creator="new" javascript="Assembler">
      <param name="class" value="org.extremesite.controller.Assembler"/>
      <include method="getTable"/>
    </create>
  </allow>
  <signatures>
    <![CDATA[
       import java.util.Map;
       import java.util.List;
       import org.extremesite.controller.Assembler;
       import javax.servlet.http.HttpServletRequest;
       Assembler.getTable(Map<String, List> parameterMap, HttpServletRequest request);
       ]]>
  </signatures>
</dwr>

In a nutshell the create tag allows you to reference the POJO that builds the table, along with the method to invoke. The signature tag declares what the actual types are for the method that is invoked. In this example the Assembler class getTable method will be called by passing in a Map, with the form parameters, along with the HttpServletRequest.

• Reference the DWR servlet in the WEB-INF/web.xml file

  <servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <display-name>DWR Servlet</display-name>
    <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
    <init-param>
       <param-name>debug</param-name>
       <param-value>true</param-value>
    </init-param>
  </servlet>
  <servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
      <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>

This is setting up the DWR servlet that is used to call your POJO. There is nothing more you should have to know about the servlet other than how to set it up here.

Create POJO

DWR works with POJOs. This works great for our needs because the eXtremeTable has a full API that feels very much like building a table with the JSP tags. In fact the JSP tags are merely a front end for the eXtremeTable Java API. First I will show the method that builds the table.

public class Assembler {
  private Object build(TableModel model, Collection presidents) throws Exception {
    Table table = model.getTableInstance();
    table.setTableId("assembler");
    table.setItems(presidents);
    table.setAction(model.getContext().getContextPath() + "/assembler.run");
    table.setTitle("Presidents");
    table.setOnInvokeAction("buildTable('assembler')");
    model.addTable(table);

    Export export = model.getExportInstance();
    export.setView(TableConstants.VIEW_XLS);
    export.setViewResolver(TableConstants.VIEW_XLS);
    export.setImageName(TableConstants.VIEW_XLS);
    export.setText(TableConstants.VIEW_XLS);
    export.setFileName("output.xls");
    model.addExport(export);

    Row row = model.getRowInstance();
    row.setHighlightRow(Boolean.FALSE);
    model.addRow(row);

    Column columnName = model.getColumnInstance();
    columnName.setProperty("fullName");
    columnName.setIntercept((AssemblerIntercept.class).getName());
    model.addColumn(columnName);

    Column columnNickName = model.getColumnInstance();
    columnNickName.setProperty("nickName");
    model.addColumn(columnNickName);

    Column columnTerm = model.getColumnInstance();
    columnTerm.setProperty("term");
    model.addColumn(columnTerm);

    Column columnBorn = model.getColumnInstance();
    columnBorn.setProperty("born");
    columnBorn.setCell(TableConstants.DATE);
    model.addColumn(columnBorn);

    Column columnDied = model.getColumnInstance();
    columnDied.setProperty("died");
    columnDied.setCell(TableConstants.DATE);
    model.addColumn(columnDied);

    Column columnCareer = model.getColumnInstance();
    columnCareer.setProperty("career");
    model.addColumn(columnCareer);

    return model.assemble();
  }
}

Most of this code should be very self explanatory. You will see how to build a TableModel in a second, but first you will notice that it is the only object you will have to interact with to build the table. The first step to building a table is use the TableModel to create the Table, Row, Column and Export. Once you create one of the model objects it needs to be added to the model. Until you actually add it the TableModel, the model will not use it. Once you have everything constructed then call model.assemble(); to build the table.

Probably the most interesting call is table.setOnInvokeAction("buildTable('assembler')");. This is the javascript method that will be called when you invoke any of the table actions (paging, filtering, sorting, etc..). If the table onInvokeAction is left blank the default javascript method is to submit the form that wraps the eXtremeTable, just like you would expect.

The other method of the Assembler class is getTable().

public class Assembler {
  public String getTable(Map parameterMap, HttpServletRequest request) {
    WebApplicationContext webApplicationContext = WebApplicationContextUtils.getWebApplicationContext(request.getSession().getServletContext());

    PresidentsDao presidentsDao = (PresidentsDao) webApplicationContext.getBean("presidentsDao");
    Collection presidents = presidentsDao.getPresidents();

    Context context = null;
    if (parameterMap == null) {
      context = new HttpServletRequestContext(request);
    } else {
      context = new HttpServletRequestContext(request, parameterMap);
    }

    TableModel model = new TableModelImpl(context);
    try {
      return build(model, presidents).toString();
    } catch (Exception e) {
      e.printStackTrace();
    }

    return "";
  }
}

This method is a little busy, but it is doing double duty. It needs to be called the first time by the Controller (if using Spring). If you use Struts this is the equivalent of the Action class. Then, when using AJAX, this method also needs to be called, but this time passing in a custom parameterMap. The parameterMap will contain all the parameters for the eXtremeTable using AJAX. This should become more clear once you see the Controller and the JSP.

Controller

public class AssemblerController extends AbstractController {
  public String successView;

  public void setSuccessView(String successView) {
    this.successView = successView;
  }

  protected ModelAndView handleRequestInternal(HttpServletRequest request, HttpServletResponse response) throws Exception {
    ModelAndView mv = new ModelAndView(successView);
    Assembler assembler = new Assembler();
    Object viewData = assembler.getTable(null, request);
    request.setAttribute("assembler", viewData);
    return mv;
  }
}

The controller is called the first time to initially build the table. It calls the POJO and then passes the table to the request. Notice how null is sent in for the parameterMap. This is because the first time the table is built there are no table actions the table needs to be aware of.

JSP

Start constructing the JSP by importing the proper javascript files. The only javascript file you need to include in your project is the extremecomponents.js. The other declarations are used by DWR.

  <script type="text/javascript" src="<c:url value="/dwr/interface/Assembler.js"/>"></script>
  <script type="text/javascript" src="<c:url value="/dwr/engine.js"/>"></script>
  <script type="text/javascript" src="<c:url value="/dwr/util.js"/>"></script>
  <script type="text/javascript" src="<c:url value="/js/extremecomponents.js"/>"></script>

Then put in the hook to display the table. The div is used to call the innerHtml and stream the new markup.

  <div id="tableDiv">
    <c:out value="${assembler}" escapeXml="false"/> 
  </div>

Lastly, declare the javascript to call the DWR hooks.

<script type="text/javascript">
  function buildTable(form) {
    var parameterMap = getParameterMap(form);   
    Assembler.getTable(parameterMap, showTable);
  }

  function showTable(table) {
    document.getElementById('tableDiv').innerHTML=table;
  }
</script>

The getParameterMap() method is included in the extremecomponents.js file and will grab all the form parameters. You need to pass in a reference to the form id that wraps the eXtremeTable. Remember that the eXtremeTable is essentially a form component and the tableid is used as the form id. By default the tableId is ec, but you usually want to set a tableId so that code is easier to follow for people reading your code. With the parameterMap you will then call the POJO getTable method. The showTable is a callback that tells DWR what to call when it returns from the getTable() method.

Conclusion

This tutorial described the steps needed to get the eXtremeTable working with AJAX. One of the main things to keep in mind is there is no actual integration with AJAX. You simply tell the eXtremeTable what javascript to call when one of the table actions is invoked. The other thing to get from this example is that the DWR toolkit works with POJOs and can be easily used with any framework.