発表者: ちめら (たけうち)
]]>ListDataProviderのmodel()メソッドは、毎回新しいModelインスタンスを作成します。そのため、GridViewやDataViewにsetにおいてsetItemReuseStrategy(ReuseIfModelsEqualStrategy.getInstance())を呼び出しても、Modelが毎回異なるため、Itemの再利用が行われません。
次のようにListDataProviderを拡張すれば、同じModelインスタンスが使われるでしょう。
public class ReuseModelListDataProvider<T extends Serializable> extends ListDataProvider<T>{
private static final long serialVersionUID = -4848228362992249051L;
Map<T, IModel<T>> modelMap = new HashMap<T, IModel<T>>();
public ReuseModelListDataProvider(List<T> list) {
super(list);
}
@Override
public IModel<T> model(T object) {
IModel<T> model = modelMap.get(object);
if(model == null) {
model = new Model<T>(object);
modelMap.put(object, model);
}
return model;
}
/**
* Modelのキャッシュを破棄するときにはこれを呼ぶ
*/
public void clearModelCache() {
modelMap = new HashMap<T, IModel<T>>();
}
}
]]>
Wicket-ja Wikiページへようこそ。
このWikiはWicketについての日本語情報を集積していくために用意されました。 Wicket-jaメーリングリストやブログなどで紹介された情報をどんどん登録していきましょう。
Form上にListViewがありませんか？ ListViewのpopulateItemメソッド内でFormComponent類を作成してませんか？
ListViewのpopulateItemは、ページが表示されるたびに呼び出されます。そのため、バリデーションエラーで元の表示が表示されたとたん、ListView内のすべてのFormComponentは一から再作成されます。なのでリセットされたように見えます。
ListViewのsetReuseItems(true)を呼び出すことで、ListView再作成処理を抑止できます。Form上でListViewを使って入力項目を作成する場合は、この操作は必須です。
注意点として、setReuseItems(true)を呼び出すと、ListViewの内容を最新に保つのはプログラマの仕事になります。ListViewのremoveAll()を呼び出して全項目をいったん削除しない限り、同じListItemオブジェクトが繰り返し使われます。
以下、Javadocより引用
WARNING: though you can nest ListViews within Forms, you HAVE to set the setReuseItems property to true in order to have validation work properly. By default, setReuseItems is false, which has the effect that ListView replaces all child components by new instances. The idea behind this is that you always render the fresh data, and as people usually use ListViews for displaying read-only lists (at least, that's what we think), this is good default behavior. However, as the components are replaced before the rendering starts, the search for specific messages for these components fails as they are replaced with other instances. Another problem is that 'wrong' user input is kept as (temporary) instance data of the components. As these components are replaced by new ones, your user will never see the wrong data when setReuseItems is false.]]>
mvn eclipse:eclipseでEclipse用設定を生成すると、ビルドパスの設定が更新されます。このときにソースのコンパイル対象として「**/*.java」が指定されるのが理由です。*.javaのみがEclipseのコンパイル対象となるために、main/src/java以下のhtmlがclasses以下にコピーされません。
プロジェクトのPropertiesを開き「Java Build Path」を選択し、「Source」タブの「project名/src/main/java」と「project名/src/test/java」を確認してください。「Included: (All)」となっていれば問題ありませんが「Included: **/*.java」となっているとhtmlがコピーされません。
「included: **/*.java」と表示されているところを選択して「remove」ボタンを押すと、すべてのファイルがEclipseの処理対象となり、コピーされます。
]]>
public class ParameterTestPageFrom extends WebPage {
public ParameterTestPageFrom(){
PageParameters param = new PageParameters();
param.add("url","http://example.jp/");
add(new BookmarkablePageLink("next",ParameterTestPageTo.class, param));
}
}
この場合URLEncoderを使用してエンコーディングを行い、パラメータを受け取るクラス側(今回だとParameterTestPageToクラス)にてパラメータを取得する際にデコーディングを行うことで問題を回避できます。
public class ParameterTestPageFrom extends WebPage {
public ParameterTestPageFrom() throws UnsupportedEncodingException{
final PageParameters param = new PageParameters();
param.add("url", URLEncoder.encode("http://example.jp/", "UTF-8"));
add(new BookmarkablePageLink("next",ParameterTestPageTo.class, param));
}
}
public class ParameterTestPageTo extends WebPage {
public ParameterTestPageTo(PageParameters params) throws UnsupportedEncodingException{
//ここでデコーディングするのを忘れずに！
add(new Label("url", URLDecoder.decode(params.getString("url"), "UTF-8")));
}
}
]]>
例えば下記のようなコードを書いたとします。 このコードはテキストフィールドに入力されたデータをAjaxを使用して表示しようとしています。
public class ReRenderingPage extends WebPage {
private boolean visible;
public ReRenderingPage() {
Form form = new Form("form");
add(form);
final TextField text = new TextField("text", new Model(""));
form.add(text);
final Label label = new Label("inputData", new Model(""));
add(label);
label.setOutputMarkupId(true);
form.add(new AjaxButton("submit", form) {
@Override
protected void onSubmit(AjaxRequestTarget target, Form form) {
visible = visible?false:true;
label.setModelObject(text.getModelObject());
label.setVisible(visible);
target.addComponent(label);
}
});
}
}
<html xmlns:wicket>
<head>
<title>ReRendering</title>
</head>
<body>
<span wicket:id="inputData"></span>
<form wicket:id="form">
<input type="text" wicket:id="text"/>
<input type="submit" wicket:id="submit" />
</form>
</body>
</html>
上記は一見問題無く動作するように見えます。実際に1度だけであればテキストフィールドに入力されたデータを表示、非表示はされますがそれ以降は表示がされなくなります。これは1度非表示になった場合はinputDataのタグが消えてしまい、サーバー側で表示用のDOMデータをレスポンスで返しても何処に対してデータを差し込めばよいか判断できなくなるためです。Wicket Ajax Debug Windowにも
ERROR: Component with id [[inputData1]] a was not found while trying to perform markup update.とエラー情報が出ます。
このような場合setOutputMarkupPlaceholderTagを使用することで表示、非表示の制御を行うことが出来ます。
final Label label = new Label("inputData", new Model(""));
label.setOutputMarkupId(true);
label.setOutputMarkupPlaceholderTag(true); //ここ重要！テストに出ます！
setOutputMarkupPlaceholderTagを使用することでCSSによる表示、非表示の制御が行われます。上記の場合だと非表示の場合でもHTML上では下記のようになります。
<span style="display: none;" id="inputData1"/>]]>
wicket-extentionsのバージョンは1.3.5
IndicatingAjaxButtonにおいて画像の表示を行うビヘイビアはWicketAjaxIndicatorAppenderですがIndicatingAjaxButtonクラス内では下記のように使用されています。
public abstract class IndicatingAjaxButton extends AjaxButton implements IAjaxIndicatorAware{
private static final long serialVersionUID = 1L;
//直接Newされている。
private final WicketAjaxIndicatorAppender indicatorAppender =
new WicketAjaxIndicatorAppender();
public IndicatingAjaxButton(String id, Form form){
super(id, form);
add(indicatorAppender);
}
protected abstract void onSubmit(AjaxRequestTarget target, Form form);
public String getAjaxIndicatorMarkupId(){
return indicatorAppender.getMarkupId();
}
}
ですのでIndicatingAjaxButtonをサブクラス化して独自の画像を表示させるクラスを作成したり、コンストラクタに何か渡すことで変更可能というわけではありません。
ですので、この場合はorg.apache.wicket.ajax.markup.html.form.AjaxButtonとorg.apache.wicket.ajax.!IAjaxIndicatorAwareを実装した独自のIndicatingAjaxButtonクラスを作成しなければいけません。また、実際に画像のURLが生成される箇所はWicketAjaxIndicatorAppender#getIndicatorUrlであるためこのメソッドをオーバーライドしたサブクラスも必要となります。
public final class LazyLoadingPage extends WebPage {
public LazyLoadingPage() {
Form form = new Form("form");
AjaxButton indicating = new MyIndicatingAjaxButton("submit", form) {
@Override
protected void onSubmit(AjaxRequestTarget target, Form form) {
try {
//画像がちゃんと表示されるかどうか確認のため2秒間スリープする。
Thread.sleep(2000);
} catch (InterruptedException e) {
throw new RuntimeException(e);
}
}
};
add(form.add(indicating));
}
/**
* 独自のIndicatingAjaxButton
*/
private abstract class MyIndicatingAjaxButton extends
AjaxButton implements IAjaxIndicatorAware{
private WicketAjaxIndicatorAppender appender;
public MyIndicatingAjaxButton(String id, Form form) {
super(id, form);
add(appender = getWicketAjaxIndicatorAppender());
}
public WicketAjaxIndicatorAppender getWicketAjaxIndicatorAppender(){
return new MyAjaxIndicatorAppender();
}
@Override
public String getAjaxIndicatorMarkupId() {
return appender.getMarkupId();
}
}
/**
* 画像のパスを決定するビヘイビア
*/
private class MyAjaxIndicatorAppender extends WicketAjaxIndicatorAppender{
private static final String INDICATOR_URL = "img/lazy.gif";
@Override
protected CharSequence getIndicatorUrl() {
return INDICATOR_URL;
}
}
}
そもそもIndicatingAjaxButtonクラスがMyIndicatingAjaxButton#getWicketAjaxIndicatorAppenderのようなメソッドをが用意していてくれればいいと思うのですがなぜかありません。なぜ？？
wicket-extentionsのバージョンは1.3.5
AjaxLazyLoadPanelにおいて画像のパスを決定するのはgetLoadingComponentメソッドになります。
public Component getLoadingComponent(String markupId){
return new Label(markupId, "<img src=\"" +
RequestCycle.get().urlFor(AbstractDefaultAjaxBehavior.INDICATOR) + "\"/>").setEscapeModelStrings(false);
}
ですのでAjaxLazyLoadPanelの無名クラスもしくはサブクラスにて下記のようにすれば画像の変更が可能です。
@Override
public Component getLoadingComponent(String markupId) {
return new Label(markupId, "<img src=\"img/lazy.gif\"/>").setEscapeModelStrings(false);
}
この画像のパスはメソッドを呼び出す事で生成するようにするクラスを1つ作成していればより柔軟なクラスが作成できるかと思います。
]]>上記の処理（FormをSubmitする）をボタンではなく下記のようなリンクを使用して同様の事を実現したい場合
<a wicket:id="submit" >Submit</a>
この場合はorg.apache.wicket.markup.html.form.SubmitLinkを使用すると実現可能。
public class SubmitLinkPage extends WebPage {
private String input;
public SubmitLinkPage() {
Form form = new Form("form");
add(form);
form.add(new TextField("text",new PropertyModel(this, "input")));
form.add(new Label("label",new PropertyModel(this, "input")));
form.add(new SubmitLink("submitLink"));
}
}
<html xmlns:wicket>
<head></head>
<body>
<form wicket:id="form">
<span wicket:id="label"></span>
<input type="text" wicket:id="text"/>
<a wicket:id="submitLink">Submit Link</a>
</form>
</body>
</html>
また、下記のようにリンクがformタグの外側にある場合
<html xmlns:wicket>
<head></head>
<body>
<form wicket:id="form">
<span wicket:id="label"></span>
<input type="text" wicket:id="text"/>
</form>
<!-- fromの外側に移動 -->
<a wicket:id="submitLink">Submit Link</a>
</body>
</html>
Java側ではSubmitLinkのコンストラクタの第2引数にサブミットしたいFormオブジェクトを指定する。
public class SubmitLinkPage extends WebPage {
private String input;
public SubmitLinkPage() {
Form form = new Form("form");
add(form);
form.add(new TextField("text",new PropertyModel(this, "input")));
form.add(new Label("label",new PropertyModel(this, "input")));
//ここ重要！
add(new SubmitLink("submitLink",form));
}
}
]]>
発表者: ちめら (たけうち)
]]>WicketMessage: Unable to find component with id 'hello' in [Page class = HelloWorld, id = 0, version = 0]. This means that you declared wicket:id=hello in your markup, but that you either did not add the component to your page at all, or that the hierarchy does not match. [markup = file:/***/***/NetBeansProjects/Test/build/web/WEB-INF/classes/HelloWorld.html
これはHTMLのwicket:idに対応するコンポーネントがJavaで追加されていないときに発生する。次のようにコンポーネントを作成したはいいが、追加をしてない場合などである
スライド
デモソースファイル
デモアプリケーションファイル<html>
<head>
<title>Hello World!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<span wicket:id="hello">Hello World!</span>
</body>
</html>
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
public class HelloWorld extends WebPage{
public HelloWorld(){
Label label = new Label("hello", "Hello World!");
}
}
逆にHTMLにwicket:idがないのにコンポーネントを追加した場合は下記のように例外が発生する
WicketMessage: The component(s) below failed to render. A common problem is that you have added a component in code but forgot to reference it in the markup (thus the component will never be rendered). 1. [Component id = hello, page = HelloWorld, path = 6:hello.Label, isVisible = true, isVersioned = true] Root cause: org.apache.wicket.WicketRuntimeException: The component(s) below failed to render. A common problem is that you have added a component in code but forgot to reference it in the markup (thus the component will never be rendered). 1. [Component id = hello, page = HelloWorld, path = 6:hello.Label, isVisible = true, isVersioned = true] at org.apache.wicket.Page.checkRendering(Page.java:1116) at org.apache.wicket.Page.renderPage(Page.java:914) at org.apache.wicket.request.target.component.BookmarkablePageRequestTarget.respond(BookmarkablePageRequestTarget.java:231) at org.apache.wicket.request.AbstractRequestCycleProcessor.respond(AbstractRequestCycleProcessor.java:104) at org.apache.wicket.RequestCycle.processEventsAndRespond(RequestCycle.java:1172) at org.apache.wicket.RequestCycle.step(RequestCycle.java:1243) at org.apache.wicket.RequestCycle.steps(RequestCycle.java:1331) at org.apache.wicket.RequestCycle.request(RequestCycle.java:493) at org.apache.wicket.protocol.http.WicketFilter.doGet(WicketFilter.java:363) at org.apache.wicket.protocol.http.WicketFilter.doFilter(WicketFilter.java:194) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:235) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206) at org.netbeans.modules.web.monitor.server.MonitorFilter.doFilter(MonitorFilter.java:390) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:235) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206) at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233) at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:175) at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:128) at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102) at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109) at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:263) at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:844) at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:584) at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:447) at java.lang.Thread.run(Thread.java:619)]]>
Maven 2を用いて、Wicketプロジェクトを始めるための土台をサクッと作ってしまう方法をご紹介します。
mvn archetype:create -DarchetypeGroupId=org.apache.wicket -DarchetypeArtifactId=wicket-archetype-quickstart -DarchetypeVersion=1.3.3 -DgroupId=org.wicket_ja.test -DartifactId=sample
[INFO] BUILD SUCCESSFUL
以上でWicketプロジェクトの土台が完成しました。ディレクトリ構成を見てみましょう。
sample
│ pom.xml
│
└─src
├─main
│ ├─java
│ │ └─org
│ │ └─wicket_ja
│ │ └─test
│ │ HomePage.html
│ │ HomePage.java
│ │ WicketApplication.java
│ │
│ ├─resources
│ │ log4j.properties
│ │
│ └─webapp
│ └─WEB-INF
│ web.xml
│
└─test
└─java
└─org
└─wicket_ja
└─test
Start.java
TestHomePage.java
また、pom.xmlはこのようになっています（抜粋）。
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>org.wicket_ja.test</groupId>
<artifactId>sample</artifactId>
<packaging>war</packaging>
<version>0.1</version>
<!-- TODO project name -->
<name>quickstart</name>
<description></description>
（・・中略・・）
<dependencies>
<!-- WICKET DEPENDENCIES -->
<dependency>
<groupId>org.apache.wicket</groupId>
<artifactId>wicket</artifactId>
<version>${wicket.version}</version>
</dependency>
<!-- OPTIONAL
<dependency>
<groupId>org.apache.wicket</groupId>
<artifactId>wicket-extensions</artifactId>
<version>${wicket.version}</version>
</dependency>
-->
（・・後略・・）
groupIDやartifactIDなどが、指定したとおりになっていますね。
このプロジェクトはもうすでに実行できる状態になっています。実行するにはsampleディレクトリに移動して、
mvn jetty:run
と入力します。http://localhost:8080/sampleにアクセスして、
Wicket Quickstart Archetype Homepage If you see this message wicket is properly configured and running
と表示されたら成功です。
なお、この土台を元にEclipseで開発するには、sampleディレクトリ上で
mvn eclipse:eclipse -DdownloadSources=true
と入力し、Eclipse用の設定ファイルを生成してください。その後、Eclipse上で既存プロジェクトのインポートをすればOKです。なお、クラスパス変数M2_REPOが定義されていないとエラーになるので、Eclipse上で「Window >> Preferences >> Java >> Build Path >> Classpath Variables」から追加してやるか、もしくは
mvn eclipse:add-maven-repo -Declipse.workspace=#Eclipseのワークスペースのパス#
を実行してください。
また、この土台を元にNetBeansで開発するには、「ツール >> プラグイン >> 使用可能なプラグイン」から"Maven"を選んでインストールし、「ファイル >> プロジェクトを開く」でsampleディレクトリを指定すればOKです。
]]>Wicketのホームページ
http://wicket.apache.org/
WicketのExamples
http://www.wicketstuff.org/wicket13/
しかしセレクトリストのような、選択肢が固定されているものをサブミットした場合、Modelに文字列ではなくて選択肢に合致したオブジェクトを格納してもらった方がうれしいことが結構あります。
WicketにはこういったときのためにIConverterというインターフェースと、Component#getConverter()というメソッドが用意されています。
getConverter()はあってもsetConverter()はありません。コンポーネントのModelに格納するときには、コンポーネント・クラスのgetConverter()メソッドをオーバーライドし、IConveterオブジェクトを返すようにします。IConverterは「文字列を特定のオブジェクトに変換する」「オブジェクトを文字列に変換する」の双方の機能があります。コンポーネントがIConveterを返すようにすることで、あなたはModelのオブジェクトとして独自のクラスを設定することができるようになるわけです。WicketはコンポーネントのgetConveter()メソッドが返すコンバータを使って、Model内のオブジェクトを相互変換します。
具体的なコードは下記のようになるでしょう。
new TextField("yourTextFieldId") {
IConverter getConveter(Class type) {
//必要ならtype引数を使ってコンバータを切り替える。
//今回はいずれのクラスにも同じコンバータを返す。
return new IConverter() {
Object convertToObject(String value, Locale locale) {
//文字列からListModelを生成して返す
}
String convertToString(Object value, Locale locale) {
//オブジェクトを文字列に変換する。
return String.valueOf(value);
}
}
}
};
この機能を使うためにはもう一つだけ作業が必要です。ほとんどのコンポーネントのコンストラクタには引数としてClass typeを受けるものが用意されています。ここであなたが期待しているモデルオブジェクトのクラスを指定することで、Wicketはそのコンポーネントのモデルからオブジェクトを取り出したり、オブジェクトをセットするときにはコンバータを使う必要があるのだとわかります。この指定をしないかぎり、コンポーネントのモデルオブジェクトはStringであると解釈されます。
コンストラクタでクラスを指定する以外にも、コンポーネントのsetType()メソッドを使う方法もあります。
]]>http://www.wicket-ja.org/のサイトは、それ自体がWicketを使って作られております。
それは、Wicket-jaのサイトそのものをサンプルとして提供するという目的のためです。
Wicket-jaのサイトのソースコードは、sourceforge.jpのSubversion上にホスティングされております。
編集（コミット）は登録ユーザのみしかできませんが、取得（チェックアウト）は誰でも出来ます。
Subversionをインストールし、コマンドプロンプト/ターミナル上で
svn co http://svn.sourceforge.jp/svnroot/wicket-ja/trunk/wicket-ja
を実行すれば、チェックアウトできます。
ライセンスは、Apache License, Version 2.0です。
是非、チェックアウトし色々いじってみてください。
バグ等を発見した場合や、質問がある場合はお気軽にメーリングリストに質問してください。
「htmlが見つからないエラー」とは、
WicketMessage: Markup of type 'html' for component 'foo.bar.HomePage' not found.
というエラーメッセージのことを指しています。
Eclipseの設定で、拡張子がhtmlのファイルをビルドファイルの出力先にコピーしないという設定になっている場合、上記のエラーメッセージが（ブラウザとコンソールに）表示されます。
これを回避するためには、Eclipseの設定で"*.html"を出力先にコピーしないフィルタから外す必要があります。
Eclipseのメニューの「Window >> Preferences >> Java >> Compiler >> Building」を選び、「Output folder」の中にある「Filtered Resources:」から、"*.html"を削除してください。
Eclipseを日本語化していたり、Version/OSの違いで若干の差異はありますので、適宜読み替えてください。
]]>Wicketはページの状態（ステート）をフレームワークが管理しますが、このステート維持にはセッションが使われています。そのためセッションが切れたあとにページにくるとエラーになったりします。
これはそのページがステートに依存しているからです。Wicketはそのページがステートフル（ステートの維持が必要）なのかステートレス（ステートの維持が必要ない）なのかを判別する必要があります。
WicketはComponentクラスの「getStatelessHint()」を使ってこれをチェックします。ページ上のすべてのコンポーネントのgetStatelessHint()メソッドがtrueを返し、なおかつページ自体がブックマーク可能ページであるときに、そのページはステートレスであると考えます。
ほとんどのWicketコンポーネントはデフォルトでステートレスです。例外は二つ。LinkとFormはデフォルトでステートフルになっています。コンポーネントとしてLinkやFormを貼付けたページはその段階でステートフルになります。
フォームを使うと必ずステート依存になるのではログイン画面などセッションに依存したくないページで困るので、特別に「StatelessLink」と「StatelessForm」というクラスが用意されています。こちらのクラスを使うとステートレスになります。
ただしブックマーク可能ページへのリンクを作る際にStatelessLinkを使うのは避けた方が良いでしょう。StatelessLinkは非常に奇妙なURLを生成します。ブックマーク可能なページへのリンクを生成するには「BookmarkablePageLink」クラスを使うとURLもきれいなままでリンクを生成することができます。
]]>