GWT: aplicación de depuración
GWT proporciona una excelente capacidad para depurar el código del lado del cliente y del lado del servidor.
Durante el modo de desarrollo, la aplicación GWT se basa en código Java y no se traduce a JavaScript.
Cuando una aplicación se ejecuta en modo de desarrollo, la máquina virtual Java (JVM) en realidad está ejecutando el código de la aplicación como código de bytes de Java compilado, utilizando la capacidad de GWT para conectarse a una ventana del navegador.
GWT utiliza un complemento basado en navegador para conectarse a JVM.
Por lo tanto, los desarrolladores pueden usar cualquier IDE basado en Java para depurar tanto el código GWT del lado del cliente como el código del lado del servidor.
En este artículo, demostraremos el uso de la depuración del código del cliente GWT mediante Eclipse. Haremos las siguientes tareas:
- Establezca puntos de interrupción en el código y véalos en BreakPoint Explorer.
- Recorra el código línea por línea durante la depuración.
- Ver los valores de la variable.
- Inspeccione los valores de todas las variables.
- Inspecciona el valor de una expresión.
- Muestre el marco de pila para hilos suspendidos.
Ejemplo de depuración
Este ejemplo lo llevará a través de sencillos pasos para demostrar la depuración de una aplicación GWT. Siga los siguientes pasos para actualizar la aplicación GWT que creamos en GWT - Capítulo Crear aplicación -
| Paso | Descripción |
|---|---|
| 1 | Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint como se explica en el capítulo GWT - Crear aplicación . |
| 2 | Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html y HelloWorld.java como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
| 3 | Compile y ejecute la aplicación para verificar el resultado de la lógica implementada. |
A continuación se muestra el contenido del descriptor de módulo modificado src/com.tutorialspoint/HelloWorld.gwt.xml.
<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name = 'com.google.gwt.user.User'/>
<!-- Inherit the default GWT style sheet. -->
<inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
<!-- Specify the app entry point class. -->
<entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
<!-- Specify the paths for translatable code -->
<source path = 'client'/>
<source path = 'shared'/>
</module>A continuación se muestra el contenido del archivo de hoja de estilo modificado war/HelloWorld.css.
body {
text-align: center;
font-family: verdana, sans-serif;
}
h1 {
font-size: 2em;
font-weight: bold;
color: #777777;
margin: 40px 0px 70px;
text-align: center;
}
.gwt-Label{
font-size: 150%;
font-weight: bold;
color:red;
padding:5px;
margin:5px;
}A continuación se muestra el contenido del archivo de host HTML modificado war/HelloWorld.html para acomodar dos botones.
<html>
<head>
<title>Hello World</title>
<link rel = "stylesheet" href = "HelloWorld.css"/>
<script language = "javascript" src = "helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<h1>Debugging Application Demonstration</h1>
<div id = "gwtContainer"></div>
</body>
</html>Tengamos el siguiente contenido del archivo Java src/com.tutorialspoint/HelloWorld.java mediante el cual demostraremos la capacidad de depuración del código GWT.
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
/*create UI */
final TextBox txtName = new TextBox();
txtName.setWidth("200");
txtName.addKeyUpHandler(new KeyUpHandler() {
@Override
public void onKeyUp(KeyUpEvent event) {
if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
Window.alert(getGreeting(txtName.getValue()));
}
}
});
Label lblName = new Label("Enter your name: ");
Button buttonMessage = new Button("Click Me!");
buttonMessage.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
Window.alert(getGreeting(txtName.getValue()));
}});
HorizontalPanel hPanel = new HorizontalPanel();
hPanel.add(lblName);
hPanel.add(txtName);
hPanel.setCellWidth(lblName, "130");
VerticalPanel vPanel = new VerticalPanel();
vPanel.setSpacing(10);
vPanel.add(hPanel);
vPanel.add(buttonMessage);
vPanel.setCellHorizontalAlignment(buttonMessage,
HasHorizontalAlignment.ALIGN_RIGHT);
DecoratorPanel panel = new DecoratorPanel();
panel.add(vPanel);
// Add widgets to the root panel.
RootPanel.get("gwtContainer").add(panel);
}
public String getGreeting(String name){
return "Hello "+name+"!";
}
}Paso 1 - Coloque BreakPoints
Coloque un punto de interrupción en la primera línea de onModuleLoad() de HelloWorld.java
Paso 2: aplicación de depuración
Ahora haga clic en el 
menú de la aplicación Depurar y seleccioneHelloWorld aplicación para depurar la aplicación.
Si todo está bien, debe ver el Modo de desarrollo de GWT activo en Eclipse que contiene una URL como se muestra a continuación. Haga doble clic en la URL para abrir la aplicación GWT.
Tan pronto como se inicie la aplicación, verá el enfoque en el punto de interrupción de Eclipse ya que hemos colocado el punto de interrupción en la primera línea del método de punto de entrada.
Puede ver el seguimiento de pila para subprocesos suspendidos.
Puede ver los valores de las expresiones.
Puede ver la lista de puntos de interrupción colocados.
Ahora siga presionando F6 hasta llegar a la última línea del método onModuleLoad (). Como referencia para las teclas de función, F6 inspecciona el código línea por línea, F5 avanza hacia adentro y F8 reanuda la aplicación. Ahora puede ver la lista de valores de todas las variables del método onModuleLoad ().
El código de cliente GWT se puede depurar de la misma forma que se puede depurar una aplicación Java. Coloque puntos de interrupción en cualquier línea y juegue con las capacidades de depuración de GWT.