AJAX 指南
進行中...
在eXtremeTable中使用AJAX非常簡單,對現有功能的擴展也非常方便。
AJAX整合一個最強大的地方是它不需要整合。你可以自由地使用任何你想要使用的AJAX工具包。所有你要做的就是:當表的action被調用時,告訴
eXtremeTable使用什么javascript。表的actions包括:過濾、排序、分頁、顯示的行數和導出。
在我自己的示例中我將使用非??岬?a class="external text" title="http://getahead.ltd.uk/dwr/" rel="nofollow">DWR工具包。DWR 需要的粘合代碼非常少,這樣我們只需要關注如何構建表。你可以通過本站示例看到效果!
Assembler Example
本示例中將需要安裝DWR工具包,創建POJO來構造表并創建包含eXtremeTable的JSP頁面。
安裝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有更多的了解。
創建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后,這點將更加清晰。
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。
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()方法返回時將調用什么操作。
結論
本指南描述了在eXtremeTable中使用AJAX所需要的步驟。需要留心的一個主要事情是沒有和AJAX發生實際整合。當表的actions
被使用是,你只需要簡單地告訴eXtremeTable什么javascript將被調yong。另一個事情是,通過本示例我們可以知道DWR工具包使用
POJOs并能夠簡單地被任何框架使用。