イージーネット Tech Blog » Wicket http://blog.eni.co.jp/tech 株式会社イージーネットのスタッフによる技術系ブログです Tue, 12 Jan 2010 01:46:58 +0000 http://wordpress.org/?v=2.8.6 ja hourly 1 Wicket小話その3. Wicketで確認メッセージを出すにはどうすればよいのか？(その2) http://blog.eni.co.jp/tech/2009/09/wicket_03_confirm02.html http://blog.eni.co.jp/tech/2009/09/wicket_03_confirm02.html#comments Tue, 29 Sep 2009 08:20:46 +0000 武輪 恭代 http://blog.eni.co.jp/tech/?p=1812 ども、武輪です。

前回のWicket小話で、Confirmメッセージを出すにはどうすればよいのか？と言った話をしたのですが、今回も引き続きConfirmメッセージの話をしたいと思います。

前回、AjaxボタンでConfirmメッセージを表示する方法として、Wicket-extensionのコンポーネントであるModalWindowを使い、独自のポップアップメッセージを表示する方法をとりました。
しかしながら、これってぶっちゃけConfirmメッセージじゃないよね…！

というわけで今回はAjaxボタンで正真正銘(?)のConfirmメッセージを表示する方法をご紹介します。

AjaxボタンでConfirmメッセージ

>Ajaxで中身を入れ替える以上、onclickアトリビュートをいじるのはややこしそうなので…

と前回書いたのですが、
「confirmで確認後、OKだったら既存AjaxのJavaScriptを実行してあげて、キャンセルだったらfalseを返す」
ようなJavaScriptを書けば問題ないんじゃ…？と思いまして。

そんなわけでさらっとサンプルを書いてみました。
サンプルは前回同様、ボタンを押した時に確認メッセージを表示し、OKだったらカウントする、キャンセルだったら何もしない、といった仕様です。

Confirm2.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

public class Confirm2 extends WebPage{
 
	private int count = 0;
	private Label result;
 
	/**
	 * コンストラクタ
	 */
	public Confirm2() {
		add(result = new Label("result", new PropertyModel<Integer>(this, "count")));
		result.setOutputMarkupId(true);
		Form<?> form = new Form<Confirm2>("form");
 
		form.add(new AjaxButton("count", new Model<String>("カウントしますか？")){
 
			private static final long serialVersionUID = 1L;
 
			@Override
			protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
				count++;
				target.addComponent(result);
			}
 
			@Override
			protected IAjaxCallDecorator getAjaxCallDecorator() {
				return new AjaxPreprocessingCallDecorator(super.getAjaxCallDecorator()) {
					private static final long serialVersionUID = 1L;
 
					@Override
					public CharSequence preDecorateScript(CharSequence script) {
						return "if(!confirm('" + getModelObject() + "')) return false;" + script;
					}
				};
			}
		});
		add(form);
	}
}

【メモ】
25～34行目付近:
AjaxButtonのgetAjaxCallDecoratorをオーバライドしてあげることで、出力されるAjax用JavaScriptに手を加えています。

実際に出力されるhtmlは以下のようになります。

onclick="if(!confirm('カウントしますか？')) return false;var wcall=wicketSubmitFormById('form2', ';[長いので略]"

まとめ

というわけで、AjaxButtonでも前回みたいな似非確認ダイアログではなくちゃんとした(?)Confirmメッセージを出すことができました。
AjaxButtonを記述する度にgetAjaxCallDecorator()をオーバライドするのも面倒なので、AjaxButtonを継承したサブクラスを作っておくのが便利そうです。

動作環境

今回のサンプルソースは以下の環境で動作させています。

バージョン
JDK 1.6.0_13
Apache Tomcat 6.0.16
Apache Wicket 1.4.0

あわせて読みたい

]]> http://blog.eni.co.jp/tech/2009/09/wicket_03_confirm02.html/feed 1 Wicket小話その2. Wicketで確認メッセージを出すにはどうすればよいのか？ http://blog.eni.co.jp/tech/2009/09/wicket_02_confirm.html http://blog.eni.co.jp/tech/2009/09/wicket_02_confirm.html#comments Fri, 04 Sep 2009 02:35:23 +0000 武輪 恭代 http://blog.eni.co.jp/tech/?p=1365 ども、武輪です。

Webアプリケーションでは、データを登録したり編集したり削除したりといった操作が日常茶飯事です。
そして「削除ボタンを押した時にいきなり削除するのではなく、confirmメッセージを出す」というのはよくあるパターンですね。

さてWicket小話その2では、「Wicketで確認メッセージを出すにはどうすればよいのか？」について、実際のコードを踏まえて試してみようと思います。

非Ajaxボタンの場合

例えばこんなボタンがあるとします。
confirmサンプル

これはcountボタンを押すと画面上に何回クリックしたのかを表示する簡単なサンプルです。

Confirm.html

1
2
3
4
5
6
7
8
9
10
11
12

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Wicket Examples - confirm</title>
</head>
<body>
	<span wicket:id="result" /> 回目
	<form wicket:id="form">
		<input wicket:id="count" type="submit" value="count" />
	</form>
</body>
</html>

Confirm.java(非AjaxButton編)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

public class Confirm extends WebPage {
 
	private int count = 0;
 
	/**
	 * コンストラクタ
	 */
	public Confirm() {
		add(new Label("result", new PropertyModel<Integer>(this, "count")));
		Form<?> form = new Form<Confirm>("form");
		Button countButton;
		form.add(countButton = new Button("count") {
			private static final long serialVersionUID = 1L;
 
			@Override
			public void onSubmit() {
				super.onSubmit();
				count++;
			}
 
		});
		add(form);
	}
 
	/**
	 * countを取得します。
	 * @return count
	 */
	public int getCount() {
		return count;
	}
}

html側で対応

html側に直接JavaScriptを埋め込むことで対応。
Javaのコードには一切変更点はありません。

1
2
3
4
5
6
7
8
9
10
11
12

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Wicket Examples - confirm</title>
</head>
<body>
	<span wicket:id="result" /> 回目
	<form wicket:id="form">
		<input wicket:id="count" type="submit" value="count" onclick="return confirm('カウントしますか？')" />
	</form>
</body>
</html>

【メモ】
9行目:
onclickイベントを追加しただけです。

Java側で対応

SimpleAttributeModifierを使うことで、任意のアトリビュートを付加することができます。
htmlには一切変更点はありません。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

public class Confirm extends WebPage {
 
	private int count = 0;
 
	/**
	 * コンストラクタ
	 */
	public Confirm() {
		add(new Label("result", new PropertyModel<Integer>(this, "count")));
		Form<?> form = new Form<Confirm>("form");
		Button countButton;
		form.add(countButton = new Button("count") {
			private static final long serialVersionUID = 1L;
 
			@Override
			public void onSubmit() {
				super.onSubmit();
				count++;
			}
 
		});
		countButton.add(new SimpleAttributeModifier("onclick", "return confirm('カウントしますか？')"));
		add(form);
	}
 
	/**
	 * countを取得します。
	 * @return count
	 */
	public int getCount() {
		return count;
	}
}

【メモ】
22行目:
countButtonにSimpleAttributeModifierをadd。

html側で対応した場合も、Java側で対応した場合も、動作的には下図のように、countボタンをクリックすると確認ダイアログが表示されます。
確認ダイアログのOKをクリックすれば、数字がインクリメントされ、キャンセルをクリックすれば数字は元のままです。
Confirmサンプル


Ajaxボタンの場合

続きましてAjaxボタンの場合。
動作的には変わらないのですが、先ほどのサンプルコードを下記のように、ButtonではなくAjaxButtonを使用するように変更します。
html側には変更はありません。(Wicketってこういうとこ便利ですよね)

Confirm.java(AjaxButton編)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

public class Confirm extends WebPage {
 
	private int count = 0;
 
	/**
	 * コンストラクタ
	 */
	public Confirm() {
		final Label result;
		add(result = new Label("result", new PropertyModel<Integer>(this, "count")));
		result.setOutputMarkupId(true);
		Form<?> form = new Form<Confirm>("form");
		AjaxButton countButton;
		form.add(countButton = new AjaxButton("count") {
			private static final long serialVersionUID = 1L;
 
			@Override
			protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
				count++;
				target.addComponent(result);
			}
 
		});
		add(form);
	}
 
	/**
	 * countを取得します。
	 * @return count
	 */
	public int getCount() {
		return count;
	}
}

【メモ】
11行目:
Ajaxを用いてコンポーネントを更新する場合は、setOutputMarkupIdをtrueにすることを忘れずに！

こんな失敗

非Ajaxボタンの時と同じように、onclickアトリビュート追加してやればいいんじゃないの？
　↓
html側に「onclick=”return confirm(’カウントしますか？’)”」をつけたしてみる。
　↓
カウントはされるが、確認ダイアログは出てこない。あれ？
　↓
生成されたhtmlソースを見てみる
　↓

<input type="submit" value="count" onclick="var wcall=wicketSubmitFormById('ida', '?wicket:interface=:5:form:count::IActivePageBehaviorListener:0:&amp;wicket:ignoreIfNotActive=true', 'count' ,null,null, function() {return Wicket.$$(this)&amp;&amp;Wicket.$$('ida')}.bind(this));;; return false;" name="count" id="idb"/>

　↓
Ajax用のonclickになってるよーorz
　↓
じゃあ、SimpleAttributeModifierを使うパターンは？
　↓
確認ダイアログは出るけど、OKクリックしてもカウントアップされない
　↓
生成されたhtmlソースを見てみる
　↓

<input type="submit" value="count" name="count" id="id3" onclick="return confirm('カウントしますか？')"/>

　↓
見事Ajax用のonclickイベントはconfirmに置き換わってる
　↓
そりゃそうだorz

力技で解決

Ajaxで中身を入れ替える以上、onclickアトリビュートをいじるのはややこしそうなので、とっても強引に解決してみました。

もう独自にConfirmウィンドウ実装しちゃえばいいんじゃね？
というわけで、できたのがこんな画面。

Confirmサンプル

Wicket-extensionにはいくつかの便利なAjaxコンポーネントが備わっています。
そのうちの一つであるModalWindowを使って、強引に確認ダイアログのようなものを表示させてみました。

追加したのは下記3ファイル(ConfirmModalWindowPage.html、ConfirmModalWindowPage.java、IConfirmPage.java)。

ConfirmModalWondowPage.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="application/xhtml+xml;charset=UTF-8" />
	<title>ModalWindow</title>
</head>
<body>
	<div wicket:id="info">メッセージ</div>
	<form wicket:id="confirmForm">
		<div style="padding:1em; text-align:center">
			<input type="submit" wicket:id="ok" value="OK" />
			<input type="submit" wicket:id="cancel" value="キャンセル" />
		</div>
	</form>
</body>
</html>

ConfirmModalWondowPage.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

public class ConfirmModalWindowPage extends WebPage {
 
	@SuppressWarnings("unchecked")
	public ConfirmModalWindowPage(final IConfirmPage page, final ModalWindow confirmModalWindow, String info) {
		add(new Label("info", new Model<String>(info)));
 
		Form confirmForm;
		add(confirmForm = new Form("confirmForm"));
 
		// OKボタン
		confirmForm.add(new AjaxButton("ok") {
			private static final long serialVersionUID = 1L;
			@Override
			public void onSubmit(AjaxRequestTarget target, Form<?> form) {
				boolean result = page.ok(target);
				if(result){
					// 処理に成功した時の動作
					confirmModalWindow.close(target);
				} else {
					// 処理に失敗した時の動作
				}
			}
		});
 
		// キャンセルボタン
		confirmForm.add(new AjaxButton("cancel") {
			private static final long serialVersionUID = 1L;
			@Override
			public void onSubmit(AjaxRequestTarget target, Form<?> form) {
				// キャンセルボタンが押されたときの処理
				confirmModalWindow.close(target);
			}
		});
	}
 
 
	/**
	 * 確認用ModalWindowを取得する.
	 * @param id
	 * @param page
	 * @return
	 */
	public static ModalWindow getConfirmModalWindow(String id, final IConfirmPage page, final String info){
		final ModalWindow modal = new ModalWindow(id);
		modal.setCssClassName(ModalWindow.CSS_CLASS_GRAY);
		modal.setInitialHeight(150);
		modal.setInitialWidth(350);
		modal.setResizable(false);
		modal.setTitle("確認メッセージ");
		modal.setCookieName("confirm_window");
		modal.setPageCreator(new ModalWindow.PageCreator() {
			private static final long serialVersionUID = 1L;
			public Page createPage() {
				return new ConfirmModalWindowPage(page, modal, info);
			}
		});
 
		modal.setWindowClosedCallback(new ModalWindow.WindowClosedCallback() {
			private static final long serialVersionUID = 1L;
			public void onClose(AjaxRequestTarget target) {
				page.refleshComponent(target);
			}
		});
 
		modal.setCloseButtonCallback(new ModalWindow.CloseButtonCallback() {
			private static final long serialVersionUID = 1L;
			public boolean onCloseButtonClicked(AjaxRequestTarget target) {
				return true;
			}
		});
 
		return modal;
	}
}

【メモ】
11～23行目:
ConfirmウィンドウのOKボタンの定義です。実際の処理は、元のPageのokメソッドに記述しています。
処理の成功/失敗を返すようにしておくと、処理に失敗した場合はConfirmウィンドウ内にエラーメッセージを表示するなんて使い方もできそうです。

26～33行目:
Confirmウィンドウのキャンセルボタンの定義です。Confirmウィンドウを閉じているだけです。

43～73行目:
Confirmウィンドウ用のModalWindowを取得するメソッドです。元のPageから取得するためstaticメソッドにしています。

45～51行目:
ModalWindowの設定です。
　setCssClassName　→　CSS_CLASS_GRAYかCSS_CLASS_BLUEを選択。デフォルトでは青色。
　setInitialHeight、setInitialWidth　→　ModalWindowのサイズ指定。確認ダイアログなので小さめにしておきます。
　setResizable　→　ModalWindowのリサイズを可能にするかしないか。
　setTitle　→　ModalWindowのタイトル文字列。
　setCookieName　→　クッキーの名前。このクッキーはModalWindowの位置などを記憶しています。

58～63行目:
ModalWindowが閉じられたときの処理を記述します。
ここでは元画面のコンポーネントの更新を行っています。

65～70行目:
ModalWindowの×ボタンで閉じられたときの処理を記述します。
ここでは特に何も行っていません。

IConfirmPage.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

public interface IConfirmPage {
	/**
	 * 画面の更新
	 * @param target
	 */
	public void refleshComponent(AjaxRequestTarget target);
 
	/**
	 * OKボタンを押した時の処理
	 * @param target
	 * @return 処理が成功したかどうか true:成功 false:失敗
	 */
	public boolean ok(AjaxRequestTarget target);
 
	/**
	 * キャンセルボタンを押した時の処理
	 * @param target
	 */
	public void cancel(AjaxRequestTarget target);
}

【メモ】
Confirmウィンドウを表示するPageでこのインターフェースを実装します。

このインターフェースを実装するようにConfirm.javaを以下のように修正しました。
Confirm.java(修正後)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

public class Confirm extends WebPage implements IConfirmPage{
 
	private int count = 0;
	private Label result;
 
	/**
	 * コンストラクタ
	 */
	public Confirm() {
		add(result = new Label("result", new PropertyModel<Integer>(this, "count")));
		result.setOutputMarkupId(true);
		Form<?> form = new Form<Confirm>("form");
 
		final ModalWindow confirmModalWindow = ConfirmModalWindowPage.getConfirmModalWindow("confirmModalWindow",
				Confirm.this, "カウントしますか？");
		form.add(confirmModalWindow);
 
		AjaxButton countButton;
		form.add(countButton = new AjaxButton("count") {
			private static final long serialVersionUID = 1L;
 
			@Override
			protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
				confirmModalWindow.show(target);
			}
 
		});
 
		add(form);
	}
 
	/**
	 * countを取得します。
	 * @return count
	 */
	public int getCount() {
		return count;
	}
 
	/**
	 * Confirmウィンドウでキャンセルが押されたときの処理
	 */
	public void cancel(AjaxRequestTarget target) {
		// キャンセル時の処理
	}
 
	/**
	 * ConfirmウィンドウでOKが押されたときの処理
	 */
	public boolean ok(AjaxRequestTarget target) {
		count++;
		return true;
	}
 
	/**
	 * 画面上のコンポーネントの更新
	 */
	public void refleshComponent(AjaxRequestTarget target) {
		target.addComponent(result);
	}
}

【メモ】
14～16行目:
Confirmウィンドウ用のModalWindowを取得します。

23～25行目:
countボタンがクリックされたときの処理。ModalWindowを表示します。

40～45行目:
Confirmウィンドウでキャンセルボタンを押されたときの実処理を記述します。ここでは特に何もしていません。

50～53行目:
ConfirmウィンドでOKボタンが押されたときの実処理を記述します。ここではcountをインクリメントしています。

58～60行目:
Ajaxで画面の更新を行います。ここではresultラベルの表示を更新しています。

Confirm.html(変更後)

1
2
3
4
5
6
7
8
9
10
11
12
13

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Wicket Examples - confirm</title>
</head>
<body>
	<span wicket:id="result" /> 回目
	<form wicket:id="form">
		<input wicket:id="count" type="submit" value="count"/>
		<div wicket:id="confirmModalWindow">削除ConfirmModalWindow</div>
	</form>
</body>
</html>

【メモ】
10行目:
Confirmウィンドウ表示領域の確保。

まとめ

とりあえずこんな感じの実装で、AjaxButtonの場合でも確認ダイアログっぽいものは出すことができました。

もっともこのままだと、1つの画面でOK、キャンセルが押されたときの処理が1つしか記述できないので、実際汎用的に使おうと思えば、さらなる改造が必要ですけどね:）

動作環境

今回のサンプルソースは以下の環境で動作させています。

バージョン
JDK 1.6.0_13
Apache Tomcat 6.0.16
Apache Wicket 1.4.0

あわせて読みたい

]]> http://blog.eni.co.jp/tech/2009/09/wicket_02_confirm.html/feed 2 Wicket小話その1. とりあえずWicketを始めよう http://blog.eni.co.jp/tech/2009/08/wicket_01_start.html http://blog.eni.co.jp/tech/2009/08/wicket_01_start.html#comments Mon, 31 Aug 2009 08:35:02 +0000 武輪 恭代 http://blog.eni.co.jp/tech/?p=1108 mvn --version Apache Maven 2.1.0 (r755702; 2009-03-19 04:10:27+0900) Java version: 1.6.0_06 Java home: C:javajdk1.6.0_06jre Default locale: ja_JP, platform encoding: MS932 OS name: "windows xp" version: "5.1" arch: "x86" Family: "windows" 早速Wicketを始めよう Moven2のインストールが完了したら、早速Wicketを開始してみましょう。 サンプルアプリケーションを動かしてみよう！ 1. ダウンロード http://wicket.apache.org/ から1.4系のアーカイブをダウンロードしてきます。 適当なディレクトリでアーカイブを展開します。 libディレクトリにはwicketの各種ライブラリーの他に、サンプルアプリケーションのwar(wicket-examples-1.4.x.war)も入っています。 このwarファイルをローカルのTomcatのwebappディレクトリに放り込んでTomcatを再起動してあげれば、とりあえずサンプルを動かすことができるんですが、このwarにはソースが含まれていないので動作を見るだけになってしまいます。 折角なのでEclipseで作業できるようにしましょう。 2. Eclipseにインポート コマンドプロンプト上で、srcディレクトリ以下のwicket-examplesに移動します。 mvn eclipse:eclipse -DdownloadSources=true を実行することでEclipse用の設定ファイルが生成されます。 %展開先のディレクトリ%apache-wicket-1.4.xsrcwicket-examples>mvn eclipse:eclipse -DdownloadSources=true あとはEclipseで「インポート」→「既存プロジェクトをワークスペースへ」からインポートすればOK。 3. サンプルを動かしてみよう wicket-examplesパッケージにはJettyというJAVAのWebサーバが同梱されているので、簡単にサンプルを動作させることができます。 org.apache.wicket.examples.StartExamplesクラスを実行すればJettyサーバが起動します。 そしたらあとは http://localhost:8080/wicket-examples/ にアクセスするだけでWicketのサンプルの数々を試すことができます。 勿論Tomcatで動かしても全然問題ありません。 新規プロジェクトのスタート サンプルアプリケーションは、既に1つの完成されたアプリケーションです。 新規プロジェクトをスタートさせる時には、ブランクのプロジェクトがあれば便利だなーって思いませんか？ というわけでブランクプロジェクトの作り方です。 Maven2の使い方なんかわかんないよーって人にも簡単！ WicketのQuickStartのページからコマンドラインを作成することができます。 上記サイトにアクセスすると、こんな入力欄があります。 各入力欄の意味は、 　GroupId:　パッケージとして使用される 　ArtifactId:　プロジェクト名として使用される 　Version:　Wicketのバージョン こんな感じです。 これらを入力していくと、勝手にCommand Line欄にコマンドが組み立てられていくって寸法です。なんて便利！ 次にコマンドプロンプト上でプロジェクトを作成したいディレクトリに移動し、先ほど生成したコマンドラインをコピペして実行します。 (※Proxyの設定などはこちらを参考に。→Maven2のTipsを集めるwiki#固有の環境設定) C:test>mvn archetype:create -DarchetypeGroupId=org.apache.wicket -DarchetypeArtifactId=wicket-archetype-quickstart -DarchetypeVersion=1.4.1 -DgroupId=jp.co.eni.wicket -DartifactId=sample [INFO] Scanning [...]]]> ども、武輪です。

Wicket小話と題しまして、Wicket初心者の私がWicketを使ってみて、

  • これちょっと便利な機能だなー
  • こんなコンポーネントを使ってみたよ！
  • こんな実装やってみたよ！

などなど。
そんなちょっとしたメモ書きを徒然と残していこうと思います。

基本的に情報はWebと書籍「オープンソース徹底活用 WicketによるWebアプリケーション開発」(矢野勉さん著)から得ています。
あとはWicketのソースとか。

さてWicket小話その1として、「とりあえずWicketを始めよう」という副題で徒然と書いていきます。

はじめに

そもそもWicketって何よって方に簡単に。
Wicketとは、Webアプリケーションフレームワークの1つです。
HtmlとJavaでWebアプリケーションが作れちゃいます。
設定ファイルはほとんど必要ありません。(そりゃweb.xmlは必須ですけども)

2009年8月現在Wicketは1.4がリリースされています。
Wicket小話では特に注意書きがない限り、この最新リリースのWicket1.4で試したことを書いていこうと思います。

開発環境などは以下の通り。

バージョン
JDK 1.6.0_13
Apache Tomcat 6.0.16
Apache Wicket 1.4.0

さてここまで書いたところで、ショックな出来事が1つ。
ちょ…、Wicket1.4.1もう出てるじゃんorz

ま、まぁいっか。

準備

Apache Maven2 のインストール手順

Maven2を使うことで簡単にWicketプロジェクトを開始することができます。
(事前に1.5以上のJDKがインストールされている前提で話を進めていきます。)

1. ダウンロード
Apache Maven Projectより、アーカイブをダウンロードします。
私は2.1.0を使用していますが、2.2.1が既に出ているようです。

2. 環境変数の設定
適当なディレクトリ(MAVEN_HOME)にダウンロードしてきたアーカイブを展開してください。
環境変数PATHに%MAVEN_HOME%binを追加。
(環境変数はシステムのプロパティ→詳細設定→環境変数から変更できます。既存のPATHの値を消してしまわないように気を付けてください。)

※JAVA_HOMEを設定していないとMaven2は動かないので注意。

3. インストール確認
コマンドプロンプトでmvn –versionを実行することでインストールを確認することができます。

C:>mvn --version
Apache Maven 2.1.0 (r755702; 2009-03-19 04:10:27+0900)
Java version: 1.6.0_06
Java home: C:javajdk1.6.0_06jre
Default locale: ja_JP, platform encoding: MS932
OS name: "windows xp" version: "5.1" arch: "x86" Family: "windows"

早速Wicketを始めよう

Moven2のインストールが完了したら、早速Wicketを開始してみましょう。

サンプルアプリケーションを動かしてみよう！

1. ダウンロード
http://wicket.apache.org/ から1.4系のアーカイブをダウンロードしてきます。

適当なディレクトリでアーカイブを展開します。
libディレクトリにはwicketの各種ライブラリーの他に、サンプルアプリケーションのwar(wicket-examples-1.4.x.war)も入っています。
このwarファイルをローカルのTomcatのwebappディレクトリに放り込んでTomcatを再起動してあげれば、とりあえずサンプルを動かすことができるんですが、このwarにはソースが含まれていないので動作を見るだけになってしまいます。
折角なのでEclipseで作業できるようにしましょう。

2. Eclipseにインポート
コマンドプロンプト上で、srcディレクトリ以下のwicket-examplesに移動します。
mvn eclipse:eclipse -DdownloadSources=true を実行することでEclipse用の設定ファイルが生成されます。

%展開先のディレクトリ%apache-wicket-1.4.xsrcwicket-examples>mvn eclipse:eclipse -DdownloadSources=true

あとはEclipseで「インポート」→「既存プロジェクトをワークスペースへ」からインポートすればOK。

3. サンプルを動かしてみよう
wicket-examplesパッケージにはJettyというJAVAのWebサーバが同梱されているので、簡単にサンプルを動作させることができます。
org.apache.wicket.examples.StartExamplesクラスを実行すればJettyサーバが起動します。
そしたらあとは http://localhost:8080/wicket-examples/ にアクセスするだけでWicketのサンプルの数々を試すことができます。
勿論Tomcatで動かしても全然問題ありません。

新規プロジェクトのスタート

サンプルアプリケーションは、既に1つの完成されたアプリケーションです。
新規プロジェクトをスタートさせる時には、ブランクのプロジェクトがあれば便利だなーって思いませんか？
というわけでブランクプロジェクトの作り方です。

Maven2の使い方なんかわかんないよーって人にも簡単！
WicketのQuickStartのページからコマンドラインを作成することができます。

上記サイトにアクセスすると、こんな入力欄があります。

quickstart

QuickStartページ

各入力欄の意味は、
　GroupId:　パッケージとして使用される
　ArtifactId:　プロジェクト名として使用される
　Version:　Wicketのバージョン
こんな感じです。
これらを入力していくと、勝手にCommand Line欄にコマンドが組み立てられていくって寸法です。なんて便利！

次にコマンドプロンプト上でプロジェクトを作成したいディレクトリに移動し、先ほど生成したコマンドラインをコピペして実行します。
(※Proxyの設定などはこちらを参考に。→Maven2のTipsを集めるwiki#固有の環境設定)

C:test>mvn archetype:create -DarchetypeGroupId=org.apache.wicket -DarchetypeArtifactId=wicket-archetype-quickstart -DarchetypeVersion=1.4.1 -DgroupId=jp.co.eni.wicket -DartifactId=sample
[INFO] Scanning for projects...
[INFO] Searching repository for plugin with prefix: 'archetype'.
[INFO] ------------------------------------------------------------------------
[INFO] Building Maven Default Project
[INFO]    task-segment: [archetype:create] (aggregator-style)
[INFO] ------------------------------------------------------------------------
[INFO] Setting property: classpath.resource.loader.class => 'org.codehaus.plexus.velocity.ContextClassLoaderResourceLoader'.
[INFO] Setting property: velocimacro.messages.on => 'false'.
[INFO] Setting property: resource.loader => 'classpath'.
[INFO] Setting property: resource.manager.logwhenfound => 'false'.
[INFO] [archetype:create]
[WARNING] This goal is deprecated. Please use mvn archetype:generate instead
[INFO] Defaulting package to group ID: jp.co.eni.wicket
Downloading: http://repo1.maven.org/maven2/org/apache/wicket/wicket-archetype-quickstart/1.4.1/wicket-archetype-quickstart-1.4.1.jar
13K downloaded  (wicket-archetype-quickstart-1.4.1.jar)
[INFO] ----------------------------------------------------------------------------
[INFO] Using following parameters for creating OldArchetype: wicket-archetype-quickstart:1.4.1
[INFO] ----------------------------------------------------------------------------
[INFO] Parameter: groupId, Value: jp.co.eni.wicket
[INFO] Parameter: packageName, Value: jp.co.eni.wicket
[INFO] Parameter: package, Value: jp.co.eni.wicket
[INFO] Parameter: artifactId, Value: sample
[INFO] Parameter: basedir, Value: C:test
[INFO] Parameter: version, Value: 1.0-SNAPSHOT
[INFO] ********************* End of debug info from resources from generated POM ***********************
[INFO] OldArchetype created in dir: C:testsample
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESSFUL
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 9 seconds
[INFO] Finished at: Wed Aug 26 11:11:43 JST 2009
[INFO] Final Memory: 7M/14M
[INFO] ------------------------------------------------------------------------

最後に「[INFO] BUILD SUCCESSFUL」が出てればOK。

さて、実はもうこれだけで実行可能な状態なんです。
上記例では、C:testにsampleというディレクトリが作成されています。
コマンドプロンプト上でこのsampleディレクトリに移動し、以下のコマンドを実行します。

C:testsample>mvn jetty:run

http://localhost:8080/sample にアクセスしてみてください。

Wicket Quickstart Archetype Homepage 

If you see this message wicket is properly configured and running

と表示されていれば成功です。

さらにEclipseで開発するには、sampleディレクトリ上で

C:testsample>mvn eclipse:eclipse -DdownloadSources=true

を実行してEclipse用の設定ファイルが生成して、Eclipseで既存プロジェクトのインポートをすればOKです。

リンク集

Apache Wicket
Apache Wicketの本家サイト

Wicket-ja
日本Wicketユーザーグループ(wicket-ja)の公式サイト。
過去のメーリングリストの内容などが参照できます。
ちなみに「うぃけっと　じぇーえー」ではなく「うぃけっとじゃ」と読むらしいです。

矢野勉のはてな日記
Wicket-ja創設者のブログ。
著書の「オープンソース徹底活用 WicketによるWebアプリケーション開発」には大変お世話になっております。

Wicket学習帳
最終更新が2008年08月19日で止まっていて、Ｗｉｃｋｅｔ1.3ベースまでの話が多いですが、参考になります。

最後に

さて、「とりあえずWicketを始めよう」という目的は達成できたでしょうか。
次回以降のWicket小話では、具体的なコンポーネントの使い方とかを載せていければ、と思っております。

それでは、また。

あわせて読みたい

]]> http://blog.eni.co.jp/tech/2009/08/wicket_01_start.html/feed 1