GWT Html Layout Conventions

Question

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

Answer 1

Continue using your layout. GWT is very adaptable.

An option you might want to try is keeping your existing static HTML/CSS layout. You can use RootPanel.get("id") to retrieve a reference to element (by id), as a Panel, into which you can add GWT widgets (including other panels).

You could also move your layout into a UiBinder template. The benefits here are CSS minification and obfuscation (multiple UiBinders can share a single CSS resource)

Answer 2

If you simply want to build the page using your own divs, the easiest way is to use divs in the UiBinder XML file. There you can also set the id attribute as usual:

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

The layout panels provided by GWT can be useful, too - maybe you'll want to play around with them a little bit more, and see if they provide any value (like avoiding some cross browser issues) for you, or not.

Answer 3

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.