GWTの紹介
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で利用可能]です。