如何将GWT UIBinder与Canvas集成?

时间:2013-10-09 20:28:20

标签: gwt canvas

我正在尝试使用Google Web Toolkit。现在我正在尝试启动并运行Canvas小部件。

但我收到此错误并且不明白原因:

Compiling module de.kuntze.HelloCanvas
Computing all possible rebind results for 'de.kuntze.client.HelloCanvas.HelloCanvasUiBinder'
  Rebinding de.kuntze.client.HelloCanvas.HelloCanvasUiBinder
     Invoking generator com.google.gwt.uibinder.rebind.UiBinderGenerator
        [ERROR] com.google.gwt.canvas.client.Canvas has no default (zero args) constructor. To fix this, you can define a @UiFactory method on the UiBinder's owner, or annotate a constructor of Canvas with @UiConstructor.
[ERROR] Errors in 'de/kuntze/client/HelloCanvas.java'
  [ERROR] Line 14: Failed to resolve 'de.kuntze.client.HelloCanvas.HelloCanvasUiBinder' via deferred binding
[WARN] For the following type(s), generated source was never committed (did you forget to call commit()?)
  [WARN] de.kuntze.client.HelloCanvas_HelloCanvasUiBinderImpl

我的代码如下所示:

模块 HelloCanvas.gwt.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.5.1//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.5.1/distro-source/core/src/gwt-module.dtd">
<module>
    <inherits name="com.google.gwt.user.User" />
    <source path="client"/>
    <entry-point class="de.kuntze.client.HelloCanvas"/>
</module>

UIBinder文件 HelloCanvas.ui.xml

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:c='urn:import:com.google.gwt.canvas.client'>
<ui:style>

</ui:style>
<g:HTMLPanel>
    <c:Canvas ui:field="canvas"></c:Canvas>
</g:HTMLPanel>

Java文件 HelloCanvas.java

package de.kuntze.client;

import com.google.gwt.canvas.client.Canvas;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

public class HelloCanvas extends Composite implements EntryPoint{

    private static HelloCanvasUiBinder uiBinder = GWT
            .create(HelloCanvasUiBinder.class);

    @UiField Canvas canvas;

    interface HelloCanvasUiBinder extends UiBinder<Widget, HelloCanvas> {
    }

    public HelloCanvas() {
        initWidget(uiBinder.createAndBindUi(this));
    }

    @Override
    public void onModuleLoad() {
        canvas = Canvas.createIfSupported();
        canvas.setWidth("400px");
        canvas.setHeight("400px"); 
        canvas.setCoordinateSpaceWidth(400);
        canvas.setCoordinateSpaceHeight(400);
        RootPanel.get().add(this);
    }
}

我敢打赌答案很简单,但我不知道为什么会收到此错误消息以及代码无法编译的原因。

修改 所以在尝试下面的建议之后就可以了。这是编辑后的代码,它绘制了一个黑色三角形。

UIBinder文件 HelloCanvas.ui.xml ,包括SimplePanel

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel>
    <g:SimplePanel width="200px" height="200px" ui:field="panel">
    </g:SimplePanel>
</g:HTMLPanel>

已编辑的Java文件 HelloCanvas.java

package de.kuntze.client;

import com.google.gwt.canvas.client.Canvas;
import com.google.gwt.canvas.dom.client.Context2d;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.Widget;

public class HelloCanvas extends Composite implements EntryPoint {

private static HelloCanvasUiBinder uiBinder = GWT
        .create(HelloCanvasUiBinder.class);

@UiField
SimplePanel panel;

interface HelloCanvasUiBinder extends UiBinder<Widget, HelloCanvas> {
}

public HelloCanvas() {
    initWidget(uiBinder.createAndBindUi(this));
}

@Override
public void onModuleLoad() {
    Canvas tCanvas = Canvas.createIfSupported();
    tCanvas.setWidth("400px");
    tCanvas.setHeight("400px");
    tCanvas.setCoordinateSpaceWidth(400);
    tCanvas.setCoordinateSpaceHeight(400);

    Context2d tContext2d = tCanvas.getContext2d();
    tContext2d.beginPath();
    tContext2d.moveTo(25, 25);
    tContext2d.lineTo(105, 25);
    tContext2d.lineTo(25, 105);
    tContext2d.fill();
    panel.add(tCanvas);

    RootPanel.get().add(this);
    }
}

1 个答案:

答案 0 :(得分:3)

您无法使用UI:Binder创建Canvas,因为没有零参数构造函数,也没有@UIConstructor

我建议创建一个warpper(一个simplePanel),在你的Wrapper-Code中,你可以通过调用Canvas.createIfSupported()来创建一个Canvas:

画布本身是不可见的。

 @UiField(provided = true)
 Canvas canvas;

在致电binder.createAndBindUi(this);之前,您必须创建Canvas:

canvas = Canvas.createIfSupported()

我没有简单的例子,但也许,这个链接很有帮助: https://code.google.com/p/gwtgae2011/source/browse/src/main/java/com/googlecode/gwtgae2011/client/main/SketchView.java?r=8e7169e7fbb411f320f99f77dcdb27efa27b727a

您也可以使用CanvasElement,如此问题中所述: GWT uibinder CanvasElement wont resize when deployed