Использование Google Visualization в GWT 2.0 - PullRequest
Новая
       3

Использование Google Visualization в GWT 2.0

4 голосов
/ 30 апреля 2010

Я работаю над изучением GWT (всего новичка) и у меня есть вопрос относительно API визуализации, предоставленного Google. Эта страница: http://code.google.com/p/gwt-google-apis/wiki/VisualizationGettingStarted

Описывает начало работы с круговой диаграммой (это то, что мне нужно). Однако я пытаюсь сделать это в составном пользовательском интерфейсе с использованием UiBinder. С этой целью я не знаю, как правильно обрабатывать обратный вызов, который отображается: 

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, а я нет. Я не вижу элегантного и очевидного способа поместить его в переплет. Я утверждаю, что даже это предположение может быть неверным. Есть идеи от экспертов?

EDIT: Я должен прояснить мою попытку: 

    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: Это не должно иметь значения, но на всякий случай я использую FF на Linux. Некоторые статьи, которые я прочитал, подразумевают, что это проблема.

РЕДАКТИРОВАТЬ 4: Добавление: 

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

после того, как дочерний элемент append получает график для отображения. Это подразумевает, что порядок примера неправильный. Если это так, что является оптимальным?

Ответы [ 2 ]

3 голосов
/ 30 апреля 2010

Также важно знать, что хотя библиотека эмуляции JW GWT поддерживает интерфейс Runnable, ее нельзя использовать для параллельной обработки в отдельном потоке, так как код скомпилирован в JavaScript, который, в свою очередь, запускает один-поточная в браузере.То же самое относится и к ключевому слову synchronized.

Я также рекомендовал бы выполнять всю логику подготовки в конструкторе Widget / Composite, кроме любого реального рисования в обратном вызове onLoad, которое необходимо переопределить.Этот обратный вызов вызывается, когда виджет загружается в документ браузера, только тогда вы можете выполнить любое взаимодействие страницы / макета, например, включить / отключить элементы управления или запросить фокус.

3 голосов
/ 30 апреля 2010

В любом случае, вы предлагаете, будет работать. Если 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);
  }
...