Add a widget (button) to HTML5 canvas in GWT

Question

In smartGWT it is possible to add another widget (seems to use an interface) to an HTML5-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.

Resplendent

I know this is an old question, but for other readers' sake: the Canvas in the linked example belongs to SmartGWT and got nothing to do with HTML5 Canvas. – Kruger

@targumon: imho is this SmartGWT-Canvas based on a regular HTML5-Canvas and customized. – Resplendent

Erik, this is not a matter of opinion :-D just inspect it in a modern browser - when you use com.smartgwt.client.widgets.Canvas, and this is the case in the java2s.com example you gave, the resulting DOM object is a DIV tag: e.g. <div id="isc_174" eventproxy="isc_Canvas_125" ... > ... </div> only if you use com.google.gwt.canvas.client.Canvas.createIfSupported(), you'll get a <canvas> tag (on a supported browser, of course). – Kruger

Answer 1

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

Demark

I don't agree. With GWT 2.2 google added experimental support for HTML5 canvas. With GWT 2.4 the canvas is officially supported by GWT (See: code.google.com/intl/de-DE/webtoolkit/doc/latest/… ). JSNI is perhaps a solution - do you have a working example? ;) – Resplendent

Answer 2

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

Demark

Answer 3

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);
    }

}

Panamerican

I don't agree - watch the example. You can register a MouseHandler at the widgets put on the canvas. How to draw an image within a canvas I'm used to and is not the answer. – Resplendent

Now I am not a SmartGWT expert, but looking at the Canvas code in the SmartGWT project, I don't think the SmartGWT Canvas (code.google.com/p/smartgwt/source/browse/trunk/main/src/com/…) has anything to do with an HMLT5 Canvas. The SmartGWT Canvas is just named Canvas... – Panamerican

Again I do not agree: The Canvas of SmartGWT is an inheritance of BaseWidget, which again is an inheritance of a normal GWT-Widget. The SmartGWT-Canvas includes a JSNI method called "create", which calles the normal JS create function of a HTML5-canvas. In addition: I think it is impossible to create own browser-widgets not based on any of the default widgets, the HTML-definition supports. – Resplendent

Answer 4

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

Malissamalissia