GWT Html布局约定

我刚刚开始与GWT合作，我已经认识到它所拥有的非凡力量。我来自一个前端世界，所以Java是一个很大的学习曲线，但我认为这实际上会帮助我构建一个布局正确的应用程序（html方面），而不仅仅是依赖默认的GWT面板，这些面板通常使用表格进行布局，或者使用多余的绝对定位的div

然而，现在让我慢下来的最大的事情是决定如何正确地布置我网站的设计。我有一个非常标准的2柱头/脚站点（固定宽度），我想设计，但我不喜欢DockLayoutPanel附带的所有额外div/样式等

我在想，我应该编写自己的布局小部件扩展组合，其中包含用于一般站点布局的HTMLPanel
（我想…还没有完全弄清楚，例如，如何将ID添加到这些面板分区“#header”、“#nav”等…）
然后我可以将其他小部件添加到此布局中

但我看到的另一件事是，我可以编写一个扩展UiBuilder的布局类，并在ui.xml文件中直接添加div

我只是想知道，使用GWT进行站点布局的首选方法是什么？这不会在其他小部件的意义上被重复使用，它将被使用一次，我的控件等将被放置在里面

---

任何提示或技巧都将不胜感激！如果我完全不知道该怎么做，请告诉我

继续使用您的布局。GWT的适应性很强

您可能希望尝试的一个选项是保持现有的静态HTML/CSS布局。您可以使用RootPanel.get（“id”）检索对元素的引用（通过id），作为一个面板，您可以在其中添加GWT小部件（包括其他面板）

---

您还可以将布局移动到UiBinder模板中。这里的好处是CSS缩小和模糊（多个UiBinder可以共享一个CSS资源）

如果您只想使用自己的div构建页面，最简单的方法是在UiBinder XML文件中使用div。在这里，您还可以像往常一样设置id属性：

<g:HTML>
  <div id="header">...</div>
  ...
</g:HTML>

...
...

---

GWT提供的布局面板也很有用——也许你会想更多地使用它们，看看它们是否为你提供了价值（比如避免跨浏览器问题）。

UI活页夹和HTML面板的组合最适合我们

在.ui.xml中，放置类似以下内容的代码-

<gwt:HTMLPanel ui:field="container">



    <gwt:FlowPanel ui:field="header"></gwt:FlowPanel>



        <gwt:HTMLPanel styleName="secondarynav">

            <gwt:FlowPanel ui:field="menuWidget"></gwt:FlowPanel>

            <gwt:FlowPanel ui:field="someOtherWidget"></gwt:FlowPanel>

        </gwt:HTMLPanel>



        <gwt:FlowPanel styleName="secondarycontent">

            <gwt:FlowPanel ui:field="faqWidget"></gwt:FlowPanel>

            <gwt:FlowPanel ui:field="advertisingWidget"></gwt:FlowPanel>

        </gwt:FlowPanel>



        <div class="content">
        <gwt:FlowPanel ui:field="mainContentWidget"/>

        </div>


        <div class="clearingDiv"/>

    </div>



    <gwt:FlowPanel ui:field="footer"></gwt:FlowPanel>

</gwt:HTMLPanel>

在相应的.java类中，您将拥有诸如setHeader（）、setSecondaryNav（）、setMenu（）和setFooter（）等方法

---

这样，您的布局就完全在ui.xml中定义了。此外，您还可以使用小部件抽象。这意味着您可以创建一个Header小部件，然后在布局中调用setHeader（）方法来正确放置它。

这对我来说很有意义，但我的主要问题是添加html id属性。也许这在GWT中不是标准的，我是手工编写html的，但我不喜欢为只使用一次的布局div使用类。你有什么想法吗？是的，你必须跳转去设置小部件的id。GWT不鼓励在小部件中使用id（自动测试除外），因为它们无法确保id是唯一的。所以，即使您知道只使用一次header，GWT也无法知道。这就是为什么它不公开setId（）方法。简而言之，坚持他们的建议并使用类进行样式设计可能更容易。我已经在这和Sripathi的建议之间做了一些组合。这也与克里斯的建议相似。谢谢！最后，我决定采用斯利帕蒂的建议。它似乎为更新每个部分中的小部件提供了最简单的机制。再次感谢tipsi，我将这一点与斯利帕蒂的建议结合起来