如何将GWT UIBinder与画布集成？

Question

我正在尝试通过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); 
    } 
} 

Answer 1

不能创建一个帆布UI：Binder，因为没有零参数构造函数，也没有@UIConstructor。

我会suggst创建warpper（A simplePanel）和包装器代码内，你可以创建一个画布，通过调用Canvas.createIfSupported（）：

本身prvided画布。

@UiField(provided = true) 
Canvas canvas; 

在打电话前binder.createAndBindUi(this);你必须创建画布：

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