2011-09-30 14 views
7

En smartGWT es posible agregar otro widget (parece usar una interfaz) a un canvas de HTML5, como se puede ver en this example.Agregue un widget (botón) al lienzo HTML5 en GWT

Ahora estoy tratando de averiguar si esto también es posible en (crudo) GWT2.4. ¿Alguien de ustedes es un ejemplo que trabaja usando GWT sin ningún proyecto adicional (como smartGWT, gwtExt, extGWT, ...)?

Gracias por todas sus respuestas.

+0

sé que esto es una cuestión de edad, sino por causa de otros lectores: la lona en el ejemplo enlazado pertenece a SmartGWT y no tiene nada que ver con HTML5 Canvas. – targumon

+0

@targumon: imho es este SmartGWT-Canvas basado en un HTML5-Canvas regular y personalizado. – Erik

+0

Erik, esto no es una cuestión de opinión :-D simplemente inspecciónelo en un navegador moderno: cuando usa ** com.smartgwt.client.widgets.Canvas **, y este es el caso en el ejemplo de java2s.com usted dio, el objeto DOM resultante es una etiqueta DIV: por ejemplo

...
solo si usa ** com.google.gwt.canvas.client.Canvas.createIfSupported() **, obtendrá una etiqueta (en un navegador compatible, por supuesto). – targumon

Respuesta

0

canvas de HTML5 no está en el ámbito de GWT aún, pero tal vez lo que se puede acumular Que elementos equivalentes en su dom con GWT dom API y dibujar en ella TRAVÉS DE JSNI llamadas

+0

No estoy de acuerdo. Con GWT 2.2 Google agregó soporte experimental para canvas HTML5. Con GWT 2.4, el lienzo es oficialmente compatible con GWT (Ver: http://code.google.com/intl/de-DE/webtoolkit/doc/latest/DevGuideHtml5.html). JSNI es quizás una solución, ¿tiene un ejemplo de trabajo? ;) – Erik

0

por lo que yo sé, no se puede poner widget de arbitraria en un lienzo. Lo que puedes hacer es dibujar imágenes. Así que supongo que los widgets smartGWT a los que se refiere no son más que imágenes.

Si usted tiene un objeto de imagen GWT, así es como se obtiene previamente dibujado en un lienzo:

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

} 
+0

No estoy de acuerdo, mire el ejemplo. Puede registrar un MouseHandler en los widgets puestos en el lienzo. Cómo dibujar una imagen dentro de un lienzo al que estoy acostumbrado y no es la respuesta. – Erik

+0

Ahora no soy un experto en SmartGWT, pero mirando el código Canvas en el proyecto SmartGWT, no creo que el SmartGWT Canvas (http://code.google.com/p/smartgwt/source/browse/trunk/main /src/com/smartgwt/client/widgets/Canvas.java) tiene algo que ver con un lienzo HMLT5. El SmartGWT Canvas se acaba de llamar Canvas ... –

+0

Una vez más, no estoy de acuerdo: el lienzo de SmartGWT es una herencia de BaseWidget, que una vez más es una herencia de un GWT-Widget normal. El SmartGWT-Canvas incluye un método JSNI llamado "crear", que llama a la función de creación de JS normal de un canvas de HTML5. Además: creo que es imposible crear widgets de navegador propios que no estén basados ​​en ninguno de los widgets predeterminados, la definición de HTML es compatible. – Erik

-1

Lo que se necesita es un estilo CSS para los botones. Un estilo como este:

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

Con posición absoluta, puede colocarlos en cualquier lugar de la pantalla.

Saludos