Add a widget (button) to HTML5 canvas in GWT

In smartGWT it is possible to add another widget (seems to use an interface) to an HTML开发者_开发问答5-canvas, as you can see in this example.

Now I'm trying to figure out, if this is possible in (raw) GWT2.4 too. Has anybody of you a working example using GWT without any additional projects (like smartGWT, gwtExt, extGWT, ...)?

Thanks for all your answers.

HTML5 canvas is not in the scope of GWT yet, but maybe you can just build que equivalent elements in your dom with GWT dom API and draw in it throught JSNI calls

Thanks to Erik, i noticed the recent release of canvas in GWT 2.4

http://google-web-toolkit.googlecode.com/svn/javadoc/2.4/com/google/gwt/canvas/client/Canvas.html

As far as I know, you can not put arbitrary widget in a canvas. What you can do is draw images. So I guess the smartGWT widgets you refere to are nothing else but images.

If you have a GWT image object, this is how you get it to be drawn in a canvas:

import com.google.gwt.canvas.client.Canvas;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.ImageElement;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.RootLayoutPanel;

public class ImageCanvasTest implements EntryPoint {

    public void onModuleLoad() {
        Image image = new Image(
            "http://upload.wikimedia.org/wikipedia/en/f/f6/Gwt-logo.png");

        Canvas canvas = Canvas.createIfSupported();
        canvas.getContext2d().drawImage(
        ImageElement.as(image.getElement()), 0, 0);

        RootLayoutPanel.get().add(canvas);
    }

}

What you need is a CSS style for your buttons. A style like this:

button {
    position:absolute;
    z-index:2;  
}

button.zoomOut {
    top:200px;
    left:265px;
    font-size: 30px;
    margin-left:auto;
    margin-right:auto;
}

button.zoomIn {
    top:200px;
    left:400px;
    font-size: 30px;
    margin-left:auto;
    margin-right:auto;
}

With absolute position you're able to put them anywhere on the screen.

Cheers