通过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模板？

回答

相关问题