java GWT应用程序UI不会显示

Question

我实现了一个简单的GWT应用程序，它使用1个位置和1个活动（我作为一个演示者实现了它，它扩展了一个AbstractActivity并包含一个Composite“视图”子类）。视图中唯一的UI对象是GWT-Bootstrap NavBar，我希望它显示在“主页”的最顶端

我从Eclipse内部本地运行应用程序，没有收到任何编译器或运行时错误。当我转到开发模式控制台指向的URL时，我会在浏览器中稍有停顿（我假设这是浏览器“下载”JavaScript），然后我会看到一个空白的白色屏幕（而不是导航栏）。窗口标题是正确的（我在模块的HTML页面中设置了这个），当我查看源代码时，我看到了相同的HTML源代码，因此我知道应用程序的JavaScript正确地进入了浏览器。它只是不渲染导航栏

我在{}、我的默认{}、{}、{}、presenter和view{}中散布了{}语句，所有这些{}语句都打印在开发控制台中；告诉我我已经将所有内容正确地连接在一起，并且在运行时调用PlaceHistoryHandler#handleCurrentHistory方法时（从onModuleLoad内部），我应该看到我的导航栏

我能想到的唯一可能性是：

1. 我错误地配置了gwt-bootstrap；或
2. 我没有正确使用UiBinder
3. 我如何使用活动和场所，或者我如何将UI附加到onModuleLoad()内部的RootLayoutPanel，还有其他一些问题

至于{}：

• 我将JAR放在项目的类路径上（我知道这一点，因为当我在小部件/视图中包含类型为NavBar的新UiField时，我没有得到任何编译器错误）
• 我在GWT模块XML中添加了<inherits name="com.github.gwtbootstrap.Bootstrap"/>

因此，如果还有什么我必须配置的，请让我知道

关于UiBinder的内容，这里是我的小部件/视图：

public class WebRootDisplay extends BaseDisplay {

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

    interface WebRootDisplayUiBinder extends UiBinder<Widget, WebRootDisplay> {
    }

    @UiField
    Navbar navBar;

    public WebRootDisplay(EventBus eventBus) {
        super(eventBus);

        System.out.println("I get this printing to the console at runtime.");

        initWidget(uiBinder.createAndBindUi(this));

        System.out.println("...and this too!");
    }
}

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui"
    xmlns:b="urn:import:com.github.gwtbootstrap.client.ui">
    <g:HTMLPanel>
        <b:Navbar ui:field="navBar">
            <b:Nav>
                <b:NavLink href="http://www.google.com">
                    Home
                </b:NavLink>
            </b:Nav>
        </b:Navbar>
    </g:HTMLPanel>
</ui:UiBinder>

我注意到的一件事是，我的NavBar位于UiBinder XML中的HTMLPanel内。我这样做是因为我使用Google Eclipse插件为我生成了一个新的UiBinder（它自动生成了Composite（然后我将其修改为扩展BaseDisplay，它本身扩展了Composite）以及UiBinder片段。我想GWT希望我将所有UI字段放在这个HTMLPanel中。。。(?)

如果我遗漏了什么，请告诉我。我没有实例化NavBar字段，因为我相信createAndBindUi对我来说就是这样做的

如果我的gwt-bootstrap配置和UiBinder的使用看起来都是正确的，那么显然还有其他问题，我将不得不发布更多代码。我只是想在前两项被排除之前先推迟。提前谢谢

更新

这里是onModuleLoad：

public void onModuleLoad() {
    // Some homegrown DI stuff. I have verified that the injector works properly.
    ApplicationScope appScope = new ApplicationScope();

    setInjector(new ApplicationInjector(appScope,
        InjectorProvider.newMasterProvider()));

    // Add the sole composite child to the RootLayoutPanel.
    // I have verified that injectWebRootDisplay returns a fully configured
    // WebRootDisplay instance.
    RootLayoutPanel.get().add(injector.injectWebRootDisplay());

    historyHandler.register(placeController, eventBus, defaultPlace);
    historyHandler.handleCurrentHistory();
}

Answer 1

根据我在GWT活动和场所方面的经验，空白白页的一个常见罪魁祸首是未能向PlaceHistoryMapper注册场所的标记器，如下所示：

/**
 * PlaceHistoryMapper interface is used to attach all places which the
 * PlaceHistoryHandler should be aware of. This is done via the @WithTokenizers
 * annotation or by extending PlaceHistoryMapperWithFactory and creating a
 * separate TokenizerFactory.
 */
@WithTokenizers({
    MyPlace.Tokenizer.class,
    SomeOtherPlace.Tokenizer.class})
public interface AppPlaceHistoryMapper extends PlaceHistoryMapper {}

见https://developers.google.com/web-toolkit/doc/latest/DevGuideMvpActivitiesAndPlaces#PlaceHistoryMapper

出现白页的另一个原因（特别是在将RootLayoutPanel.get（）用于单个位置时）是无法在ActivityMapper中正确映射位置：

/**
 * AppActivityMapper associates each Place with its corresponding
 * {@link Activity}
 * 
 * @param clientFactory
 *            Factory to be passed to activities
 */
public class AppActivityMapper implements ActivityMapper {
    private ClientFactory clientFactory;

    public AppActivityMapper(ClientFactory clientFactory) {
        super();
        this.clientFactory = clientFactory;
    }

    @Override
    public Activity getActivity(Place place) {
        if (place instanceof MyPlace)
            return new MyActivity((MyPlace) place, clientFactory);
        else if (place instanceof SomeOtherPlace)
            return new SomeOtherActivity((SomeOtherPlace) place, clientFactory);

        return null; // If your return null with single place bound to RootLayoutPanel
        // you may get a blank white page
    }
}

见https://developers.google.com/web-toolkit/doc/latest/DevGuideMvpActivitiesAndPlaces#ActivityMapper

如果没有更完整的代码示例，就不可能准确地确定发生了什么，但是上面列出的两个原因是常见的疏忽，这可能会帮助任何遇到此线程的人

Answer 2

你能粘贴你代码的onModuleLoad()部分吗

如果没有任何Exception和错误消息，我认为您应该检查是否将视图正确添加到RootPanel，或者在运行应用程序时，您应该检查view是否在HTML中的div中，并且只是不可见或类似的内容

第一次看UiBinder部分看起来很好

编辑： 这个{}对我来说没什么，但你可以试试看。 我总是使用RootLayoutPanel。按以下方式获取（）方法：

RootLayoutPanel.get("someDivId").add(injector.injectWebRootDisplay());

因此，我总是使用id将div或table添加到占位符HTML中，以便在获得根面板时可以引用该div。我不相信这是必要的，但我第一次看到它，它工作正常。 如果您有问题，请告诉我。：）

Answer 3

嗯，我尝试了一个与您的代码完全相同的本地示例，我认为问题不在UI活页夹中。到目前为止，您提供的代码是正确的，因此很可能错误在其他地方

最大的嫌疑犯是BaseDisplay类。就我所见，这个类不是来自GWT或GWT引导。您可以通过更改WebRootDisplay类来快速检查它，因此它扩展了经典的GWTComposite类而不是BaseDisplay（暂时禁用所有mvp内容）。如果有效，您可以证明问题是由“BaseDisplay”引起的

由于我没有完整的代码，我只能假设WebRootDisplay也用于显示视图，最有可能的错误是，当视图添加到该类时，先前添加的小部件（在您的例子中，它是您在WebRootDisplay的构造函数中添加的导航栏）被删除。问题很可能出现在方法setWidget和initWidget中

Answer 4

而不是系统。println使用GWT。记录消息。然后打开Javascript控制台（Firebug或Chrome），查看代码的最终位置。GWT。日志将在浏览器控制台中打印出来，因此您可以查看编译后的JS代码的功能

此外，如果您使用Pretty模式编译，您将在浏览器中看到生成的Javascript代码，并且能够逐步查看调用了什么（或没有调用）