GWT Html布局约定

Question

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

然而,现在最让我失望的是决定如何正确布置我的网站设计.我有一个非常标准的2-col标题/英尺网站(固定宽度),我想设计,但我不喜欢DockLayoutPanel附带的所有额外的div /样式等.

我想我应该编写自己的布局小部件,扩展Composite,其中包含用于一般网站布局的HTMLPanels
(我认为......还没有完全弄明白,即我如何向这些面板div添加ID) "#header","#nav"等......)
然后我可以在这个布局中添加其他小部件

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

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

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

Answer 1

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

在.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()方法以正确放置它.