extremeComponents使用AJAX 指南

AJAX 指南

进行中...

在eXtremeTable中使用AJAX非常简单，对现有功能的扩展也非常方便。 AJAX整合一个最强大的地方是它不需要整合。你可以自由地使用任何你想要使用的AJAX工具包。所有你要做的就是：当表的action被调用时，告诉 eXtremeTable使用什么javascript。表的actions包括：过滤、排序、分页、显示的行数和导出。

在我自己的示例中我将使用非常酷的DWR工具包。DWR 需要的粘合代码非常少，这样我们只需要关注如何构建表。你可以通过本站示例看到效果!

[ edit]

Assembler Example

本示例中将需要安装DWR工具包，创建POJO来构造表并创建包含eXtremeTable的JSP页面。

[ edit]

安装DWR

首先要做的就是下载DWR工具包。你应该浏览网站的使用说明，不过下面是我让它符合我的需要来工作所进行的操作:

将dwr-1.1.jar拷贝到WEB-INF/lib目录
在WEB-INF目录下创建一个dwr.xml文件

<!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）创建（create）标签允许当方法被调用时，参照构建表需要的POJO。签名（signature）标签声明了被调用方法使用的实际类型。本示例的Assembler类的getTable方法将通过传入一个Map（包含form参数）和HttpServletRequest。

在WEB-INF/web.xml中对DWR servlet进行声明

  <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>

以上就完成了DWR servlet的设置，它被用来调用你的POJO。除了设置它，你不需要对这个servlet有更多的了解。

[ edit]

创建POJO

DWR使用（works with）POJOs。这个非常符合我们的需要，因为eXtremeTable有足够的API使用Jsp标签来构造表。实际上，JSP标签只不过是eXtremeTable Java API的前端。首先，我将展示构造表的方法：

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();
  }
}

上面的大部分代码是自解释性的，你将在下面看到如何构造一个TableModel，但是首先你应该注意到TableModel是构造表时需要交互的唯一对象。构造表的第一步就是使用TableModel来创建Table、Row、Column和Export。一旦你创建了一个model对象，你只需要将它添加到model中。除非你将它添加到TableModel，否则的话model将不会是用它。所有东西已经构建好后，你只需要调用model.assemble()方法来构造表了。

可能table.setOnInvokeAction("buildTable('assembler')");是最有趣的调用。当你使用表的actions(翻页、过滤、排序......)，这个javascript方法将被调用。如果表的onInvokeAction空白，则默认的javascript方法将被提交（submit），正如你所期望的那样。

Assembler类的另一个方法---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 "";
  }
}

这个方法调用比较频繁，它执行双重职责。它需要被Controller（如果使用Spring的话）在第一次调用，如果使用Struts就等同于Action类。 随后，当使用AJAX时，这个方法也需要被调用，但是这次将传入一个定制的parameterMap。parameterMap将包含eXtremeTable使用AJAX需要的所有参数。当你看了 Controller和JSP后，这点将更加清晰。

[ edit]

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;
  }
}

controller在被第一次调用时来构建表。它调用POJO并将表传给request。注意空值（null）如何使用parameterMap传输。这是因为第一次表被构造时，没有对应表需要知道的actions。

[ edit]

JSP

通过引入(importing)合适的javascript文件来开始构建JSP页面。唯一需要包含进工程的javascript文件是extremecomponents.js，其它的javascript文件申明都是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>

接着，插入钩子（hook)来显示表，div被用来调用innerHtml并构建新的标签。

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

最后，添加javascript来调用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>

getParameterMap()方法包含在extremecomponents.js文件中，将的到所有的form参数。你需要传入一个 form id的参照。记住，eXtremeTable本质上是一个form组建，tableid作为form id使用。默认的tableId为ec，但是你通常想要设置tableId，以示大家能更容易阅读你的代码。你将使用parameterMap调用 POJO的getTable方法。showTable是一个callback告诉DWR当从getTable()方法返回时将调用什么操作。

[ edit]

结论

本指南描述了在eXtremeTable中使用AJAX所需要的步骤。需要留心的一个主要事情是没有和AJAX发生实际整合。当表的actions 被使用是，你只需要简单地告诉eXtremeTable什么javascript将被调yong。另一个事情是，通过本示例我们可以知道DWR工具包使用 POJOs并能够简单地被任何框架使用。

extremeComponents使用AJAX 指南