Google API Libraries for Google Web Toolkit(gwt-visualization.jarなど)は、クライアント側でのみ使用するためのものです(javascriptの生成用)。幸いにも、Googleは、Google Visualization Data Source LibraryにDataTableを公開するためのサーバーサイドJavaコードも提供しています。
リモートプロシージャコールでサーバー上にDataTableを生成し、JSON文字列としてクライアントに渡し、Google Web ToolkitのGoogleビジュアライゼーションを使用して、クライアントのWebページ。 Google Web Toolkit 2.4.0でEclipse Indigoを使用しています。
- プロジェクトのビルド・パスに、そして自分自身のモジュールの説明に継承されたモジュールとしてクライアントライブラリを結合gwt-visualization.jar GWTのAPIを追加します:SRC/com.package.name /プロジェクト名で
を。XML:
<inherits name='com.google.gwt.visualization.Visualization'/>
:クライアント/ TableSeで
package com.clark.demos.client;
import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;
@RemoteServiceRelativePath("table")
public interface TableService extends RemoteService {
String getTable();
}
rviceAsync.java:戦争/ WEB-INF/web.xmlに
package com.clark.demos.client;
import com.google.gwt.user.client.rpc.AsyncCallback;
public interface TableServiceAsync {
void getTable(AsyncCallback<String> callback);
}
:
<servlet>
<servlet-name>tableServlet</servlet-name>
<servlet-class>com.clark.demos.server.TableServiceImpl</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>tableServlet</servlet-name>
<url-pattern>/google_visualization___gwt/table</url-pattern>
</servlet-mapping>
サーバーで/ TableServiceImpl.java:
package com.clark.demos.server;
import com.google.visualization.datasource.datatable.ColumnDescription;
import com.google.visualization.datasource.datatable.DataTable;
import com.google.visualization.datasource.datatable.value.ValueType;
import com.google.visualization.datasource.render.JsonRenderer;
@SuppressWarnings("serial")
public class TableServiceImpl extends RemoteServiceServlet implements
TableService {
@Override
public String getTable() {
DataTable data = new DataTable();
data.addColumn(new ColumnDescription("Task", ValueType.TEXT, "Task"));
data.addColumn(new ColumnDescription("Stemming", ValueType.NUMBER, "Stemming"));
data.addColumn(new ColumnDescription("NoStemming", ValueType.NUMBER, "No Stemming"));
data.addRowFromValues("Fire", 1.0, 0.8);
data.addRowFromValues("Flood", 0.5, 0.65);
return JsonRenderer.renderDataTable(data, true, false, false).toString();
}
}
- "テーブル" サービスを呼び出し、返されたJSON文字列からのDataTableを構築し、クライアントのコードを持っている:クライアント/ gwt-visualization-demo.javaで
:
/**
* Create a remote service proxy to talk to the server-side Table service.
*/
private final TableServiceAsync tableService = GWT
.create(TableService.class);
public static native DataTable toDataTable(String json) /*-{
return new $wnd.google.visualization.DataTable(eval("(" + json + ")"));
}-*/;
public void onModuleLoad() {
// Create a callback to be called when the visualization API
// has been loaded.
Runnable onLoadCallback = new Runnable() {
public void run() {
final Panel panel = RootPanel.get();
tableService.getTable(new AsyncCallback<String>() {
@Override
public void onSuccess(String result) {
AbstractDataTable data = toDataTable(result);
BarChart pie = new BarChart(data, createOptions());
pie.addSelectHandler(createSelectHandler(pie));
panel.add(pie);
}
@Override
public void onFailure(Throwable caught) {
}
});
}
};
// Load the visualization api, passing the onLoadCallback to be called
// when loading is done.
VisualizationUtils.loadVisualizationApi(onLoadCallback, BarChart.PACKAGE);
}
サンプルコード:https://github.com/RichDickClark/gwt-google-charts-demo.git
「com.google.gwt.core.client.JavaScriptException:(TypeError):$ wnd.google.visualization is undefined」と表示されます。ライブラリやAPIをロードする必要がありますか?私はクライアント側のGWTウィジェットでこれを使用したいと思います... –