AJAX 指南
q行?..
在eXtremeTable中用AJAX非常单,对现有功能的扩展也非常方ѝ?AJAX整合一个最强大的地Ҏ它不需要整合。你可以自由C用Q何你惌使用的AJAX工具包。所有你要做的就是:当表的action被调用时Q告?eXtremeTable使用什么javascript。表的actions包括Q过滤、排序、分c显C的行数和导出?
在我自己的示例中我将使用非常LDWR工具包。DWR 需要的_合代码非常,q样我们只需要关注如何构。你可以通过本站CZ看到效果!
Assembler Example
本示例中需要安装DWR工具包,创徏POJO来构造表q创建包含eXtremeTable的JSP面?
安装DWR
首先要做的就?a rel="nofollow" title="http://getahead.ltd.uk/dwr/download" class="external text" >下蝲DWR工具包。你应该览|站的用说明,不过下面是我让它W合我的需要来工作所q行的操?
- dwr-1.1.jar拯到WEB-INF/lib目录
- 在WEB-INF目录下创Z个dwr.xml文g
<!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 nutshellQ创建(createQ标{օ许当Ҏ被调用时Q参照构需要的POJO。签名(signatureQ标{֣明了被调用方法用的实际 cd?本示例的AssemblercȝgetTableҎ通过传入一个MapQ包含form参数Q和HttpServletRequest?
- 在WEB-INF/web.xml中对DWR servletq行声明
<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。除了设|它Q你不需要对q个servlet有更多的了解?
创徏POJO
DWR使用Qworks withQPOJOs。这个非常符合我们的需要,因ؓeXtremeTable有够的API使用Jsp标签来构造表。实际上QJSP标签只不q是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(); } }
上面的大部分代码是自解释性的Q你在下面看到如何构造一个TableModelQ但是首先你应该注意到TableModel是构造表旉要交互的 唯一对象。构造表的第一步就是用TableModel来创建Table、Row、Column和Export?一旦你创徏了一个model对象Q你只需要将它添加到model中。除非你它d到TableModelQ否则的话model不会是用它。所有东西已 l构建好后,你只需要调用model.assemble()Ҏ来构造表了?
可能table.setOnInvokeAction("buildTable('assembler')");是最有趣的调用。当你用表的actions(页、过滤、排?.....)Q这个javascriptҎ被调用。如果表的onInvokeActionI白Q则默认的javascriptҎ被提交QsubmitQ?Q正如你所期望的那栗?
Assemblercȝ另一个方?--getTable()Q?
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 ""; } }
q个Ҏ调用比较频繁Q它执行双重职责。它需要被ControllerQ如果用Spring的话Q在W一ơ调用,如果使用Strutsq同于ActioncR?/em> 随后Q?当用AJAXӞq个Ҏ也需要被调用Q但是这ơ将传入一个定制的parameterMap。parameterMap包含eXtremeTable使用AJAX需要的所有参数。当你看?Controller和JSP后,q点更加清晰?
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在被W一ơ调用时来构。它调用POJOq将表传lrequest。注意空|nullQ如何用parameterMap传输。这是因为第一ơ表被构造时Q没有对应表需要知道的actions?
JSP
通过引入(importing)合适的javascript文g来开始构建JSP面。唯一需要包含进工程的javascript文g是extremecomponents.jsQ其它的javascript文gx都是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>
接着Q插入钩子(hook)来显CQdiv被用来调用innerHtmlq构建新的标{?
<div id="tableDiv"> <c:out value="$" escapeXml="false"/> </div>
最后,djavascript来调用DWR的钩子(hooksQ?
<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文g中,的到所有的form参数。你需要传入一?form id的参照。记住,eXtremeTable本质上是一个forml徏Qtableid作ؓform id使用。默认的tableId为ecQ但是你通常惌讄tableIdQ以C大家能更容易阅M的代码。你用parameterMap调用 POJO的getTableҎ。showTable是一个callback告诉DWR当从getTable()Ҏq回时将调用什么操作?
l论
本指南描qC在eXtremeTable中用AJAX所需要的步骤。需要留心的一个主要事情是没有和AJAX发生实际整合。当表的actions 被用是Q你只需要简单地告诉eXtremeTable什么javascript被调yong。另一个事情是Q通过本示例我们可以知道DWR工具包?POJOsq能够简单地被Q何框架用?

|