Ajax カウンター
This example shows you how to use Wicket's Ajax behaviors and components by building a simple counter that updates through Ajax link clicks.
このサンプルは、Ajaxリンククリックによって更新するシンプルなカウンターを作成することによってWicketのAjaxの振る舞いやコンポーネントの使い方を紹介します。
In all the Wicket examples, you have to put all files in the same package directory. This means putting the markup files and the java files next to one another. It is possible to alter this behavior, but that is beyond the scope of this example. The only exception is the oblibatory web.xml file which should reside in the WEB-INF/ directory of your web application root folder.
すべてのWicketサンプルは、すべてのファイルを同じパッケージディレクトリにおいてください。
つまり、マークアップ（HTML）ファイルとJavaファイルを隣合うようにおきます。
(HTMLの配置は)他にも方法はありますが、それを説明するのはこのサンプルの範囲外です。
例外として、web.xmlファイルはアプリケーションのルートフォルダ以下にあるWEB-INF/ディレクトリにおくべきだと義務づけられています。
In this example we assume you already have read and understood the other examples which give you information on the structure and nature of Wicket applications. Specifically read and understand the Hello, World example.
このサンプルでは読者は既に、Wicketアプリケーションの構造や性質について語られている他のサンプルを読んでおり、理解しているものと仮定します。
特に、HelloWorldサンプルについては読解しておいてください。
Counter page（カウンターページ）
First we'll create a page that just counts the number of times a link has been clicked. In the following markup you'll see a link and a label.
まず初めに、ただリンクが押された数を数えるだけのページを作りましょう。以下のマークアップでは、リンクとラベルが確認できます。
Listing 1 the page markup file（リスト1 ページマークアップファイル）
The link component will refresh the page and the label will replace the text 'nr of times' with the count.
<html>
<head></head>
<body>
<a href="#" wicket:id="link">click me</a>
<p>
Counter: <span wicket:id="counter">nr of times</span>
</body>
</html>
Take a look at the following Java file to see how it works on the Java side:
リンクコンポーネントは、ページをリフレッシュします。そしてラベルは、'nr of times' というテキストとカウントによって更新されます。
以下のJavaファイルをみて、Java側でどのように動くか確認してください。
Listing 2 the page java file（リスト2 ページのJavaファイル）
In this class we created a Model subclass that increases its counter everytime the getObject method gets called, and returns its value.
package wicket.quickstart;import wicket.Component;
import wicket.markup.html.basic.Label;
import wicket.markup.html.link.Link;
import wicket.model.Model;public class Index extends QuickStartPage {
public Index() {
Model model = new Model() {
private int counter = 0;public Object getObject(Component arg0) {
return new Integer(counter++);
}
};
add(new Link("link") {
public void onClick() {
// do nothing.
}
});
add(new Label("counter", model));
}
}
We set this model on the label component, so that each time the label gets rendered the counter gets increased.
このクラスは、getOjectメソッドが呼び出されたらいつでもカウンターを繰り上げて、その値を返すというモデルサブクラスとして作成しました。
このモデルをラベルコンポーネントにセットします。そのため、ラベルが描画される毎にカウンターが繰り上がります。
The link doesn't do anything, just listen to the requests and update the page.
If you run this code in your application (download the Quickstart project and copy/paste the code in the homepage for a quick experience).
このリンクは、何もしません。ただ、リクエストやページ更新を待ち受けるだけです。
もしこのコードをアプリケーションで動作させるならば、簡単に動かしてみるためにクイックスタートプロジェクトをダウンロードして、このコードをホームページにコピペしてください。
The page gets fully refreshed with each link click. That is not very web 2.0, so let's make it more modern by adding some Ajax stuff.
ページが、どのリンクをクリックしても全て更新されます。これはWeb2．0では全くありませんので、Ajacの道具をつかってもっとモダンに仕上げましょう。
Adding Ajax（Ajaxを追加する）
To make this a more modern UI we'll have to change a couple of things. First we need to make the link an Ajax link.
Wicket provides several types of Ajax links, but the best one for our purposes is the AjaxFallbackLink, as it provides a fallback to a normal request in case no Ajax is available.
これをもっとモダンなUIにするには、2つのことを書き換えなくてはいけません。まずはリンクをAjaxリンクに書き換える必要があります。
Wicketは、いくつかの種類のAjaxリンクを提供しています、しかし、今回もっとも良いのは「AjaxFallbackLink」です。それはAjaxが有効でない普通のリクエストに対して代替品を提供します。
Listing 3 the Ajaxified java file（リスト3 エイジャックシファイドJavaファイル：Ajax化されたJavaファイル）
As you can see, the Link has been replaced with the AjaxFallbackLink, and the onClick method now takes a new argument: the AjaxRequestTarget.
package wicket.quickstart;import wicket.Component;
import wicket.ajax.AjaxRequestTarget;
import wicket.ajax.markup.html.AjaxFallbackLink;
import wicket.markup.html.basic.Label;
import wicket.model.Model;public class Index extends QuickStartPage {
public Index() {
Model model = new Model() {
private int counter = 0;public Object getObject(Component arg0) {
return new Integer(counter++);
}
};
add(new AjaxFallbackLink("link") {
public void onClick(AjaxRequestTarget target) {
// add the components that need to be updated to
// the target
}
});
add(new Label("counter", model));
}
}
If you want a component to be updated in the Ajax request, you'll have to add them to the target. So let's alter the file to make it possible to add the label to the request target.
見てわかるように、リンクはAjaxFallbackLinkに置き換えられました。そして、onClickメソッドは、新しい引数「AjaxRequestTarget」を受け取ります。
もし、コンポーネントをAjaxリクエストにアップデートしたいなら、それらにターゲットを設定しなくてはなりません。
ラベルをリクエストターゲットに追加できるようにファイルを変更しましょう！
Listing 4 the Ajaxified java file（リスト4 エイジャックシファイドJavaファイル：Ajax化されたJavaファイル）
We've moved the instantiation of the label to the beginning of the page constructor and made a local, final variable.
package wicket.quickstart;import wicket.Component;
import wicket.ajax.AjaxRequestTarget;
import wicket.ajax.markup.html.AjaxFallbackLink;
import wicket.markup.html.basic.Label;
import wicket.model.Model;public class Index extends QuickStartPage {
public Index() {
Model model = new Model() {
private int counter = 0;public Object getObject(Component arg0) {
return new Integer(counter++);
}
};
final Label label = new Label("counter", model);
label.setOutputMarkupId(true);
add(new AjaxFallbackLink("link") {
public void onClick(AjaxRequestTarget target) {
target.addComponent(label);
}
});
add(label);
}
}
This way we can reference the label in the event handler of the link component.
ページのコンストラクタの初めでのラベルのインスタンス化を移動しました。そして最終的な値をローカルで作成します。
この方法では、リンクコンポーネントのイベントハンドラでラベルを参照することができます。
We also had to call setOutputMarkupId(true) on the label to be able to update the component when the request is returned to the client browser.
If we don't, Wicket will not know how to update the markup in the client.
リクエストがクライアントブラウザから返ってきたときにコンポーネントを更新できるように、ラベルでsetOutputMarkupId(true) メソッドの呼出しもおこないました。
もし、そうでなければ、Wicketはクライアントでマークアップをどうやって更新するかを知ることができないでしょう。
If you put this code into your page's class, then you'll have a working Ajax updating counter.
このコードをページのクラスに置けば、Ajax更新カウンターは動作します。
Summary（サマリー）
Working with Ajax and Wicket using the standard Wicket libraries doesn't require a degree in JavaScript.
Even better, you don't necessarily need to update your markup file to work with Ajax.
In this (simple) example we were able to add Ajax behavior to the page without touching the markup file.
WicketでAjaxを動かすことは、基本的なWicketのライブラリを使えばでき、JavaScriptの次元は必要ありません。
さらによいことに、Ajaxを使って動かすためにマークアップファイルを更新することは、必ずしも必要ではありません。
この簡単なサンプルでは、マークアップファイルをさわらずにAjaxの振る舞いをページについかすることができあました。
The most important lesson here is that in order to update components using Ajax is that you need to add those components to the AjaxRequestTarget and that the components that are to be updated in that request, should have setOutputMarkupId(true).
ここでのもっとも重要な課題は、Ajaxをつかってコンポーネントを更新することです。
そのためには、それらのコンポーネントにAjaxRequestTargetと、リクエストで更新されるべきコンポーネントを追加する必要があります。
setOutputMarkupId(true)を使ってください。
