GWT Html 布局约定 [英] GWT Html Layout Conventions

问题描述

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

然而，现在最让我慢下来的是决定如何正确布置我的网站的设计.我有一个非常标准的 2 列页眉/页脚站点(固定宽度)，我想设计它，但我不喜欢 DockLayoutPanel 附带的所有额外的 div/样式等.

我在想我应该编写我自己的布局小部件扩展复合，它具有用于一般站点布局的 HTMLPanel
(我认为...还没有完全弄清楚，即如何将 ID 添加到这些面板 div#header"、#nav"等...)
然后我可以在这个布局中添加其他小部件

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

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

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

解决方案

UI Binder 和 HTML Panel 的组合最适合我们.

在您的 .ui.xml 中，放置类似于 -

的代码

<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="内容"><gwt:FlowPanel ui:field="mainContentWidget"/>

<div class="clearingDiv"/>

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

在相应的 .java 类中，您将拥有 setHeader()、setSecondaryNav()、setMenu()、setFooter() 等方法.

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

I've just started working with GWT and I'm already recognizing the extraordinary power that it possesses. I'm coming from a frontend world so the Java is a big learning curve, but I think that will actually help me build a properly laid out app (html-wise) instead of just relying on the default GWT panels that often end up using tables for layout, or superfluous, absolutely positioned divs.

The biggest thing slowing me down right now however is deciding how to properly lay out the design of my site. I've got a pretty standard 2-col header/foot site (fixed width) that I want to design, but I'm not a fan of all the extra divs/styling etc that come with the DockLayoutPanel for instance.

I'm thinking that I should just write my own Layout widget extending Composite that has HTMLPanels for the general site layout
(I think... still haven't fully figured that out yet, ie. how do I add ID's to these panel divs "#header", "#nav" etc...)
then I can add other widgets into this layout

But the other thing I'm seeing is that I could write a Layout class extending UiBuilder and have straight up divs in the ui.xml file.

I'm just wondering, what is the preferred method for site layout with GWT? This isn't going to be re-used in the sense of other widgets, it will be used once and my controls etc will be placed inside.

Any tips or tricks are greatly appreciated! And if I've completely missed the boat on how to do this, let me know

解决方案

A combination of UI Binder and HTML Panel works best for us.

In your .ui.xml, place code similar to -

<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>

In the corresponding .java class, you will have methods like setHeader(), setSecondaryNav(), setMenu(), setFooter() etc.

In this way, your layout is defined completely in your ui.xml. Also, you are able to use widget abstractions. Meaning you can create a Header Widget and then invoke the setHeader() method in your layout to place it properly.

这篇关于GWT Html 布局约定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！