GWTでBeansを使って非同期通信

プロジェクト概要

  • プロジェクト名:GwtSampleCallbackBeans
  • パッケージ:sample.beans
  • Beans:MyBeans

Beansクラスの作成

  • パッケージ:sample.beans.client【必須】
  • IsSerializableインタフェースを実装【必須】
  • デフォルトコンストラクタの作成【必須】
  • コンストラクタ引数ありの作成
  • メンバ変数
    • int id
    • String name
  • getter/setter(使わない)
  • toStringメソッドのオーバーライド
package sample.beans.client;

import com.google.gwt.user.client.rpc.IsSerializable;

public class MyBeans implements IsSerializable {
	private int id;
	private String name;
	
	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public MyBeans() {
		// TODO Auto-generated constructor stub
	}

	public MyBeans(int id, String name) {
		super();
		this.id = id;
		this.name = name;
	}
	
	@Override
	public String toString() {
		return "id:" + this.id + "name:" + this.name;
	}

}

サービスの作成

GreetingService
デフォルトで作成されたメソッドの引数、戻り値を変更
greetServerメソッド

  • 引数:なし
  • 戻り値:List
	List<MyBeans> greetServer();

GreetingServiceAsync
greetServerメソッド

  • 引数:List
  • 戻り値:AsyncCallback> callback
	void greetServer(AsyncCallback<List<MyBeans>> callback);

GreetingServiceImplの作成

デフォルトで作成されているものは削除する
greetServer()メソッド

  • 引数:なし
  • 戻り値:List

処理の実装
ArrayListを作成し、MyBeansを格納する

	public List<MyBeans> greetServer() {
		List<MyBeans> list = new ArrayList<MyBeans>();
		list.add(new MyBeans(1,"aaa"));
		list.add(new MyBeans(2,"bbb"));
		list.add(new MyBeans(3,"ccc"));
		
		return list;
	}

GwtSampleCallbackBeans.htmlの作成

作成済みのhtmlのidを変更する

      <tr>
        <td id="button"></td>
      </tr>
      <tr>
        <td id="html"></td>
      </tr>
    </table>

GwtSampleCallbackBeansの作成

  • メンバ変数
    • GreetingServiceAsync greetingService (デフォルトで作成済み)
  • メソッド
    • onModuleLoad()(デフォルトの内容は削除)

onModuleLoad()の実装
処理内容:sendボタンでサーバからMyBeansリストを取得する
Witdetの作成

  • HTML:結果表示用
  • Button:サーバと非同期通信処理
  • ButtonにaddClickHandlerを実装する
  • OnClickイベントにサービスの結果に対する処理を定義
  • greetServerの呼び出し
	public void onModuleLoad() {
		final Button button = new Button("send");
		final HTML html = new HTML();
		html.setHTML("ここにBeansが表示されます");
		
		button.addClickHandler(new ClickHandler(){

			@Override
			public void onClick(ClickEvent event) {
				//サービスの結果に対する処理を定義
				AsyncCallback<List<MyBeans>> callback = new AsyncCallback<List<MyBeans>>(){

					@Override
					public void onFailure(Throwable caught) {
						System.out.println(caught.getMessage());
					}

					@Override
					public void onSuccess(List<MyBeans> result) {
						StringBuilder output = new StringBuilder();
						for(MyBeans beans: result){
							output.append(beans);
							output.append("<br/>");
						}
						html.setHTML(output.toString());
					}
				};
				greetingService.greetServer(callback);
			}
		});
		RootPanel.get("html").add(html);
		RootPanel.get("button").add(button);
	}

実行結果



ソース
■MyBeans.java

package sample.beans.client;

import com.google.gwt.user.client.rpc.IsSerializable;

public class MyBeans implements IsSerializable {
	private int id;
	private String name;
	
	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public MyBeans() {
		// TODO Auto-generated constructor stub
	}

	public MyBeans(int id, String name) {
		super();
		this.id = id;
		this.name = name;
	}

	@Override
	public String toString() {
		return "id:" + this.id + "name:" + this.name;
	}
}

■GreetingService

package sample.beans.client;

import java.util.List;

import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;

/**
 * The client side stub for the RPC service.
 */
@RemoteServiceRelativePath("greet")
public interface GreetingService extends RemoteService {
	List<MyBeans> greetServer();
}

■GreetingServiceAsync
■GreetingServiceAsync

package sample.beans.client;

import java.util.List;

import com.google.gwt.user.client.rpc.AsyncCallback;

/**
 * The async counterpart of <code>GreetingService</code>.
 */
public interface GreetingServiceAsync {
	void greetServer(AsyncCallback<List<MyBeans>> callback);
}

■GwtSampleCallbackBeans

package sample.beans.client;

import java.util.List;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class GwtSampleCallbackBeans implements EntryPoint {
	/**
	 * Create a remote service proxy to talk to the server-side Greeting service.
	 */
	private final GreetingServiceAsync greetingService = GWT
			.create(GreetingService.class);

	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		final Button button = new Button("send");
		final HTML html = new HTML();
		html.setHTML("ここにBeansが表示されます");
		
		button.addClickHandler(new ClickHandler(){

			@Override
			public void onClick(ClickEvent event) {
				//サービスの結果に対する処理を定義
				AsyncCallback<List<MyBeans>> callback = new AsyncCallback<List<MyBeans>>(){

					@Override
					public void onFailure(Throwable caught) {
						System.out.println(caught.getMessage());
					}

					@Override
					public void onSuccess(List<MyBeans> result) {
						StringBuilder output = new StringBuilder();
						for(MyBeans beans: result){
							output.append(beans);
							output.append("<br/>");
						}
						html.setHTML(output.toString());
					}
				};
				greetingService.greetServer(callback);
			}
		});
		RootPanel.get("html").add(html);
		RootPanel.get("button").add(button);
	}
}

■GreetingServiceImpl

package sample.beans.server;

import java.util.ArrayList;
import java.util.List;

import sample.beans.client.GreetingService;
import sample.beans.client.MyBeans;

import com.google.gwt.user.server.rpc.RemoteServiceServlet;

/**
 * The server side implementation of the RPC service.
 */
@SuppressWarnings("serial")
public class GreetingServiceImpl extends RemoteServiceServlet implements
		GreetingService {


	@Override
	public List<MyBeans> greetServer() {
		List<MyBeans> list = new ArrayList<MyBeans>();
		list.add(new MyBeans(1,"aaa"));
		list.add(new MyBeans(2,"bbb"));
		list.add(new MyBeans(3,"ccc"));
		
		return list;
	}
}

■GwtSampleCallbackBeans.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="GwtSampleCallbackBeans.css">

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>Web Application Starter Project</title>
    
    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" language="javascript" src="gwtsamplecallbackbeans/gwtsamplecallbackbeans.nocache.js"></script>
  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

    <h1>Web Application Starter Project</h1>

    <table align="center">
      <tr>
        <td colspan="2" style="font-weight:bold;">Please enter your name:</td>        
      </tr>
      <tr>
        <td id="button"></td>
      </tr>
      <tr>
        <td id="html"></td>
      </tr>
    </table>
  </body>
</html>