幸せのちから

平凡的世界
看似平常实崎岖
成如容易却艰辛

extremeComponents使用AJAX 指南

AJAX 指南

进行中...


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

在我自己的示例中我将使用非常酷的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并能够简单地被任何框架使用。

posted on 2006-03-27 17:09 Lucky 阅读(6459) 评论(10)  编辑  收藏 所属分类: extremeComponents

评论

# re: extremeComponents使用AJAX 指南 2006-03-28 15:06 差沙

官网上面的是你翻译的么??多了多大的工作,多谢。。

不过总觉得现在这个ajax实现的不伦不类,要是用ajaxanywhere来实现的话,根本就不用改现在代码。  回复  更多评论   

# re: extremeComponents使用AJAX 指南 2006-03-28 15:13 Lucky

官网上的是我翻译的,方便大家。

对于AJAX,我是一点都不懂,不过我感觉现在的实现对于原来的代码来说,需要的更改不是太大。  回复  更多评论   

# re: extremeComponents使用AJAX 指南 2006-03-28 21:41 fanse

DWR的确是个不错的工具

欢迎访问http://www.shuangzixing.net  回复  更多评论   

# re: extremeComponents使用AJAX 指南 2006-03-29 12:47 Lucky

双子星http://www.shuangzixing.net/ 挺不错的
理念有点和openfans类似
http://www.openfans.net/main.html  回复  更多评论   

# re: extremeComponents使用AJAX 指南 2006-07-25 15:20 nbaertuo@21cn.com

怎么加一个下来菜单列 ?
菜单的内容还可以是动态的吗?  回复  更多评论   

# re: extremeComponents使用AJAX 指南 2006-11-02 12:32 phoenix[匿名]

现在的代码如果改用这种AJAX,几乎所有代码都要重写,而且不可复用,这玩意儿只能拿来当玩具,在实际项目中几乎不可用。  回复  更多评论   

# 欢迎大家去试用一个全新的extremeComponents增强版: EC Side. 2007-01-29 17:34 fins

欢迎大家去试用一个全新的extremeComponents增强版: EC Side.
ECSide发布地址:
1.1版本: http://fins.javaeye.com/blog/51068
1.0版本: http://fins.javaeye.com/blog/40190
ECSide圈子:
http://ecside.javaeye.com/
ECSide综合讨论专用帖
http://fins.javaeye.com/blog/48723
  回复  更多评论   

# re: extremeComponents使用AJAX 指南 2007-11-03 13:33 大妈

学习  回复  更多评论   

# re: extremeComponents使用AJAX 指南 2007-11-27 00:02 专注java开源

多谢了  回复  更多评论   

# re: extremeComponents使用AJAX 指南 2009-11-23 13:42 bolo

如果我想使用jquery来实现的话,需要修改哪些地方?  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 
<2006年3月>
2627281234
567891011
12131415161718
19202122232425
2627282930311
2345678

导航

随笔分类(125)

文章分类(5)

日本語

搜索

积分与排名

最新随笔

最新评论