Gwt-debug-application

提供：Dev Guides
移動先:案内、検索

GWT-アプリケーションのデバッグ

GWTは、クライアント側とサーバー側のコードをデバッグする優れた機能を提供します。

開発モードでは、GWTアプリケーションはJavaコードベースであり、JavaScriptに変換されません。

アプリケーションが開発モードで実行されている場合、Java仮想マシン（JVM）は実際にアプリケーションコードをコンパイル済みJavaバイトコードとして実行し、GWT機能を使用してブラウザーウィンドウに接続します。

GWTはブラウザーベースのプラグインを使用してJVMに接続します。

そのため、開発者はJavaベースのIDEを自由に使用して、クライアント側のGWTコードとサーバー側のコードの両方をデバッグできます。

この記事では、Eclipseを使用したGWTクライアントコードのデバッグの使用方法を示します。 私たちは次のタスクを行います-

  • コードにブレークポイントを設定し、BreakPoint Explorerで確認します。
  • デバッグ中にコードを1行ずつステップ実行します。
  • 変数の値を表示します。
  • すべての変数の値を調べます。
  • 式の値を調べます。
  • 中断されたスレッドのスタックフレームを表示します。

デバッグの例

この例では、GWTアプリケーションのデバッグを示す簡単な手順を紹介します。 次の手順に従って、_GWTで作成したGWTアプリケーションを更新します-アプリケーションの作成_の章-

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

以下は、変更されたモジュール記述子 src/com.finddevguides/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.finddevguides.client.HelloWorld'/>

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

</module>

以下は、変更されたスタイルシートファイル 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;
}

以下は、2つのボタンに対応するように変更されたHTMLホストファイル war/HelloWorldl の内容です。 

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

Javaファイル src/com.finddevguides/HelloWorld.java の以下のコンテンツを使用して、GWTコードのデバッグ機能を示します。 

package com.finddevguides.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+"!";
   }
}

ステップ1-ブレークポイントを配置する

HelloWorld.javaの* onModuleLoad（）*の最初の行にブレークポイントを配置します

ブレークポイントの適用GWT

ステップ2-アプリケーションのデバッグ

次に、アプリケーションのデバッグアプリケーションメニューのデバッグをクリックし、 HelloWorld アプリケーションを選択してアプリケーションをデバッグします。

GWTデバッグボタン

すべてが正常な場合、以下に示すURLを含むEclipseでGWT開発モードがアクティブになっている必要があります。 URLをダブルクリックしてGWTアプリケーションを開きます。

GWTデバッグアプリケーション

アプリケーションが起動するとすぐに、エントリポイントメソッドの最初の行にブレークポイントを配置したため、Eclipseブレークポイントにフォーカスが表示されます。

GWTデバッグアプリケーション

中断されたスレッドのスタックトレースを確認できます。

GWTデバッグStacktrace

式の値を確認できます。

GWTデバッグ式

配置されたブレークポイントのリストを見ることができます。

GWTデバッグブレークポイント

onModuleLoad（）メソッドの最後の行に到達するまでF6を押し続けます。 ファンクションキーの参照として、F6はコードを1行ずつ検査し、F5はさらに内側に進み、F8はアプリケーションを再開します。 これで、onModuleLoad（）メソッドのすべての変数の値のリストを確認できます。

GWTデバッグ変数

GWTクライアントコードは、Javaアプリケーションのデバッグと同じ方法でデバッグできます。 任意の行にブレークポイントを配置し、GWTのデバッグ機能を試してください。

「https://www.finddevguides.com/index.php?title=Gwt-debug-application&oldid=14807」から取得
Powered by MediaWiki