使用 GWT 将内容添加到 HTML 中的 div

Posted 2023-04-13

【中文标题】使用 GWT 将内容添加到 HTML 中的 div

【英文标题】：Adding content to a div in HTML using GWT

【发布时间】：2016-02-03 02:15:44

【问题描述】：

我对 GWT 很陌生，我在我的起始 GWT html 页面上设置了这些动态 div：

<div id="nav">
Navigation goes here...
</div>

<div id="core">
</div>

<div id="footer">
footer info goes here
</div>

我的主类实现了 EntryPoint 和 ValueChangeHandler 以动态更改“核心” div，因此它根据用户在主页上单击的内容呈现不同的信息（因此它模仿使用不同的页面，但仅使用历史记录中的一个和超链接类Like this）。我试着用类似的东西来做这个：

        VerticalPanel panel = new VerticalPanel();
        HTML mapHtmlDiv = new HTML("<div id=\"maps\"></div>");
        panel.add(mapHtmlDiv);
        RootPanel.get("core").add(panel);
        // add a widget to the maps div downstream

一旦条件满足。但是，这在 GWT 上是不允许的，因为它会引发错误，“可能无法将具有现有父小部件的小部件添加到分离列表中”，将内容和 div 添加到 HTML 的正确方法是什么？

【参考方案1】：

HTML GWT 中的小部件不是容器。这意味着您不能将小部件添加到其中。请改用 HTMLPanel。

VerticalPanel panel = new VerticalPanel();
HTMLPanel mapPanel = new HTMLPanel(""); //automatically creates a div.
panel.add(mapPanel);
RootPanel.get("core").add(panel);
// add a widget to the maps div downstream
mapPanel.add(new Label("Sample label"));

http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/ui/HTMLPanel.html

【讨论】：

谢谢！效果很好，我还意识到我的 mapwidget 需要在尝试添加之前完全初始化，否则会出现其他错误。

【参考方案2】：

VerticalPanel panel = new VerticalPanel();
HTML mapHtmlDiv = new HTML("<div id=\"maps\"></div>");
panel.add(mapHtmlDiv);

Element coreDiv = DOM.getElementById("core");
coreDiv.appendChild(panel.getElement());