charts - GWTP、PresenterWidget 和 Google Visualization API 不会显示 PieChart

Question

我是 GWT-P 的新手，但关于这个主题的材料很少。我正在尝试制作简单的饼图小部件，用于测试目的。我已经制作了 Widget Presenter、View 和 UiBinder。

    package com.rs.gwtp.gametestingyou.client;
    import com.gwtplatform.mvp.client.PresenterWidget;
    import com.gwtplatform.mvp.client.View;
    import com.google.inject.Inject;
    import com.google.gwt.event.shared.EventBus;
    import com.google.gwt.user.client.ui.HTMLPanel;

    public class PieChartPresenter extends
    PresenterWidget<PieChartPresenter.MyView> {


public interface MyView extends View {
    public HTMLPanel getChartPanel();

    public void drawPieChart();
}

@Inject
public PieChartPresenter(final EventBus eventBus, final MyView view) {
    super(eventBus, view);
}

@Override
protected void onBind() {
    super.onBind();


}
/*Ovde prmeniti method*/
@Override
protected void onReset() {
    super.onReset();

    /*MyView v = getView();
    v.drawPieChart();*/

    getView().drawPieChart();
}

    }

然后查看。

    package com.rs.gwtp.gametestingyou.client;

    import com.gwtplatform.mvp.client.ViewImpl;
    import com.google.gwt.uibinder.client.UiBinder;
    import com.google.gwt.uibinder.client.UiConstructor;
    import com.google.gwt.uibinder.client.UiField;
    import com.google.gwt.user.client.ui.HTMLPanel;
    import com.google.gwt.user.client.ui.Widget;
    import com.google.gwt.visualization.client.AbstractDataTable;
    import com.google.gwt.visualization.client.AbstractDataTable.ColumnType;
    import com.google.gwt.visualization.client.DataTable;
    import com.google.gwt.visualization.client.visualizations.corechart.Options;
    import com.google.gwt.visualization.client.visualizations.corechart.PieChart;
    import com.google.inject.Inject;

    public class PieChartView extends ViewImpl implements PieChartPresenter.MyView {

private final Widget widget;
@UiField HTMLPanel chartPanel;
@UiField (provided=true) PieChart pieChart;

public interface Binder extends UiBinder<Widget, PieChartView> {
}

@Inject
public @UiConstructor PieChartView(final Binder binder) {
    widget = binder.createAndBindUi(this);
    pieChart = new PieChart(createTable(), createOptions());
    chartPanel.add(pieChart);
}

@Override
public Widget asWidget() {
    return widget;
}
public HTMLPanel getChartPanel(){
    return chartPanel;
}

@Override
public void drawPieChart() {
    // OVAJ POKUSAJ
    pieChart.draw(createTable(),createOptions());

}

private Options createOptions() {
    Options options = Options.create();
    options.setWidth(400);
    options.setHeight(240);
    options.setTitle("My Daily Activities");
    return options;
}

private AbstractDataTable createTable() {
    DataTable data = DataTable.create();
    data.addColumn(ColumnType.STRING, "Task");
    data.addColumn(ColumnType.NUMBER, "Hours per Day");
    data.addRows(2);
    data.setValue(0, 0, "Work");
    data.setValue(0, 1, 14);
    data.setValue(1, 0, "Sleep");
    data.setValue(1, 1, 10);
    return data;
}
    }

最后一个 UiBinder

        <!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'
     ui:generateFormat='com.google.gwt.i18n.rebind.format.PropertiesFormat'
     ui:generateKeys='com.google.gwt.i18n.rebind.keygen.MD5KeyGenerator'
     ui:generateLocales='default'
         xmlns:c="urn:import:com.google.gwt.visualization.client.visualizations.corechart" xmlns:v="urn:import:com.google.gwt.visualization.client.visualizations">

     <g:HTMLPanel ui:field="chartPanel">
    <c:PieChart ui:field="pieChart" ></c:PieChart>
     </g:HTMLPanel>
         </ui:UiBinder>

当我加载此代码时，我得到错误：[ERROR] [gametestingyou] - Unable to load module entry point class com.rs.gwtp.gametestingyou.client.GameTestingYou（有关详细信息，请参阅相关异常）和 Umbrella 异常。

请帮忙：）！

这是完整的例外：

19:14:34.890 [错误] [gametestingyou] 无法加载模块入口点类 com.rs.gwtp.gametestingyou.client.GameTestingYou（有关详细信息，请参阅相关异常）com.google.gwt.event.shared.UmbrellaException：一个或捕获的更多异常，请参阅 com.google.gwt.user.client.impl.HistoryImpl.fireEvent(HistoryImpl) 的 com.google.gwt.event.shared.HandlerManager.fireEvent(HandlerManager.java:129) 的 UmbrellaException#getCauses .java:75) 在 com.google.gwt.event.logical.shared.ValueChangeEvent.fire(ValueChangeEvent.java:43) 在 com.google.gwt.user.client.impl.HistoryImpl.fireHistoryChangedImpl(HistoryImpl.java:82 ) 在 com.google.gwt.user.client.History.fireCurrentHistoryState(History.java:121) 在 com.gwtplatform.mvp.client.proxy.PlaceManagerImpl.revealCurrentPlace(PlaceManagerImpl.java:310) 在 com.rs.gwtp。gametestingyou.client.GameTestingYou.onModuleLoad(GameTestingYou.java:17) 在 sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) 在 sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source) 在 sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)在 java.lang.reflect.Method.invoke(Unknown Source) 在 com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396) 在 com.google.gwt.dev.shell.OophmSessionHandler.loadModule( OophmSessionHandler.java:200) 在 com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:525) 在 com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363) 在 java .lang.Thread.run(Unknown Source) Caused by: com.google.gwt.event.shared.UmbrellaException: 一个或多个异常被捕获，在 com.google.gwt.event.shared.SimpleEventBus.fireEventFromSource(SimpleEventBus.java:67) 的 com.google.gwt.event.shared.EventBus.castFireEventFromSource(EventBus.java:77) 的 UmbrellaException#getCauses 中查看完整集com.gwtplatform.mvp.client.proxy.PlaceManagerImpl.fireEvent(PlaceManagerImpl.java:146) 在 com.gwtplatform.mvp.client.proxy.PlaceManagerImpl.doRevealPlace(PlaceManagerImpl.java:121) 在 com.gwtplatform.mvp.client。 proxy.PlaceManagerImpl.revealPlace(PlaceManagerImpl.java:339) at com.rs.gwtp.gametestingyou.client.place.ClientPlaceManager.revealDefaultPlace(ClientPlaceManager.java:24) at com.gwtplatform.mvp.client.proxy.PlaceManagerImpl.onValueChange( PlaceManagerImpl.java:264) 在 com.google.gwt.event.logical.shared.ValueChangeEvent.dispatch(ValueChangeEvent.java:128) 在 com.google.gwt.event.logical。shared.ValueChangeEvent.dispatch(ValueChangeEvent.java:1) at com.google.gwt.event.shared.GwtEvent.dispatch(GwtEvent.java:1) at com.google.web.bindery.event.shared.EventBus.dispatchEvent( EventBus.java:40) 在 com.google.web.bindery.event.shared.SimpleEventBus.doFire(SimpleEventBus.java:193) 在 com.google.web.bindery.event.shared.SimpleEventBus.fireEvent(SimpleEventBus.java: 88）在 com.google.gwt.event.shared.HandlerManager.fireEvent(HandlerManager.java:127) 在 com.google.gwt.user.client.impl.HistoryImpl.fireEvent(HistoryImpl.java:75) 在 com.google .gwt.event.logical.shared.ValueChangeEvent.fire(ValueChangeEvent.java:43) 在 com.google.gwt.user.client.impl.HistoryImpl.fireHistoryChangedImpl(HistoryImpl.java:82) 在 com.google.gwt.user .client.History.fireCurrentHistoryState(History.java:121) 在 com.gwtplatform.mvp。client.proxy.PlaceManagerImpl.revealCurrentPlace(PlaceManagerImpl.java:310) 在 com.rs.gwtp.gametestingyou.client.GameTestingYou.onModuleLoad(GameTestingYou.java:17) 在 sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) 在 sun。 reflect.NativeMethodAccessorImpl.invoke(Unknown Source) at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source) at java.lang.reflect.Method.invoke(Unknown Source) at com.google.gwt.dev.shell.ModuleSpace.onLoad( ModuleSpace.java:396) 在 com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:200) 在 com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:525) 在 com .google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363) at java.lang.Thread.run(Unknown Source) 原因：java.lang。NullPointerException：在 com.rs.gwtp.gametestingyou.client.PieChartView_BinderImpl.createAndBindUi(PieChartView_BinderImpl.java:33) 在 com.google.gwt.user.client.ui.HTMLPanel.addAndReplaceElement(HTMLPanel.java:197) 处为空。 rs.gwtp.gametestingyou.client.PieChartView_BinderImpl.createAndBindUi(PieChartView_BinderImpl.java:1) 在 com.rs.gwtp.gametestingyou.client.PieChartView.(PieChartView.java:27) 在 com.rs.gwtp.gametestingyou.client.gin .ClientGinjectorImpl.com$rs$gwtp$gametestingyou$client$PieChartView_PieChartView_methodInjection(ClientGinjectorImpl.java:555) at com.rs.gwtp.gametestingyou.client.gin.ClientGinjectorImpl.create_Key$type$com$rs$gwtp$gametestingyou$client$ PieChartView$_annotation$$none$$(ClientGinjectorImpl.java:559) 在 com.rs.gwtp.gametestingyou.client.gin.ClientGinjectorImpl。get_Key$type$com$rs$gwtp$gametestingyou$client$PieChartView$_annotation$$none$$(ClientGinjectorImpl.java:570) 在 com.rs.gwtp.gametestingyou.client.gin.ClientGinjectorImpl.create_Key$type$com$ rs$gwtp$gametestingyou$client$PieChartPresenter$MyView$_annotation$$none$$(ClientGinjectorImpl.java:1726) at com.rs.gwtp.gametestingyou.client.gin.ClientGinjectorImpl.get_Key$type$com$rs$gwtp$ gametestingyou$client$PieChartPresenter$MyView$_annotation$$none$$(ClientGinjectorImpl.java:1735) at com.rs.gwtp.gametestingyou.client.gin.ClientGinjectorImpl.create_Key$type$com$rs$gwtp$gametestingyou$client$ PieChartPresenter$_annotation$$none$$(ClientGinjectorImpl.java:1522) at com.rs.gwtp.gametestingyou.client.gin.ClientGinjectorImpl.get_Key$type$com$rs$gwtp$gametestingyou$client$PieChartPresenter$_annotation$$none $$(ClientGinjectorImpl.java:第1533章）在com.rs.gwtp.gametestingyou.client.gin.ClientGinjectorImpl.memberInject_Key$type$com$rs$gwtp$gametestingyou$client$ShowTestResultsPresenter$_annotation$$none$$（ClientGinjectorImpl.java:2069）在com.rs .gwtp.gametestingyou.client.gin.ClientGinjectorImpl.create_Key$type$com$rs$gwtp$gametestingyou$client$ShowTestResultsPresenter$_annotation$$none$$(ClientGinjectorImpl.java:2079) at com.rs.gwtp.gametestingyou.client .gin.ClientGinjectorImpl.get_Key$type$com$rs$gwtp$gametestingyou$client$ShowTestResultsPresenter$_annotation$$none$$(ClientGinjectorImpl.java:2092) 在 com.rs.gwtp.gametestingyou.client.gin.ClientGinjectorImpl.memberInject_Key $type$com$rs$gwtp$gametestingyou$client$HomePagePresenter$_annotation$$none$$(ClientGinjectorImpl.java:1341) 在 com.rs.gwtp.gametestingyou.client.gin.ClientGinjectorImpl。create_Key$type$com$rs$gwtp$gametestingyou$client$HomePagePresenter$_annotation$$none$$(ClientGinjectorImpl.java:1352) 在 com.rs.gwtp.gametestingyou.client.gin.ClientGinjectorImpl.get_Key$type$com$ rs$gwtp$gametestingyou$client$HomePagePresenter$_annotation$$none$$(ClientGinjectorImpl.java:1365) 在 com.rs.gwtp.gametestingyou.client.gin.ClientGinjectorImpl.access$4(ClientGinjectorImpl.java:1363) 在 com。 rs.gwtp.gametestingyou.client.gin.ClientGinjectorImpl$5$1.onSuccess(ClientGinjectorImpl.java:1413) 在 com.google.gwt.core.client.GWT.runAsync(GWT.java:255) 在 com.rs.gwtp。 gametestingyou.client.gin.ClientGinjectorImpl$5.get(ClientGinjectorImpl.java:1411) at com.gwtplatform.common.client.CodeSplitProvider.get(CodeSplitProvider.java:48) at com.gwtplatform.mvp.client.proxy.ProxyImpl.getPresenter (ProxyImpl.java:46) 在 com。gwtplatform.mvp.client.proxy.ProxyPlaceAbstract.handleRequest(ProxyPlaceAbstract.java:193) 在 com.gwtplatform.mvp.client.proxy.ProxyPlaceAbstract.access$0(ProxyPlaceAbstract.java:192) 在 com.gwtplatform.mvp.client.proxy .ProxyPlaceAbstract$1.onPlaceRequest(ProxyPlaceAbstract.java:143) 在 com.gwtplatform.mvp.client.proxy.PlaceRequestInternalEvent.dispatch(PlaceRequestInternalEvent.java:134) 在 com.gwtplatform.mvp.client.proxy.PlaceRequestInternalEvent.dispatch(PlaceRequestInternalEvent. java:1) 在 com.google.gwt.event.shared.GwtEvent.dispatch(GwtEvent.java:1) 在 com.google.web.bindery.event.shared.EventBus.dispatchEvent(EventBus.java:40) 在 com .google.web.bindery.event.shared.SimpleEventBus.doFire(SimpleEventBus.java:193) 在 com.google.web.bindery.event.shared.SimpleEventBus.fireEventFromSource(SimpleEventBus.java:96）在 com.google.gwt.event.shared.SimpleEventBus.fireEventFromSource(SimpleEventBus.java:62) 在 com.google.gwt.event.shared.EventBus.castFireEventFromSource(EventBus.java:75) 在 com.google.gwt .event.shared.SimpleEventBus.fireEventFromSource(SimpleEventBus.java:67) 在 com.gwtplatform.mvp.client.proxy.PlaceManagerImpl.fireEvent(PlaceManagerImpl.java:146) 在 com.gwtplatform.mvp.client.proxy.PlaceManagerImpl.doRevealPlace (PlaceManagerImpl.java:121) 在 com.gwtplatform.mvp.client.proxy.PlaceManagerImpl.revealPlace(PlaceManagerImpl.java:339) 在 com.rs.gwtp.gametestingyou.client.place.ClientPlaceManager.revealDefaultPlace(ClientPlaceManager.java:24 ) 在 com.google.gwt.event.logical.shared.ValueChangeEvent 的 com.gwtplatform.mvp.client.proxy.PlaceManagerImpl.onValueChange(PlaceManagerImpl.java:264)。dispatch(ValueChangeEvent.java:128) 在 com.google.gwt.event.logical.shared.ValueChangeEvent.dispatch(ValueChangeEvent.java:1) 在 com.google.gwt.event.shared.GwtEvent.dispatch(GwtEvent.java: 1) 在 com.google.web.bindery.event.shared.SimpleEventBus.doFire(SimpleEventBus.java:193) 在 com.google.web.bindery.event.shared.EventBus.dispatchEvent(EventBus.java:40) 在 com .google.web.bindery.event.shared.SimpleEventBus.fireEvent(SimpleEventBus.java:88) 在 com.google.gwt.event.shared.HandlerManager.fireEvent(HandlerManager.java:127) 在 com.google.gwt.user .client.impl.HistoryImpl.fireEvent(HistoryImpl.java:75) 在 com.google.gwt.event.logical.shared.ValueChangeEvent.fire(ValueChangeEvent.java:43) 在 com.google.gwt.user.client.impl .HistoryImpl.fireHistoryChangedImpl(HistoryImpl.java:82) 在 com.google.gwt.user.client。History.fireCurrentHistoryState(History.java:121) at com.gwtplatform.mvp.client.proxy.PlaceManagerImpl.revealCurrentPlace(PlaceManagerImpl.java:310) at com.rs.gwtp.gametestingyou.client.GameTestingYou.onModuleLoad(GameTestingYou.java: 17) sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source) at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source) at java.lang.reflect.Method.invoke(Unknown来源）在 com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:200) 在 com.google.gwt 的 com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396) .dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:525) 在 com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363）在java.lang.Thread.run（未知来源）

package com.rs.gwtp.gametestingyou.client;

import com.google.gwt.core.client.EntryPoint;
import com.rs.gwtp.gametestingyou.client.gin.ClientGinjector;
import com.google.gwt.core.client.GWT;
import com.gwtplatform.mvp.client.DelayedBindRegistry;



    public class GameTestingYou implements EntryPoint {

private final ClientGinjector ginjector = GWT.create(ClientGinjector.class);

@Override
public void onModuleLoad() {
    // This is required for Gwt-Platform proxy's generator
    DelayedBindRegistry.bind(ginjector);

    ginjector.getPlaceManager().revealCurrentPlace();   

}

    }

score 0 · Accepted Answer

成功！！！这就是我最终完成我的意图的方式：向现有的 GWT-P 项目添加一些图表。当我确定 API 设置正常时，我发现这是解决方案：

UiBinder 只需要有 HTML 表格：

<!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'
ui:generateFormat='com.google.gwt.i18n.rebind.format.PropertiesFormat'
ui:generateKeys='com.google.gwt.i18n.rebind.keygen.MD5KeyGenerator'
ui:generateLocales='default'     xmlns:c="urn:import:com.google.gwt.visualization.client.visualizations.corechart" 
xmlns:v="urn:import:com.google.gwt.visualization.client.visualizations">

<g:HTMLPanel ui:field="chartPanel">
</g:HTMLPanel>
    </ui:UiBinder>

那么 View 应该像这样简单：

    public class PieChartView extends ViewImpl implements PieChartPresenter.MyView {

private final Widget widget;
@UiField HTMLPanel chartPanel;

public interface Binder extends UiBinder<Widget, PieChartView> {
}

@Inject
public @UiConstructor PieChartView(final Binder binder) {   
    widget = binder.createAndBindUi(this);

}

@Override
public Widget asWidget() {
    return widget;
}
public HTMLPanel getChartPanel(){
    return chartPanel;
}

}

然后PresenterWidget，需要通过VisualizationUtils.loadVisualizationApi(onLoadCallback, PieChart.PACKAGE);加载合适的PACKAGE 像这样：

    public class PieChartPresenter extends
    PresenterWidget<PieChartPresenter.MyView> {

public interface MyView extends View {
    public HTMLPanel getChartPanel();
}

@Inject
public PieChartPresenter(final EventBus eventBus, final MyView view) {
    super(eventBus, view);
}

@Override
protected void onBind() {
    super.onBind();

    Runnable onLoadCallback = new Runnable() {

        @Override
        public void run() {
            PieChart pieChart = new PieChart(createTable(), createOptions());
            /*Panel panel = RootPanel.get();*/
            /*panel.add(pieChart);*/
            Panel panel = getView().getChartPanel();
            panel.add(pieChart);
        }

        private AbstractDataTable createTable() {
                DataTable data = DataTable.create();
                data.addColumn(ColumnType.STRING, "Task");
                data.addColumn(ColumnType.NUMBER, "Hours per Day");
                data.addRows(2);
                data.setValue(0, 0, "Work");
                data.setValue(0, 1, 14);
                data.setValue(1, 0, "Sleep");
                data.setValue(1, 1, 10);
            return data;
        }

        private Options createOptions() {
                Options options = Options.create();
                options.setWidth(400);
                options.setHeight(240);
                options.setTitle("My Daily Activities");
                return options;

        }

    };

    VisualizationUtils.loadVisualizationApi(onLoadCallback, PieChart.PACKAGE);

}
/*Ovde prmeniti method*/
@Override
protected void onReset() {
    super.onReset();

}

}

现在这仅用于测试目的，这是我想要的结果：将 PieChart 放在 PresenterWidget 中并在调用时显示它。

score 0 · Accepted Answer

在您的构造函数中尝试pieChart在调用之前进行初始化createAndBindUi

@Inject
public @UiConstructor PieChartView(final Binder binder) {
    pieChart = new PieChart(createTable(), createOptions());
    widget = binder.createAndBindUi(this);
    chartPanel.add(pieChart);
}

score 0 · Accepted Answer

好的，我发现这个问题是 GWT-P 特有的，因为 EntryPoint 类没有加载所需的 PACKAGE。需要用这个方法加载 VisualizationUtils.loadVisualizationApi(onLoadCallback, PieChart.PACKAGE); 并将 Runnable 接口添加到实现 EntryPoint 类的类中，如以下示例：

Runnable onLoadCallback = new Runnable() {

        @Override
        public void run() {
            PieChart pieChart = new PieChart(createTable(), createOptions());
            Panel panel = RootPanel.get();
            panel.add(pieChart);

        }

        private AbstractDataTable createTable() {
                DataTable data = DataTable.create();
                data.addColumn(ColumnType.STRING, "Task");
                data.addColumn(ColumnType.NUMBER, "Hours per Day");
                data.addRows(2);
                data.setValue(0, 0, "Work");
                data.setValue(0, 1, 14);
                data.setValue(1, 0, "Sleep");
                data.setValue(1, 1, 10);
            return data;
        }

        private Options createOptions() {
                Options options = Options.create();
                options.setWidth(400);
                options.setHeight(240);
                options.setTitle("My Daily Activities");
                return options;

        }


    };

但这将在此示例中将 pieChart 添加到 RootPanel，刚才要弄清楚如何将此对象 pieChart 添加到特定的 PresenterWidget。当我这样做时，我将制作一个教程:)

charts - GWTP、PresenterWidget 和 Google Visualization API 不会显示 PieChart

3 回答 3

Related

Reference