java - GWT - 使用布局面板的 Google 可视化问题？

Question

我的 GWT 应用程序遇到问题，直到用户与窗口进行某种交互(例如在屏幕上移动鼠标或按下按钮)后，Google 可视化图表才会显示。这很好，只是图表应该显示为用户首先看到的东西，并且由于它是在移动设备上看到的，所以他们很可能不会看到图表，因为他们的第一次交互将是单击一个按钮隐藏图表以显示其他信息。

使用"Getting started tutorial"在可视化代码的页面上，图表立即加载正常(一旦进行一些细微的更改即可修复稍微过时的教程中的问题)。经过一番尝试和错误，找出我的代码与导致问题的示例代码之间的差异，我发现发生这种情况是因为我的代码使用的是较新的布局面板，而不仅仅是 GWT 中的常规面板。

下面的代码是已更改的工作教程代码，因此它使用 RootLayoutPanel.get() 而不是 RootPanel.get()。这样，图表不会加载，直到您单击重新加载页面，然后您可以在页面重新加载之前立即看到图表。这应该可以使用下面的代码轻松测试。要使图表始终显示，只需将 RootLayoutPanel.get() 更改为 RootPanel.get() 即可。

我的应用程序中的某些内容允许在用户交互后加载图表(我不确定是什么)。但是，布局面板肯定是问题所在，就好像我将其更改为常规面板一样，它工作正常。不幸的是，我的整个应用程序都是使用布局面板构建的。

发生了什么事，我如何才能使用布局面板从一开始就显示图表？非常感谢!

package com.test.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.JsArray;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.LayoutPanel;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.visualization.client.AbstractDataTable;
import com.google.gwt.visualization.client.VisualizationUtils;
import com.google.gwt.visualization.client.DataTable;
import com.google.gwt.visualization.client.Selection;
import com.google.gwt.visualization.client.AbstractDataTable.ColumnType;
import com.google.gwt.visualization.client.events.SelectHandler;
import com.google.gwt.visualization.client.visualizations.corechart.PieChart;
import com.google.gwt.visualization.client.visualizations.corechart.Options;

public class SimpleViz implements EntryPoint {
  public void onModuleLoad() {
    // Create a callback to be called when the visualization API
    // has been loaded.
    Runnable onLoadCallback = new Runnable() {
      public void run() {
        LayoutPanel panel = RootLayoutPanel.get();

        // Create a pie chart visualization.
        PieChart pie = new PieChart(createTable(), createOptions());

        pie.addSelectHandler(createSelectHandler(pie));
        panel.add(pie);
      }
    };

    // Load the visualization api, passing the onLoadCallback to be called
    // when loading is done.
    VisualizationUtils.loadVisualizationApi(onLoadCallback, PieChart.PACKAGE);
  }

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

  private SelectHandler createSelectHandler(final PieChart chart) {
    return new SelectHandler() {
      @Override
      public void onSelect(SelectEvent event) {
        String message = "";

        // May be multiple selections.
        JsArray<Selection> selections = chart.getSelections();

        for (int i = 0; i < selections.length(); i++) {
          // add a new line for each selection
          message += i == 0 ? "" : "\n";

          Selection selection = selections.get(i);

          if (selection.isCell()) {
            // isCell() returns true if a cell has been selected.

            // getRow() returns the row number of the selected cell.
            int row = selection.getRow();
            // getColumn() returns the column number of the selected cell.
            int column = selection.getColumn();
            message += "cell " + row + ":" + column + " selected";
          } else if (selection.isRow()) {
            // isRow() returns true if an entire row has been selected.

            // getRow() returns the row number of the selected row.
            int row = selection.getRow();
            message += "row " + row + " selected";
          } else {
            // unreachable
            message += "Pie chart selections should be either row selections or cell selections.";
            message += "  Other visualizations support column selections as well.";
          }
        }

        Window.alert(message);
      }
    };
  }

  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;
  }
}

Answer 1

在布局面板中，小部件的大小是在 JavaScript 中完成的。当加载初始页面时，初始尺寸调整是在其他一切完成后完成的。但是，在您的情况下，饼图是在加载库时添加的，并且在初始大小调整后运行。因此，您的小部件没有调整大小，也不会显示。您需要显式调用 panel.forceLayout(); 作为 run 方法中的最后一个方法。