読者です 読者をやめる 読者になる 読者になる

Wicket のタブで、フォーム入力を保持した切り替え

1年半くらい前、Wicket のTab ・・・org.apache.wicket.extensions.markup.html.tabs パッケージの一連のタブを使用する時のデザインを書いたことがある。

Wicket のタブページ作成作業 - Oboe吹きプログラマの黙示録

この時デザインの事しか書かなかった、実践でのTab のPanelインスタンスの状態として、書くべきことを書いていなかった。。

タブを切り替えて再度、一度表示したタブに戻ってきた時にフォーム入力したものなどを保持させたい場合があるはずだ。

最低限やらなければならないのは、AbstractTabの getPanel が一度生成したものを常に返すようにすること。そしてタブ切り替えの前に実行されることを捕捉して

保持を約束する。

例)

Panel tab1;
Panel tab2;
Panel tab3;

public TabedPage(){

    List<ITab> tabs = new ArrayList<ITab>();

     // tab1~3 まで生成済のTab Panelを返すようにする。
    tabs.add(new AbstractTab(new Model<String>("Tab-1")){
        @Override
        public Panel getPanel(String panelId){
        if (tab1==null) tab1 = new Tab1Panel(panelId);
            return tab1;
        }
    });
    queue(new AjaxTabbedPanel<ITab>("tabs", tabs));
}

タブの中で保持させるフォームの入力は、onchangeイベントあるいは、onblurイベントを捕捉して、ページインスタンスに保持させてしまう。

→ AjaxEventBehavior で捕まえて、コンポーネントの getInput を結果を、setModelObejct でセットして、AjaxRequestTarget の add メソッドを実行する!

当然、対象のコンポーネントは、setOutputMarkupId(true) を実行する。

タブ Panel の中で 入力テキストがある場合、例えば、、、

final TextField<String> name_Field = new TextField<String>("name", new Model<String>());
name_Field.setOutputMarkupId(true);
name_Field.add(new AjaxEventBehavior("change"){
    @Override
    protected void onEvent(AjaxRequestTarget target){ 
          name_Field.setModelObject(name_Field.getInput());
          target.add(name_Field);
     }
 });
queue(name_Field);

タブをクリックした時のイベントを捕捉しようとしたが、=onclickじゃなくて、、

Wincket が本来、Tab 専用にイベントを拾って処理してるところに、差し込んだ処理で書きたかったのだが、なかなかうまくいかないので、これで逃げることにした