GWT Html布局约定

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

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

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

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

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

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

解决方法

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

原文链接：https://www.f2er.com/html/227553.html

解决方法

猜你在找的HTML相关文章