Depurando una aplicación GWT

Modos de ejecución

Hay dos modos de ejecución de una aplicación GWT. El primer modo se denomina Modo de Desarrollo (Development Mode), el cual se realiza utilizando las bondades de un IDE (Integrated Development Environment) o directamente desde la línea de comando de su sistema operativo. En este blog utilizaremos Eclipse Helios. En versiones iniciales de GWT, el modo de desarrollo se conocía como Modo Hospedado (hosted mode) y proporcionaba algunas herramientas adicionales que permitía probar la aplicación desde un navegador hecho exclusivamente para este propósito. En las versiones recientes de GWT las aplicaciones pueden ser probadas desde el navegador de su preferencia.

El segundo modo se denomina Modo de Producción (Production Mode) anteriormente llamado Modo Web (web mode). En este modo el código Java será compilado y traducido a JavaScript y la aplicación GWT se ejecutará de la misma manera como se ejecuta cuando ha sido instalada en un servidor web,

Depurando en Modo de Desarrollo

Una aplicación GWT puede ser ejecutada en modo de desarrollo desde un IDE. Los programas Java son compilados a bytecode de Java y los componentes son desplegados en un navegador a través de los mecanismos provistos por GWT. Por lo tanto, las facilidades de depuración (debugging) del IDE están disponibles para depurar tanto las aplicaciones cliente como servidor.

Como ya se explicó en el blog Ejecutando una aplicación GWT, para ejecutar su aplicación abra Eclipse, de click en el botón derecho del ratón y desde el menú de opciones seleccione Run As --> Web Application. Otra manera de ejecutar la aplicación es seleccionando el proyecto y desde el menú principal seleccione las opciones Run --> Run As --> Web Application. Copie el URL que aparece en la vista de tareas de Eclipse y cópielo en el navegador para probar la aplicación.

Este proceso lo realizará infinitas veces hasta que su aplicación este completada y suficientemente probada para ser puesta en producción.

Sin embargo, en ocasiones es necesario detener la aplicación en algún lugar determinado, en donde se está presentando un error o en donde la aplicación se comporta de manera distinta a lo esperado. Bien, aquí debemos depurar o en inglés debug. Desde Eclipse abra su proyecto, de click sobre el botón derecho del ratón, seleccione Debug As --> Web Application. La aplicación se ejecutará de manera similar a como si se hubiera ejecutado seleccionando Run As --> Web Application.

También puede iniciar la depuración desde el menú principal, Run --> Debug As --> Web Application, o simplemente dando click al ícono con figura de escarabajo o insecto (bug) de la barra de comandos de Eclipse.

Para detener la ejecución en un lugar específico, ubique la línea en donde va a detener la ejecución y en la barra izquierda del editor de doble click.

Una pequeña esfera aparecerá allí indicando el lugar en donde la ejecución se detendrá. Esto se conoce como un breakpoint o punto de ruptura.

Ejecute nuevamente la aplicación en modo depuración, copie el URL de la vista Development Mode de Eclipse y péguelo en el navegador para probar la aplicación. Eclipse mostrará un mensaje advirtiendo que la perspectiva de Eclipse cambiará para mostrar las vistas que despliegan información relacionada con la depuración de la aplicación:

Click en Yes.

La ejecución de la aplicación se detendrá en la línea en donde se definió el breakpoint.

Observe las vistas adicionales que Eclipse ofrece.

La vista Debug muestra la clase y el método en donde la aplicación se ha detenido.

La vista Variables muestra el estado de cada variable hasta ahora puestas en memoria. Aquí puede consultar el valor de cada una.

La vista con el código Java de la aplicación muestra la línea en donde se ha detenido.

La vista outline es una referencia para indicar la posición de la ruptura del programa dentro de todo el proyecto.

La vista Console, en la parte inferior de Eclipse, hace parte de las vistas de tareas. Aquí puede ver salidas o mensajes que el programador ha puesto directamente dentro del programa. Por ejemplo, la salida del método System.out.println o los mensajes enviados utilizando la utilidad GWT.log.

Para continuar con la ejecución utilice las opciones disponibles para debugging que Eclipse ofrece. Vaya al menú principal, seleccione Run y una de las opciones disponibles:

Puede continuar la ejecución del programa línea por línea pulsando F5, o si ha puesto varios breakpoints dentro de su programa, pulse F8 para que la ejecución continúe y se detenga en el próximo breakpoint.

Para retornar a la perspectiva del ambiente de desarrollo de Java de Eclipse, vaya a la parte superior derecha de Eclipse y de click sobre el ícono Java:

Refrescando el Modo de Desarrollo

Puede realizar cambios en el código de la aplicación y reiniciar la ejecución. No es necesario que termine o detenga completamente la ejecución, puede simplemente refrescar el navegador para que el nuevo código cargue y se ejecute.

Si ha modificado aplicaciones del servidor, es conveniente que reinicie el servidor Jetty que viene integrado a Eclipse. Simplemente de un click sobre el ícono de flechas amarillas de la vista Development Mode:

Mensajes de Depuración con GWT.log

GWT provee una utilidad para generar mensajes desde su programa a la vista Development Mode de Eclipse. Haciendo llamados al método GWT.log() podrá generar mensajes de depuración que le indicarán el sitio y el estado de su aplicación.

Por ejemplo inserte un par de líneas con llamados a GWT.log:

public void onModuleLoad() {             GWT.log("Comenzando la ejecucion de la aplicacion...", null);             final Button sendButton = new Button("Enviar");             final TextBox nameField = new TextBox();             nameField.setText("Usuario GWT");             final Label errorLabel = new Label();             // We can add style names to widgets             sendButton.addStyleName("sendButton");             // Add the nameField and sendButton to the RootPanel             // Use RootPanel.get() to get the entire body element             GWT.log("Obteniendo elementos de la pagina web", null);             RootPanel.get("nameFieldContainer").add(nameField);             RootPanel.get("sendButtonContainer").add(sendButton);             RootPanel.get("errorLabelContainer").add(errorLabel);

 Salve la aplicación, refresque el navegador y observe los mensajes que aparecen en la vista Development Mode de Eclipse:

Los mensajes enviados desde GWT.log se mezclan son los mensajes generados por GWT. A medida que la aplicación se vuelva más compleja, inserte en el mensaje la ubicación en donde éste se genera, por ejemplo:

GWT.log("Ejemplo1:onModuleLoad():Comenzando la ejecucion de la aplicacion...", null);

De ese modo podrá identificar sus propios mensajes y rastrear fácilmente el flujo de la aplicación.

También puede utilizar la salida estándar más popular de Java: System.out.println. Como ejercicio inserte una línea con algún mensaje que facilite la depuración y observe la salida del mensaje en la vista Console.