Question

我想在GWT中获得一个嵌套的div，并能够在其中放置一个小部件。像这样：

<div id="container">
    <div id="content_left">
    </div>
    ...other divs
</div>

我希望能够获得content_left并在其中放置一个小部件。到目前为止，所有RootPanel都是标签内的div。我也尝试过使用DOM.getElementById（...），但我不知道如何放置一个小部件，因为add方法指定输入参数应该是child类型。

现在我对CSS和定位知之甚少，而且我没有做上面的样式。这是我从平面设计师那里得到的东西。我认为这是他布置东西的方式。我已经在考虑布局而不必使用外部div，例如上面带有id = container的div，所以我不会在第一时间遇到这个问题，但我想听听这是不是一个好主意。

Answer 1

GWT为这类事物提供容器小部件：它们为您生成DIV，您可以根据自己的规则将它们嵌套到任何深度。你真的不需要使用显式DIV来做任何事情。

你说

现在我对CSS和定位知之甚少，而且我没有做上面的样式。

这正是GWT的意思：你不需要。您将GUI放在代码中，让GWT担心如何将其转换为CSS。提示：它比我们大多数人都要好得多。许多已知的浏览器怪癖都有变通方法可以让它像人类一样跨平台。

Answer 2

您提供的HTML代码段的具体示例如下所示。 FlowPanels是支持向它们添加任意数量的东西的div。如果您知道给定的div只有一个小部件，SimplePanel可能是更好的选择。

无论如何，一般来说，你想要做的是获取你想要生成的HTML并构建GWT代码来输出特定的DOM结构。关于我如何处理更简单的小部件的一篇不错的文章是tags first gwt。

FlowPanel container = new FlowPanel();
container.setStyleName("container");

FlowPanel contentLeft = new FlowPanel();
contentLeft.setStyleName("content_left");
container.add(contentLeft);

container.add(otherDivs);


//elsewhere in your code:
contentLeft.add(oneWidget);
contentLeft.add(secondWidget);

Answer 3

如果您的设计人员正在制作高质量的布局代码，您应该使用它，但前提是您已了解所有风险和兼容性问题，并且不关心或无法测试布局..

假设所有这些事情，我发现这种方法非常有效..

只需从HTMLPanel构建您的小部件并使用div，因为您只需要交换到First Class对象以在需要编程控制时代表您的布局

    <g:HTMLPanel >

            <div class="normal style classes {obfuscated.style.class}">
                    <g:FlowPanel ui:field="programmaticPanel" stylePrimaryName="style">
                            <g:HTMLPanel>
                                    <p>CONTENT</p>
                            </g:HTMLPanel>
                    </g:FlowPanel>
            </div>

    </g:HTMLPanel >

请注意，您仍然可以使用带有vanilla divs / span等的混淆样式或混合搭配！

Answer 4

您可以将您的html更改（或告诉您的设计师更改）

<div id="container">
    <div id="content_left">
        <span id="qq"/>
    </div>
    ...other divs
</div>

在您的代码中使用：

FlowPanel panel = new FlowPanel();
RootPanel.get("qq").add(panel);
panel.add(w1);
panel.add(w2);
...

Answer 5

欢迎使用UIBinder http://www.gwtproject.org/doc/latest/DevGuideUiBinder.html

支持自定义HTML +小部件

“可以更轻松地与更熟悉XML，HTML和CSS的UI设计人员协作，而不是Java源代码”

如何在GWT中获得嵌套div

5 个答案: