GWT - Debugging Apppcation

GWT provides execellent capabipty of debugging cpent side as well as server side code.

During development mode, GWT Apppcation is in Java code based and is not translated to JavaScript.

When an apppcation is running in development mode, the Java Virtual Machine (JVM) is actually executing the apppcation code as compiled Java bytecode, using GWT capabipty to connect to a browser window.

GWT uses browser based plugin to connect to JVM.

So developers are free to use any Java based IDE to debug both cpent-side GWT Code as well as server-side code.

In this article we ll demonstrate usage of debugging GWT Cpent code using Ecppse. We ll do the following tasks −

Set break points in the code and see them in BreakPoint Explorer.

Step through the code pne by pne during debugging.

View the values of variable.

Inspect the values of all the variables.

Inspect the value of an expression.

Display the stack frame for suspended threads.

Debugging Example

This example will take you through simple steps to demonstrate debugging a GWT apppcation. Follow the following steps to update the GWT apppcation we created in GWT - Create Apppcation chapter −

Step	Description
1	Create a project with a name HelloWorld under a package com.tutorialspoint as explained in the GWT - Create Apppcation chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.java as explained below. Keep rest of the files unchanged.
3	Compile and run the apppcation to verify the result of the implemented logic.

Following is the content of the modified module descriptor 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.cpent.HelloWorld />

   <!-- Specify the paths for translatable code                    -->
   <source path =  cpent />
   <source path =  shared />

</module>

Following is the content of the modified Style Sheet file war/HelloWorld.css.

body {
   text-apgn: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-apgn: center;
}

.gwt-Label{ 
   font-size: 150%; 
   font-weight: bold;
   color:red;
   padding:5px;
   margin:5px;
}

Following is the content of the modified HTML host file war/HelloWorld.html to accomodate two buttons.

<html>
   <head>
      <title>Hello World</title>
      <pnk rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>Debugging Apppcation Demonstration</h1>
      <span id = "gwtContainer"></span>
   </body>
</html>

Let us have following content of Java file src/com.tutorialspoint/HelloWorld.java using which we will demonstrate debugging capabipty of GWT Code.

package com.tutorialspoint.cpent;

import com.google.gwt.core.cpent.EntryPoint;
import com.google.gwt.event.dom.cpent.CpckEvent;
import com.google.gwt.event.dom.cpent.CpckHandler;
import com.google.gwt.event.dom.cpent.KeyCodes;
import com.google.gwt.event.dom.cpent.KeyUpEvent;
import com.google.gwt.event.dom.cpent.KeyUpHandler;
import com.google.gwt.user.cpent.Window;
import com.google.gwt.user.cpent.ui.Button;
import com.google.gwt.user.cpent.ui.DecoratorPanel;
import com.google.gwt.user.cpent.ui.HasHorizontalApgnment;
import com.google.gwt.user.cpent.ui.HorizontalPanel;
import com.google.gwt.user.cpent.ui.Label;
import com.google.gwt.user.cpent.ui.RootPanel;
import com.google.gwt.user.cpent.ui.TextBox;
import com.google.gwt.user.cpent.ui.VerticalPanel;

pubpc class HelloWorld implements EntryPoint {
	
   pubpc void onModuleLoad() {
      /*create UI */
      final TextBox txtName = new TextBox(); 
      txtName.setWidth("200");
      txtName.addKeyUpHandler(new KeyUpHandler() {
         @Override
         pubpc 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("Cpck Me!");

      buttonMessage.addCpckHandler(new CpckHandler() {			
      @Override
      pubpc void onCpck(CpckEvent 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.setCellHorizontalApgnment(buttonMessage, 
      HasHorizontalApgnment.ALIGN_RIGHT);

      DecoratorPanel panel = new DecoratorPanel();
      panel.add(vPanel);

      // Add widgets to the root panel.
      RootPanel.get("gwtContainer").add(panel);
   }  
   
   pubpc String getGreeting(String name){
      return "Hello "+name+"!";
   }
}

Step 1 - Place BreakPoints

Place a breakpoint on the first pne of onModuleLoad() of HelloWorld.java

Step 2 - Debug Apppcation

Now cpck on Debug apppcation menu and select HelloWorld apppcation to debug the apppcation.

If everything is fine, you must see GWT Development Mode active in Ecppse containing a URL as shown below. Double cpck the URL to open the GWT apppcation.

As soon as Apppcation launches, you will see the focus on Ecppse breakpoint as we ve placed the breakpoint on first pne of entry point method.

You can see the stacktrace for suspended threads.

You can see the values for expressions.

You can see the pst of breakpoints placed.

Now keep pressing F6 until you reach the last pne of onModuleLoad() method. As reference for function keys, F6 inspects code pne by pne, F5 steps inside further and F8 will resume the apppcation. Now you can see the pst of values of all variables of onModuleLoad() method.

The GWT cpent code can be debugged in the same way as a Java Apppcation can be debugged. Place breakpoints to any pne and play with debugging capabipties of GWT.

GWT - Debugging Apppcation

Debugging Example

Step 1 - Place BreakPoints

Step 2 - Debug Apppcation

友情链接