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.

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. — targumon, Mar 28 '13 at 19:36
@targumon: imho is this SmartGWT-Canvas based on a regular HTML5-Canvas and customized. — Erik, Apr 09 '13 at 11:16
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.
...
only if you use **com.google.gwt.canvas.client.Canvas.createIfSupported()**, you'll get a — targumon, Apr 21 '13 at 07:51

score 0 · Answer 1 · answered Sep 30 '11 at 13:33

0

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

answered Sep 30 '11 at 13:33

François Wauquier

568
3
9

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: http://code.google.com/intl/de-DE/webtoolkit/doc/latest/DevGuideHtml5.html ). JSNI is perhaps a solution - do you have a working example? ;) – Erik Sep 30 '11 at 13:43

score 0 · Answer 2 · answered Sep 30 '11 at 13:49

0

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

answered Sep 30 '11 at 13:49

François Wauquier

568
3
9

score 0 · Answer 3 · answered Sep 30 '11 at 14:02

0

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

}

answered Sep 30 '11 at 14:02

Adrian B.

4,333
1
24
38

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. – Erik Sep 30 '11 at 20:11
Now I am not a SmartGWT expert, but looking at the Canvas code in the SmartGWT project, I don't think the SmartGWT Canvas (http://code.google.com/p/smartgwt/source/browse/trunk/main/src/com/smartgwt/client/widgets/Canvas.java) has anything to do with an HMLT5 Canvas. The SmartGWT Canvas is just named Canvas... – Adrian B. Oct 04 '11 at 07:33
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. – Erik Oct 05 '11 at 09:56

score -1 · Answer 4 · answered Jun 29 '12 at 13:05

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

Add a widget (button) to HTML5 canvas in GWT

4 Answers4