Problems integrating GWT Visualization

Hallo,

i’m recently trying to test out all the new features which were implemented in Vaadin 7 regarding the creation of custom components.
Currently I’m trying to integrate an existing GWT Widget as a Vaadin Component. I already went through the “Tutorial” on the wiki with the GFlot library. Now i tried to convert that code to use the GWT Visualization library.

The problem I’m currently having is that i can’t seem to create the Widget in the Connector. On the GWT Visualization reference page it says that you have to load the api before creating the Visualization. So I tried usiing: BarChart bar; @Override protected Widget createWidget(){ Runnable onLoadCallback = new Runnable() { public void run(){ ...//creating example data and options bar = new BarChart(data, options); } } VisualizationUtils.loadVisualizationApi(onLoadCallBack, BarChart.Package); return bar; } When i then added the server-side component to a layout it resulted in an empty div.
There i use the non-deprecated version of the BarChart which doesn’t have a non-arg constructor and when I try to use the deprecated version with GWT.create like this: return GWT.create(BarChart.class); the Vaadin page loads indefinably when it comes to loading the widget. Same happens when i try to load the api with an empty Runnable before returning the Chart with GWT.create.

I start to run out of ideas here.

Does someone ever tried something like this and has some tips on how to do this?

I only saw some examples for V6 but they don’t use the Connnector but instead a client-side widget which embeds the Chart.

Cheers,
M R

I got a bit further now. I switched to making my own client-side widget extending a gwt panel and then adding the chart using the original code (
as shown here
).
Now when I launch the app with ?debug the chart shows up but i’m getting some client-side exceptions ( AttachDetachExcpetion caused by NullPointerExceptions probably because by the time vaadin tries to render the chart it isn’t initialized yet ).

When i launch the app without debug the chart doesn’t show up and the red spinner runs forever.

Someone else back in Vaadin 6 did something similar and when he ran into a similar problem he solved it by calling requestrepaint on the serverside when the thread is finished ( by calling a function on the server-side from the widget class ) In Vaadin 7 i don’t know how to do that. Mainly because of the way server-client-communication goes over the Connector but the connector doesn’t “know” when the thread is finished.

I can already smell the resolution of my problem so if someone has an idea how i should continue from here, please let me know.

Regards,
M R

I got another step further. Now the chart is displaying totally fine when i launch it in GWT Development Mode but not when launched without ?gwt.code…
Now ?debug isn’t working either but instead is throwing JavascriptExceptions which i can’t read because if i go to GWT Dev Mode they don’t get thrown.

The import part of my Widget class is:[code]
public class WidgetTestWidget extends VerticalPanel {
public WidgetTestWidget() {
setStyleName(“TestWidget”);
VisualizationUtils.loadVisualizationApi(new APILoadCallback(),
“corechart”);
}

PieChart chart;
protected void drawChart(AbstractDataTable data, AbstractDrawOptions options) {
	if (chart != null) {
		remove(chart);
	}
    PieChart pie = new PieChart(createTable(), createOptions());
    pie.addSelectHandler(createSelectHandler(pie));			
	WidgetTestWidget.this.add(pie);
	chart=pie;
}

Runnable onLoadCallback;
class APILoadCallback implements Runnable {
	public void run() {
		initComplete = true;
	        drawChart(createTable(), createOptions());
	}
}


[/code]Does someone have the slightest idea about what is happening here?

Cheers,
M R

I can’t really say about the problem itself but to try to find it, try to compile the widgetset with “-style PRETTY” or “-style DETAILED” and open the console of the developer tools of a browser to see some of the messages.

Using “?debug=q” (undocumented, may change in the future) will print more information in the browser console without showing the debug window.

You could also try SuperDevMode in a browser that supports source maps (Chrome, perhaps also latest Firefox might work).

Thank you Henri for your post. I was trying something with the Detailed and Pretty style already but through the Vaadin Project Properties and i think they got ignored when launching and recompiling the app through maven and i couldn’t find these targets/goals/switches/however they are called somewhere on the web so thank you for that.

The weird thing is that i just set up a more simple testcase on an environment i have on a another computer and i used the same code but with a BarChart instead of a PieChart and it just worked instantly. So i don’t know if i did something different maybe in the connector or the server side but i’m now gonna try to keep going with the working one and maybe test out PieCharts next.

Whenever i’ll run into another problem like that (and i’m sure i will eventually) i will remember your advise and hopefully find the source of the problem much quicker.

Would also be quite nice to have this kind of information added to the
Debugging Vaadin Applications
, especially the Debugging Client Side section.

Again, thank you so much for your reply.

Cheers,
M R