Question

我在使用基于Errai-UI的GWT应用程序时遇到了一些问题，试图创建一个带有导航标签的页面。我面临的问题是导航和页脚没有被渲染，似乎我的应用程序WelcomePage是唯一在浏览器上呈现的页面：

@Dependent
@Templated("#home")
@Page(startingPage=true)
public class WelcomePage extends Composite { 
 // stuff
}

上述WelcomePage的关联HTML是唯一在浏览器上呈现的HTML。

Bootstrap代码：

@Templated("#main")
@ApplicationScoped
@EntryPoint
public class Bootstrap extends Composite
{

    @Inject
    Navigation navigation;

    @Inject @DataField
    private NavBar navbar;

    @PostConstruct
    public void buildUI()
    {
        RootPanel.get().add(navigation.getContentPanel());
    }

}

这是相应的httml：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div data-field="main">
        <!--top part start -->
        <div id="top">
            <a href="index.html"><img src="images/logo.gif" alt="individual" width="286" height="66" border="0" /></a>
            <div data-field="navbar">Navbar Goes here</div>
        </div>
        <!--top part end -->

        <div data-field="content"></div>

        <!--footer start -->
        <div id="footerMain">
            <div id="footer">
                <ul>
                        <li><a href="#">Home</a>|</li>
                </ul>
            </div>
        </div>
        <!--footer end -->          
    </div>
    <!-- main end -->
</body>
</html>

我的应用程序运行正常，只是导航和页脚没有呈现。我能错过什么？

Answer 1

嗯，我认为这是因为你只是在DOM中添加了实际的内容面板。 DOM是有向无环图，因此不能有重复的注释。因此，当您使用RootPanel.get（）。add（navigation.getContentPanel（））将内容面板显式添加到DOM时，浏览器将使用

表示的子树替换整个DOM树。

Answer 2

解决方案是：

@PostConstruct
public void buildUI()
{
    content.add(navigation.getContentPanel()); // Just a SimplePanel with data-field in the Bootstrap html
    RootPanel.get("rootPanel").add(this);
}

基于Errai-UI的GWT应用程序导航

2 个答案: