GWT で onTouchStart / onTouchMove / onTouchEnd イベントを処理してみる

動機:
GWTFusenをiPadで使えるようにできないかしら？
あれこれ調べたらこれに出会った．

Lombardi Development Blog » Blog Archive » Supporting multi-touch events with GWT on mobile Safari

で，このコメントにある'touch.tar.gz'が動きそうなのでやってみよう！

やってみた:

1. EclipseのGWTプラグインが入っているとする．'SampleTouch' Web Application Projectを作成．
1.a 使わないものを片っ端から削除

src/test.client.GreetingService.java ファイル
src/test.client.GreetingServiceAsync.java ファイル
src/test.server パッケージ
src/test.shared パッケージ

1.b 'SampleTouch.java'を以下のようにする．

public class SampleTouch implements EntryPoint, TouchStartHandler,
  TouchMoveHandler, TouchEndHandler {

 private HTML html;

 private TouchableFocusPanel tfp;

 public void onModuleLoad() {
  try {
   VerticalPanel panel = new VerticalPanel();
   html = new HTML();
   panel.add(html);
   tfp = new TouchableFocusPanel();
   tfp.addTouchStartHandler(this);
   tfp.addTouchMoveHandler(this);
   tfp.addTouchEndHandler(this);
   tfp.setSize("1000px", "1000px");
   panel.add(tfp);
   RootPanel.get().add(panel);
  } catch (Exception e) {
   e.printStackTrace();
  }
 }

 @Override
 public void onTouchStart(TouchStartEvent event) {
  event.preventDefault();
  String msg = "Start: ";
  msg += createMessage(event.touches());
  html.setHTML(msg);
 }

 @Override
 public void onTouchMove(TouchMoveEvent event) {
  event.preventDefault();
  String msg = "Move: ";
  msg += createMessage(event.touches());
  html.setHTML(msg);
 }

 @Override
 public void onTouchEnd(TouchEndEvent event) {
  event.preventDefault();
  String msg = "End: ";
  msg += createMessage(event.touches());
  html.setHTML(msg);
 }

 private String createMessage(JsArray touches) {
  String msg = "";
  if (touches.length() > 0) {
   for (int i = 0; i < touches.length(); i++) {
    Touch t = touches.get(i);
    int x = t.getRelativeX(tfp.getElement());
    int y = t.getRelativeY(tfp.getElement());
    msg += i + ":{x:" + x + "," + y + "}, ";
   }
  }
  return msg;
 }
}

1.c 上記 'touch.tar.gz'を展開した中の'main/gwt/com'の'com'フォルダーをDnD等でプロジェクトのソースフォルダに設置する．

1.d war/SampleTouch.htmlの編集
bodyタグの中身を空っぽにする．

1.e src/com.google.gwt.user.MoblieSafari.gwt.xmlの編集
moduleタグの直下に以下を追加

<inherits name='com.google.gwt.user.User'/>
<inherits name='com.google.gwt.user.UserAgent'/>
<set-property name="user.agent" value="safari" />

1.f src/sample.touch.SampleTouch.gwt.xmlの編集
以下のコメント行の下に

<!-- Other module inherits -->

以下を追加する．

<inherits name='com.google.gwt.user.MobileSafari'/>
<inherits name='com.lombardi.mobilesafari.MobileSafariEvents'/>

2. GWT Compile
2.a プロジェクト内のファイルを選択して, GWT Compileをクリック．


2.b EntryPointModulesから'SampleTouch'以外をRemoveする．



2.c 'Compile'を実行する．

3. 'war'フォルダーをWebでhttpでアクセス可能な場所へ設置
例えば/Library/WebServer/Documents/の下などでWeb共有からアクセスするなど．

結果:
タッチ（スナップとるときどうしても指が動くのでMoveになってしまう…）

マルチタッチ

TwFusen:
で,GWTFusen改めTwFusenとしてこちらに置いてみた．