GWTの概要

1. 序章

GWTまたはGoogleWeb Toolkitは、Javaで高性能Webアプリケーションを構築するためのフレームワークです。

このチュートリアルでは、その主要な機能のいくつかに焦点を当てて説明します。

2. GWTSDK

SDKには、Java APIライブラリ、コンパイラ、および開発サーバーが含まれています。

2.1. Java API

GWT APIには、ユーザーインターフェースの構築、サーバー呼び出しの作成、国際化、単体テストの実行のためのクラスがあります。 詳細については、Javaドキュメントこちらを確認してください。

2.2. コンパイラ

簡単に言えば、GWTコンパイラはJavaコードからJavascriptへのソーストランスレータです。 コンパイルの結果はJavascriptアプリケーションです。

その作業のロジックには、コードから未使用のクラス、メソッド、フィールドをトリミングし、Javascript名を短縮することが含まれます。

この利点により、JavascriptプロジェクトにAjaxライブラリを含める必要がなくなりました。 もちろん、コードのコンパイル中にヒントを設定することもできます。

ここにいくつかの有用なGWTCompilerパラメーターがあります。

• -logLevel – ERROR、WARN、INFO、TRACE、DEBUG、SPAM、ALLログレベルのいずれかを設定します
• -workdir –コンパイラの作業ディレクトリ
• -gen –生成されたファイルを書き込むためのディレクトリ
• -out –出力ファイルディレクトリ
• -optimize –コンパイラの最適化レベルを0から9に設定します
• -style –スクリプト出力スタイル OBF、PRETTYまたはDETAILED
• -module [s] –コンパイルするモジュールの名前

3. 設定

最新のSDKは、ダウンロードページから入手できます。 残りのセットアップは、はじめにページで利用できます。

3.1. Maven

Mavenを使用してプロジェクトをセットアップするには、pom.xmlに次の依存関係を追加する必要があります。

<dependency>
    <groupId>com.google.gwt</groupId>
    <artifactId>gwt-servlet</artifactId>
    <scope>runtime</scope>
</dependency>
<dependency>
    <groupId>com.google.gwt</groupId>
    <artifactId>gwt-user</artifactId>
    <scope>provided</scope>
</dependency>
<dependency>
    <groupId>com.google.gwt</groupId>
    <artifactId>gwt-dev</artifactId>
    <scope>provided</scope>
</dependency>

gwt-servletライブラリは、GWT-RPCエンドポイントを呼び出すためのサーバー側コンポーネントをサポートします。 gwt-userには、Webアプリケーションの構築に使用するJavaAPIが含まれています 。 gwt-dev には、アプリケーションのコンパイラー、デプロイメント、またはホスティング用のコードがあります。

すべての依存関係が同じバージョンを使用するようにするには、親GWT依存関係を含める必要があります。

<dependency>
    <groupId>com.google.gwt</groupId>
    <artifactId>gwt</artifactId>
    <version>2.8.2</version>
    <type>pom</type>
    <scope>import</scope>
</dependency>

すべてのアーティファクトは、 MavenCentralからダウンロードできます。

4. 応用

簡単なWebアプリケーションを作成しましょう。 サーバーにメッセージを送信し、応答を表示します。

一般に、GWTアプリケーションはサーバーとクライアントのパーツで構成されます。 クライアント側は、サーバーに接続するためにHTTP要求を行います。 それを可能にするために、GWTはリモートプロシージャコールまたは単にRPCメカニズムを使用します。

5. GWTとRPC

アプリケーションに戻って、RPC通信がどのように行われるかを見てみましょう。 そのために、サーバーからメッセージを受信するサービスを作成します。

まず、インターフェイスを作成しましょう。

@RemoteServiceRelativePath("greet")
public interface MessageService extends RemoteService {
    String sendMessage(String message) throws IllegalArgumentException;
}

@RemoteServiceRelativePathアノテーションは、サービスをモジュールの/message相対URLにマップします。 MessageServiceは、RPC通信を実行するためにRemoteServiceマーカーインターフェイスから拡張する必要があります 。

MessageService の実装は、サーバー側にあります。

public class MessageServiceImpl extends RemoteServiceServlet 
  implements MessageService {

    public String sendMessage(String message) 
      throws IllegalArgumentException {
        if (message == null) {
            throw new IllegalArgumentException("message is null");
        }

        return "Hello, " + message + "!<br><br> Time received: " 
          + LocalDateTime.now();
    }
}

サーバークラスは、 RemoteServiceServlet基本サーブレットクラスから拡張されています。クライアントからの着信要求を自動的に逆シリアル化し、サーバーからの発信応答をシリアル化します。

それでは、クライアント側からどのように使用するかを見てみましょう。 MessageServiceは、当社のサービスの決定版にすぎません。

クライアント側で実行するには、サービスの非同期バージョンを作成する必要があります。

public interface MessageServiceAsync {
    void sendMessage(String input, AsyncCallback<String> callback) 
      throws IllegalArgumentException;
}

ここでは、 getMessage（）メソッドに追加の引数があります。 非同期呼び出しが完了したときにUIに通知するために非同期が必要です。 このようにして、動作中のUIスレッドがブロックされないようにします。

6. コンポーネントとそのライフサイクル

SDKは、グラフィカルインターフェイスを設計するためのいくつかのUI要素とレイアウトを提供します。

一般に、すべてのUIコンポーネントはWidgetクラスから拡張されます。 視覚的には、画面上で表示、クリック、または移動できる要素ウィジェットがあります。

• コンポーネントウィジェット– TextBox 、 TextArea 、 Button 、 RadioButton 、CheckBoxなど…

画面を構成および整理するレイアウトウィジェットまたはパネルウィジェットがあります。

• パネルウィジェット– HorizontalPanel 、 VerticalPanel 、 PopupPanel 、TabPanelなど…

ウィジェットやその他のコンポーネントをコードに追加するたびに、GWTはビュー要素をブラウザーのDOMにリンクするために一生懸命働きます。

コンストラクターは常にルートDOM要素を初期化します。 子ウィジェットを親コンポーネントにアタッチすると、DOMレベルでのバインドも発生します。 エントリポイントクラスには、最初に呼び出されるロード関数が含まれています。 ここでウィジェットを定義します。

7. エントリーポイント

アプリケーションのメインエントリポイントを詳しく見てみましょう。

public class Google_web_toolkit implements EntryPoint {

    private MessageServiceAsync messageServiceAsync = GWT.create(MessageService.class);

    public void onModuleLoad() {
        Button sendButton = new Button("Submit");
        TextBox nameField = new TextBox();
        nameField.setText("Hi there");

        sendButton.addStyleName("sendButton");

        RootPanel.get("nameFieldContainer").add(nameField);
        RootPanel.get("sendButtonContainer").add(sendButton);
    }
}

すべてのUIクラスは、com.google.gwt.core.client.EntryPointインターフェースを実装して、モジュールのメインエントリとしてマークします。 対応するHTMLドキュメントに接続し、そこでJavaコードが実行されます。

GWT UIコンポーネントを定義し、同じIDを持つHTMLタグに割り当てることができます。 エントリポイントクラスは、モジュールのロード時に自動的に呼び出されるエントリポイントonModuleLoad（）メソッドをオーバーライドします。

ここでは、UIコンポーネントを作成し、イベントハンドラーを登録し、ブラウザーのDOMを変更します。

それでは、リモートサーバーインスタンスを作成する方法を見てみましょう。 そのために、 GWT.create（MessageService.class）静的メソッドを使用します。

コンパイル時に要求されたタイプを判別します。 このメソッドを見ると、 GWTコンパイラはコンパイル時に多くのバージョンのコードを生成しますが、実行時のブートストラップ中に特定のクライアントがロードする必要があるのはそのうちの1つだけです。 この機能は、RPC呼び出しで広く使用されています。

ここでは、ButtonウィジェットとTextBoxウィジェットも定義します。 それらをDOMツリーに追加するには、RootPanelクラスを使用します。 これはルートパネルであり、ウィジェット要素をバインドするためのシングルトン値を返します。

RootPanel.get("sendButtonContainer").add(sendButton);

まず、 sendButtonContaineridでマークされたルートコンテナを取得します。 sendButtonをコンテナにアタッチした後。

8. HTML

/ webapp フォルダー内に、Google_web_toolkit.htmlファイルがあります。

タグ要素に特定のIDをマークして、フレームワークがそれらをJavaオブジェクトにバインドできるようにすることができます：

<body>
    <h1>Sample GWT Application</h1>
    <table align="center">
        <tr>
            <td colspan="2" style="font-weight:bold;">Please enter your message:</td>
        </tr>
        <tr>
            <td id="nameFieldContainer"></td>
            <td id="sendButtonContainer"></td>
        </tr>
    </table>
</body>

The

<module rename-to='google_web_toolkit'>
    <inherits name='com.google.gwt.user.User'/>
    <inherits name='com.google.gwt.user.theme.clean.Clean'/>
    <entry-point class='com.baeldung.client.Google_web_toolkit'/>
</module>

closeButton.addClickHandler(new ClickHandler() {
    public void onClick(ClickEvent event) {
        vPanel.hide();
        sendButton.setEnabled(true);
        sendButton.setFocus(true);
    }
});

class MyHandler implements ClickHandler, KeyUpHandler {

    public void onClick(ClickEvent event) {
        // send message to the server
    }

    public void onKeyUp(KeyUpEvent event) {
        if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
            // send message to the server
        }
    }
}

MyHandler handler = new MyHandler();
sendButton.addClickHandler(handler);
nameField.addKeyUpHandler(handler);

messageServiceAsync.sendMessage(textToServer, new AsyncCallback<String>() {
    public void onFailure(Throwable caught) {
        serverResponseLabel.addStyleName("serverResponseLabelError");
        serverResponseLabel.setHTML("server error occurred");
        closeButton.setFocus(true);
    }

    public void onSuccess(String result) {
        serverResponseLabel.setHTML(result);
        vPanel.setVisible(true);
    }
});

<link type="text/css" rel="stylesheet" href="Google_web_toolkit.css">

sendButton.addStyleName("sendButton");

.sendButton {
    display: block;
    font-size: 16pt;
}