GWT‎ > ‎

gwt-incubator

公式:http://code.google.com/p/google-web-toolkit-incubator/
GWTの新しいバージョンに追加される機能が開発されています。
CanvasやWidgetなどがあります。

Google Groupに投稿された、GWT Incubator Status Update and Scheduleによると
GraphicsやSoundなどは別のProjectになるようです。

Canvas

HTML5のCanvasが使用可能です。

画像はImageLoaderを使って読み込みます。
ClientBundleを使う場合は、ImageResourceのgetUrl()でURLを取得してloadします。

細かい癖などは、このページでもコメントされています。

画像を使う

画像が読み込まれるまでは画像は表示できませんので、ImageLoaderクラスのloadImagesを使ってImageElementを作成するのがいいみたいです。

 
try{
    ImageLoader.loadImages(new String[]{goalUrl,startUrl}, new ImageLoader.CallBack() {
@Override
public void onImagesLoaded(ImageElement[] imageElements) {
//copy somewhere
}
});}catch(Exception e){
e.printStackTrace();
}

IEでのCanvas

IEにはCanvasがないため、VMLで代価しています。そのため遅いのと描画が変な所が多少あります。
IE9ではSVGをサポートするみたいですし、多少改善が期待できます。
Google Chrome Frameを使ってもらうのもいいでしょう。

HTML宣言

htmlの先頭が<!doctype html>　だとうまく動かないことがあります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> とかにするといいでしょう。

ImageResource

imageResourceがIEのCanvasだとうまく分割されずに表示されないことがあります。
普通のURLを使うといいでしょう。

イベントの処理

Canvasでマウスクリックなどのイベントを取得場合は、Nativeのイベントを拾うaddDomHandlerでイベントを取得します。
addDomHandler(new MouseUpHandler(){
            public void onMouseUp(MouseUpEvent e){
             //do something
            }
        }, MouseUpEvent.getType());

私はEventを取得するクラスを作って処理しています。

EventGWTCanvas.java

/*
 * Copyright (C) 2010  aki  
 * www.akjava.com
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
package com.akjava.gwt.akjwave.client.canvas;

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

import com.google.gwt.event.dom.client.MouseDownEvent;
import com.google.gwt.event.dom.client.MouseDownHandler;
import com.google.gwt.event.dom.client.MouseMoveEvent;
import com.google.gwt.event.dom.client.MouseMoveHandler;
import com.google.gwt.event.dom.client.MouseUpEvent;
import com.google.gwt.event.dom.client.MouseUpHandler;
import com.google.gwt.widgetideas.graphics.client.GWTCanvas;


public class EventGWTCanvas extends GWTCanvas{

public List<CanvasListener> listenres=new ArrayList<CanvasListener>() ;
public EventGWTCanvas(int w, int h) {
super(w,h);
addDomHandler(new MouseUpHandler(){
            public void onMouseUp(MouseUpEvent e){
             fireOnMouseUp(e);
            }
        }, MouseUpEvent.getType());
addDomHandler(new MouseDownHandler(){
            public void onMouseDown(MouseDownEvent e){
             fireOnMouseDown(e);
            }
        }, MouseDownEvent.getType());
addDomHandler(new MouseMoveHandler(){
            public void onMouseMove(MouseMoveEvent e){
             fireOnMouseMove(e);
            }
        }, MouseMoveEvent.getType());
}

public void addListener(CanvasListener listener){
listenres.add(listener);
}
public void removeListener(CanvasListener listener){
listenres.remove(listener);
}
private void fireOnMouseUp(MouseUpEvent e){
for(CanvasListener listener:listenres){
listener.onMouseUp(e);
}
}
private void fireOnMouseDown(MouseDownEvent e){
for(CanvasListener listener:listenres){
listener.onMouseDown(e);
}
}
private void fireOnMouseMove(MouseMoveEvent e){
for(CanvasListener listener:listenres){
listener.onMouseMove(e);
}
}
}

CanvasListener.java

/*
 * Copyright (C) 2010  aki  
 * www.akjava.com
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.akjava.gwt.akjwave.client.canvas;

import com.google.gwt.event.dom.client.MouseDownEvent;
import com.google.gwt.event.dom.client.MouseMoveEvent;
import com.google.gwt.event.dom.client.MouseUpEvent;

public interface CanvasListener {

public void onMouseUp(MouseUpEvent e);

public void onMouseDown(MouseDownEvent e);

public void onMouseMove(MouseMoveEvent e);

}




Comments