GWTでHello World

java null

GWTのデフォルト作成されるプロジェクトは複雑なのでシンプルなのを作る

メモ
Widget：GWTのUIコンポーネント。Button、Labelなど
RootPanel：HTMLの部。各WidgetはRootPanelクラスに追加する


アプリケーション概要

  • プロジェクト名：GwtSampleHelloWorld
  • Buttonを押す
  • 「HelloWorld」の文字列を表示

画面要素

  • Label：文字列「HelloWorld」表示用
  • Button：HelloWorldの表示をする

作成手順
プロジェクトの作成

  • EclipseのGoogleアイコンをクリック
    • ProjectName：GwtSampleHelloWorld
    • Package：sample.helloworld
    • GoogleSDK：UseGoogleUpEngineのチェックをOff

自動生成ファイル

  • sample.helloworldパッケージ
  • sample.helloworld.clientパッケージ
    • GreetingService.java(インターフェース）
    • GreetingServiceAsync.java(インターフェース）
    • GwtSampleHelloWorld.java（クラス）
  • sample.helloworld.serverパッケージ
    • GreetingServiceImpl.java（クラス）
  • warフォルダ以下
    • WEB-INF
    • GwtSampleHelloWorld.css
    • GwtSampleHelloWorld.html

修正対象ファイル

  • GwtSampleHelloWorld.java
  • GwtSampleHelloWorld.html


GwtSampleHelloWorld.htmlの修正

  • 「Please enter your name:」→「GWT Sample HelloWorld」
  • 「id="nameFieldContainer"」→「id="button」
  • 「id="sendButtonContainer"」→「id="label"」

各id属性は後述するGwtSampleHelloWorldクラスのWidgetに結びつけるのに使う

    <table align="center">
      <tr>
        <td colspan="2" style="font-weight:bold;">GWT Sample HelloWorld</td>        
      </tr>
      <tr>
        <td id="button"></td>
        <td id="label"></td>
      </tr>
    </table>

GwtSampleHelloWorldの変更

  • onModuleLoad()の定義だけ残してあとは削除
package sample.helloworld.client;

import com.google.gwt.core.client.EntryPoint;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class GwtSampleHelloWorld implements EntryPoint {
	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
	}
}

UI作成

  • Button
  • Label

匿名クラス内で使用するため各Widgetはfinale指定にする。

		final Button button = new Button("表示");
		final Label label = new Label("ここに表示されます。");

buttonにクリックイベントを追加する

  • ClickHandlerを追加し、OnClickイベントと結びつける

※GWTのバージョン1.6（？）からはClickListenerを結びつけるとDeprecatedWarningになりEclipse上では消去線が引かれる

		button.addClickHandler(new ClickHandler(){

			@Override
			public void onClick(ClickEvent event) {
				
			}
			
		});

OnClick処理を追加する

label.setText("Hello World!");

UIをRootPanelに追加する
RootPanel.get(文字列)でGwtSampleHelloWorld.htmlのid属性と結びつける

		RootPanel.get("button").add(button);
		RootPanel.get("label").add(label);

実行
プロジェクト右クリック→Run AS→Web Apllication

ボタンをクリックするとHello Worldが表示される

ソース

package sample.helloworld.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class GwtSampleHelloWorld implements EntryPoint {
	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		//UIの作成
		final Button button = new Button("表示");
		final Label label = new Label("ここに表示されます。");
		
		//buttonのクリック処理
		button.addClickHandler(new ClickHandler(){
			@Override
			public void onClick(ClickEvent event) {
				label.setText("Hello World!");
			}
		});
		
		//作成したUIをRootPanelに追加する
		RootPanel.get("button").add(button);
		RootPanel.get("label").add(label);
		
	}
}