Using GWT HeaderPanel with UiBinder

I was going through the GWT Panels yesterday when I came across HeaderPanel.  It is unfortunate that the GWT Panel developer guide has not kept pace to include this most useful panel.  HeaderPanel provides three sections – a header, a middle section, and a footer.

For example:

Also missing from the HeaderPanel Javadoc is how to declare it in a UiBinder file.  Turns out it is pretty easy.  The panel above was created with this declaration:

    <ui:style>
        .headerPanel {
            width: 150px;
            height: 100px;
            border: 2px solid black;
        }
        .header {
            margin: 3px;
            border: 2px solid red;
        }
        .middle {
            margin: 3px;
            border: 2px solid orange;
        }
        .footer {
            margin: 3px;
            border: 2px solid green;
        }
    </ui:style>

    <g:HeaderPanel styleName="{style.headerPanel}">
        <g:FlowPanel styleName="{style.header}">
            <g:Label text="This is the header"/>
        </g:FlowPanel>
        <g:ResizeLayoutPanel styleName="{style.middle}">
            <g:Label>This is the middle section</g:Label>
        </g:ResizeLayoutPanel>
        <g:FlowPanel styleName="{style.footer}">
            <g:Label>This is the footer</g:Label>
        </g:FlowPanel>
    </g:HeaderPanel>

The order the elements are declared does matter.  That will determine the top, middle, and bottom sections.

Advertisements

About stevewall123

I am a Lead Software Engineer in Minneapolis working for Thomson Reuters. I am currently working on projects using Java, JavaScript, Spring, Drools, Hazelcast, Liquibase and Tomcat. Previously, I used C#, GWT, Grails, Groovy, JMS and JBoss Drools Guvnor. In the past I have worked on projects using J2EE, Swing, Webwork, Hibernate, Spring, Spring-WS, JMS, JUnit and Ant.
This entry was posted in GWT, UiBinder and tagged , . Bookmark the permalink.

4 Responses to Using GWT HeaderPanel with UiBinder

  1. Vikram says:

    Thanks for the great post. This has help me to solve the problem for I was struggling a lot. But a problem here is what if the content area gets larger? I am not getting the vertical scroll bar on the browser page. Though I can solve this issue by putting the ScrollPanel in the UiBinder composite which acts as a contents. But that’t not a standard behavior as I want vertical scroll on the whole browser page.

    Any input on this please……

    Regards,
    Vikram

  2. CF says:

    If I want to be able to swap out the “middle” dynamically, eg. in response to a button click, what would be the best way to set that up?

    • stevewall123 says:

      I have to admit that I haven’t used GWT in 6 months now, but if I remember correctly, make sure your button click handler has a reference to the middle panel and then just change the widgets that are in that panel.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s