<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    幸せのちから

    平凡的世界
    看似平常實崎嶇
    成如容易卻艱辛

    extremeComponents使用AJAX 指南

    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并能夠簡單地被任何框架使用。

    posted on 2006-03-27 17:09 Lucky 閱讀(6483) 評論(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)

    日本語

    搜索

    積分與排名

    最新隨筆

    最新評論

    主站蜘蛛池模板: 亚洲国产人成在线观看| 亚洲国产综合专区电影在线 | 97在线视频免费| 亚洲一区二区三区日本久久九| a级精品九九九大片免费看| 国产亚洲3p无码一区二区| a级毛片毛片免费观看久潮喷| 一本久久a久久精品亚洲| 你是我的城池营垒免费看 | 在线免费观看国产| 亚洲精品免费在线视频| 黄色成人网站免费无码av| 亚洲日韩一区精品射精| 亚洲福利中文字幕在线网址| 美女无遮挡拍拍拍免费视频| 香蕉视频在线观看亚洲| 亚色九九九全国免费视频| 婷婷亚洲综合五月天小说在线| 亚洲精品动漫人成3d在线 | 日本免费人成网ww555在线| 亚洲激情电影在线| 全免费一级毛片在线播放| 一道本在线免费视频| 亚洲国产天堂在线观看| 91在线品视觉盛宴免费| 国产午夜亚洲精品不卡免下载| 国产日韩成人亚洲丁香婷婷| 99ee6热久久免费精品6| 亚洲精品永久在线观看| 亚洲欧洲无码AV电影在线观看 | 国产三级免费观看| 中文字幕版免费电影网站| 亚洲欧洲精品久久| 免费一级毛片一级毛片aa| 日韩精品免费视频| 亚洲精品国产高清在线观看| 亚洲国产美女精品久久久久∴| 青娱乐免费在线视频| aa级毛片毛片免费观看久| 国产精品亚洲专区在线观看 | 91嫩草国产在线观看免费|