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

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

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.

Answer 3

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.