EclipseとMavenでGWTアプリケーションを作成する：04 簡単なアプリケーションを作成する

■ 目次

環境など

私は日本語化されたEclipseを使用しているので、英語版とはメニューや項目名が異なります。お使いの環境と異なる場合には、適宜読み替えてください。

この説明で使用しているソフトウェアのバージョンは次の通りです。

■ アプリケーションの作成 ↑

前回のコードを土台として、簡単なアプリケーションを作成して動かしてみます。

1. Eclipseのプロジェクト・エクスプローラーからApplication.java (src/main/java/jp/ne/hatena/paz3/GwtSample/client/Application.java) をダブルクリックし、エディタで開きます。

2. コードを次のように変更します。

Application.java：

package jp.ne.hatena.paz3.GwtSample.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.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class Application
    implements EntryPoint
{

	private Label nameLabel;
	private TextBox nameTextBox;
	private Button greetButton;
	private HorizontalPanel horizontalPanel;
	private Label messageLabel;
	private VerticalPanel verticalPanel;

	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad()
	{
		// Make input area.
		nameLabel = new Label("Name");
		nameTextBox = new TextBox();
		greetButton = new Button("Hi !");
		horizontalPanel = new HorizontalPanel();
		horizontalPanel.add(nameLabel);
		horizontalPanel.add(nameTextBox);
		horizontalPanel.add(greetButton);
		
		// Make output area.
		messageLabel = new Label();
		
		// Combine two areas vertically.
		verticalPanel = new VerticalPanel();
		verticalPanel.add(horizontalPanel);
		verticalPanel.add(messageLabel);
		
		// Add panel to web page.
		RootPanel.get().add(verticalPanel);
		
		// Listen for click event on greetButton.
		greetButton.addClickHandler(new ClickHandler() {
			
			public void onClick(ClickEvent event) {
				showGreetingMessage();
			}
			
		});
	}
	
	private void showGreetingMessage() {
		String name = nameTextBox.getText();
		String message = "Hello " + name + " !";
		messageLabel.setText(message);
	}
	
}

3. 保存します。

■ アプリケーションの実行 ↑

前回の手順 で実行してください。実行すると、「Name」と書かれたテキストボックスが表示されます。

テキストボックスに名前を入れて「Hi !」をクリックすると、その下にメッセージが表示されます。

日本語も使用できます。

■ コードの解説 ↑

■ 画面レイアウト ↑

今回作成した画面は次のようになっています。

horizontalPanelはコンポーネントを横方向に並べるパネルです。horizontalPanelの上にnameLabel（「Name」と書かれたラベル）、nameTextBox（名前を入れるテキストボックス）、greetButton（「Hi !」と書かれたボタン）が横方向に並んで乗っています。

verticalPanelはコンポーネントを縦方向に並べるパネルです。verticalPanelの上にhorizontalPanelとmessageTextBox（メッセージを表示するテキストボックス）が縦方向に並んで乗っています。

■ コンポーネントを配置する ↑

GWTのアプリケーションでは、ページを表示したときにonMouseLoadが実行されます。

onMouseLoadの中では、次のコードでnameLabel、nameTextBox、greetButtonを作成し、horizontalPanelのaddメソッドで配置しています。

// Make input area.
nameLabel = new Label("Name");
nameTextBox = new TextBox();
greetButton = new Button("Hi !");
horizontalPanel = new HorizontalPanel();
horizontalPanel.add(nameLabel);
horizontalPanel.add(nameTextBox);
horizontalPanel.add(greetButton);

次のコードでmessageLabelを作成し、horizontalPanelと共にverticalPanelのaddメソッドで配置しています。

// Make output area.
messageLabel = new Label();

// Combine two areas vertically.
verticalPanel = new VerticalPanel();
verticalPanel.add(horizontalPanel);
verticalPanel.add(messageLabel);

次のコードでverticalPanelをWebページに追加しています。RootPanelはWebページ内でコンポーネントを配置できる場所を表すクラスで、getメソッドで実際の場所を取得します。画面に表示するコンポーネントは必ずRootPanelのaddメソッドで画面に配置する必要があります。

// Add panel to web page.
RootPanel.get().add(verticalPanel);
■ ボタンクリック時の処理 ↑

次はgreetButtonをクリックしたときの処理です。

// Listen for click event on greetButton.
greetButton.addClickHandler(new ClickHandler() {
	
	public void onClick(ClickEvent event) {
		showGreetingMessage();
	}
	
});

ボタンをクリックしたときの処理は、ButtonクラスのaddClickHandlerで登録します。addClickHandlerメソッドの引数として、ClickHandlerインターフェイスを実装した無名クラスのインスタンスを作成（new ClickHandler() {…}）して渡しています。

ClickHandlerインターフェイスにはonClickメソッドがあります。ここにクリック時の処理を記述します。ここではshowGreetingMessageメソッドを呼び出しています。

showGreetingMessageメソッドは、messageLabelに「Hello 名前 !」という文字列を設定するメソッドです。

private void showGreetingMessage() {
	String name = nameTextBox.getText();
	String message = "Hello " + name + " !";
	messageLabel.setText(message);
}