GWT - Aplicativo de Depuração

O GWT fornece excelente capacidade de depurar código do lado do cliente e também do lado do servidor.

Durante o modo de desenvolvimento, o aplicativo GWT é baseado em código Java e não é traduzido para JavaScript.

Quando um aplicativo está sendo executado no modo de desenvolvimento, a Java Virtual Machine (JVM) está realmente executando o código do aplicativo como bytecode Java compilado, usando o recurso GWT para se conectar a uma janela do navegador.

O GWT usa um plugin baseado em navegador para se conectar à JVM.

Portanto, os desenvolvedores estão livres para usar qualquer IDE baseado em Java para depurar o código GWT do lado do cliente e o código do lado do servidor.

Neste artigo, demonstraremos o uso da depuração do código do cliente GWT usando o Eclipse. Faremos as seguintes tarefas -

Defina pontos de interrupção no código e veja-os no BreakPoint Explorer.
Percorra o código linha por linha durante a depuração.
Veja os valores da variável.
Inspecione os valores de todas as variáveis.
Inspecione o valor de uma expressão.
Exibe o quadro de pilha para threads suspensos.

Exemplo de depuração

Este exemplo o levará por etapas simples para demonstrar a depuração de um aplicativo GWT. Siga as etapas a seguir para atualizar o aplicativo GWT que criamos no GWT - capítulo Criar aplicativo -

Degrau	Descrição
1	Crie um projeto com o nome HelloWorld em um pacote com.tutorialspoint conforme explicado no capítulo GWT - Criar aplicativo .
2	Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
3	Compile e execute o aplicativo para verificar o resultado da lógica implementada.

A seguir está o conteúdo do descritor do 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 seguir está o conteúdo do arquivo de folha 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 seguir está o conteúdo do arquivo host HTML modificado war/HelloWorld.html para acomodar dois botões.

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

Vamos ter o seguinte conteúdo do arquivo Java src/com.tutorialspoint/HelloWorld.java usando o qual iremos demonstrar a capacidade de depuração do 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+"!";
   }
}

Etapa 1 - Coloque BreakPoints

Coloque um ponto de interrupção na primeira linha de onModuleLoad() de HelloWorld.java

Etapa 2 - Depurar aplicativo

Agora clique no

menu do aplicativo de depuração e selecioneHelloWorld aplicativo para depurar o aplicativo.

Se tudo estiver bem, você deve ver o modo de desenvolvimento GWT ativo no Eclipse contendo uma URL conforme mostrado abaixo. Clique duas vezes no URL para abrir o aplicativo GWT.

Assim que o aplicativo for iniciado, você verá o foco no ponto de interrupção do Eclipse, pois colocamos o ponto de interrupção na primeira linha do método de ponto de entrada.

Você pode ver o rastreamento de pilha para threads suspensos.

Você pode ver os valores das expressões.

Você pode ver a lista de pontos de interrupção colocados.

Agora continue pressionando F6 até chegar à última linha do método onModuleLoad (). Como referência para as teclas de função, F6 inspeciona o código linha por linha, F5 dá um passo adiante e F8 retoma o aplicativo. Agora você pode ver a lista de valores de todas as variáveis do método onModuleLoad ().

O código do cliente GWT pode ser depurado da mesma forma que um aplicativo Java pode ser depurado. Coloque pontos de interrupção em qualquer linha e brinque com os recursos de depuração do GWT.