GWT RootPanel get by ID

Question

I am new to GWT and I am probably overlooking something simple. So what I am trying to do is in my html page I have created a layout for my page in the body tags:

<table id="wrapper" cellpadding="0" cellspacing="0" style="width: 100%;height: 100%;">

         <!-- Header row -->
         <tr style="height: 25%;">
             <td colspan="2" id="header"></td>
         </tr>

         <!-- Body row and left nav row -->
         <tr style="height: 65%;">
             <td id="leftnav"></td>
             <td id="content"></td>
         </tr>

         <!-- Footer row -->
         <tr style="height: 10%;">
            <td colspan="2" id="footer"></td>
         </tr>

</table

I have set Ids to everything so that I can get these items in the Entry point. So in my Entry point I try to populate these fields like this:

RootPanel.get("header").add(new Header());
RootPanel.get("leftnav").add(new NavigationMenu());
RootPanel.get("footer").add(new Footer());

However I have learned through debugging that the RootPanel.get("header") is returning null. I am sure the rest are returning null as well, it is just crashing before it gets there. To my understanding this is the right way to do things, however I must have missed something. Please let me know what I am doing wrong or if you need more info. Thanks

I'm not sure why are you trying have 3 root panel instead of creating that layout out of a single root panel. The simplest way to go is to have only one root panel and create your header, footer and left nav using GWT layout panels. You are going to run into a hell of problems if you continue this way, specially if at some point you try to support , let say, mobile devices that require a completely different layout. Is there a reason for that? — Chepech, Mar 20 '13 at 19:41
Have you looked at `UiBinder`? Here's a description: [GWT UiBinder](https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder). — Andy King, Mar 20 '13 at 23:38
My initial reasoning for doing it this way was because of this article, http://stackoverflow.com/questions/1061705/multiple-pages-tutorial-in-google-web-toolkit-gwt I need to be able to change the content section depending on the item selected in the navigation panel. Unless there is a better way using the UIBinder — Will, Mar 21 '13 at 15:03

score 1 · Answer 1 · answered Mar 20 '13 at 20:01

Try to use div tags in HTML:

<table id="wrapper" cellpadding="0" cellspacing="0" style="width: 100%;height: 100%;">

         <!-- Header row -->
         <tr style="height: 25%;">
             <td colspan="2"><div id="header"></div></td>
         </tr>

         <!-- Body row and left nav row -->
         <tr style="height: 65%;">
             <td><div id="leftnav"></div></td>
             <td><div id="content"></div></td>
         </tr>

         <!-- Footer row -->
         <tr style="height: 10%;">
            <td colspan="2"><div id="footer"></div></td>
         </tr>

</table

score 1 · Accepted Answer · answered Mar 21 '13 at 02:04

Usually using div tags will work better than other types of elements such as <td>. Like the comments say, you should try to just use one RootPanel and then add then create your layout with GWT panels.

A very good way to layout a page like an HTML page is by using UiBinder. You can write out the layout using and XML language very close to HTML and at the same time use all of the useful GWT widgets. It's very useful to use and learn if you'll be building apps with GWT.

GWT RootPanel get by ID

2 Answers2