GWT Html 布局约定

Question

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

现在让我放慢脚步的最大事情是决定如何正确布局我的网站设计。我有一个非常标准的 2-col 页眉/页脚站点（固定宽度），我想设计，但我不喜欢 DockLayoutPanel 附带的所有额外的 div/样式等。

我在想我应该只编写我自己的 Layout 小部件来扩展具有用于一般站点布局的 HTMLPanel 的 Composite
（我认为...仍然没有完全弄清楚这一点，即。如何将 ID 添加到这些面板 div “#header”、“#nav”等...）
然后我可以将其他小部件添加到此布局中

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

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

非常感谢任何提示或技巧！如果我完全错过了如何做到这一点，请告诉我

Answer 1

UI Binder 和 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 Widget，然后在布局中调用 setHeader() 方法来正确放置它。

Answer 2

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

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

GWT 提供的布局面板也很有用 - 也许您会想多玩一些，看看它们是否为您提供任何价值（例如避免一些跨浏览器问题） .

Answer 3

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

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

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