如何集成GWT UIBinder与画布？ [英] How to integrate GWT UIBinder with Canvas?

问题描述

我想使用Google Web Toolkit找到我的方法。现在我试图得到 Canvas 小部件并运行。

但我得到这个错误，不明白为什么：

 编译模块de.kuntze.HelloCanvas 
计算'de.kuntze的所有可能的重新绑定结果。 client.HelloCanvas.HelloCanvasUiBinder'
重新绑定de.kuntze.client.HelloCanvas.HelloCanvasUiBinder 
调用生成器com.google.gwt.uibinder.rebind.UiBinderGenerator 
 [错误] com.google.gwt。 canvas.client.Canvas没有默认（零args）构造函数。要解决这个问题，您可以在UiBinder的所有者上定义一个@UiFactory方法，或者使用@UiConstructor注释一个Canvas的构造函数。 
 [错误]错误在'de / kuntze / client / HelloCanvas.java'
 [错误]行14：无法通过延迟绑定解决'de.kuntze.client.HelloCanvas.HelloCanvasUiBinder'
 [WARN]对于以下类型，生成的源从未提交（是否忘记调用commit（）？）
 [WARN] de.kuntze.client.HelloCanvas_HelloCanvasUiBinderImpl 
  
 
 
 
我的代码如下所示：
 
 
 
模块 HelloCanvas.gwt .xml  
 <？xml version =1.0encoding =UTF -8？ 
<！DOCTYPE module PUBLIC -  // Google Inc.//DTD Google Web Toolkit 2.5.1 // ENhttp://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 SYSTEMhttp://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> 
  
 
 
 
 
 
 
 
 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复合实现EntryPoint {
 
 private static HelloCanvasUiBinder uiBinder = GWT 
 .create（HelloCanvasUiBinder.class）; 
 
 @UiField画布帆布; 
 
 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 SYSTEMhttp://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 =200pxheight =200pxui：field =panel> 
< / g：SimplePanel> 
< / g：HTMLPanel> 
  
 
 
 
 
 
 
 
 > 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复合实现EntryPoint {
 
 private static HelloCanvasUiBinder uiBinder = GWT 
 .create（HelloCanvasUiBinder.class）; 
 
 @UiField 
 SimplePanel面板; 
 
 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.setCoordatableSpaceWidth（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）; 
} 
} 
  
 
 
解决方案
无法使用UI：Binder创建Canvas，因为没有零arg构造函数，也没有 @UIConstructor 。
 
 
 <我可以通过调用Canvas.createIfSupported（）来创建一个Canvas：
 
 
 
我想创建一个warpper（A simplePanel） 
  @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在部署时不会调整大小 
 
I am trying to find my way around with the Google Web Toolkit. Right now I am trying to get a Canvas widget up and running.

But I am getting this error and do not understand why:
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
My code looks like this:

The module 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>
The UIBinder file 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>
 

The Java file 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);
    }
}
I bet the answer will be pretty easy but I do not know why I get this error message and why the code does not compile. I am Sorry in advanced if the question is just too newbish.

Edit:
So after trying the advice below it works. Here comes the edited code which draws a black triangle.

The UIBinder file HelloCanvas.ui.xml including a 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>


The edited Java file 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);
    }
}

解决方案
You cannot create a Canvas with the UI:Binder, because there is no zero-arg constructor, nor a @UIConstructor.

I would suggst to create a warpper (A simplePanel) and within your Wrapper-Code, you can create a Canvas, by calling Canvas.createIfSupported():

The canvas itself is prvided.
 @UiField(provided = true)
 Canvas canvas;
Before you call binder.createAndBindUi(this); you will have to create the Canvas:
canvas = Canvas.createIfSupported()
I have no simple example, but maybe, this link is helpful:
https://code.google.com/p/gwtgae2011/source/browse/src/main/java/com/googlecode/gwtgae2011/client/main/SketchView.java?r=8e7169e7fbb411f320f99f77dcdb27efa27b727a

You also could use a CanvasElement, like described in this question:
GWT uibinder CanvasElement wont resize when deployed

                        
这篇关于如何集成GWT UIBinder与画布？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！