GWT - aplikacja do debugowania

GWT zapewnia doskonałe możliwości debugowania kodu po stronie klienta i po stronie serwera.

W trybie programowania aplikacja GWT jest oparta na kodzie Java i nie jest tłumaczona na JavaScript.

Gdy aplikacja działa w trybie programistycznym, wirtualna maszyna języka Java (JVM) w rzeczywistości wykonuje kod aplikacji w postaci skompilowanego kodu bajtowego języka Java, używając funkcji GWT do łączenia się z oknem przeglądarki.

GWT używa wtyczki opartej na przeglądarce do łączenia się z maszyną JVM.

Dlatego programiści mogą swobodnie używać dowolnego środowiska IDE opartego na Javie do debugowania zarówno kodu GWT po stronie klienta, jak i kodu po stronie serwera.

W tym artykule zademonstrujemy użycie debugowania kodu klienta GWT przy użyciu Eclipse. Wykonamy następujące zadania -

Ustaw punkty przerwania w kodzie i zobacz je w BreakPoint Explorer.
Przechodź przez kod linia po linii podczas debugowania.
Wyświetl wartości zmiennej.
Sprawdź wartości wszystkich zmiennych.
Sprawdź wartość wyrażenia.
Wyświetl ramkę stosu dla zawieszonych wątków.

Przykład debugowania

Ten przykład poprowadzi Cię przez proste kroki, aby zademonstrować debugowanie aplikacji GWT. Wykonaj następujące kroki, aby zaktualizować aplikację GWT, którą utworzyliśmy w GWT - rozdział Tworzenie aplikacji -

Krok	Opis
1	Utwórz projekt o nazwie HelloWorld pod pakietem com.tutorialspoint, jak wyjaśniono w rozdziale GWT - Tworzenie aplikacji .
2	Zmodyfikuj HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html i HelloWorld.java, jak wyjaśniono poniżej. Resztę plików nie zmieniaj.
3	Skompiluj i uruchom aplikację, aby zweryfikować wynik zaimplementowanej logiki.

Poniżej znajduje się treść zmodyfikowanego deskryptora modułu 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>

Poniżej znajduje się zawartość zmodyfikowanego pliku arkusza stylów 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;
}

Poniżej znajduje się zawartość zmodyfikowanego pliku hosta HTML war/HelloWorld.html pomieścić dwa przyciski.

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

Miejmy następującą zawartość pliku Java src/com.tutorialspoint/HelloWorld.java za pomocą którego zademonstrujemy możliwości debugowania kodu 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+"!";
   }
}

Krok 1 - Umieść BreakPoints

Umieść punkt przerwania w pierwszym wierszu onModuleLoad() z HelloWorld.java

Krok 2 - Debugowanie aplikacji

Teraz kliknij

menu aplikacji Debuguj i wybierzHelloWorld aplikacji do debugowania aplikacji.

Jeśli wszystko jest w porządku, musisz zobaczyć tryb rozwoju GWT aktywny w Eclipse zawierający adres URL, jak pokazano poniżej. Kliknij dwukrotnie adres URL, aby otworzyć aplikację GWT.

Zaraz po uruchomieniu aplikacji zobaczysz fokus na punkcie przerwania Eclipse, ponieważ umieściliśmy punkt przerwania w pierwszej linii metody punktu wejścia.

Możesz zobaczyć ślad stosu dla zawieszonych wątków.

Możesz zobaczyć wartości wyrażeń.

Możesz zobaczyć listę umieszczonych punktów przerwania.

Teraz naciskaj klawisz F6, aż dojdziesz do ostatniej linii metody onModuleLoad (). Jako odniesienie dla klawiszy funkcyjnych, F6 sprawdza kod linia po linii, F5 przechodzi dalej, a F8 wznawia aplikację. Teraz możesz zobaczyć listę wartości wszystkich zmiennych metody onModuleLoad ().

Kod klienta GWT można debugować w taki sam sposób, jak aplikację Java. Umieść punkty przerwania w dowolnej linii i korzystaj z funkcji debugowania GWT.