ModalWindow

ModalWindow

Wicketではモーダルウィンドウもコンポーネントとして提供されているので、使ってみる。例として、以下のような機能のページを作成する。

  • メインページのボタンを押すとモーダルウィンドウが立ち上がる
  • モーダルウィンドウのテキストボックスに値を入力してOKボタンを押すと、値がメインページのラベルに反映される
  • モーダルウィンドウの×ボタンを押すと、処理をせず閉じる

元画面

Javaクラス。

  • モーダルウィンドウはModalWindowというそのまんまのクラスで作成する。
  • setPageCreatorの部分で、どのクラスをモーダルとして表示させるかを設定する。モーダルにJavaのインスタンスを渡せるのでいろいろと便利に使える。
  • setWindowClosedCallbackはモーダルを閉じた時のイベント。「setResponsePage(getPage())」で、画面(MainPage)を再描画させている。これはどのような操作かにかかわらずとにかくモーダルが閉じたときのイベントだが、「×ボタンを押したとき専用」のイベントも存在するので使い分けができる。
  • AjaxButtonでモーダルウィンドウを表示させる。モーダルを閉じる場合はModalWindow#close()を使用する。

HTML。

WicketのModalWindowは本当に新規のウィンドウが開くわけではなく、Ajaxを使用して実現している。今回、モーダルウィンドウ表示部分はdivで指定した(別にdivである決まりはない)。

モーダル画面

Javaクラス。モーダル側も通常のページと同様WebPageのサブクラスとして作成する。

今回は以下のような作りにした。

  • コンストラクタでModelとModalWindow(表示されているのは自画面)を受け取る
  • テキストを入力してボタンを押すと、モデルに値をセットし画面を閉じる

HTML。

特に注意点はない。

ちなみに、モーダルウィンドウのタイトルの設定にはHTMLのTitleタグが使われるが、java側でModalWindow#setTitle(String)で設定する方法もある。

実際の表示

初期表示時
wicket_modal_01.png

ボタン押下時
wicket_modal_02.png

文字記入
wicket_modal_03.png

モーダル内のボタン押下で親画面に反映
wicket_modal_04.png

感想、注意点

Wicket全般に言えることではあるがモデルやインスタンスをやり取りできるのはかなり便利。これができるというだけでStrutsではなくWicketを選ぶ価値があるんじゃないかと思えるくらい。もちろん他にもいいところはいっぱいある。

イベント等を細かく拾えたりできるのも大きい。JavaScriptのshowModalDialogと比べて自由度が高いので、上記のようなクラスを直に扱えることとも相まって作りやすくなっている。

注意点としては、モーダルでModelを変更しても、そのままでは親画面の表示は再描画されないため、見た目上値が変更されていないようになってしまうということ。今回は「setResponsePage(getPage())」で再描画させている。