GWT RootPanel 通过 ID 获取

Posted 2023-04-13

【中文标题】GWT RootPanel 通过 ID 获取

【英文标题】：GWT RootPanel get by ID

【发布时间】：2013-03-10 02:26:57

【问题描述】：

我是 GWT 的新手，我可能忽略了一些简单的事情。所以我想做的是在我的html页面中，我在body标签中为我的页面创建了一个布局：

<table id="wrapper" cellpadding="0" cellspacing="0" style="width: 100%;height: 100%;">

         <!-- Header row -->
         <tr style="height: 25%;">
             <td colspan="2" id="header"></td>
         </tr>

         <!-- Body row and left nav row -->
         <tr style="height: 65%;">
             <td id="leftnav"></td>
             <td id="content"></td>
         </tr>

         <!-- Footer row -->
         <tr style="height: 10%;">
            <td colspan="2" id="footer"></td>
         </tr>

</table

我已将 Id 设置为所有内容，以便我可以在入口点中获取这些项目。因此，在我的入口点中，我尝试像这样填充这些字段：

RootPanel.get("header").add(new Header());
RootPanel.get("leftnav").add(new NavigationMenu());
RootPanel.get("footer").add(new Footer());

但是我通过调试了解到 RootPanel.get("header") 返回 null。我相信其余的也返回 null ，它只是在到达那里之前就崩溃了。据我了解，这是做事的正确方法，但是我一定错过了一些东西。请让我知道我做错了什么，或者如果您需要更多信息。谢谢

【问题讨论】：

我不确定您为什么要尝试使用 3 个根面板，而不是从单个根面板创建该布局。最简单的方法是只有一个根面板并使用 GWT 布局面板创建页眉、页脚和左侧导航。如果你继续这种方式，你将会遇到很多问题，特别是如果你在某个时候尝试支持，比如说，需要完全不同布局的移动设备。这是有原因的吗？

你看过UiBinder吗？这是一个描述：GWT UiBinder.

我这样做的最初原因是因为这篇文章，***.com/questions/1061705/… 我需要能够根据导航面板中选择的项目更改内容部分。除非有更好的方法使用 UIBinder

【参考方案1】：

通常使用div 标签会比<td> 等其他类型的元素效果更好。就像 cmets 所说，您应该尝试只使用一个 RootPanel，然后添加，然后使用 GWT 面板创建您的布局。

使用UiBinder 来布局页面（如HTML 页面）是一种非常好的方法。您可以使用非常接近 HTML 的 XML 语言编写布局，同时使用所有有用的 GWT 小部件。如果您要使用 GWT 构建应用程序，使用和了解它非常有用。

【参考方案2】：

尝试在 HTML 中使用 div 标签：

<table id="wrapper" cellpadding="0" cellspacing="0" style="width: 100%;height: 100%;">

         <!-- Header row -->
         <tr style="height: 25%;">
             <td colspan="2"><div id="header"></div></td>
         </tr>

         <!-- Body row and left nav row -->
         <tr style="height: 65%;">
             <td><div id="leftnav"></div></td>
             <td><div id="content"></div></td>
         </tr>

         <!-- Footer row -->
         <tr style="height: 10%;">
            <td colspan="2"><div id="footer"></div></td>
         </tr>

</table