通過Google Web Toolkit的Ajax加載HTML模板？

對於我的gwt應用程序，我有一些在我的網站上存儲爲靜態.html文件的html模板。例如example.com/views/signup.html，example.com/views/foo.html等。通過Google Web Toolkit的Ajax加載HTML模板？

我希望這是一個像Twitter這樣的單頁面應用程序，所以用戶可以在沒有頁面正在刷新。

我將在主機頁面上有一個HTMlPanel作爲我的應用程序的根元素。每當用戶導航到不同的頁面時，例如通過點擊導航菜單中的鏈接，我想通過ajax加載該頁面的.html模板，並將返回的html設置到HTMLPanel中。

這是一個合理的解決方案嗎？如果是這樣，我怎麼能通過GWT的ajax加載html模板？

謝謝。

來源

2014-01-11 Click Upvote

你可能想看看這個SO Q&A。

的理念是：

您創建一個服務器調用（例如，RPC）來獲取你的HTML模板爲一個字符串。
您可以創建一個相應的HTMLPanel，它知道如何將動態元素附加到您在構造函數中傳遞的html模板中。
您可以將此新構建的HTMLPanel添加到您想要的頁面根面板中。

On this SO你可以找到一個面板模板代碼，可以幫助你。其中的版本沒有「動態」html源代碼，而是在ClientBundle中進行了硬編碼。但它很容易擴展，因此HTML源文件是動態的，只需添加一個construtor，如：

public HtmlPanelBase(final String htmlContentAsText)

其中htmlContentAsText是模板HTML字符串從您的服務器如下：

public class HtmlPanelBase extends Composite 
{ 
    private String _dynPostfix = ""; 
    protected final String id(final String staticId) { return staticId + _dynPostfix; } 
    private final String wrapId(final String id) { return "id=\"" + id + "\""; } 
    private final String wrapDynId(final String refId) { return wrapId(id(refId)); } 

    private String _htmlContentAsText = null; 
    protected String getHtmlContentAsText() { return _htmlContentAsText; } 

    private ArrayList<String> _idList = null; 

    protected HTMLPanel _holder = null; 
    private HTMLPanel createHtmlPanel(final boolean defineGloballyUniqueIds) 
    { 
    // HTML panel text containing the reference id's. 
    if (defineGloballyUniqueIds) 
    { 
     // Replace the reference id's with dynamic/unique id's. 
     for (String refId : _idList) 
     _htmlContentAsText = _htmlContentAsText.replace(wrapId(refId), wrapDynId(refId)); 
    } 
    // Return the HTMLPanel containing the globally unique id's. 
    return new HTMLPanel(_htmlContentAsText); 
    } 

    public HtmlPanelBase(final String htmlContentAsText, final ArrayList<String> idList, final boolean defineGloballyUniqueIds) 
    { 
    _htmlContentAsText = htmlContentAsText; 
    _idList = idList; 
    this.setup(defineGloballyUniqueIds); 
    super.initWidget(_holder); 
    } 

    public HtmlPanelBase(final String htmlContentAsText) 
    { 
    this(htmlContentAsText, null, false); 
    } 

    private void setup(final boolean defineGloballyUniqueIds) 
    { 
    if (defineGloballyUniqueIds) 
     _dynPostfix = "_" + UUID.uuid().replace("-", "_"); 
    _holder = createHtmlPanel(defineGloballyUniqueIds); 
    } 
}

要使用，取你的htmlContentAsText在服務器上（可能取決於區域設置），在成功實例化上述基本模板的派生類時，在構造函數中傳遞提取的htmlContentAsText，並在其中添加所有的邏輯修改或添加基本html - 例如，添加處理程序對用戶操作的響應。

來源

2014-01-12 17:54:26 Patrick

當然，請分享代碼。 –

@ClickUpvote完成，添加了示例代碼。 – Patrick

你能解釋一下這段代碼與使用普通的HTMLPanel不同嗎？另外，我沒有看到改變這個面板的html代碼的方法，你能澄清一下嗎？ –

這正是http://gwtproject.org網站的情況。

它使用gwtquery通過ajax加載html頁面並通過load()方法將其插入頁面的某個區域。

// Load the file.html using ajax, and append the fragment with id=mid from 
// the returned document inside the element with id=c in the current document. 
$("#c").load("file.html #mid");

你可以看看在GWT-網站的web應用的GWTProjectEntryPoint.java（線128），以及。

當然，您必須處理插入片段中存在的任何錨點的任何點擊，以執行相應的操作，而不是替換gwt應用程序。這可以通過gQuery的live()方法完成。

$("#c").live("click", new Function() { 
    public boolean f(Event e) { 
     String href = $(e).attr("href"); 
     // Do something with href. 
     return false; 
    } 
});

來源

2014-01-12 13:41:07

通過Google Web Toolkit的Ajax加載HTML模板？

回答

相關問題