サンプルコードでGWTの概要を理解する
GWT(ぐいっと)とは
GWTとは、ざっくりいうとajaxなアプリケーションをjsを書かずにJavaだけで書けちゃう、というGoogle製のフレームワーク。以前Java Servlet + Ajaxで書いたときにUIの処理をどう書くべきか？というところですごく悩んでしまった。(タグをjsでハードコーディングするのが気持ち悪かったり)
GWTならそのあたりを悩む必要がなさそうだ、という動機で試してみる。
なお、Androidに置き換えて考えると理解しやすそうだったので、随時Androidフレームワークのなにに相当するかをちょこちょこ書いています。
GWTのドキュメントについて
GAEと同様、GWTの日本語ドキュメント(スタート ガイド - クイック スタート - Google Web Toolkit - Google Code)はメンテされていないよう。(最新は2.2なのに1.6とか書いてあるみたい)
英語版(Get Started with the GWT SDK - Google Web Toolkit - Google Code)を見る。
とりあえずサンプルコードを動かすまでの手順
1)File>New> Web Application Projectを選択
2)Use Google Web Toolkitにチェックを入れる(GAEを使うのでGAEにも)
3)Generate GWT project sample codeにチェックを入れてFinish
プロジェクトが作成される。
とりあえず何も変更せずRun As からWeb Applicationを選んで
localhost:8888にアクセスすると、
「GWT module 'xxx' may need to be (re)compiled」と表示される。コンパイルが必要とのこと。
Eclipseに戻ってコンパイルをしてみる。
とりあえず設定は変更せず。
数十秒するとコンパイルが完了するので、再度localhost:8888にアクセスすると、サンプル画面が表示される。
チュートリアル斜め読みでGWTの概要を掴む
たくさんファイルが生成されるけど、とりあえず下記のファイルを抑えておけば良いようだ。
1) xxx.gwt.xml
パッケージ直下にある。Androidでいうマニフェストファイルのようなものかな。GWTアプリケーションはエントリーポイントクラスというものが必要で、このファイル内でその指定をしているようだ。
<!-- Specify the app entry point class. --> <entry-point class='com.naokichick.samplegwt.client.SampleGWT'/>
2) ホストページ
アプリケーション実行に必要なhtmlファイル。warフォルダ内にプロジェクト名.htmlである。
<h1>Web Application Starter Project</h1> <table align="center"> <tr> <td colspan="2" style="font-weight:bold;">Please enter your name:</td> </tr> <tr> <td id="nameFieldContainer"></td> <td id="sendButtonContainer"></td> </tr> <tr> <td colspan="2" style="color:red;" id="errorLabelContainer"></td> </tr> </table>
一部を抜粋。
ちなみにホストページが参照するcssもwarに入ってる。
3) エントリポイントクラス
clientパッケージ内の、プロジェクト名と同じ名前のjavaファイル。interface EntryPointを実装している。
アプリケーションを起動すると、このクラスのonModuleLoadが呼ばれる。AndroidのstartActivityにおけるActivity#onCreateみたいなもんと考えてしまおう。このメソッドの中身を見ると、ボタンの生成や配置をしていることがわかる。
final TextBox nameField = new TextBox(); nameField.setText("GWT User"); final Label errorLabel = new Label(); final Button sendButton = new Button("Send"); // We can add style names to widgets sendButton.addStyleName("sendButton"); // Add the nameField and sendButton to the RootPanel // Use RootPanel.get() to get the entire body element RootPanel.get("nameFieldContainer").add(nameField);
したの方でRootPanel.get("nameFieldContainer")というのがある。このコードで、ホストページのエレメントのインスタンスを取得できるようだ。
ホストページのtd#nameFieldContainerを取得している。Androidの、layoutファイル内の要素をfindViewByIdで取得するのに似てますね。
