TOC

GWTの紹介

GWTの概要

1. 前書き

GWTまたはGoogle Web Toolkit is a framework for building high-performance web applications in Java。

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

2. GWT SDK

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

2.1. Java API

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

2.2. コンパイラ

Simply put, GWT compiler is a source translator from Java code into the Javascript。 コンパイルの結果は、Javascriptアプリケーションです。

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

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

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

  • -logLevel –ERROR, WARN, INFO, TRACE, DEBUG, SPAM, ALLログレベルの1つを設定します

  • -workdir –コンパイラの作業ディレクトリ

  • -gen –生成されたファイルを書き込むディレクトリ

  • -out –出力ファイルディレクトリ

  • -optimize –コンパイラの最適化レベルを0から9に設定します

  • -style –スクリプト出力スタイルOBF, PRETTYまたはDETAILED

  • -module[s] –コンパイルするモジュールの名前

3. セットアップ

最新のSDKは、downloadページから入手できます。 残りのセットアップは、getting startedページで利用できます。

3.1. メーベン

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


    com.google.gwt
    gwt-servlet
    runtime


    com.google.gwt
    gwt-user
    provided


    com.google.gwt
    gwt-dev
    provided

The gwt-servlet library supports the server-side components for invoking a GWT-RPC endpoint. gwt-user contains the Java API which we’ll use to build our web application。 gwt-devには、アプリケーションのコンパイラー、デプロイメント、またはホスト用のコードが含まれています。

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


    com.google.gwt
    gwt
    2.8.2
    pom
    import

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

4. 応用

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

In general, a GWT application consists of the server and the client parts。 クライアント側は、サーバーに接続するためのHTTP要求を作成します。 それを可能にするために、GWTはリモートプロシージャコールまたは単にRPCメカニズムを使用します。

5. GWTとRPC

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

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

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

The @RemoteServiceRelativePath annotation maps the service to the module’s /message relative URL. MessageService should extend from RemoteService marker interface to perform RPC communication。

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 + "!

 Time received: "
          + LocalDateTime.now();
    }
}

サーバークラスは、 RemoteServiceServletの基本サーブレットクラス.It will automatically deserialize incoming requests from the client and serialize outgoing responses from the serverから拡張されています。

それでは、クライアント側からどのように使用するかを見てみましょう。 The MessageService is only a definitive version of our service。

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

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

ここでは、getMessage()メソッドに追加の引数があります。 We need async to notify the UI when the asynchronous call is complete。 このようにして、動作中のUIスレッドがブロックされるのを防ぎます。

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

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

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

  • component widgets –TextBox、TextArea、Button、RadioButton、CheckBoxなど…

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

  • panel widgets –HorizontalPanel、VerticalPanel、PopupPanel、TabPanelなど…

Every time we add a widget or any other component to the code, GWT works hard to link the view element with the browser’s DOM。

コンストラクターは常にルートDOM要素を初期化します。 When we attach a child widget to a parent component, it also causes binding at the DOM level。 エントリポイントクラスには、最初に呼び出されるロード関数が含まれています。 ここでウィジェットを定義します。

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

Every UI class implements the com.google.gwt.core.client.EntryPoint interface to mark it as a main entry for the module。 Javaコードが実行される、対応するHTMLドキュメントに接続します。

GWT UIコンポーネントを定義し、同じ特定のIDを持つHTMLタグに割り当てることができます。 Entry point class overrides the entry point onModuleLoad() method, which is called automatically when loading the module。

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

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

コンパイル時に要求されたタイプを決定します。 このメソッドを見ると、GWT compiler generates many versions of code at compile time, only one of which needs to be loaded by a particular client during bootstrapping at runtimeです。 この機能はRPC呼び出しで広く使用されています。

ここでは、ButtonウィジェットとTextBoxウィジェットも定義します。 To add attach them into the DOM tree we use the RootPanel class。 これはルートパネルであり、ウィジェット要素をバインドするシングルトン値を返します。 

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

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

8. HTML

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

We can mark the tag elements with the specific ids so the framework can bind them into Java objects： 


    
Sample GWT Application

    

        

            Please enter your message:

nameFieldContainerおよびsendButtonContainer IDを持つ<td>タグは、ButtonおよびTextBoxコンポーネントにマップされます。

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

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

We make core GWT stuff accessible by including the com.google.gwt.user.User interface。 また、アプリケーションのデフォルトのスタイルシートを選択できます。 この場合、*.clean.Cleanです。

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

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

マウスまたはキーボード入力イベントを管理するために、GWTはいくつかのハンドラーを使用します。 They all extend from EventHandler interface and have a method with the event type argument。

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

これにより、 ボタンが押されるたびに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インターフェースも含まれています。 ここでは、inside of onKeyUp() method we can use the KeyUpEvent to check if the user pressed the Enter keyです。

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

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

11. サーバーの呼び出し

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

The second parameter of the method is AsyncCallback<String> interface, where the String is the return type of the corresponding synchronous method： 

messageServiceAsync.sendMessage(textToServer, new AsyncCallback() {
    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);
    }
});

ご覧のとおり、receiver implementsonSuccess(String result)and onFailure(Throwable)method for each response typeです。

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

12. CSSスタイリング

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

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

sendButton.addStyleName("sendButton");

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

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

13. 結果

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

image

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

14. 結論

In this quick article, we learned about the basics of GWT Framework。 その後、そのSDKのアーキテクチャ、ライフサイクル、機能、さまざまなコンポーネントについて説明しました。

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

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

Related