tapestry using ajax

最新推荐文章于 2024-09-25 10:59:43 发布

weixin_33877885

最新推荐文章于 2024-09-25 10:59:43 发布

阅读量90

点赞数

文章标签： java python javascript ViewUI

原文链接：https://my.oschina.net/u/1453451/blog/278699

版权

2019独角兽企业重金招聘Python工程师标准>>>

请参看tapestry的官方文档，这里只是总结性的备忘录。

http://tapestry.apache.org/ajax-and-zones.html

http://www.w3cschool.cc/jquery/jquery-dom-set.html

相关内容：

t:zone组件: 决定ajax请求完成后，更新的区域。

触发ajax请求的方式：

1) 通过组件的的事件函数，返回局部更新的内容。

定义t:zone组件，组件参数 id 和 t:id

在下面的4个组件的事件处理方法中，返回更新的内容。component中添加zone属性，指向定义的t:zone组件。

EventLink ActionLink Select Form

page.tml
//------------------------
<t:actionlink t:id="someLink" zone="myzone">update</t:actionlink>
<t:zone t:id="myZone" id="myzone">
    The current time is ${currentTime}
</t:zone>

page.java
//------------------------
Object onActionFromSomeLink() {
    return request.isXHR() ? myZone.getBody() : null;
}

可以一次更新多个zone （区域的内容）

@InjectComponent
private Zone userInput;
 
@InjectComponent
private Zone helpPanel;
 
@Inject
private AjaxResponseRenderer ajaxResponseRenderer;
 
void onActionFromRegister()
{
    ajaxResponseRenderer.addRender("userInput",
        userInput).addRender("helpPanel", helpPanel);
}

2) 通过调用javascript （jquery）的ajax方式来进行调用。（和其他框架一样，内容以后补充）

通过动态创建EventLink, 通过jquery的ajax调用，实现局部刷新功能。

1）META-INF/modules/ajaxjson.js (一定要注意路径，当初放在了assets/modules下面了，找不到js文件）

define(['jquery'], function($) {
    return {
        update : function(url) {
            $('#update').click(function() {
                $.getJSON(url,function(result){
                $("#address").text(result.address);
                $("#id").text(result.id);
                $("#name").text(result.name);
            });
            });
        }
    };
});

2）AjaxJson.java

public class AjaxJson {
    @Property
    @Persist
    private int count;
   
    @Property
    private int id;
    @Property
    private String name;
    @Property
    private String address;
    @Property
    private Date now; 
    @Inject
    private ComponentResources resources;
    @Inject
    private JavaScriptSupport javaScriptSupport;
    void setupRender() {
        now = new Date();
        id = 42;
        name = "xxxxx";
        address = "yyyyy";
    }
    
    @Inject 
    private Logger log;
    
    @AfterRender
    void afterRender() {
         Link link = resources.createEventLink("AjaxJson");
         javaScriptSupport.require("ajaxjson").invoke("update").with(link.toAbsoluteURI());
    }

    JSONObject onAjaxJson() {
        count++;
        JSONObject myData = new JSONObject();
        myData.put("id", 100);
        myData.put("name", "lichunhua" + count);
        myData.put("address", "dalian" + count);
        return myData;
    }
    
}

3) AjaxJson.tml

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
    xmlns:p="tapestry:parameter">
    <table>
        <tr>
            <td>id</td>
            <td id="id">${id}</td>
        </tr>
        <tr>
            <td>name</td>
            <td id="name">${name}</td>
        </tr>
        <tr>
            <td>address</td>
            <td id="address">${address}</td>
        </tr>
    </table>
    <hr />
    ${now}
    <input type="button" id="update" value="AjaxJson" />
</html>

3) eventlink返回block，实现局部更新的ajax功能

3.1）AjaxBlock.tml

<html
    xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
    xmlns:p="tapestry:parameter">
    <t:Zone t:id="br" id="br" />
    <t:block id="detail">
       ajax appliction from return Block ${count}
    </t:block>
    <hr />${now}
    <t:EventLink event="Ajax" zone="br">AjaxReturnBlock</t:EventLink>
</html>

public class AjaxBlock {
    @Inject
    private Block detail;
    
    @Property
    @Persist
    private int count;
    
    @Property
    private Date now;
    
   @Inject
    private ComponentResources componentResource;
      
   void setupRender() {
        now = new Date();
    }
 
    Block onAjax() {
        count++;
        return detail;
    }
}

转载于:https://my.oschina.net/u/1453451/blog/278699