GWT UiBinder not showing anything

StackOverflow https://stackoverflow.com/questions/20299037

  •  06-08-2022
  •  | 
  •  

Question

I'm new to GWT. I just started doing a simple GWT forum as a project to my University. I have problem with getting UiBinder working. I think showing code is the best way to explain my issue.

Header.ui.xml

<g:DockLayoutPanel>
    <g:west size="5">
        <g:Label ui:field="forumTitle"/>
    </g:west>
</g:DockLayoutPanel>

Header.java

package com.project.gwtforum.client.widgets;

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.Widget;

public class Header extends Composite{

    private static HeaderUiBinder uiBinder = GWT.create(HeaderUiBinder.class);

    interface HeaderUiBinder extends UiBinder<Widget, Header> {
    }

    public Header() {
        initWidget(uiBinder.createAndBindUi(this));
    }

    @UiField
    Label forumTitle;

    public Label getForumTitle() {
        return forumTitle;
    }
}

GWTForum.html

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link type="text/css" rel="stylesheet" href="GWTForum.css">

    <script type="text/javascript" language="javascript" src="gwtforum/gwtforum.nocache.js"></script>

  </head>

  <body>

    <div id="header"></div>

    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

  </body>
</html>

GWTForum.css

h1 {
  font-size: 2em;
  font-weight: bold;
  color: #777777;
  margin: 40px 0px 70px;
  text-align: left;
}

GWTForum.java

package com.project.gwtforum.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
import com.project.gwtforum.client.widgets.Header;

public class GWTForum implements EntryPoint{

    private GWTForumConstants constants = GWT.create(GWTForumConstants.class);
    private Header headerWidget = new Header();

    @Override
    public void onModuleLoad() {
        initializeLayout();
    }

    private void initializeLayout() {
        RootPanel.get("header").add(headerWidget);
        Window.setTitle(constants.windowTitle());

        headerWidget.getForumTitle().setText(constants.windowTitle());
        headerWidget.getForumTitle().setStyleName("h1");
    }

}

The problem is there's nothing in the browser when i compile a project.. When i debug the application i can see that RootPanel is changing - the code in it was right but the browser show nothing. Firebug also see "header" div with Label etc. but nothing is shown. Firefox's "Show source code" have nothing in the "header" div. What I'm doing wrong?

Was it helpful?

Solution

You are mixing layout (DockLayoutPanel) with non-layout (RootPanel.get("header")) panels .

Either use RootLayoutPanel (that will hook the entire body of your app; hence you will need to rewrite it to setup the header/main/footer areas inside your app, and not relying on DOM placeholders) or set the header size explicitly. See the official docs.

I'd go for the former.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top