Wicket で table のスクロールイベントを処理する

table の tbody タグに、CSS でスクロールするようにした HTMLで、スクロールの終端に達した時のイベントを
処理をサーバ側で、何等かの処理をしたくて Wicket で書き始めた。

CSSで書く tbody タグスクロールを書く方法は、過去に書いた方法を
参照→「table の tbody スクロール」http://blog.zaq.ne.jp/oboe2uran/article/1045/

Wicket の AjaxEventBehavior を継承してスクロールのイベントを捕捉するものを定義してこれを Page クラスで使うだけだ。

public abstract class AjaxScrollEventBehavior extends AjaxEventBehavior{
   protected abstract void onScroll(AjaxRequestTarget target);
   public AjaxScrollEventBehavior(){
      super("scroll");
   }
   @Override
   protected void onEvent(AjaxRequestTarget target){
      onScroll(target);
   }
}

<tbody> タグ、スクロールは、 overflow-y: scroll; display: inline-block; スタイル定義されてあるものして、
<tbody> タグに、 wicket:id を付けて WebMarkupContainer にしてこの Behaviorを適用させる。

　　<tbody wicket:id="scrollbody" id="scrollbody">

JavaScript の id と被るので、wicket:id と id 両方同じものを書く！！

イベント捕捉の JavaScript を Pageクラス用に、用意する。
/**
* SamplePage.js
*/
var setScrollConfig = function(){
   if (($('#scrollbody').get(0).scrollHeight - $('#scrollbody').height()) == $('#scrollbody').scrollTop()){
      // スクロール終端に達した時の処理を行う。
      alert('bottom edge!!');
   }
};

終端に達した時だけの処理で、サーバサイドで処理するには、この JavaScript の if 文の中で、AJAX 通信するようにしなければならないであろう。
$.ajax 文を書いても良いが、Wicket の button　に対する AjaxButton　onSubmit が動くように、if 文の中で、tigger("click") を仕掛けるなどの書き方もあるだろう。

Sampleページクラスのヘッダ描画処理のオーバーライドでこの JavaScript を読むようにする。

@Override
public void renderHead(IHeaderResponse response){
   super.renderHead(response);
   response.render(JavaScriptHeaderItem.forReference(new JavaScriptResourceReference(SamplePage.class, "SamplePage.js")));
}

ページのコンストラクタで、<tbody> タグに、これら Behavior と JavaScript を適用させる。
tbody の中の tr に、ListView を書いていくであろうから、Wicket7 なら、
　queue メソッドで統一した方が良いであろう。

queue(new WebMarkupContainer("scrollbody").add(new AjaxScrollEventBehavior(){
   @Override
   protected void onScroll(AjaxRequestTarget target){
      target.appendJavaScript("setScrollConfig();");
   }
}));

スクロール中の処理は、target.appendJavaScript("setScrollConfig();");　の前に記述できるが、
終端に達した時のイベント処理は、このBehavior の onScroll では書けない。