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

问题描述

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

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

我在想我应该编写自己的布局窗口小部件，它扩展了具有用于常规站点布局的HTMLPanel的复合材料

（我认为.. 。仍然还没有完全想通了，即如何添加ID到这些面板div#header，#nav等...）

然后我可以将其他小部件添加到此布局中

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

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

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

解决方案

UI组合和HTML

在您的.ui.xml文件中，放置代码类似于 -

 < gwt：HTMLPanel ui：field =container> 
 
 
 
  
 
 
  
  
  
< / gwt：HTMLPanel> 
 
 
 
  
  
  
< / gwt：FlowPanel> 
 
 
 
< div class =content> 
  
< / div> 
 
 
< div class =clearingDiv/> 
 
< / div> 
 
 
 
  
< / 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屋！