Using Google Visualization in GWT 2.0

Question

I am working on learning GWT (total newb) and asking a question regarding the visualization API provided by Google. This page: http://code.google.com/p/gwt-google-apis/wiki/VisualizationGettingStarted

Describes getting started with a pie chart (this is what I need). However, I am trying to do this in a composite user interface using UiBinder. To this end, I don't know how to handle the callback correctly, which is shown:

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

My first guess is that it will be in the UiBinder constructor, right? But this assumes that I want to put the item in the RootLayoutPanel, and I will not. I do not see an elegant and obvious way to place it in a binder. I maintain that even this assumption may be wrong. Any ideas from experts?

EDIT: I have to clarify my attempt:

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

On startup, I get the following in Composites DIV:

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

But I do not see a graph using the code on the page above.

EDIT 2: This link may provide additional information. However, the proposed solution is not optimal, since the application should know more about widgets (and if the widget is there even there). http://vaadin.com/forum/-/message_boards/message/97850

EDIT 3: It doesn't matter, but just in case, I run FF on Linux. Some articles that I read suggest that this is a problem.

EDIT 4: Addendum:

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

after the append child displays the graph. This means that the order of the example is incorrect. If so, which one is optimal?

Answer 1

It is also important to know that although the GWT JRE Emulation library supports the Runnable interface, it cannot be used for parallel processing in a separate thread, because the code is compiled in JavaScript, which, in turn, runs a single one in the browser. The same goes for the synchronized .

I would also recommend doing all the preparation logic in the Widget / Composite constructor, but any actual drawing in the onLoad callback that you need to override. This callback is called when the widget is loaded in a browser document, and only then can you perform any interaction between pages and layouts, for example, enable / disable controls or request focus.

Answer 2

In any case, you offer to work. If the visualization API is used by a bunch of different widgets on the page, then it would be easier to put the loadVisualizationApi call in the EntryPoint class - an example of this below.

You can write Composite like this:

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

And then do it in 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); }