GWTの紹介

Posted on: 2019-10-18 2019-11-05
Tags: Library

1前書き

GWTまたは

Google Web Toolkitは、Java

で高性能Webアプリケーションを構築するためのフレームワークです。

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

** 2 GWT SDK

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

2.1. Java API

GWT APIには、ユーザーインターフェイスの構築、サーバー呼び出し、国際化、単体テストの実行用のクラスがあります。詳細については、javaのドキュメントhttp://www.gwtproject.org/javadoc/latest/index.htmlを参照してください。

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はhttp://www.gwtproject.org/download.html[download]ページにあります。セットアップの残りはhttp://www.gwtproject.org/gettingstarted.html[取得開始]ページで利用可能です。

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アプリケーションを構築するために使用するJava APIが含まれています** 。

gwt-dev

には、コンパイラ、デプロイ、またはアプリケーションのホスティング用のコードがあります。

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

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

すべてのアーティファクトはhttps://mvnrepository.com/artifact/com.google.gwt[Maven Central]からダウンロードできます。

4応用

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

一般的に、GWTアプリケーションはサーバーとクライアントの部分で構成されています** 。クライアント側はサーバーに接続するためにHTTP要求を行います。それを可能にするために、GWTはRemote Procedure Callまたは単に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に通知するには

async

が必要です。このようにして、作業中のUIスレッドがブロックされるのを防ぎます。

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

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

一般に、すべてのUIコンポーネントは

Widget

クラスから継承されています。

視覚的には、画面上で見たり、クリックしたり、移動したりできる要素ウィジェットがあります。

コンポーネントウィジェット

–

TextBox

、

TextArea

、

Button

、

RadioButton

、

CheckBox

など

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

パネルウィジェット

–

HorizontalPanel

、

VerticalPanel

、

PopupPanel

、

TabPanel

など

ウィジェットやその他のコンポーネントをコードに追加するたびに、GWTはview要素をブラウザの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

インターフェースを実装して、それをモジュールのメインエントリーとしてマークします** 。 Javaコードが実行される、対応するHTMLドキュメントに接続します。

GWT UIコンポーネントを定義してから、同じIDを持つHTMLタグに割り当てることができます。

エントリポイントクラスはエントリポイント

onModuleLoad（）

メソッドをオーバーライドします。これはモジュールをロードするときに自動的に呼び出されます

。

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

それでは、リモートサーバーインスタンスを作成する方法を見てみましょう。そのために、

GWT.create（MessageService.class）

staticメソッドを使用します。

要求された型はコンパイル時に決定されます。このメソッドを見ると、

GWTコンパイラはコンパイル時に多くのバージョンのコードを生成します。実行時のブートストラップ中に特定のクライアントによってロードされる必要があるのはそのうちの1つだけです

。この機能はRPC呼び出しで広く使用されています。

ここでは

Button

と

TextBox

ウィジェットも定義します。

それらをDOMツリーに追加するために

RootPanel

クラスを使います

。これはルートパネルであり、ウィジェット要素をバインドするためのシングルトン値を返します。

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

まず、

sendButtonContainer

idでマークされたルートコンテナを取得します。

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

nameFieldContainer

および

sendButtonContainer

idを持つ

<td>

タグは、

Button

および

TextBox

コンポーネントにマップされます。

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

もここで

<entry-point/> __タグでマークされています。

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>

interfaceです。ここで、

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プラグインを使用してプロジェクトを作成すると、

/webapp

ディレクトリの下に

Google

web

toolkit.css

ファイルが自動的に生成され、それがメインの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アプリケーションがあります。

リンク:/uploads/simpleApplication-300×259-100×86.png%20100w[]

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

14. 結論

このクイック記事では、GWTフレームワークの基本について学びました。

その後、そのSDKのアーキテクチャ、ライフサイクル、機能、およびさまざまなコンポーネントについて説明しました。

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

そして、いつものように、チュートリアルの完全なソースコードはhttps://github.com/eugenp/tutorials/tree/master/google-web-toolkit[GitHubで利用可能]です。