AJAX 指南
進(jìn)行中...
在eXtremeTable中使用AJAX非常簡(jiǎn)單，對(duì)現(xiàn)有功能的擴(kuò)展也非常方便。
AJAX整合一個(gè)最強(qiáng)大的地方是它不需要整合。你可以自由地使用任何你想要使用的AJAX工具包。所有你要做的就是：當(dāng)表的action被調(diào)用時(shí)，告訴
eXtremeTable使用什么javascript。表的actions包括：過(guò)濾、排序、分頁(yè)、顯示的行數(shù)和導(dǎo)出。
在我自己的示例中我將使用非常酷的DWR工具包。DWR 需要的粘合代碼非常少，這樣我們只需要關(guān)注如何構(gòu)建表。你可以通過(guò)本站示例看到效果!
Assembler Example
本示例中將需要安裝DWR工具包，創(chuàng)建POJO來(lái)構(gòu)造表并創(chuàng)建包含eXtremeTable的JSP頁(yè)面。
安裝DWR
首先要做的就是下載DWR工具包。你應(yīng)該瀏覽網(wǎng)站的使用說(shuō)明，不過(guò)下面是我讓它符合我的需要來(lái)工作所進(jìn)行的操作:
- 將dwr-1.1.jar拷貝到WEB-INF/lib目錄
- 在WEB-INF目錄下創(chuàng)建一個(gè)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>
簡(jiǎn)而言之（In a
nutshell）創(chuàng)建（create）標(biāo)簽允許當(dāng)方法被調(diào)用時(shí)，參照構(gòu)建表需要的POJO。簽名（signature）標(biāo)簽聲明了被調(diào)用方法使用的實(shí)際
類型。 本示例的Assembler類的getTable方法將通過(guò)傳入一個(gè)Map（包含form參數(shù)）和HttpServletRequest。
- 在WEB-INF/web.xml中對(duì)DWR servlet進(jìn)行聲明
<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的設(shè)置，它被用來(lái)調(diào)用你的POJO。除了設(shè)置它，你不需要對(duì)這個(gè)servlet有更多的了解。
創(chuàng)建POJO
DWR使用（works with）POJOs。這個(gè)非常符合我們的需要，因?yàn)閑XtremeTable有足夠的API使用Jsp標(biāo)簽來(lái)構(gòu)造表。實(shí)際上，JSP標(biāo)簽只不過(guò)是eXtremeTable Java API的前端。首先，我將展示構(gòu)造表的方法：
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();
}
}
上面的大部分代碼是自解釋性的，你將在下面看到如何構(gòu)造一個(gè)TableModel，但是首先你應(yīng)該注意到TableModel是構(gòu)造表時(shí)需要交互的
唯一對(duì)象。構(gòu)造表的第一步就是使用TableModel來(lái)創(chuàng)建Table、Row、Column和Export。
一旦你創(chuàng)建了一個(gè)model對(duì)象，你只需要將它添加到model中。除非你將它添加到TableModel，否則的話model將不會(huì)是用它。所有東西已
經(jīng)構(gòu)建好后，你只需要調(diào)用model.assemble()方法來(lái)構(gòu)造表了。
可能table.setOnInvokeAction("buildTable('assembler')");是最有趣的調(diào)用。當(dāng)你使用表的actions(翻頁(yè)、過(guò)濾、排序......)，這個(gè)javascript方法將被調(diào)用。如果表的onInvokeAction空白，則默認(rèn)的javascript方法將被提交（submit） ，正如你所期望的那樣。
Assembler類的另一個(gè)方法---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 "";
}
}
這個(gè)方法調(diào)用比較頻繁，它執(zhí)行雙重職責(zé)。它需要被Controller（如果使用Spring的話）在第一次調(diào)用，如果使用Struts就等同于Action類。 隨后，
當(dāng)使用AJAX時(shí)，這個(gè)方法也需要被調(diào)用，但是這次將傳入一個(gè)定制的parameterMap。parameterMap將包含eXtremeTable使用AJAX需要的所有參數(shù)。當(dāng)你看了 Controller和JSP后，這點(diǎn)將更加清晰。
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在被第一次調(diào)用時(shí)來(lái)構(gòu)建表。它調(diào)用POJO并將表傳給request。注意空值（null）如何使用parameterMap傳輸。這是因?yàn)榈谝淮伪肀粯?gòu)造時(shí)，沒(méi)有對(duì)應(yīng)表需要知道的actions。
JSP
通過(guò)引入(importing)合適的javascript文件來(lái)開(kāi)始構(gòu)建JSP頁(yè)面。唯一需要包含進(jìn)工程的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)來(lái)顯示表，div被用來(lái)調(diào)用innerHtml并構(gòu)建新的標(biāo)簽。
<div id="tableDiv">
<c:out value="${assembler}" escapeXml="false"/>
</div>
最后，添加javascript來(lái)調(diào)用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參數(shù)。你需要傳入一個(gè)
form id的參照。記住，eXtremeTable本質(zhì)上是一個(gè)form組建，tableid作為form
id使用。默認(rèn)的tableId為ec，但是你通常想要設(shè)置tableId，以示大家能更容易閱讀你的代碼。你將使用parameterMap調(diào)用
POJO的getTable方法。showTable是一個(gè)callback告訴DWR當(dāng)從getTable()方法返回時(shí)將調(diào)用什么操作。
結(jié)論
本指南描述了在eXtremeTable中使用AJAX所需要的步驟。需要留心的一個(gè)主要事情是沒(méi)有和AJAX發(fā)生實(shí)際整合。當(dāng)表的actions
被使用是，你只需要簡(jiǎn)單地告訴eXtremeTable什么javascript將被調(diào)yong。另一個(gè)事情是，通過(guò)本示例我們可以知道DWR工具包使用
POJOs并能夠簡(jiǎn)單地被任何框架使用。