论坛首页 Web前端技术论坛

AJAX方式的ET的使用

浏览 3006 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2006-09-25  
1.DWR配置和使用
设置DWR的使用是简单的:
将DWR的jar文件拷入Web应用的WEB-INF/lib目录中,
在web.xml中增加一个servlet声明,并创建DWR的配置文件。DWR的分发中需要使用一个单独的jar文件。
你必须将DWR servlet加到应用的WEB-INF/web.xml中。

在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="com.systop.ec.Assembler" />
   <include method="getTable" />
  </create>
 </allow>
 <signatures>
  <![CDATA[      
import java.util.Map;      
import java.util.List;      
import com.systop.ec.Assembler;      
import javax.servlet.http.HttpServletRequest;      
Assembler.getTable(Map<String, List> parameterMap, HttpServletRequest request);      
]]>
 </signatures>
</dwr>
2.创建POJO
DWR使用(works with)POJOs。这个非常符合我们的需要,因为eXtremeTable有足够的API使用Jsp标签来构造表。
实际上,JSP标签只不过是eXtremeTable Java API的前端。首先,我将展示构造表的方法:

public class Assembler {
  private Object build(TableModel model, List pres) throws Exception {
    Table table = model.getTableInstance();
    table.setTableId("assembler");
    table.setItems(pres);
    table.setAction(model.getContext().getContextPath() + "/userAction.do");
    table.setTitle("ET+AJAX");
    table.setImagePath(model.getContext().getContextPath()+"/images/table/*.gif");
    table.setRowsDisplayed(3);
    table.setOnInvokeAction("buildTable('assembler')");
   
    model.addTable(table);    Row row = model.getRowInstance();
    row.setHighlightRow(Boolean.FALSE);
    model.addRow(row);    Column columnName = model.getColumnInstance();
    columnName.setProperty("name");
    model.addColumn(columnName);    Column columnNickName = model.getColumnInstance();
    columnNickName.setProperty("nickname");
    model.addColumn(columnNickName);    Column columnTerm = model.getColumnInstance();
    columnTerm.setProperty("term");
    model.addColumn(columnTerm);
 
    return model.assemble();
  }   /**
   * 这个方法调用比较频繁,它执行双重职责。它需要被Controller(如果使用Spring的话)在第一次调用,
   * 如果使用Struts就等同于Action类。 随后,当使用AJAX时,这个方法也需要被调用,但是这次将传入一个
   * 定制的parameterMap。parameterMap将包含eXtremeTable使用AJAX需要的所有参数。当你看了 Controller
   * 和JSP后,这点将更加清晰。
   * @param parameterMap
   * @param request
   * @return
   */
  public String getTable(Map parameterMap, HttpServletRequest request) {
    WebApplicationContext webApplicationContext = WebApplicationContextUtils
        .getWebApplicationContext(request.getSession().getServletContext());
    PresidentsDao presidentsDao = (PresidentsDao) webApplicationContext.getBean("presidentsDao");
    List 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 "";
  }
}
3.创建Action
 
public ActionForward execute(ActionMapping mapping, ActionForm form,
      HttpServletRequest request, HttpServletResponse response)
      throws Exception {               Assembler assembler = new Assembler();                                       Object viewData = assembler.getTable(null, request);                                     request.setAttribute("assembler", viewData);                                       return mapping.findForward("userList");              }
  Action在被第一次调用时来构建表。它调用POJO并将表传给request。注意空值(null)如何使用parameterMap传输。
  这是因为第一次表被构造时,没有对应表需要知道的actions


  4.创建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()方法返回时将调用什么操作。

                                                                                                                                     参考:http://www.blogjava.net/lucky/archive/2006/03/27/37623.html
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics