Editor Visual para GWT

Hace poco me enteré que google compró la empresa instantiations (link a la noticia), esta empresa era la dueña del único diseñador gráfico decente para GWT, el cual era un plugin de eclipse y además privativo (había que comprarlo para usarlo). Hace poquito me entero que google publicó estos plugins gratis para todos! (link a la noticia).
Yo estuve probando este editor visual y he llegado a varias conclusiones:

Primero que nada, el plugin es genial! Las interfaces web diseñadas visualmente, o sea arrastrando componentes y realizando todo un manejo visual, terminan en código clásico de GWT, o bien con UI Binder!! El código que se genera es bastante limpio y fácil de entender, podemos utilizar todos los controles disponibles en GWT directamente de forma visual, podemos realizar cambios en el código y éstos se reflejan en el modo visual.

Además de todo esto, permite agregar fácilmente los frameworks de extensión mas populares como GWT-EXT y XGWT.

Acá les dejo un par de screenshots:

Vista de código:
Vista WYSIWYG:

Si combinamos esto con la funcionalidad que nos daba el plugin de google, nos queda como gran conclusión de todo que eclipse es la plataforma ideal e indiscutible para hacer aplicaciones en GWT.

Saludos!

Acerca de los WebSockets

Websockets es una de las tecnologías más interesantes de HTML5, mediante esta tecnología se termina uno de los grandes problemas de las aplicaciones web la falta de estado! Un desarrollador a partir de ahora podrá crear conexiones persistentes con el servidor de aplicaciones y realizar toda clase de cosas convirtiendo a la página web en un cliente común y corriente!

Por ello el desarrollador web deberá comenzar a pensar de otra forma, perderá sentido pensar en "el tiempo de request", la sesión web con su famosa cookie, no mas arquitectura mvc (tal cual la conocemos ahora y la usamos en la web) en pocas palabras, una revolución total. Hoy podemos utilizar esta tecnología si disponemos de dos cosas:

• Un browser compatible (como chrome o safari).
• Un servidor compatible.

Existen varias implementaciones del protocolo websockets (aunque todavía está en desarrollo), como muchos se lo estarán esperando, si vas a probar esto en java, podrás usar mi framework "websockets4j" disponible para descarga en jar en websockets4j.googlecode.com.

Bueno, ahora sin mas preámbulos, a lo importante. Para conectarnos al servidor desde Javascript necesitamos conocer dos cosas:

• La url de conexión.
• El subprotocolo a utilizar. (opcional)

La url de conexión indica a que servidor nos conectaremos, y tiene la siguiente forma:

ws (o wss) ://:puerto/recurso.

Si utilizamos ws, la conexión será sobre un canal desencriptado, y si utilizamos wss la conexión será utilizando "Transport Layer Security" o TLS. (de momento mi framework de websockets no soporta wss).

El subprotocolo, es para ser utilizado por terceros, usualmente se utilizará con una librería de javascript y un servidor del mismo vendedor.

La conexión puede tener tres estados posibles: Connecting, Opened y Closed. El siguiente código muestra la interfaz de WebSocket.

interface WebSocket {
readonly attribute DOMString URL;

// ready state
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSED = 2;
readonly attribute unsigned short readyState;
readonly attribute unsigned long bufferedAmount;

// networking
        attribute Function onopen;
        attribute Function onmessage;
        attribute Function onclose;
boolean send(in DOMString data);
void close();
};
WebSocket implements EventTarget;

(fuente: w3c)

Los mensajes al cliente serán recibidos por eventos, una función javascript será invocada cuando un mensaje llegue.

La trama tiene forma de caracteres unicode UTF-8 y se recibirá en forma de mensajes que pueden tener longitud variable.

Para realizar la conexión, basta con la siguiente línea Javascript:

var socket = new WebSocket("ws://some.host:10123/resource", [subprotocol]);

Una vez realizado esto, podemos setearle funciones para los cambios de estado:

socket.onopen = function() { alert("Opened!") };
socket.onmessage = function (e) { alert("Message: "+e.data); };
socket.onclose = function() { alert("Closed!") };
socket.onerror = function() { alert("Error!") };

Para enviar un mensaje, simplemente podremos utilizar la función "send" del socket.

Para cerrar la conexión, podremos utilizar la función "close" del socket.

Con esto concluyo esta guía sobre esta tecnología que va a cambiar a la web para siempre.

Saludos!

Framework de WebSockets: websockets4j

Este fin de semana he estado trabajando duro en un framework para WebSockets que sea conectable a Glassfish 3 y Tomcat 7. Aunque no es solamente conectable a eso, sino que mientras el servidor tenga permitida la creación de hilos y levantar ServerSockets, esto va a andar. El framework es open source con licencia Apache 2, bien permisiva!!.

El framework puede ser descargado de: http://websockets4j.googlecode.com y tiene como interesante que soporta la versión 75 y 76 del borrador del estándar de WebSockets, trataré de irlo actualizando a medida que los browsers vayan soportando versiones nuevas del estándar. Por ahora Google Chrome soporta la versión 75 y Safari 5 la versión 76.

Les dejo acá un videito de una aplicación de chat de ejemplo que hice para demostrar el funcionamiento del framework. Está en inglés porque pertenece al sitio de mi proyecto.

Dicen.. que se puede ver en hd.

Un dato curioso es que el framework no está hecho para funcionar con servlets incluso cuando el handshaking del protocolo es parecido a una solicitud http, bien, la especificación de servlets dice claramente que los servlets son para protocolos de solicitud y respuesta, como el HTTP, pero los websockets se comportan de forma muy distinta. Espero que le sirva a alguno, y pronto estaré trabajando en agregarle soporte para TLS.

Saludos!!

Variables de Función en Javascript.

Una característica muy interesante en javascript es la posibilidad de asignar una función a una variable, esta es una forma sencilla de implementar el patrón de diseño "estrategia" con lo cual simplificamos la lógica de nuestro programa al eliminar grandes cantidades de if o de switch, con este ejemplo pretendo hacer una demostración de su uso.

Ejemplo Paso a Paso.

La idea atrás de este ejmplo es un tanto absurda pero espero que sea ilustrativa, realizaremos las 4 operaciones fundamentales de la matemática de una manera uniforme tratando de no usar ningún if, el resultado funcionando de lo que haremos es el siguiente: (se puede probar).

Primero que nada declaramos nuestras 4 funciones.

function sumar(a,b) {
//suma de enteros, para no confundirla con la concatenacion
return parseInt(a)+parseInt(b);
}
function restar(a,b) {
return a-b;
}
function multiplicar(a,b) {
return a*b;
}
function dividir(a,b) {
return a/b;
}

Luego de esto, definimos la variable de nuestra función y le agregaremos un valor por defecto.

//definir la funcion por default
var funcion_actual = sumar;

Ahora definimos una función setter, no es obligatoria pero conviene que esté por claridad.

//una funcion que sirve para establecer la operacion a usar
function setFuncion(funcion) {
funcion_actual = funcion;
}

Ahora la función que hace la magia, lee la función a utilizar de la variable y simplemente la evalúa sin mas ni mas, completamente transparente y no sabe qué es lo que está evaluando realmente, sólo sabe que requiere 2 operandos. Además de esto leemos los valores de unos campos de texto y colocamos el resultado adentro de la etiqueta cuyo id se le pasa a la función evaluar a través de id_destino.


//una funcion para evaluar la operacion
function evaluar(id_destino) {

//leer los operadores
op1 = document.getElementById("campo_op1").value;
op2 = document.getElementById("campo_op2").value,

//evaluar la funcion
valor_evaluacion = funcion_actual(op1, op2);

//mostrar los resultados
document.getElementById(id_destino).innerHTML = valor_evaluacion;
}

Finalmente coloco un fragmento de html donde podemos probar el código tal cual.


<p>
<input type="button" value="Suma" onclick="setFuncion(sumar)" />
<input type="button" value="Resta" onclick="setFuncion(restar)" />
<input type="button" value="Multiplic" onclick="setFuncion(multiplicar)" />
<input type="button" value="Division" onclick="setFuncion(dividir)" />
<br/>
<input type="text" id="campo_op1" />
<input type="text" id="campo_op2" />
<input type="button" value="Evaluar" onclick="evaluar('resultado_operacion')" />
</p>
<p id="resultado_operacion"></p>


El html de arriba contiene 4 botones mediante los cuales el usuario especifica lo que desea, 2 campos de entrada de texto de donde la función leerá los valores, un botón que llamará a la función evaluar y finalmente el párrafo adonde mostraremos el resultado de todo.

Espero que les sea de utilidad y cualquier cosa posteen preguntas.


Saludos!