El experimento se encuentra en http://matamarcianos2000.appspot.com/ y el código aquí. No se han utilizado , intencionalmente, elementos de optimización de GWT para que el código sea entendible.
Antes de seguir quiero aclarar que JavaScript es un lenguaje feo, y estoy
casi seguro que cualquier persona que ha programado en C++,Java o C# opinara lo
mismo. Los que argumenten que programar nativamente en JavaScript es mas optimo
y se aprovechan mejor los recursos, los comparare a aquellos intrépidos programadores
de assembler que pensaban, en su momento, que los lenguajes de alto nivel no servían.
Créeme que GWT logra compilar un JavaScript extraordinariamente optimizado!!!!
GWT soporta los elementos canvas y audio
de HTML5, los cuales utilice en este experimento para la creación de un
sencillo juego. Puedes utilizar como guía de referencia cualquier manual de
HTML5 que abundan en la internet, te podrás percatar que GWT a encapsulado los métodos
de los elementos canvas y audio, en las clases "Canvas" y
"Audio" respectivamente haciendo muy sencillo su utilización.
CREANDO UN CANVAS
Un canvas es un área rectangular en una pagina HTML y este se especifica con el elemento <canvas>
Con HTML5
<canvas id="myCanvas" width="200" height="100"></canvas>
Con GWT
Canvas canvas = Canvas.createIfSupported();
canvas.setWidth("100px");
canvas.setHeight("100px");
RootPanel.get().add(canvas);
DIBUJANDO UN RECTANGULO EN EL CANVAS
Por cada elemento canvas se puede utilizar un "context" (piense en el context como el acrílico de la pizarra-acrilica), en el cual puedes utilizar comandos javascript para dibujar lo que desees. Los navegadores pueden implementar "context 2D" y "context 3D" este ultimo todavía funciona experimentalmente.
Con HTML5
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
Con GWT
Context2d context=canvas.getContext2d();
//context.setFillStyle(CssColor.make("#FF0000"));
context.setFillStyle("#FF0000");
context.fillRect(0, 0, 150, 75);
fillStyle establece el color del rectangulo a dibujar
fillrect dibujar un rectangulo
DIBUJANDO TEXTO EN EL CANVAS
Hay dos métodos para dibujar texto filltext y stroketext, el primero dibuja el texto con el actual fillstyle mientras que el segundo dibuja solo el borde de las letras usando el actual strokestyle
Con HTML5
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
Con GWT
Context2d context=canvas.getContext2d();
context.setFont("30px Arial");
context.fillText("Hello World",10,50);
font establece la fuente del texto
fillText dibujar el texto
TODO JUNTO
Es claro que la traducción de HTML5 a GWT es sencillo, y como lo mencione al inicio esto te permite utilizar cualquier manual/tutorial de HTML5, ademas no te olvides que tienes toda la potencia de un buen lenguaje como Java.
Con HTML5
<html>
<head>
<script>
function cargar(){
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.fillStyle="#FF0000";
context.fillRect(0, 0, 150, 75);
context.font="30px Arial";
context.fillText("Hello World",10,130);
}
</script>
</head >
<body onLoad="cargar();">
<canvas id="myCanvas" width="200px" height="200px"></canvas>
</body>
</html>
Con GWT
public void onModuleLoad() {
Canvas canvas = Canvas.createIfSupported();
canvas.setWidth("200px");
canvas.setHeight("200px");
Context2d context=canvas.getContext2d();
//context.setFillStyle(CssColor.make("#FF0000"));
context.setFillStyle("#FF0000");
context.fillRect(0, 0, 150, 75);
context.setFont("30px Arial");
context.fillText("Hello World",10,130);
RootPanel.get().add(canvas);
}
Si eres un programador Javascript o eres alguien que empieza a programar en el Front-End y estas pensando seriamente en aprender un framework MVC como AngularJS porque necesitas mayor control, prueba GWT !!!!
