在 GWT 2.0 中使用 Google 可视化

Question

我正在学习 GWT（total newb），并且对 Google 提供的 Visualiztion API 有疑问。这一页： http://code.google.com/p/gwt-google-apis/wiki/VisualizationGettingStarted

描述开始使用饼图（这是我需要的）。但是，我正在尝试在使用 UiBinder 的复合 UI 中执行此操作。为此，我不知道如何正确处理显示的回调：

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() {
        Panel panel = RootPanel.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);
  }

我的第一个假设是这将进入 UiBinder 构造函数，对吗？然而，这假设我想将元素放在 RootLayoutPanel 中，而我没有。我看不到将其放入活页夹的优雅而明显的方式。我认为即使这个猜测也可能是错误的。专家有什么想法吗？

编辑： 我应该明确我的尝试：

    public GraphPanel() {
        initWidget(uiBinder.createAndBindUi(this));

        Runnable onLoadCallback = new Runnable() {  
            public void run() {
              //LayoutPanel panel = RootPanel.

              // Create a pie chart visualization.
              PieChart pie = new PieChart(createPieTable(), createPieOptions());
              pie.addSelectHandler(createSelectHandler(pie));
              mySelf.getElement().appendChild(pie.getElement());   // .add(pie);
            }
          };

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

运行时，我在 Composites DIV 中得到以下信息：

<div class="gwt-viz-container"></div>

但我没有看到使用上页代码的图表。

编辑 2： 此链接可能会提供其他信息。但是，建议的解决方案并不是最佳的，因为应用程序需要了解更多关于小部件的信息（以及小部件是否存在）。 http://vaadin.com/forum/-/message_boards/message/97850

编辑 3： 没关系，但以防万一，我在 Linux 上运行 FF。我读过的一些文章暗示这是一个问题。

编辑 4： 添加：

pie.draw(createPieTable(), createPieOptions());

在附加子节点获得要显示的图形之后。这意味着示例的顺序是错误的。如果是的话，什么是最佳的？

Answer 1

synchronized 关键字也是如此。

我还建议在 Widget/Composite 的构造函数中执行所有准备逻辑，但在 onLoad 回调中执行任何实际绘图，您需要覆盖它。当小部件加载到浏览器文档中时会调用此回调，只有这样您才能执行任何页面/布局交互，例如启用/禁用控件或请求焦点。

Answer 2

您建议的任何一种方式都可以。如果页面上的许多不同小部件都使用 Visualization API，那么将 loadVisualizationApi 调用放在 EntryPoint 类中可能会更简单 - 下面是一个示例。

你可以这样写Composite：

public MyPieChartContainer extends Composite {
  interface MyUiBinder extends UiBinder<Widget, MyPieChartContainer>;
  private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

  @UiField Panel panel;

  public MyPieChartContainer() {
    initWidget(uiBinder.createAndBindUi(this));

    PieChart pie = new PieChart(createTable(), createOptions());
    pie.addSelectHandler(createSelectHandler(pie));
    panel.add(pie);
  }
}

然后在EntryPoint中执行此操作：

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() {
        Panel panel = RootPanel.get();
        MyPieChartContainer myPieChartContainer = new MyPieChartContainer();    
        panel.add(myPieChartContainer);
      }
    };

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