Home > スポンサー広告 > GWTでHello World

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://netforestdevnote.blog26.fc2.com/tb.php/47-317e47d9
Listed below are links to weblogs that reference
スポンサーサイト from Netforest Developer's Note

Home > スポンサー広告 > GWTでHello World

Home > Java > GWTでHello World

GWTでHello World

take©です。 GWT (Google Web Toolkit) は Javascript を Java で書けるフレームワークです。 GWT が Java のコードを Javascript に変換してくれるので、クライアントサイドのコーティングも eclipse を使ったコンパイルチェックやコード補完によって効率よく開発が可能です。 今回はごく簡単なHello Worldをメモ。

web.xml

今回はクライアントサイドだけのサンプルなので、web.xmlは空っぽ。

war/WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
</web-app>

HTML Page

まず画面を用意する。とはいっても body の中は空っぽ。GWTでは画面を構成する要素 (HTML) を Javascript で組み立てる。
これまでは、 Servlet → JSP → HTML な感じのフローだったが、
GWTでは、 HTML → Javascript (AJAX) → Servlet な感じになる。
これが今までの作り方とだいぶ異なるので慣れる必要がある。 もちろん Javascript の部分は Java で書ける。

<script type="text/javascript" language="javascript" src="sample/sample.nocache.js"></script>
は次に記載する Module をコールするためのもので、GWT が Javascript に変換した Java のコードをここで実行する。

war/sample.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" language="javascript" src="sample/sample.nocache.js"></script>
</head>
<body>
</body>
</html>

Module

Module を定義する。GWT の Module は Javascript, HTML, CSS のセットみたいなものでアプリケーションや機能の単位になる。 GWT はクラスパスから *.gwt.xml を探して Module を作成する。

rename-to 属性によって Javascript のパスを変更できる。
HTML に記述した sample/sample.nocache.js の部分がそれにあたる。

source 要素では Java のパッケージ名を指定する。
ここで指定したパッケージ配下の Java コードは GWT が Javascript に変換してくれる。

entry-point 要素では最初に実行される Javascript を指定する。 実際には Java クラスを指定する。Entry Point に指定したクラスはインターフェイス EntryPoint を実装する。

src/jp/ad/netforest/gwt/Sample.gwt.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.0.3//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.0.3/distro-source/core/src/gwt-module.dtd">
<module rename-to="sample">
	<inherits name="com.google.gwt.user.User" />
	<source path="client"/>
	<entry-point class="jp.ad.netforest.gwt.client.SampleEntryPoint"/>
</module>

Entry Point

EntryPoint を実装する。ここに書いたコードが Javascript に変換され、sample.html を表示したときに実行される。

src/jp/ad/netforest/gwt/client/SampleEntryPoint.java

package jp.ad.netforest.gwt.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.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.RootPanel;

public class SampleEntryPoint implements EntryPoint {
	public void onModuleLoad() {
		Button button = new Button("click me!");
		button.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent event) {
				Window.alert("hello world!");
			}
		});
		RootPanel.get().add(button);
	}
}

実行結果

eclipse で実行してみる。今日はここまで。

20100705_01

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://netforestdevnote.blog26.fc2.com/tb.php/47-317e47d9
Listed below are links to weblogs that reference
GWTでHello World from Netforest Developer's Note

Home > Java > GWTでHello World

Recent Comments
Recent Trackback
Search
Meta
Links
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。