Add widget (button) to HTML5 canvas in GWT

Question

In smartGWT, you can add another widget (it seems to use an interface) in the 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. Does any of you have a working example using GWT without any additional projects (e.g. smartGWT, gwtExt, extGWT, ...)?

Thanks for all your answers.

Answer 1

HTML5 canvas is not yet in the GWT domain, but maybe you can just create equivalent elements in your dom with the GWT dom API and pull it through JSNI calls

Answer 2

Thanks to Eric, 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

Answer 3

As far as I know, you cannot put an arbitrary widget on the canvas. What you can do is draw images. Therefore, I think that the smartGWT widgets that you link to are nothing more than images.

If you have a GWT image object, here is how you draw it 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); } } 

Answer 4

What you need is a CSS style for your buttons. A style similar to 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 an absolute position, you can place them anywhere on the screen.

Greetings