GWT - Hata Ayıklama Uygulaması

GWT, istemci tarafında ve sunucu tarafı kodunda hata ayıklama yeteneği sağlar.

Geliştirme modunda, GWT Uygulaması Java kodu tabanlıdır ve JavaScript'e çevrilmez.

Bir uygulama geliştirme modunda çalışırken, Java Sanal Makinesi (JVM) aslında bir tarayıcı penceresine bağlanmak için GWT özelliğini kullanarak uygulama kodunu derlenmiş Java bayt kodu olarak çalıştırır.

GWT, JVM'ye bağlanmak için tarayıcı tabanlı eklenti kullanır.

Dolayısıyla geliştiriciler, hem istemci tarafı GWT Kodunda hem de sunucu tarafı kodunda hata ayıklamak için herhangi bir Java tabanlı IDE kullanmakta özgürdür.

Bu makalede, Eclipse kullanarak GWT İstemci kodunda hata ayıklamanın kullanımını göstereceğiz. Aşağıdaki görevleri yapacağız -

Kodda kesme noktaları ayarlayın ve bunları BreakPoint Explorer'da görün.
Hata ayıklama sırasında kodda satır satır ilerleyin.
Değişkenin değerlerini görüntüleyin.
Tüm değişkenlerin değerlerini inceleyin.
Bir ifadenin değerini inceleyin.
Askıdaki iplikler için yığın çerçevesini görüntüleyin.

Hata Ayıklama Örneği

Bu örnek, bir GWT uygulamasında hata ayıklamayı göstermek için sizi basit adımlardan geçirecektir. GWT - Uygulama Oluştur bölümünde oluşturduğumuz GWT uygulamasını güncellemek için aşağıdaki adımları izleyin -

Adım	Açıklama
1	GWT - Uygulama Oluştur bölümünde açıklandığı gibi com.tutorialspoint paketinin altında HelloWorld adıyla bir proje oluşturun .
2	Değiştir HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html ve HelloWorld.java olarak aşağıda açıklanmıştır. Geri kalan dosyaları değiştirmeden tutun.
3	Uygulanan mantığın sonucunu doğrulamak için uygulamayı derleyin ve çalıştırın.

Değiştirilmiş modül tanımlayıcısının içeriği aşağıdadır 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>

Değiştirilen Stil Sayfası dosyasının içeriği aşağıdadır 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şağıda, değiştirilmiş HTML ana bilgisayar dosyasının içeriği verilmiştir war/HelloWorld.html iki düğmeyi barındırmak için.

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

Aşağıdaki Java dosyası içeriğine sahip olalım src/com.tutorialspoint/HelloWorld.java hangisini kullanarak GWT Kodunun hata ayıklama yeteneğini göstereceğiz.

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+"!";
   }
}

Adım 1 - BreakPoint'leri yerleştirin

İlk satırına bir kesme noktası yerleştirin onModuleLoad() HelloWorld.java arasında

Adım 2 - Uygulamada Hata Ayıklama

Şimdi

Debug application menüsüne tıklayın ve seçinHelloWorld uygulamada hata ayıklama uygulaması.

Her şey yolundaysa, aşağıda gösterildiği gibi bir URL içeren Eclipse'de GWT Geliştirme Modunun etkin olduğunu görmelisiniz. GWT uygulamasını açmak için URL'ye çift tıklayın.

Uygulama başlar başlamaz, kesme noktasını giriş noktası yönteminin ilk satırına yerleştirdiğimiz için Eclipse kesme noktasına odaklandığını göreceksiniz.

Askıya alınmış iş parçacıkları için yığın izini görebilirsiniz.

İfadelerin değerlerini görebilirsiniz.

Yerleştirilen kesme noktalarının listesini görebilirsiniz.

Şimdi onModuleLoad () yönteminin son satırına ulaşana kadar F6'ya basmaya devam edin. İşlev tuşları için referans olarak, F6 kodu satır satır inceler, F5 daha ileri adım atar ve F8 uygulamaya devam eder. Artık onModuleLoad () yönteminin tüm değişkenlerinin değerlerinin listesini görebilirsiniz.

GWT istemci kodu, bir Java Uygulamasının hata ayıklamasıyla aynı şekilde ayıklanabilir. Herhangi bir satıra kesme noktaları yerleştirin ve GWT'nin hata ayıklama yetenekleriyle oynayın.