|
||||||||||||||||||
|
ホーム > Google Web Toolkit (GWT) の基本 > はじめての GWT アプリケーション はじめての GWT アプリケーションここでは単純なサンプルプログラムを作ります。 GWT では UI 要素をどのように配置するのか。 GWT ではイベントをどのように処理するのか。 そういった基本的な事柄を、単純なサンプルプログラムを開発ることを通して学びましょう。 はじめての GWT アプリケーションここでは GWT を利用して次のような単純な Web アプリケーションを作ります。 テキストボックスとボタンが並んでいます。
このままでは真っ白で見えませんが、実はその下にラベルが配置されています。 テキストボックスに文字を入力して、ボタンをクリックすると、そのラベルに文字がコピーされます。
では、これがどのように実現されているか、みていきましょう。 プロジェクトの準備「Web Application の作成」などを参考にして、Google - Web Application Project を作成してください。
ここでは test1 という名前のプロジェクトにしました。パッケージは com.keicode.gwt.test1 です。 自動的に作成されるソースコードから不要な部分を削除します。 ここでは EntryPoint を実装するクラス (私の場合 com.keicode.gwt.test1.client 以下の Test1.java) の onModuleLoad メソッドだけあれば OK です。 また、ホストファイル (war 下の Test1.html) を書き換えて、Body 部をシンプルにしてしまいます。
スクリーンショットでは iframe や noscript だけ残しています。 GWT での基本的な UI 要素の配置UI 要素として、「上側にテキストボックスとボタンを横並びに配置。そして、その下にラベルを配置」という構成です。 これを実現するには、(いろいろ方法はありますが) GWTでは次の方法等があります。
横に並べるために HorizontalPanel 作成し、それに順番に TextBox、Button 要素を追加。 次に縦に並べるために VerticalPanel を作成します。そしてそれに TextBox と Button が配置された HorizontalPanel と、Label を順番に追加。 こうすることで全体のレイアウトが完成します。 ボタンのクリックハンドラを含めると、実際のソースコードはつぎのようになります。 package com.keicode.gwt.test1.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;
public class Test1 implements EntryPoint {
@Override
public void onModuleLoad() {
final TextBox textBox1 = new TextBox();
final Button button1 = new Button("OK");
final Label label1 = new Label();
// ClickHandler
button1.addClickHandler(new ClickHandler(){
@Override
public void onClick(ClickEvent event) {
label1.setText(textBox1.getText());
}
});
// Layout
final HorizontalPanel horizontalPanel = new HorizontalPanel();
horizontalPanel.add(textBox1);
horizontalPanel.add(button1);
final VerticalPanel verticalPanel = new VerticalPanel();
verticalPanel.add(horizontalPanel);
verticalPanel.add(label1);
RootPanel.get().add(verticalPanel);
}
}
GWT アプリケーションの実行GWT アプリケーションを実行するには、プロジェクトのコンテキストメニューから Google を選びそこで、GWT Compile を選択。
コンパイルが正常終了したら、Run As から Web Application を選択します。
すると Development Mode にテスト用サーバーへの URL が表示されるので、ブラウザからそれへアクセスします。
これによって冒頭のようなプログラムが実行されるはずです。 ホーム > Google Web Toolkit (GWT) の基本 > はじめての GWT アプリケーション |
|
||||||||||||||||
 |
|
|
||||||||||||||||
|
© 2010 Google Web Toolkit (GWT) 入門 |
||||||||||||||||||
