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

タグ付き nameFieldContainer sendButtonContainer IDはにマップされますボタンテキストボックスコンポーネント。

9. メインモジュール記述子

Google_web_toolkit.gwt.xmlメインモジュール記述子ファイルの一般的な構成を見てみましょう。

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

com.google.gwt.user.Userインターフェースを含めることで、コアGWTのものにアクセスできるようにします。 また、アプリケーションのデフォルトのスタイルシートを選択できます。 この場合は、*。clean.Cleanです。

その他の利用可能なスタイリングオプションは、*。dark.Dark*。standard.Standard*。chrome.Chromeです。 com.baeldung.client.Google_web_toolkit も、ここでタグでマークされています。

10. イベントハンドラーの追加

マウスまたはキーボードの入力イベントを管理するために、GWTはいくつかのハンドラーを使用します。 これらはすべてEventHandlerインターフェースから拡張され、イベントタイプ引数を持つメソッドを持っています。

この例では、マウスクリックイベントハンドラーを登録します。

これにより、 ボタンが押されるたびに、 onClick()メソッドが起動されます。

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

ここで、ウィジェットの状態と動作を変更できます。 この例では、 vPanel を非表示にし、sendButtonを有効にします。

もう1つの方法は、内部クラスを定義し、必要なインターフェイスを実装することです。

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

ClickHandler に加えて、キープレスイベントをキャッチするためのKeyUpHandlerインターフェイスもここに含まれています。 ここで、 onKeyUp()メソッド内で、KeyUpEventを使用して、ユーザーがEnterキーを押したかどうかを確認できます。

ここでは、MyHandlerクラスを使用して両方のイベントハンドラーを登録する方法を説明します。

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

11. サーバーの呼び出し

これで、サーバーにメッセージを送信する準備が整いました。 非同期sendMessage()メソッドを使用してリモートプロシージャコールを実行します。

メソッドの2番目のパラメーターはAsyncCallbackですインターフェイス。ここで、Stringは、対応する同期メソッドの戻り型です。

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);
    }
});

ご覧のとおり、レシーバーは各応答タイプに対して onSuccess(String result) およびonFailure(Throwable)メソッドを実装しています。

応答結果に応じて、「サーバーエラーが発生しました」というエラーメッセージを設定するか、結果値をコンテナに表示します。

12. CSSスタイリング

Eclipseプラグインを使用してプロジェクトを作成すると、Google_web_toolkit.cssファイルが/webapp ディレクトリの下に自動的に生成され、メインのHTMLファイルにリンクされます。

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

もちろん、プログラムで特定のUIコンポーネントのカスタムスタイルを定義することもできます。

sendButton.addStyleName("sendButton");

ここでは、クラス名sendButtonのCSSスタイルをsendButtonコンポーネントに割り当てます。

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

13. 結果

その結果、次のような単純なWebアプリケーションができました。

ここでは、「こんにちは」というメッセージをサーバーに送信し、「こんにちは、こんにちは」と出力します。 画面上の応答。

14. 結論

このクイック記事では、GWTフレームワークの基本について学びました。 その後、SDKのアーキテクチャ、ライフサイクル、機能、およびさまざまなコンポーネントについて説明しました。

その結果、簡単なWebアプリケーションの作成方法を学びました。

そして、いつものように、チュートリアルの完全なソースコードはGitHub利用できます。